查找API，jQuery选择器，定位标签
1.基本选择器
- id定位标签
- class属性定位标签
- 标签名定位标签
2.举例
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <div id="div1ID">div1</div> <div id="div2ID">div2</div> <span class="myClass">span</span> <p>p</p> <script type="text/javascript"> //1)查找ID为"div1ID"的元素个数 $(“#divID”.size()) //2)查找DIV元素的个数 $(“div”).size(); //3)查找所有样式是"myClass"的元素的个数 $(“.myClass”).size(); //4)查找所有DIV,SPAN,P元素的个数 ,多个属性定位的时候，可以使用逗号隔开3 $(“div,span,p”).zize(); //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数 $(“#div,.class,p”) </script> </body> </html> 多个是可以使用，将他们隔开
2.层次选择器
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form>
<input type="text" value="a"/>
<table>
<tr>
<td>
<input type="checkbox" value="b"/>
</td>
</tr>
</table>
</form>
<input type="radio" value="c"/>
<input type="radio" value="d"/>
<input type="radio" value="e"/>
<script type="text/javascript">
//1)找到表单form下所有的input元素的个数
$(“form input”).size();
//2)找到表单form下所有的子级input元素个数
$(“form> input”).size();
第一个和第二个是区别：第一个是所有的input标签。第二个是form的子一代，子二代不包括在内。
//3)找到表单form同级第一个input元素的value属性值
$(“form+input ”).val();
//4)找到所有与表单form同级的input元素个数
alert( $("form ~ input").size() )
</script>
</body> </html>
总结：form标签下的标签
$("form input"）.size();
form标签下子一代的标签
$("form > input").size()
form标签的同一级的第一个标签
$("form +input"）
form标签同一级的标签
$("form ~ input")
3.增强基本选择器
格式：$("ul li ：XX").text();
$(":header"),css("XX","XX").css("XX","XX")……当有很多的css样式的时候，可以使用一直，的方式向下添加。
//1)查找UL中第一个元素的内容 alert( $("ul li:first").text() ); //2)查找UL中最后个元素的内容 alert( $("ul li:last").text() ); //4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始 alert( $("table tr:odd").size() ); //5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始 alert( $("table tr:even").size() ); //6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式 alert( $("table tr td:eq(1)").text() ); //7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大 alert( $("table tr:gt(0)").size() ); //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小 alert( $("table tr:lt(2)").size() ); //9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色 $(":header").css("background-color","red").css("color","blue"); //3)查找所有未选中的input为checkbox的元素个数 alert( $(":checkbox:NOT(:checked)").size() );
5.内容选择器
//1)查找所有包含文本"John"的div元素的个数 alert( $("div:contains(‘John‘)").size() ); //2)查找所有p元素为空的元素个数 alert( $("p:empty").size() ); //3)给所有包含p元素的div元素添加一个myClass样式 $("div:has(p)").addClass("myClass"); //4)查找所有含有子元素或者文本的p元素个数,即p为父元素 alert( $("p:parent").size() );
7.使用jQuery的作用是，可以方便的操作web页面的标签和样式参数。
- val()：获取标签的value属性值【假定有value属性】
- html（）：获取标签之间的内容，不用于xml文件。
- text():获取标签之间的内容，用于任何格式的参数（推荐）
- css（）：使用key-value的方式，给标签添加样式。
- addClass():加已经定义好的样式。
- size（）获取到属性的个数。
- length:获取对象和数组中的对象个数。