JQ实战笔记

Posted 2020-08-13

属性选择

$(‘input[value]‘)  //有value的元素

$(‘input[value=123]‘)  //有value的元素且value=123的元素
$(‘input[value^=123]‘)  //有value的元素且value起始是123的元素
$(‘input[value$=123]‘)  //有value的元素且value结束是123的元素
$(‘input[value*=123]‘)  //有value的元素且value包含是123的元素

//如果属性是含有空格的 应该加上引号如：
$(‘input [class="box box1"]‘)

 

集合长度，可以利用length来判断元素是不是JQ对象 JQ对象的length不为0；

//$()获取到的都是集合，下面表示集合的长度
$(‘li‘).size() 
$(‘li‘).length

添加和移除class

$(‘input‘).addClass(‘box1‘) //添加class 自动去重
$(‘input‘).addClass(‘box1 box2‘) //添加class 自动去重

$(‘input‘).removeClass(‘box1‘) //移除class 自动去重
$(‘input‘).removeClass(‘box1 box2‘) //移除class 自动去重

$(‘input‘).toggleClass(‘box3‘)  //只能添加或者删除class,条件:是否存在‘box3‘

显示与隐藏：

//比css()方法更好
$(‘div‘).hide()   //隐藏
$(‘div‘).show()   //显示

节点的选择

　

next()    //下一个兄弟节点
nextAll() //下面所有的兄弟节点
prev()    //上一个兄弟节点
prevAll()    //上面所有的兄弟节点
siblings()  //所有的兄弟节点  不包括自身

//筛选功能
siblings(‘h2‘)  //所有的兄弟节点为h2的  不包括自身

//下标
eq()