jQuery选择器

jQuery
1.5k 词
jQuery选择器

jQuery选择器#

jQuery基础选择器#

原生js获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery做了封装，使获取元素统一标准。

                
jQuery

                $("选择器 ") // 里面选择器直接写css选择器即可，但是要加引号
jQuery基础选择器
名称 用法 描述
ID选择器 $('#id') 获取指定ID的元素
全选选择器 $('*') 匹配所有元素
类选择器 $('.class') 获取同一类class的元素
标签选择器 $('div') 获取同一类标签的所有元素
并集选择器 $('div,p,li') 获取多个元素
交集选择器 $('li.current') 交集元素

jQuery层级选择器#

名称 用法 描述
子代选择器 $('ul>li'); 使用 > 号，获取子级元素；注意，并不会获取孙级元素[doge]
后代选择器 $('ul li'); 使用空格，代表后代选择器，获取ul下所有的li元素，包括孙级

jQuery设置样式#

                
jQuery

                $('div').css('属性','值')

基础+层级选择器效果#

  1. ol第1个li
  2. ol第2个li
  3. ol第3个li
  4. ol第4个li

jQuery隐式迭代#

遍历内部DOM元素（伪数组形式存储）的过程就叫做 隐式迭代 。

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用再进行循环，简化操作，方便调用。

jQuery筛选选择器#

jQuery筛选选择器
语法 用法 描述
:first $('li:first') 获取第一个li元素
:last $('li:last') 获取最后一个li元素
:eq(index) $('li:eq(2)') 获取到的li元素中，选择索引号为2的元素，索引号从0开始
:odd $('li:odd') 获取到的li元素中，选择索引号为奇数的元素
:even $('li:even') 获取到的li元素中，选择索引号为偶数的元素

筛选选择器效果#

  1. ol第1个li
  2. ol第2个li
  3. ol第3个li
  4. ol第4个li

jQuery筛选方法#

jQuery筛选方法(重点)
语法 用法 描述
parent() $('li').parent(); 查找父级
children(selector) $('ul').children('li') 相当于 $('ul>li') ，最近一级
find(selector) $('ul').find('li') 相当于 $('ul li') ，后代选择器
siblings(selector) $(".first ").siblings("li "); 查找兄弟节点，不包括自己本身
nextAll([expr]) $(".first ").nextAll() 查找当前元素之后所有的同辈元素
prevtAll([expr]) $('.last').prevAll() 查找当前元素之前所有的同辈元素
hasClass(class) $('div').hasClass('protected') 检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index) $("li ").eq(2); 相当于 $('li:eq(2)") ，index从0开始

案例-新浪下拉菜单#

jQuery里面的排他思想#

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

案例#

链式编程#

链式编程是为了节省代码量，看起来更优雅。

                
jQuery

                $(this).css('color','red').sibling().css('color','');

使用链式编程一定注意是哪个对象执行样式

以点击按钮变色为例

原写法#

                    
jQuery

                    // 2.当前的元素变化背景色
                    $(this).css('background', 'var(--pink)');
                    // 3.其余的兄弟去掉背景色，隐式迭代
                    $(this).siblings('button').css('background', '');

链式编程写法#

                    
jQuery

                    $(this).css('background','var(--pink)').siblings().css('background','');