jquery选择器

时间:2019-04-18
本文章向大家介绍jquery选择器,主要包括jquery选择器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

// 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事件
*
*/