jQuery知识点(3)-选择器

来源：互联网发布：红家蓝家知乎编辑：程序博客网时间：2024/05/17 21:50

知识点-选择器

jQuery其实就是对网页进行操作的，要进行操作总得有个操作对象，jQuery就是通过选择器选择操作对象的。

jQuery选择器其实就是jQuery(rule)方法，该方法通过指定选择规则rule，返回选定的对象。例如jQuery("div")表示选择网页中的div元素。

因为选择器太常用了，所以提供了$操作符代替jQuery，$("div")明显简洁明了多了。（PS：其实就相当于+代替了add()函数）。

示例-选择器常见用法

演示下最基本的几种用法，只要记住jQuery的选择器基本能满足所有选择需求就是了，具体怎么选择可以去查查手册，记住最常用的就行：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script src="jquery.min.js"></script><title></title></head><body>    <!-- 用法1，按id选择元素，只会匹配到1个元素 -->    <div id="id1"></div>    <script>$("#id1").html("hello my id1")</script>    <!-- 用法2，按元素名称选择元素，会匹配到所有该名称的元素 -->    <span id="span1"></span>    <span id="span2"></span>    <script>$("span").html("hello span elements")</script>    <!-- 用法3，匹配class名称 -->    <div class="class1"></div>    <div class="class1"></div>    <script>$(".class1").html("hello elements of class1")</script>    <!-- 用法4，逗号代表同时应用多个规则，符合任何一个规则的元素都会被选中 -->    <div id="id4"></div>    <script>$("#id1,.class1").css("color","red");</script>    <!-- 用法5，"rule1 rule2"表示选中rule1内部所有rule2元素 -->    <div id="id5">        <div><span></span></div>        <div><span></span></div>        <span></span>        <span></span>    </div>    <script>$("#id5 span").html("id5's inner span");</script>    <!-- 用法6，"rule1>rule2"表示选中rule1元素内符合rule2规则的儿子辈元素，不包括孙子、重孙子等 -->    <div id="id6">        <div><span></span></div>        <div><span></span></div>        <span></span>        <span></span>    </div>    <script>$("#id6>span").html("id6's son span");</script>    <!-- 用法7，选择第一个、最后一个、指定序号的子元素 -->    <div id="id7">        <span>1</span>        <span>2</span>        <span>3</span>        <span>4</span>    </div>    <script>        $("#id7 span:first-child").css("color","red");        $("#id7 span:last-child").css("color","green");        $("#id7 span:nth-child(3)").css("color","blue");    </script>    <!-- 用法8，选择子元素中的奇数odd偶数even元素 -->    <div id="id8">        <span>1</span>        <span>2</span>        <span>3</span>        <span>4</span>    </div>    <script>        $("#id8 span:nth-child(odd)").css("color","red");        $("#id8 span:nth-child(even)").css("color","green");       </script></body></html>

阅读全文

0 0