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)]")方括号可以连着写,方便写更多过滤