jquery第一章-选择

jquery是目前使用最广泛的javascript函数库。

据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jquery的知识点主要分为以下几点

1. 对象选择，属性修改
2. DOM、css操作
3. 事件处理
4. 动画
5. ajax
6. 插件

本章节主要介绍对象选择

对象选择

---

简单选择

$(document) //选择整个文档对象,比如我选择$(input).我选择的是文档内所有的input对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('ul.test li.hello')//垮层选择@选择class为test的ul 再选择里面包含class为hello的li
$('form[name=upload] input')//属性选择@选择name为upload的form里面的input
$('form.test p input'); // 多层选择@在form表单选择被<p>包含的<input>

高阶选择\过滤器

$('ul:first') //选择网页中第一个ul元素 或者 $('ul).first()
$('ul:last') //选择网页中最后一个ul元素 或者 $('ul).last()
$('ul').slice(1,2) //选择网页中第一个跟第二个ul元素
$('div').eq(5) //选择网页中第五个个ul元素
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass');//选择class不等于myClass的div元素

跨层选择
$('ul.lang li:first-child'); // 仅选出第一个li
$('ul.lang li:last-child'); // 仅选出最后一个li
$('ul.lang li:nth-child(2)'); // 选出第2个li元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的li元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的li元素
$('#myForm :input') // 选择form表单中的input元素
$('ul.lang li:visible') //选择可见的li元素
$('ul.lang li:hidden')//选择影藏的li元素
$('ul.lang li:gt(2)') // 选择所有的li元素，除了前三个
$('ul.lang li:animated') // 选择当前处于动画状态的div元素

$('div').next('p'); //同一层级，选择div元素后面的第一个p元素，当然next可以为空
$('div').prev(); //同一层级，选择div元素前面的第一个p元素，当然next可以为空
$('div').parent(); //选择div元素的父元素 括东西号里有也可以$('div').parent('.red');
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素

链式选择

jquery支持链式选择，非常的方便

$('div').find('h3').eq(2).html('Hello');

find函数

#也可以用find函数来定位对象
var ul = $('ul.hello'); 
var ni = ul.find('.ni'); 
var you = ul.find('#you'); 
var hsk = ul.find('[name=haskell]');

map、filter函数

#简单
var a = langs.filter('.dy'); 

#复杂，要特别注意函数内部的this被绑定为DOM对象，不是jQuery对象
var ul = $('ul '); // 拿到JavaScript, Python, Swift, Scheme和Haskell
ul.filter(function () {
    return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
});

#map函数同理，返回的是map函数处理后的Array
var ul = $('ul');
var arr = ul.map(function () {
    return this.innerHTML;
}).get();

设置元素的 DOM 属性

当我们用上面的方法选择出来对象后，可以设置对象的属性

方法	描述
addClass	添加类
attr	设置或者查询属性
hasClass	检查对象是否有某个class
html	设置或者返回对象内的html
removeAttr	移除属性
toggleClass	添加或者删除一个类
val	设置或者查询对象的value
removeAttr	移除类