jQuery - 2.jQuery选择器

1、id 选择器

2、标签选择器

3、类选择器

4、复合选择器

5.层次选择器

JQuery的迭代

 

JQuery选择器

---

JQuery选择器用于查找满足条件的元素，比如可以用$(“#控件Id”)来根据控件id获得控件的jQuery对象，相当于getElementById：
1、id 选择器   $(“#div1”).html(“<font color=red>hello</font>”)。语法、意义类似于CSS选择器

显示行号 复制代码 ？ 这是一段程序代码。

1. <!DOCTYPE html>

2. <html xmlns="http://www.w3.org/1999/xhtml">

3. <head>

4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

5.     <title></title>

6.     <script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>

7.     <script type="text/javascript">

8.         $(function () {

9.             //显示1个：我是d1

10.             $("#d1").text("我是d1");

11.             //显示2个：我的类选择器Div2

12.             $(".Div2").text("我的类选择器Div2");

13.             //显示5个，并把前面的覆盖了

14.             $("div").text("都是我div的");

15.         })

16.     </script>

17. </head>

18. <body>

19.     <div id="d1"></div>

20.     <div id="Div1"></div>

21.     <div class="Div2"></div>

22.     <div id="Div3"></div>

23.     <div class="Div2"></div>

24. </body>

25. </html>

.src_container{background-color:#e7e5dc; width:99%; overflow:hidden; margin:12px 0 12px 0 !important; padding:0px 3px 3px 0px}
.src_container .titlebar{ background-color:#d4dfff; border:1px solid #4f81bd; border-bottom:0; padding:3px 24px; margin:0; width:auto; line-height:120%; overflow:hidden; text-align:left; font-size:12px}
.src_container .toolbar{ display:inline; font-weight:normal; font-size:100%; float:right; cursor:hand; color:#00f; text-align:left; overflow:hidden}
.toolbar span.button{ display:inline; font-weight:normal; font-size:100%; cursor:hand; color:#00f; text-align:left; overflow:hidden; cursor:pointer;}
.src_container div.clientarea{ background-color:white; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; height:auto; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys",courier,monospace,serif}
.src_container ol.mainarea{ padding:0 0 0 52px; margin:0; background-color:#f7f7ff !important}
.number_show{ padding-left:52px !important; list-style:decimal outside !important}
.number_show li{ list-style:decimal outside !important; border-left:1px dotted #4f81bd}
.number_hide{ padding-left:0px !important; list-style-type:none !important}
.number_hide li{ list-style-type:none !important; border-left:0px}
ol.mainarea li{ display:list-item !important; font-size:12px !important; margin:0 !important; line-height:18px !important; padding:0 0 0 0px !important; background-color:#f7f7ff !important; color:#4f81bd}
ol.mainarea li pre{color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap ol.mainarea li pre{white-space:pre-wrap; white-space:-moz-pre-wrapwhite-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word}
ol.mainarea li pre.alt{ background-color:#f7f7ff !important}

2、标签选择器 $("TagName")来获取所有指定标签名的jQuery对象，相

       当于getElementsByTagName：

        $(function() {

            $("#btnClick").click(function() {

                $("p").html("我们都是P");

            });

        });

3、类选择器

JQuery中注册事件监听的写法：click()、leave()、focus()、blur...，自己动手写click函数。

规则： $(who).when({what});      例： $(‘#a’).click(function(){});

 

4、复合选择器：$("p,div,span.menuitem")，同时选择p标签、div标签和拥有menuitem样式的span标签元素（类似于CSS选择器）

 

5.层次选择器：

（1）$("div p")获取div下的所有p元素（后代，子、子的子……）

（2）$("div > p")获取div下的直接p子元素

（3）$(".menuitem + div")获取样式名为menuitem之后的第一个div元素（不常用）

（4）$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素（不常用）

jQuery修改样式：$("#div1").css("background", "red");

获得样式$(“#div1”).css(“background”)；

修改value：$(“#un”).val(“abc”)，

获得value：$(“#un”).val()

$(function() {

            $("#wrap p").css("background-color","red");

        })

类似的获得、设置innerText、innerHTML用text()和html()。val、html、text等是方法，不是属性，jQuery中很少有属性的用法，因为属性写法很难“链式编程”。

JQuery的迭代

---

如何判断对象是否存在，jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象)，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：

if ($("#btn1").length <= 0) {
                alert("id为btn1的元素不存在！");
            }