jQuery选择器之基本筛选选择器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>基本筛选器</h2>
<h3>:first/:last/:even/:odd</h3>
<div class="left">
<div class="div"><p>div:first</p><p>:even</p></div>
<div class="div"><p>:odd</p></div>
<div class="div"><p>:even</p></div>
<div class="div"><p>:odd</p></div>
<div class="div"><p>:even</p></div>
<div class="div"><p>div:last</p><p>:odd</p></div>
</div>
<script type="text/javascript">
//找到第一个div
$(".left div:first").css("color", "red");
//找到最后一个div
$(".left div:last").css("color", "blue");
//:even 选择所引值为偶数的元素,从 0 开始计数
$(".left div:even p").css("background-color", "yellow");
//:odd 选择所引值为奇数的元素,从 0 开始计数
$(".left div:odd p").css("background-color", "green");
</script>
<h3>:eq/:gt/:lt</h3>
<div class="left">
<div class="vegeta"><p>:lt(3)</p></div>
<div class="vegeta"><p>:lt(3)</p></div>
<div class="vegeta"><p>:eq(2)</p></div>
<div class="vegeta"></div>
<div class="vegeta"><p>:gt(3)</p></div>
<div class="vegeta"><p>:gt(3)</p></div>
</div>
<script type="text/javascript">
//:eq
//选择单个,数组索引从0开始
$(".left .vegeta").eq(2).css("color", "blue");
// $(".left .vegeta:eq(2)").css("color", "blue");
//:gt 选择匹配集合中所有索引值大于给定index参数的元素
$(".left .vegeta:gt(2)").css("color", "red");
//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".left .vegeta:lt(2)").css("color", "pink");
</script>
<h3>:not</h3>
<div class="left">
<div><input type="checkbox" name="a" /><p>vegeta</p></div>
<div><input type="checkbox" name="b" /><p>慕课</p></div>
<div><input type="checkbox" name="c" checked="checked" /><p>其他</p></div>
</div>
<script type="text/javascript">
//:not 选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素,赋予颜色
$(".left div input:not(:checked)+p").css("background-color", "#f5f5f5");
</script>
</body>
</html>
jQuery选择器之内容筛选选择器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>内容筛选器</h2>
<h3>:contains/:has</h3>
<div class="left">
<div class="div"><p>:vegeta</p></div>
<div class="div"><p>:vegeta</p></div>
<div class="div"><p><span>:has</span></p></div>
<div class="div"><p>:vegeta</p></div>
</div>
<script type="text/javascript">
//查找所有class='div'中DOM元素中包含"vegeta"的元素节点
//并且设置颜色
$(".div:contains(':vegeta')").css("color", "red");
//查找所有class='div'中DOM元素中包含"span"的元素节点
//并且设置颜色
$(".div:has(span)").css("color", "blue");
</script>
<h3>:parent/:empty</h3>
<div class="left">
<div class="aaron"><a>:vegeta</a></div>
<div class="aaron"><a>:vegeta</a></div>
<div class="aaron"><a>:vegeta</a></div>
<div class="aaron"><a></a></div>
</div>
<script type="text/javascript">
//选择所有包含子元素或者文本的a元素
//增加一个蓝色的边框
$("a:parent").css("border", "1px dashed blue");
//找到a元素下面的所有空节点(没有子元素)
//文本颜色设置为red
$("a:empty").text(":empty").css("color", "red");
</script>
</body>
</html>
jQuery选择器之可见性筛选选择器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>可见性筛选选择器</h2>
<h3>:visible/:hidden</h3>
<div class="left">
<div class="div">
<a>display</a><p id="div1" style="display:none;">display</p>
</div>
<div class="div">
<a>width</a><a>height</a><p id="div2" style="width:0;height:0">width/height</p>
</div>
<div class="div">
<a>visibility</a><a>opacity</a><p id="div3" style="visibility:hidden;opacity:0">visibility</p>
</div>
</div>
<!-- 用来显示信息的p标签 -->
<p id="show"></p>
<script type="text/javascript">
function show (ele) {
if (ele instanceof jQuery) {
$("#show").html('元素的长度(个数)的 = ' + ele.length)
} else {
alert(ele+' 不是jQuery对象')
}
}
//查找id = div1的DOM元素,是否可见
show($("#div1:visible"));
//查找id = div2的DOM元素,是否可见
show($("#div2:visible"));
//查找id = div3的DOM元素,是否可见
show($("#div3:visible"));
//查找id = div1的DOM元素,是否隐藏
show($('#div1:hidden'));
//查找id = div2的DOM元素,是否隐藏
show($("#div2:hidden"));
//查找id = div3的DOM元素,是否隐藏
show($("#div3:hidden"));
</script>
</body>
</html>
jQuery选择器之属性筛选选择器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>属性筛选选择器</h2>
<h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
<div class="left" testattr="true" >
<div class="div" testattr="true" name='p1'>
<a>[att=val]</a>
</div>
<div class="div" testattr="true" p2>
<a>[att]</a>
</div>
<div class="div" testattr="true" name="-">
<a>[att|=val]</a>
</div>
<div class="div" testattr="true" name="a b">
<a>[att~=val]</a>
</div>
</div>
<script type="text/javascript">
//查找所有div中,属性name=p1的div元素
$('div[name=p1]').css("color", "red");
//查找所有div中,有属性p2的div元素
$('div[p2]').css("color", "blue");
//查找所有div中,有属性name中的值只包含一个连字符“-”的div元素
$('div[name|="-"]').css("color", "pink");
//查找所有div中,有属性name中的值包含一个连字符“空”和“a”的div元素
$('div[name~="a"]').css("color", "#eee");
</script>
<h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
<div class="left" testattr="true" >
<div class="div" testattr="true" name='imooc-aaorn'>
<a>[att^=val]</a>
</div>
<div class="div" testattr="true" name='aaorn-imooc'>
<a>[att$=val]</a>
</div>
<div class="div" testattr="true" name="attr-test-selector">
<a>[att*=val]</a>
</div>
<div class="div" name="a b">
<a>[att!=val]</a>
</div>
</div>
<script type="text/javascript">
//查找所有div中,属性name的值是用imooc开头的
$('div[name^=imooc]').css("background-color", "red");
//查找所有div中,属性name的值是用imooc结尾的
$('div[name$=imooc]').css("background-color", "blue");
//查找所有div中,有属性name中的值包含一个test字符串的div元素
$('div[name*="test"]').css("background-color", "pink");
//查找所有div中,有属性testattr中的值没有包含"true"的div
$('div[testattr!="true"]').css("background-color", "#eee");
</script>
</body>
</html>
jQuery选择器之子元素筛选选择器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>子元素筛选选择器</h2>
<h3>:first-child、:last-child、:only-child</h3>
<div class="left first-div">
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
<div class="div">
<a>:first-child</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
</div>
<script type="text/javascript">
//查找class="first-div"下的第一个a元素
//针对所有父级下的第一个
$('.first-div a:first-child').css("color", "red");
//查找class="first-div"下的最后一个a元素
//针对所有父级下的最后一个
//如果只有一个元素的话,last也是第一个元素
$('.first-div a:last-child').css("color", "blue");
//查找class="first-div"下的只有一个子元素的a元素
$('.first-div a:only-child').css("color", "blue");
</script>
<h3>:nth-child、:nth-last-child</h3>
<div class="left last-div">
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>第三个元素</a>
<a>:last-child</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>第三个元素</a>
<a>:last-child</a>
</div>
</div>
<script type="text/javascript">
//查找class="last-div"下的第二个a元素
$('.last-div a:nth-child(2)').css("color", "#CD00CD");
//查找class="last-div"下的倒数第二个a元素
$('.last-div a:nth-last-child(2)').css("color", "red");
</script>
</body>
</html>
jQuery选择器之表单元素选择器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>input{display: block;margin: 10px;padding:10px;}</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>子元素筛选选择器</h2>
<h3>input、text、password、radio、checkbox</h3>
<h3>submit、image、reset、button、file</h3>
<div class="left first-div">
<form>
<input type="text" value="text类型"/>
<input type="password" value="password"/>
<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" />
<input type="image" />
<input type="reset" />
<input type="button" value="Button" />
<input type="file" />
</form>
</div>
<script type="text/javascript">
//查找所有 input, textarea, select 和 button 元素
//:input 选择器基本上选择所有表单控件
$(':input').css("border", "1px dashed green");
//匹配所有input元素中类型为text的input元素
$('input:text').css("background", "pink");
//匹配所有input元素中类型为password的input元素
$('input:password').css("background", "yellow");
//匹配所有input元素中的单选按钮,并选中
$('input:radio').attr('checked','true');
//匹配所有input元素中的复选按钮,并选中
$('input:checkbox').attr('checked','true');
//匹配所有input元素中的提交的按钮,修改背景颜色
$('input:submit').css("background", "#C6E2FF");
//匹配所有input元素中的图像类型的元素,修改背景颜色
$('input:image').css("background", "#F4A460");
//匹配所有input元素中类型为按钮的元素
$('input:button').css("background", "red");
//匹配所有input元素中类型为file的元素
$('input:file').css("background", "blue");
</script>
</body>
</html>
jQuery选择器之表单对象属性筛选选择器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>input {display: block;margin: 10px;padding: 10px;}</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>表单对象属性筛选选择器器</h2>
<h3>enabled、disabled</h3>
<form>
<input type="text" value="未设置disabled" />
<input type="text" value="设置disabled" disabled="disabled" />
<input type="text" value="未设置disabled" />
</form>
<script type="text/javascript">
//查找所有input所有可用的(未被禁用的元素)input元素。
$('input:enabled').css("border", "2px groove red");
//查找所有input所有不可用的(被禁用的元素)input元素。
$('input:disabled').css("border", "2px groove blue");
</script>
<h3>checked、selected</h3>
<form>
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="radio" checked>
<input type="radio">
<select name="garden" multiple="multiple">
<option>imooc</option>
<option selected="selected">慕课网</option>
<option>aaron</option>
<option selected="selected">博客园</option>
</select>
</form>
<script type="text/javascript">
//查找所有input所有勾选的元素(单选框,复选框)
//移除input的checked属性
$('input:checked').removeAttr('checked')
//查找所有option元素中,有selected属性被选中的选项
//移除option的selected属性
$('option:selected').removeAttr('selected')
</script>
</body>
</html>
jQuery选择器之特殊选择器this
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>特殊选择器this</h2>
<p id="test1">点击测试:通过原生DOM处理</p>
<p id="test2">点击测试:通过原生jQuery处理</p>
<script type="text/javascript">
var p1 = document.getElementById('test1')
p1.addEventListener('click',function(){
//直接通过dom的方法改变颜色
this.style.color = "red";
},false);
$('#test2').click(function(){
//通过包装成jQuery对象改变颜色
$("#test2").css('color','blue');
})
</script>
</body>
</html>