jQuery 筛选选择器
前言
突发奇想,忽然想到jQuery里面的gt()
方法和lt()
方法,它们里面都是填索引值,我就在想,它们的索引值如果是负数的话会怎么办,下列代码中我对其进行了尝试并进行了个人解释。
gt()
方法,great than
的简写,意思是找到下标比索引值要大的值,但是如果是负数的话,需要分情况,当这个负数小于你要找的 标签的个数 或者 下标数+1 的话,他会自动 不上一个表格个数(长度length),就好像下面代码中 -1 相当于 8 (选中的li标签的个数) + (-1)(前面的负数)
;但是,如果你这个负数大于了你的长度,那么即使补上一次标签个数,结果仍是负数,因此就不会选择到东西。lt()
也是如此。大家可以用下面的代码试试。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function f1(){
//$("li").css('background-color','blue');
//① :first 找到第一个
//li元素同时,还需要是第一个
//$('li:first').css('background-color','blue');
//② :last 找到最后一个
//$('li:last').css('background-color','green');
//③ :eq(下标) 下标从0计算, equal()
//$('li:eq(3)').css('background-color','pink');
//④ :gt(索引值) 下标大于条件索引值, great than
//$("li:gt(0)").css('color','red');
//$("li:gt(-1)").css('color','red'); //-1 什么都不会选中
//$("li:gt(-2)").css('color','red'); // -2 会选中 吕蒙 相当于正整数 6 可以认为是 li标签的个数(长度) + 负数
//$("li:gt(-9)").css('color','red'); // -9之后的 会全部选中 即超过 1倍长度就会当做负数进行处理
//$("li:gt(8)").css('color','red'); // 只要超过下标的任何索引值都不会选中东西
//⑤ :lt(索引值) 下标小于条件索引值, less than
// lt(索引值) 这里面的索引值可以大于长度,相当于全选,而且不会报错
// 索引值如果是个负数,如果此负数小于长度,就等于 长度+负数,如果大于长度,就不会选择到东西
//$("li:lt(6)").css('color','orange');// 选择下标小于6的
//$("li:lt(8)").css('color','orange'); // 全部选中
//$("li:lt(-7)").css('color','orange');// 只选择刘备
//⑥ :even 下标索引值等于偶数的
//$("li:even").css('background-color','gray');
//⑦ :odd 下标索引值等于奇数的
//$("li:odd").css('color','red');
//⑧ :not(选择器) 去除与“选择器”匹配的元素
//$("li:not(#zhao,#zhang)").css('color','red');
//⑨ :header 获得h1/h2/h3...的标题元素
//$(":header").css('color','blue');
}
</script>
</head>
<body>
<h1>并且选择器</h1>
<h2>并且选择器</h2>
<h3>并且选择器</h3>
<h4>并且选择器</h4>
<ul>
<li>刘备</li>
<li id="zhang">张飞</li>
<li>关羽</li>
<li id="zhao">赵云</li>
<li>孙权</li>
<li>周瑜</li>
<li>黄盖</li>
<li>吕蒙</li>
</ul>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>