饥人谷学习进阶第 19 天
为什么要用jQuery
DOM API
- 难用
- 存在兼容性问题
- 功能太少，不能与时俱进
jQuery
- 兼容性好
- API友好
- 功能强大，与时俱进
jQuery适用场景
- DOM操作比较多（时间监听）
- 简单的AJAX
- 需要兼容多款浏览器
不用jQuery
- 页面交互极为简单
- 页面对流量有苛刻的要求
- 上级强制、团队已经有了jQuery的代替品
jQuery能做
- 选择网页元素
- 改变结果集
- 元素的操作：取值和赋值
- 元素的操作：移动
- 元素的操作：复制、删除和创建
- 工具方法
- 事件操作
- 特殊效果
- AJAX
- http://devdocs.io/jquery/
jQuery版本
1.x 与 2.x 的不同
jQuery的两种API
$.noConflict()
$.each()
$('ul').addClass()
$('p').text('hi')
引用jQuery
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
// 或者通过国内https://www.bootcdn.cn/jquery/ 选择合适版本获取src
jQuery选择器
jQuery定义了一套选择器规则，和CSS选择器目的一样，都是为了选择出符合特定规则的元素。讲jQuery不得不提到其选择器，这是jQuery能够快速流行的非常重要的原因，为了方便使用者jQuery刻意和CSS选择器使用相同的语法，几乎支持所有类型的CSS3选择器，当然也有一些其特定的选择器
常见的选择器的用法 饥人谷：jQuery选择器详解
.eq(index)，.get(index)
**.eq(index): **对于一个特定结果集，获取到指定index的jQuery对象
$('div').eq(3); //获取结果集中的第4个jQuery对象
**.get(index): **通过类数组下标的获取方式或者get方法获取指定index的DOM对象，即jQuery对象转DOM对象
$('div')[2];
$('div').get()
get() 不写参数则把所有对象转为 DOM 对象返回
兄弟元素的获取
.nextAll([selector]), .prevAll([selector])
next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev正好相反，获取元素之前的同辈元素
$('.child').eq(2).next()
$('.child').eq(2).next('ok')
// prev 相反但是用法相同
.nextAll([selector]), .prevAll([selector])
nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素
$('.child').eq(2).nextAll()
$('.child').eq(2).nextAll('ok')
// prevAll 相反但是用法相同
.siblings([selectors])
获得匹配元素集合中每个元素的兄弟元素，可以提供一个可选的选择器
$('.ok').siblings('div')
父子元素获取
.parent([selector])
取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
$('.child').parent()
.parents([selector])
获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数
$('.child').parents() // div.container body html
$('.child').parents('body') // body
.children([selector])
获得匹配元素集合中每个元素的子元素，选择器选择性筛选
从直接的孩子（子元素）里去找
$('.container').children()
.find([selector])
查找符合选择器的后代元素
$('.container').find('h1')
筛选当前结果集
.first()
获取当前结果集中的第一个对象
$('.child').first()
.last()
获取当前结果集中的最后一个对象
$('.child').last()
.filter(selector), .filter(function(index))
筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数
$('.child').filter(function(index, node) {
return node.innerText.search('GG') > -1
}).addClass('select')
.not(selector), .not(function(index))
从匹配的元素集合中移出指定的元素，和filter相反
$('.container').children().not('h1')
// 也可以传递一个函数参数对其进行操作
// 与filter类似
.is(selector), is(function(index)), is(dom/jqObj)
判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true
if (e.target.is('.child')) {
e.target.css('background-color', 'red')
}
.has(selector), .has(dom)
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素
不管嵌套多深，所有后代里面去找
$('.container').has('h1')
.children() 和 .has() 的区别：前者从直接后代（子元素）里去找；后者在所有后代里面去找，不管嵌套多深
网友评论