jQuery – 白墨代码网

JQuery选择器

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

这是一段程序代码。

```
<!DOCTYPE html>
```

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

```
<head>
```

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

```
    <title></title>
```

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

```
    <script type="text/javascript">
```
```
        $(function () {
```
```
            //显示1个：我是d1
```
```
            $("#d1").text("我是d1");
```

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

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

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

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

```
        })
```
```
    </script>
```
```
</head>
```
```
<body>
```
```
    <div id="d1"></div>
```
```
    <div id="Div1"></div>
```
```
    <div class="Div2"></div>
```
```
    <div id="Div3"></div>
```
```
    <div class="Div2"></div>
```
```
</body>
```
```
</html>
```

.src_container { background-color: rgba(231, 229, 220, 1); width: 99%; overflow: hidden; margin: 12px 0 !important; padding: 0 3px 3px 0 }
.src_container .titlebar { background-color: rgba(212, 223, 255, 1); border-top: 1px solid rgba(79, 129, 189, 1); border-right: 1px solid rgba(79, 129, 189, 1); border-bottom: 0; border-left: 1px solid rgba(79, 129, 189, 1); 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; color: rgba(0, 0, 255, 1); text-align: left; overflow: hidden }
.toolbar span.button { display: inline; font-weight: normal; font-size: 100%; color: rgba(0, 0, 255, 1); text-align: left; overflow: hidden; cursor: pointer }
.src_container div.clientarea { background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(79, 129, 189, 1); margin: 0; 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: rgba(247, 247, 255, 1) !important }
.number_show { padding-left: 52px !important; list-style: decimal outside !important }
.number_show li { list-style: decimal outside !important; border-left: 1px dotted rgba(79, 129, 189, 1) }
.number_hide { padding-left: 0 !important; list-style-type: none !important }
.number_hide li { list-style-type: none !important; border-left: 0 }
ol.mainarea li { display: list-item !important; font-size: 12px !important; margin: 0 !important; line-height: 18px !important; padding: 0 !important; background-color: rgba(247, 247, 255, 1) !important; color: rgba(79, 129, 189, 1) }
ol.mainarea li pre { color: rgba(0, 0, 0, 1); line-height: 18px; padding: 0 0 0 12px !important; margin: 0; background-color: rgba(255, 255, 255, 1) !important }
.linewrap ol.mainarea li pre { white-space: ; word-wrap: break-word }
ol.mainarea li pre.alt { background-color: rgba(247, 247, 255, 1) !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选择器）

jQuery - 2.jQuery选择器

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");

})

.codearea { color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1); line-height: 18px; border: 1px solid rgba(79, 129, 189, 1); margin: 0; width: 100%; overflow: auto; text-align: left; font-size: 12px; font-family: “Courier New”, “Consolas”, “Fixedsys”, “BitStream Vera Sans Mono”, courier, monospace, serif }
.codearea pre { color: rgba(0, 0, 0, 1); line-height: 18px; padding: 0 0 0 12px !important; margin: 0; background-color: rgba(255, 255, 255, 1) !important }
.linewrap pre { white-space: ; word-wrap: break-word; word-break: normal }
.codearea pre.alt { background-color: rgba(247, 247, 255, 1) !important }
.codearea .lnum { color: rgba(79, 129, 189, 1); line-height: 18px }

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

JQuery的迭代

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

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

JQuery选择器

Related Posts

发表回复 取消回复

发表回复取消回复