5、jquery中的选择器

标签选择器

选择所有的div标签
$("div")

选择所有的标签
$("*")

层次选择器

选中mainbox下面的所有div,包含孙子辈,有多级就都会选中
$(".mainbox div")

选中mainbox下面的所有div,不包含孙子辈,有多级也只选中第一级
$(".mainbox > div")

选中mainbox下面的所有控件,不包含孙子辈,有多级也只选中第一级
$(".mainbox").children()

选中mainbox下面的所有div控件,不包含孙子辈,有多级也只选中第一级
$(".mainbox").children("div")

找到id为current的父亲控件,
$("#current").parent()

找到id为current的所有父亲控件,包括祖父辈
$("#current").parents()

找到某个控件后面的一个控件
$("#current +div")//方法1
$("#current").next()//方法2

找到某个控件后面的所有兄弟控件(找不到兄弟控件的孩子控件)
$("#current~div")//或
$("#current~div").next();//找到某个节点后面的那个节点之后的所有兄弟节点

找到某个控件前面的一个控件
$("#current").prev()

找到某个控件前面的所有控件(不包含其子控件)
$("#current").prevAll()
console.log($("#current").hasClass("mainbox div"));

找到某个控件下的所有下标为奇数的div,下标从0开始
$(".mainbox >div:odd");

找到某个控件下的所有下标为偶数的div,下标从0开始
$(".mainbox >div:even");


基本过滤器

选中mytable下面的第一行,添加一个背景颜色

//写法1
//$(".mytable tr:first").css("background-color","#ffabcd");//选中mytable下面的第一行,添加一个背景颜色

//写法2,使用.eq(0)属性
$(".mytable tr").eq(0).css("background-color", "#ffabcd");//选中mytable下面的第一行,添加一个背景颜色

选中mytable下面的最后一行,添加一个背景颜色

$("#Button2").click(function () {

                //一来先清除全部样式
                $(".mytable tr").css("background-color", "#ffffff");

                //写法1
                //$(".mytable tr:last").css("background-color", "#2CCAF9");//选中mytable下面的最后一行,添加一个背景颜色

                //写法2,使用.eq(0)属性
                //$(".mytable tr").eq($(".mytable tr").length-1).css("background-color", "#2CCAF9");
                //console.log($(".mytable tr").length);//--浏览器控制台测试代码,此行代码无用

                //写法3,使用.eq(0)属性
                $(".mytable tr").eq(-1).css("background-color", "#2CCAF9");

            });

改变大于N的行背景为绿色

$(".mytable tr:gt('" + $("#txt1").val() + "')").css("background-color", "#5CCAAA");

改变小于N的行背景为绿色

$(".mytable tr:lt('" + $("#txt1").val() + "')").css("background-color", "#acacac");

改变等于N的行背景为绿色

$(".mytable tr").eq($("#txt1").val()).css("background-color", "#ccff33");

改变大于1行小于4行的背景

使用大于属性gt和小于属性lt来完成
$(".mytable tr:lt(4):gt(1)").css("background-color", "#5CCAAA");

改变除了.haed表头行的所有行的背景

$(".mytable tr:not(.haed)").css("background-color", "#ffffff");


基本过滤选择器

find("input[type='checkbox']:checked"):

find("input[type='checkbox'][lt(5)]")方括号可以连着写,方便写更多过滤

posted @ 2022-01-11 19:37  青仙  阅读(43)  评论(0编辑  收藏  举报