jquery选择器

Posted 2021-02-17 smile-w

// css选择器---拓展
// :hover---选择鼠标浮动在其上的元素，并设置样式

// jQuery选择器
// 1.基本选择器
/**
* 1.1 $("#id") id选择器
* 1.2 $(".class") class选择器
* 1.3 $("div") 标签选择器
* 1.4 $("#id,.class") 并集选择器（找到id和class的所有的标签）
* 1.5 $("div.class") 并集选择器（找到div且class）
*/
// 2.层级选择器
/**
* 2.1 子代选择器：$("#father>p")
* ---找到父元素下的子元素中所有的p元素（必须是父子关系）
* 2.2 后代选择器：$("#father p")
* ---找到父元素下的所有的p元素（可以是子代的子代）
*/
// 3.过滤选择器----过滤选择器带":"
/**
* $("li:even")----下标为偶数的li标签（下标从0开始）
* $("li:add")----下标为奇数的li标签（下标从0开始）
* $("li:eq(2)")----下标为2的li标签（下标从0开始）
* $("li:gt(2)")----下标大于2的li标签（下标从0开始）
* $("li:lt(2)")----下标小于2的li标签（下标从0开始）
* $("li:first")----第一个li标签
* $("li:last")----最后一个li标签
* :focus----当前获得焦点的元素
* :animated----所有正在执行动画效果的元素
* :not----去除所有与给定选择器匹配的元素
*/

// 4.筛选选择器
/**
* 4.筛选选择器：
* 4.1 children(selector)----$("ul").children("div");
* ----子类选择器
*
* 4.2 find(selector)----$("ul").find("div");
* ----后代选择器
*
* 4.3 siblings(selector)----$("li").siblings("div");
* ----查找兄弟节点，不包括自身
*
* 4.4 parent()----$("li").parent();
* ----查找父亲
*
* 4.5 eq(index)----$("li").eq(2);
* ----相当于：$("li:eq(2)"),查找下标为2的标签
*
* 4.6 next()----$("li").next();
* ----下一个兄弟
*
* 4.7 prev()----$("li").prev();
* ----上一个兄弟
*/

 

/**
* mouseenter和mouseover都是鼠标进入事件----mouseleave和mouseout对应的鼠标离开事件
*
* 区别：mouseenter事件：鼠标进入后，只有在鼠标穿过当前被选的元素时才会触发
* mouseover事件：不论鼠标穿过当前被选的元素或者其子元素时都会触发mouseover事件
*
*/