jQuery笔记---选择器

发布时间：2023-09-06 01:36责任编辑：傅花花关键词：jQuery 选择器

查找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:获取对象和数组中的对象个数。

jQuery笔记---选择器

原文地址：https://www.cnblogs.com/kw28188151/p/8296135.html

jQuery笔记---选择器

知识推荐