<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
/*jQuery库包含以下功能：里面封装了很多方便使用的方法
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
*/
////1.语法
$(document).ready(function(){ //ready保证jQuery先被浏览器获取到，
//与js中window.onload类似作用
// 开始写 jQuery 代码...
});
//或者，
$(function(){
// 开始写 jQuery 代码...
////2.jQ的常用选择器
//1.id选择器
//获取id，类似js中 document.getElementById("");
$("#tId").click(function(){
alert($(this).attr("value")); //this就是当前元素#tId
});
//2.标签选择器
$("#t01").click(function(){
var inps=$("input"); //$("input:eq(1)") 以此来获取下标为1的input元素
alert(inps.length); //同js返回的是一个数组
});
//3.类选择器
$(".tClass").click(function(){
alert(this.value); //-输入框或者选择框的value要写成val()
});
//4.组合选择器
$("#t02").click(function(){
var all=$("div,h3,input.tClass");//input.tClass 表示input下的.tClass
alert(all.length);
});
//5.子类选择器
$("#t03").click(function(){
alert($("ul>li").length);//3
console.log($("ul li").length);//4
console.log($("ul+div").length);//与ul同级相邻的下一个div
console.log($("ul~div").length);//与ul同级下个所有div
});
//6.更多。。。
// $("*") 选取所有元素
// $(this) 选取当前 HTML 元素
// $("p:first") 选取第一个 <p> 元素
// $("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
// $("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
// $("[href]") 选取带有 href 属性的元素
// $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
// $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
// $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
// $("tr:even") 选取偶数位置的 <tr> 元素
// $("tr:odd") 选取奇数位置的 <tr> 元素
// $("ul li:eq(3)") 列表中的第四个元素（index 值从 0 开始）
// $("ul li:gt(3)") 列举 index 大于 3 的元素
// $("ul li:lt(3)") 列举 index 小于 3 的元素
// ...
});
</script>
<style type="text/css">
</style>
</head>
<body>
<h3>jQuery的选择器</h3>
<input type="button" name="" id="tId" value="测试id" />
<input type="button" name="" id="t01" value="测试标签" />
<input type="button" name="" id="" value="测试class" class="tClass"/>
<input type="button" name="" id="t02" value="组合选择器" />
<input type="button" name="" id="t03" value="子类选择器" />
<div ></div>
<ul>
<li>第一个</li>
<li></li>
<li></li>
<div><li></li></div>
</ul>
<div ></div>
</body>
<script type="text/javascript">
</script>
</html>
