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 中的 $ 使其失去原有的意义
解决方法:
- 释放 $的使用权 即 在 函数入口 前 加上一句 jQuery.noConflict(); 即将 $ 的权限释放 只能用 jQuery.function(){})来操作
注意 :释放操作 必须在编写其他jQuery 代码之前编写 释放之后就不能再使用$,改为使用jQuery
- 自定义一个访问符号
即 var abc = jQuery.noConflict()
定义完之后 abc 可代替原来 $的 功能
jQuery 核心函数:
- 接受一个字符串选择器
返回一个jQuery对象,对象中保存了 查找出来的DOM元素
Eg: var $box1 = $(‘.box1’)
- 接受一个字符串代码片段
返回一个jQuery对象,对象中保存了创建的DOM元素
Eg:var $p = $(‘<p>我是一个段落</p>’)
- 接受一个DOM元素
DOM元素会被包装成为一个jQuery对象返回给我们
jQuery 对象 是一个类数组
有 0 到 length-1的属性并且有length属性
直接添加给类(构造函数) 的是静态方法 静态方法通过类名调用
在原型上定义的方法是 实例方法 通过实例调用方法 调用
原生js 中 的 forEach() 方法 只能便利数组 不能便利类数组
Arr.forEach(function(value.index){})
第一参数:遍历到的元素
第二个参数:当前遍历到的索引
jQuery中的 each() 方法 不仅可以 遍历 数组 还可以遍历类数组(对象也可以)
$.each(function(index,value){})
第一个参数:当前遍历到的索引
第二个参数:遍历到的元素

浙公网安备 33010602011771号