五、jQuery简介

五、jQuery简介

jQuery是一个JavaScript非常流行的第三方库，其中封装了很多易用的定位方法和操作。

jQuery的使用方式可以用一个表达式概括：$(选择器).操作

1. 选择器

在使用前我们需要导入jQuery第三方库，可以离线下载后导入，也可以导入在线的库，如下：

<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>

jQuery的选择器是用来简化document.getElementById这样的长的语句的，提升代码的易读性。

与document类似，jQuery也拥有标签、id、类等选择器，除此之外还有丰富的定位方式，看下面的例子：

var div = $('#abc');  // 获取id为abc的元素
var div = $('.abc');  // 获取class为abc的元素
var ps = $('p');  // 获取所有p标签元素
 
var email = $('[name=email]');  // 获取所有name属性等于email的元素
var emailInput = $('input[name=email]');  // 获取所有name属性等于email的input元素
var tr = $('tr.red');  // 获取class=red的tr元素
 
$('ul.lang li.lang-javascript');  // 获取class=lang的ul元素下 class=lang-javascript的li元素（层级选择器）
$('ul.lang>li.lang-javascript');  // 通过父节点查找子节点（父子选择器）

除了上面的基本例子之外还有很多，可以在使用到的时候进行查阅。

2. 操作DOM结构

2.1 获取元素的值

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>
 
$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'
 
$('#test-ul li[name=book]').text('Hello'); // 如果text()中有参数，则表示更新该元素的值

2.2 修改CSS的值

<ul id="test-css">
    <li class="lang dy"><span>JavaScript</span></li>
    <li class="lang"><span>Java</span></li>
    <li class="lang dy"><span>Python</span></li>
    <li class="lang"><span>Swift</span></li>
    <li class="lang dy"><span>Scheme</span></li>
</ul>
 
$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');

2.3 显示和隐藏DOM元素

var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示

2.4 添加DOM元素

<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>
 
var ul = $('#test-div>ul');
ul.append('<li><span>Haskell</span></li>');

2.x...

jQuery的使用还有很多很多，包括事件触发、表单操作等等，在这里不做更多的介绍啦，需要用到的时候随时查阅即可。