Coding Forever

Jquery第七课 强大的$符号

戴维营教育原创文章，转载请注明出处。我们的梦想是做最好的iOS开发培训！

jQuery中使用$作为jQuery类的简写，有许多重要用法。

$的用法

1 . 作为CSS选择器选取文档元素。

$("a").click(function(){
    console.log("点击了链接");
});

在$()选择器中可以使用HTML元素、id或XPath表达式来进行选取。

2 . $()作为$(document).ready()或jQuery()的简写。

$(document).ready(function(){
    console.log("document is ready");
});

//等价于
$(function(){
    console.log("document is ready");
});

3 . 在$命名空间中还实现了许多方法，比如$.post或$.ajax等。

$元素选择

jQuery支持CSS 3的选择器，拥有丰富的元素选择办法。 1 . 通过id进行选择。

<body>
    <a href="http://www.diveinedu.cn">戴维营教育</a>
    <img id="img1" src="http://www.diveinedu.cn/images/weibo-qrcode.png">
    <img id="img2" src="">
</body>

var img1src = $("#img1").attr("src");
var img2 = $("#img2");
img2.attr("src", img1src);

2 .通过类名选取。

<body>
    <a href="http://www.diveinedu.cn">戴维营教育</a>
    <img class="logo">
    <img class="logo">
</body>

var arr = $(".logo");
for (var i = arr.length - 1; i >= 0; i--) {
    arr[i].src = "http://www.diveinedu.cn/images/weibo-qrcode.png";
}

3 . 通过属性选取。

<body>
    <a href="http://www.diveinedu.cn">戴维营教育</a>
    <img class="logo">
    <img class="logo">
    <input name="username"></input>
</body>

$("a").click(function(event){
    event.preventDefault();
    var v = $("input[name='username']");
    v[0].value = "戴维营教育"; 
});

4 . 判断是否选取成功。 不能直接判断是否成功选取了元素，因为$()总是会返回一个对象，而需要根据选取结果的长度进行检查。

//错误的做法，总是会返回一个对象
if ( $("div.foo" )) {

}

//正确的做法
if ( $( "div.foo" ).length ) {

}

本文档由长沙戴维营教育整理。

戴维营学院（高级开发视频）: http://v.diveinedu.com

潜心俱乐部（iOS面试必备）: http://divein.club