jQuery（4）
1. 几种遍历方法
1.1. each方法
1.1.1 jq对象.each()方法
遍历jQuery对象集合，为每个匹配的元素执行一个函数
语法：
$(selector).each(function(index,element))
| 参数 | 描述 |
|---|---|
| function(index,element) | 必需。为每个匹配元素规定运行的函数。index - 选择器的 index 位置。element - 当前的元素（也可使用 "this" 选择器） |
注意: 返回的是元素, 不是jq对象
1.1.2 js Array.forEach()方法
回顾: forEach(function(item, index){}))
array.forEach(function(currentValue, index, arr), thisValue)
| 参数 | 描述 |
|---|---|
| function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。 |
| thisValue | 可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值 |
1.2. map方法
1.2.1 jq对象.map()方法
jQuery的map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。
$.map( object, callback )
| 参数 | 描述 |
|---|---|
| object | Array/Object类型 指定的需要处理的数组或对象。 |
| callback | Function类型 指定的处理函数 function(value, index){ return 数组元素} |
Jquery each和map 的区别
1，回调函数的参数顺序相反，each：i,elem，map：elem,i
2，返回值不同，map返回一个新的数组，each返回原始数组
回调的返回值，each只能返回 true 和 false，map返回的是新数组的元素
3，map 的回调函数里 ，没有 this,each中的this代表当前迭代对象
1.2.2 js Array.map()方法
array.map(function(currentValue,index,arr), thisValue)
| 参数 | 描述 |
|---|---|
| function(currentValue, index,arr) | 必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当前元素的索引值arr可选。当前元素属于的数组对象 |
| thisValue | 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。 |
1.3. filter方法
1.3.1 jq对象.filter()方法
该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回到新的数组中。
该方法通常用于缩小在被选元素组合中搜索元素的范围。
$(selector).filter(criteria,function(index))
| 参数 | 描述 |
|---|---|
| criteria | 可选。规定要从被选元素组合中返回的选择器表达式、jQuery 对象、一个或多个元素。 提示：如需规定多个条件，请使用逗号分隔。 |
| function(index) | 可选。为集合中的每个元素规定要运行的函数。如果返回 true，则保留元素，否则元素将被移除。index - 集合中元素的 index 位置。注意： this 是当前的 DOM 元素。 |
$("p").filter(":even") //返回所有偶数号的 <p> 元素
("p").filter(".intro,#outro") //返回 class 为 "intro" 和 id 为 "outro" 的所有 <p> 元素
1.3.2 js Array.filter()方法
array.filter(function(currentValue,index,arr), thisValue)
| 参数 | 描述 |
|---|---|
| function(currentValue, index,arr) | 必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当前元素的索引值arr可选。当前元素属于的数组对象 |
| thisValue | 可选。对象作为该执行回调时使用，传递给函数，用作 " |
数组和对象是引用传递, 就算返回的是新数组, 但是里面的元素所对应的内存地址是一样的
不改变原数组的方法 ES5：slice、join、toLocateString、toStrigin、indexOf、lastIndexOf、cancat
2. 隐式迭代
基本概念
隐式迭代：jQuery在设置属性时会自动的遍历，因此我们不需要再遍历
1. jQuery在执行设置性操作时，会给所有的元素都设置上相同的值。
2. jQuery在执行获取性操作时，只会返回第一个元素对应的值。
3. 如果想要给每一个元素都设置不同的值，需要手动进行遍历jQuery对象。
3. 链式编程
链式编程的原理：设置性操作会返回一个jQuery对象，因此可以继续调用jQuery的方法。
fn1(){
console.log('fn1')
return this
}
fn2(){
console.log('fn2')
return this
}
fn3(){
console.log('fn3')
return this
}
obj.fn1().fn2().fn3()
1. 设置操作的时候，可以使用链式编程。(设置操作返回的是jq对象)
2. 获取操作的时候，无法使用链式编程(获取操作返回的往往不是jq对象)。
4. end方法
end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
end(); // 上一次返回的jq对象
4.1 案例: 五星好评★★★☆☆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: #ff16cf;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script src="./js/jquery-1.12.4.js"></script>
<script>
$(function () {
const star_k = '☆'
const star_s = '★'
const $lis = $('li')
//1. 鼠标移入
$lis.on('mouseenter', function () {
//1.1 把当前的变成实心
// $(this).text(star_s)
//1.2 把前面的变成实心
// $(this).prevAll().text(star_s)
//1.3 把后面的变成空心
// $(this).nextAll().text(star_k)
// 链式编程
// $(this).text(star_s).prevAll().text(star_s).nextAll().text(star_k) //错误
//分析:
//移入第三个星星
// console.log($(this).text(star_s)) //返回第一个li
// console.log($(this).text(star_s).prevAll()) //返回第一个li, 第二个li
// console.log($(this).text(star_s).prevAll().text(star_s)) //返回第一个li, 第二个li
// console.log($(this).text(star_s).prevAll().text(star_s).nextAll()) //返回第一个li, 第二个li, 第三个li, 第四个li !!!!!!!!!
//正确写法
//end()方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
$(this).text(star_s).prevAll().text(star_s).end().nextAll().text(star_k)
})
//2. 鼠标点击
$lis.on('click', function () {
// 2.0 判断当前的class是否为selct, 是的话移除select
if ($(this).hasClass('select')) {
$(this).removeClass('select')
return
}
//2.1 标记当前的li, class为select, 其余的删除
$(this).addClass('select').siblings().removeClass('select')
//2.2 把当前select的变成实心, 前面的变成实心, 后面的变成空心
$('.select').text(star_s).prevAll().text(star_s).end().nextAll().text(star_k)
})
//3. 鼠标移出
$('ul').on('mouseleave', function () {
console.log('鼠标移出')
//3.1 先清空所有实心
$lis.text(star_k)
//3.2 把当前select的变成实心, 前面的变成实心, 后面的变成空心
$('.select').text(star_s).prevAll().text(star_s).end().nextAll().text(star_k)
})
})
</script>
</body>
</html>
$(this).text(star_s).prevAll().text(star_s).end().nextAll().text(star_k)//end()后还原成this了
prevAll();//获取前面所有的兄弟元素
nextAll();//获取后面所有的兄弟元素
siblings();//获取所有的兄弟元素
prev();//获取前一个兄弟
next();//获取后一个兄弟。
5. 多库共存
jQuery使用
$作为标示符，但是如果与其他框架中的\(冲突时，jQuery可以释放`\)`符的控制权.
var myjq = $.noConflict();//释放$的控制权,并且把$的能力给了c
//原来$('p')
//现在:
myjq('p')
6. jQuery插件
插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。
使用插件:
1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件
常用插件的使用
-
jquery.color.js的使用
-
jquery.lazyload.js的使用
- 懒加载: 在页面中的资源, 不需要展示, 先不请求资源
- 图片必须设置高宽, 否则可能触发的位置不对
- https://github.com/tuupola/jquery_lazyload