标签：eve   list   text   doc   资源   tor   math   lse   http   

jQuery（四）

几种遍历方法

each方法

jq对象.each()方法

遍历jQuery对象集合，为每个匹配的元素执行一个函数

语法：

$(selector).each(function(index,element))

注意: 返回的是元素, 不是jq对象

js Array.forEach()方法

回顾: forEach(function(item, index){}))

array.forEach(function(currentValue, index, arr), thisValue)

map方法

jq对象.map()方法

jQuery的map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。

$.map( object, callback )

Jquery each和map 的区别
1，回调函数的参数顺序相反，each：i,elem，map：elem,i
2，返回值不同，map返回一个新的数组，each返回原始数组
回调的返回值，each只能返回 true 和 false，map返回的是新数组的元素
3，map 的回调函数里 ，没有 this,each中的this代表当前迭代对象

js Array.map()方法

array.map(function(currentValue,index,arr), thisValue)

filter方法

jq对象.filter()方法

该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回到新的数组中。

该方法通常用于缩小在被选元素组合中搜索元素的范围。

$(selector).filter(criteria,function(index))

$("p").filter(":even")  //返回所有偶数号的 
 元素
("p").filter(".intro,#outro") //返回 class 为 "intro" 和 id 为 "outro" 的所有 
 元素

js Array.filter()方法

array.filter(function(currentValue,index,arr), thisValue)

数组和对象是引用传递, 就算返回的是新数组, 但是里面的元素所对应的内存地址是一样的

不改变原数组的方法 ES5：slice、join、toLocateString、toStrigin、indexOf、lastIndexOf、cancat

隐式迭代

基本概念

隐式迭代：jQuery在设置属性时会自动的遍历，因此我们不需要再遍历

1. jQuery在执行设置性操作时，会给所有的元素都设置上相同的值。
2. jQuery在执行获取性操作时，只会返回第一个元素对应的值。
3. 如果想要给每一个元素都设置不同的值，需要手动进行遍历jQuery对象。

链式编程

链式编程的原理：设置性操作会返回一个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对象)。

end方法

end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

end(); // 上一次返回的jq对象

案例: 五星好评★★★☆☆

☆
        
☆
        
☆
        
☆
        
☆
    

$(this).text(star_s).prevAll().text(star_s).end().nextAll().text(star_k)//end()后还原成this了

prevAll();//获取前面所有的兄弟元素
nextAll();//获取后面所有的兄弟元素
siblings();//获取所有的兄弟元素
prev();//获取前一个兄弟
next();//获取后一个兄弟。

多库共存

jQuery使用$作为标示符，但是如果与其他框架中的\(冲突时，jQuery可以释放`\)`符的控制权.

var myjq = $.noConflict();//释放$的控制权,并且把$的能力给了c
//原来$(‘p‘)
//现在:
myjq(‘p‘)

jQuery插件

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。

jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

使用插件:

1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件

常用插件的使用

• jquery.color.js的使用

  • https://github.com/jquery/jquery-color

• jquery.lazyload.js的使用

  • 懒加载: 在页面中的资源, 不需要展示, 先不请求资源
  • 图片必须设置高宽, 否则可能触发的位置不对
  • https://github.com/tuupola/jquery_lazyload

jQuery（四）

标签：eve   list   text   doc   资源   tor   math   lse   http   

原文地址：https://www.cnblogs.com/jiutianzhiyu/p/13971445.html