jQuery学习笔记(二)

DOM的筛选遍历

$(‘li:first’) 也可以 $(‘li’).first()

$(‘li:last’) 也可以 $(‘li’).last()

$(‘li:odd’) 索引值 是奇数的 li   只能这么写

$(‘li:even’) 索引值是偶数的li 只能这么写

 $(‘li:eq(索引值)’) 选择 所需li的索引值   也可 $(‘li’).eq(index) index 也可以是  负数  负数代表的是 倒数第几个

$(‘li:eq(2)’).prev()  索引值为2 的li 的上一个 兄弟元素

$(‘li:eq(2)’).prev(‘p’) 判断 索引值为2的li 的上一个兄弟元素是不是 p标签

$(‘li:eq(2)’).prevAll()  索引值为2 的前面所有的兄弟元素

同理  $(‘li:eq(2)’).next()  $(‘li:eq(2)’).nextAll()  

$(‘li:eq(2)’).sibings() 当前元素的所有的兄弟元素

 

$(‘li’).filter(function(index,ele){

Return index % 2 == 0;    //里面的函数 返回值要为  true或 false  return i ndex%2 == 0   相当于  return index%2 == 0  ?   true : false

 

}) 查找索引值 模 出 2 为0的 li

 

$(‘li’).not(‘.test’) 查找类名不是test的 li

$(‘li’).is(‘.test’)  判断li 的类名是不是test 如果有li名是test就返回true

$(‘li’).slice(2,4)  查找索引值 在 2 到4 之间的li  [start,end) 索引值为2 可取  索引值为4 不可取 取头不取尾

$(‘li’).each(function(index,ele){//循环遍历li

$(ele).find(‘.name’).text(); //元素类名为name的 text值

})

Each  重在 遍历不可链式调用

Map 便利结果会放到一个新的对象中 并且将新的对象返回 可以链式调用

$(‘li’).map(function(index,ele){

If($(ele).find(‘.age’).text() > 18){

return ele; //return 什么东西 返回的东西就会放到返回的  jquery对象里面

}

})

$(‘li’).has(‘p’)  查找子元素中有p 标签的li

 

Hide()  隐藏

Show() 显示

Toggle() 切换

 

jQuery 冲突问题

因为  jQuery中$ 可代表jQuery本身   但当 引入别的  外部js文件时 若这个  就是文件 中 有一个  用 $定义的 方法   则 这个$ 会覆盖掉 jQuery 中的  $ 使其失去原有的意义

解决方法:

  1. 释放 $的使用权 即 在 函数入口 前 加上一句 jQuery.noConflict(); 即将 $ 的权限释放  只能用  jQuery.function(){})来操作

注意 :释放操作 必须在编写其他jQuery 代码之前编写 释放之后就不能再使用$,改为使用jQuery

  1. 自定义一个访问符号

即  var  abc = jQuery.noConflict()

定义完之后 abc 可代替原来 $的 功能

 

jQuery 核心函数:

  1. 接受一个字符串选择器

返回一个jQuery对象,对象中保存了 查找出来的DOM元素

Eg: var $box1 = $(‘.box1’)

  1. 接受一个字符串代码片段

返回一个jQuery对象,对象中保存了创建的DOM元素

Eg:var $p = $(‘<p>我是一个段落</p>’)

  1. 接受一个DOM元素

DOM元素会被包装成为一个jQuery对象返回给我们

 

jQuery 对象 是一个类数组

有 0 到 length-1的属性并且有length属性

 

直接添加给类(构造函数) 的是静态方法 静态方法通过类名调用

在原型上定义的方法是 实例方法 通过实例调用方法 调用

 

原生js 中 的 forEach() 方法 只能便利数组 不能便利类数组

 Arr.forEach(function(value.index){})

第一参数:遍历到的元素

第二个参数:当前遍历到的索引

jQuery中的 each() 方法 不仅可以 遍历 数组 还可以遍历类数组(对象也可以)

$.each(function(index,value){})

第一个参数:当前遍历到的索引

第二个参数:遍历到的元素

posted @ 2019-03-11 15:32  水墨&青花  阅读(77)  评论(0)    收藏  举报