jQuery-樣式(jQuery選擇器)
阿新 • • 發佈:2018-12-26
ID選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery選擇器之id選擇器</title>
<style>
div {
width:100px;
height:90px;
float:left;
padding:5px;
margin:10px;
background-color : #838685;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="js">
<p>div id="js"</p>
<p>got you!</p>
</div>
<div id="jq">
<p>div id="jq"</p>
<p >got you!</p>
</div>
<div id="no">
<p>div id="no"</p>
<p>got you!</p>
</div>
<script type="text/javascript">
var js = document.getElementById('js');
js.style.border = '3px solid blue';
</script>
<script type ="text/javascript">
$('#jq').css('border','3px solid red');
</script>
</body>
</html>
類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery類選擇器</title>
<style>
div {
width: 100px;
height: 100px;
float: left;
padding: 5px;
margin: 10px;
background-color: #cccccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="js">
<p>div id="js"</p>
<p>got you!</p>
</div>
<div class ="jq">
<p>div id="jq"</p>
<p>got you!</p>
</div>
<div id="no">
<p>div id="no"</p>
<p>got you!</p>
</div>
<script type="text/javascript">
<!--原生js處理-->
var oDiv = document.getElementsByClassName('js');
for(var i=0; i<oDiv.length; i++){
oDiv[i].style.border = '3px solid green';
}
</script>
<script type="text/javascript">
<!--通過jQuery直接傳入類-->
$('.jq').css('border','3px solid red');
</script>
</body>
</html>
元素選擇器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {
width: 100px;
height: 90px;
float: left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="aaron">
<p>class="aaron"</p>
<p>選中</p>
</div>
<div class="aaron">
<p>class="aaron"</p>
<p>選中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery選中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery選中</p>
</div>
<script type="text/javascript">
//通過原生方法處理
//獲取到所有的節點標記名為div的元素
//給每一個div加上綠色的邊框
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "5px solid green";
}
</script>
<script type="text/javascript">
//通過jQuery直接傳入標籤名p
//可以多個標籤,所以得到的同樣也是一個合集
$('p').css("border", "5px solid red");
</script>
</body>
</html>
全選擇器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery全選擇器</title>
<style>
div {
width: 100px;
height: 90px;
float: left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="aaron">
<p>class="aaron"</p>
<p>選中</p>
</div>
<div class="aaron">
<p>class="aaron"</p>
<p>選中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery選中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery選中</p>
</div>
<script type="text/javascript">
<!--js原生方式-->
//獲取頁面中所有的元素
var elements1 = document.getElementsByTagName('*');
</script>
<script type="text/javascript">
<!--jQuery方式-->
//獲取頁面中所有的元素
var elements2 = $('*');
//原生與jQuery方法比較
//===表示資料和型別都相等
if(elements2.length === elements1.length){
elements2.css("border","3px solid red");
}
</script>
</body>
</html>
層級選擇器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery層級選擇器</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>
<!--
$( "parent > child" )
子選擇器:選擇所有指定“parent”元素中指定的"child"的直接子元素。
$("ancestor descendant")
後代選擇器:選擇給定的祖先元素的所有後代元素, 一個元素的後代可能是該元素的一個孩子,孫子,曾孫等
$("prev + next")
相鄰兄弟選擇器:選擇所有緊接在“prev”元素後的“next”元素
$("prev ~ siblings")
一般兄弟選擇器:匹配“prev”元素之後的所有 兄弟元素。具有相同的父元素,並匹配過濾“siblings”選擇器
相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素,必須在同一個父元素下!同一個父元素下!同一個父元素下!
層級選擇器都有一個參考節點!
-->
<h2>子選擇器與後代選擇器</h2>
<div class="left">
<div class="aaron">
<p>div下的第一個p元素</p>
</div>
<div class="aaron">
<p>div下的第一個p元素</p>
</div>
</div>
<div class="right">
<div class="imooc">
<article>
<p>div下的article下的p元素</p>
</article>
</div>
<div class="imooc">
<article>
<p>div下的article下的p元素</p>
</article>
</div>
</div>
<script type="text/javascript">
//子選擇器
//$('div > p') 選擇所有div元素裡面的子元素P
$('div>p').css("border", "5px solid green");
</script>
<script type="text/javascript">
//後代選擇器
//$('div p') 選擇所有div元素裡面的p元素
$('div article').css("border", "5px solid red");
</script>
<h2>相鄰兄弟選擇器與一般兄弟選擇器</h2>
<div class="bottom">
<div>兄弟節點div, +~選擇器不能向前選擇</div>
<span class="prev">選擇器span元素</span>
<div>span後第一個兄弟節點div</div>
<div>兄弟節點div
<div class="small">子元素div</div>
</div>
<span>兄弟節點span,不可選</span>
<div>兄弟節點div</div>
</div>
<script type="text/javascript">
//相鄰兄弟選擇器
//選取prev後面的第一個的div兄弟節點
$('.prev+div').css("border", "3px solid blue");
</script>
<script type="text/javascript">
//一般相鄰選擇器
//選取prev後面的所有的div兄弟節點
$('.prev~span').css("border", "3px solid red");
</script>
</body>
</html>
基本篩選選擇器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery基本篩選選擇器</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/: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>
很多時候我們不能直接通過基本選擇器與層級選擇器找到我們想要的元素,
為此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。
篩選選擇器很多都不是CSS的規範,而是jQuery自己為了開發者的便利延展出來的選擇器
<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
$('.div:first').css("color", "#CD00CD");
</script>
<script type="text/javascript">
//找到最後一個div
$('.div:last').css("color", "#CD00CD");
</script>
<script type="text/javascript">
//:even 選擇所引值為偶數的元素,從 0 開始計數
$('.div:even').css("border", "3px groove red");
</script>
<script type="text/javascript">
//:odd 選擇所引值為奇數的元素,從 0 開始計數
$('.div:odd').css("border", "3px groove blue");
</script>
<h3>:eq/:gt/:lt</h3>
<div class="left">
<div class="choose">
<p>:lt(3)</p>
</div>
<div class="choose">
<p>:lt(3)</p>
</div>
<div class="choose">
<p>:eq(2)</p>
</div>
<div class="choose">
</div>
<div class="choose">
<p>:gt(3)</p>
</div>
<div class="choose">
<p>:gt(3)</p>
</div>
</div>
<script type="text/javascript">
//:eq
//選擇單個
$('.choose:eq(2)').css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:gt 選擇匹配集合中所有索引值大於給定index引數的元素
$('.choose:gt(3)').css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:lt 選擇匹配集合中所有索引值小於給定index引數的元素
//與:gt相反
$('.choose:lt(2)').css("color", "#CD00CD");
</script>
<h3>:not</h3>
<div class="left">
<div>
<input type="checkbox" name="a" />
<p>choose</p>
</div>
<div>
<input type="checkbox" name="b" />
<p>world</p>
</div>
<div>
<input type="checkbox" name="c" checked="checked" />
<p>others</p>
</div>
</div>
<script type="text/javascript">
//:not 選擇所有元素去除不匹配給定的選擇器的元素
//選中所有緊接著沒有checked屬性的input元素後的p元素,賦予顏色
$('input:not(:checked)+p').css("background-color", "#CD00CD");
</script>
</body>
</html>
內容篩選選擇器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery內容篩選選擇器</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>
<!--注意!-->
<!--1,:contains與:has都有查詢的意思,但是contains查詢包含“指定文字”的元素,has查詢包含“指定元素”的元素。-->
<!--2,如果:contains匹配的文字包含在元素的子元素中,同樣認為是符合條件的。-->
<!--3,:parent與:empty是相反的,兩者所涉及的子元素,包括文字節點-->
<!--<h2>內容篩選器</h2>-->
<h3>:contains/:has</h3>
<div class="left">
<div class="div">
<p>content</p>
</div>
<div class="div">
<p>content</p>
</div>
<div class="div">
<p>
<span>:has</span>
</p>
</div>
<div class="div">
<p>content</p>
</div>
</div>
<script type="text/javascript">
//查詢所有class='div'中DOM元素中包含"contains"的元素節點
//並且設定顏色
$('.div:contains("content")').css("color", "#CD00CD");
</script>
<script type="text/javascript">
//查詢所有class='div'中DOM元素中包含"span"的元素節點
//並且設定顏色
$('.div:has(span)').css("color", "blue");
</script>
<h3>:parent/:empty</h3>
<div class="left">
<div class="aaron">
<a>:parent</a>
</div>
<div class="aaron">
<a>:parent</a>
</div>
<div class="aaron">
<a>:parent</a>
</div>
<div class="aaron">
<a></a>
</div>
</div>
<script type="text/javascript">
//選擇所有包含子元素或者文字的a元素
//增加一個藍色的邊框
$('a:parent').css("border", "3px groove blue");
</script>
<script type="text/javascript">
//找到a元素下面的所有空節點(沒有子元素)
//增加一段文字與邊框
$('a:empty').text(":empty").css("border", "3px groove red");
</script>
</body>
</html>
可見性篩選選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery可見性篩選選擇器</title>
<link rel="stylesheet" href="2-9.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
隱藏一個元素的方式:
1,CSS display屬性的值為none。
2,type="hidden"的表單元素。
3,寬度和高度都顯式設定為0。
4,一個祖先元素是隱藏的,該元素是不會在頁面上顯示的。
5,CSS visibility的值是hidden。
6,CSS opacity的值是0。
<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>
<p id="show"></p>
<script type="text/javascript">
function show(ele){
if(ele instanceof jQuery){
$('#show').html('元素的長度:'+ ele.length)
}else{
alert(ele+' 不是jQuery物件')
}
}
</script>
<script type="text/javascript">
show($('#div1:visible'));
</script>
<script type="text/javascript">
show($('#div2:visible'));
</script>
<script type="text/javascript">
show($('#div3:visible'));
</script>
<script type="text/javascript">
show($('#div1:hidden'));
</script>
<script type="text/javascript">
show($('#div2:hidden'));
</script>
<script type="text/javascript">
show($('#div3:hidden'));
</script>
</div>
</body>
</html>
屬性篩選選擇器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery子元素篩選選擇器</title>
<link rel="stylesheet" href="2-9.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>