jquery 是目前使用最广泛的 javascript 函数库.
据统计, 全世界排名前 100 万的网站, 有 46% 使用 jQuery, 远远超过其他库. 微软公司甚至把 jQuery 作为他们的官方库.
jquery 的知识点主要分为以下几点
对象选择, 属性修改
DOM,CSS 操作
事件处理
动画
ajax
插件
本章节主要介绍对象选择
对象选择
简单选择
- $(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 | 移除类 |
来源: http://www.jianshu.com/p/f8844d5068a9