1.基本選擇器
element:元素選擇器 $('div'),$('p'),$('span')
id: #box $('#box').css('color','red');
class: item $('.item').css('color','yellow');
* :全局選擇器 $('*').css('border','1px solid yellow');
實(shí)例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
我是div
</div>
<div class="item">
我是class=item的div
</div>
<div id="box">
我是id=box的div
</div>
<script src="../jquery-3.3.1.min.js"></script>
<script>
$(function () {
$('*').css('border','1px solid yellow');
$('div').css('border','1px solid red').width(600).height(50);
$('#box').css('color','red');
$('.item').css('color','blue');
})
</script>
</body>
</html>
2,層級選擇器,組合選擇器
div,p 逗號代表同級別 $('div,p').css()
div li: 空格代表div下的所有后代元素 $('div li')
div>li : 大于號代表div下的所有子元素 $('div > li')
p.item :代表class='item'的p標(biāo)簽 $('p.item')
li.item+li: + 代表當(dāng)前標(biāo)簽的下一個(gè) li $('li.item+li').css('color','red');
li.item~li: ~代表當(dāng)前標(biāo)簽之后的所有兄弟li $('li.item~li').css('color','purple');
實(shí)例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box"> 哈哈
<ul class="par">
<li>python</li>
<li class="item">python01</li>
<li >python02</li>
<li>python03
<ul>
<li>java01</li>
<li id="java">java02</li>
<li>java03</li>
</ul>
</li>
<li>python04</li>
<li>python05</li>
</ul>
</div>
<div class="div02">
<p>11</p>
<p>12</p>
<p>14</p>
<p>13</p>
<div>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
</div>
</div>
<p class="item">因曾問我西來意,我話山居不記年.
草履只栽三個(gè)耳,麻衣曾補(bǔ)兩番肩.
東庵每見西庵雪,下澗常流上澗泉,
半夜白云消散后,一輪明月到床前.</p>
<script src="../jquery-3.3.1.min.js"></script>
<script>
$('.par > li').css('color','yellow');
$(document).ready(function () {
// 逗號代表同級別
// $('.box,p').css('border','1px solid red');
// 空格代表所有后代
// $('.box li').css('color','blue');
// > :代表所有子代 ul實(shí)驗(yàn)有點(diǎn)問題
// $('.div02>p').css('background','blue');
// $('p.item').css('border','3px solid purple');
$('li.item+li').css('color','red');
$('li.item~li').css('color','purple');
})
</script>
</body>
</html>
基本篩選器
實(shí)例代碼(取幾個(gè)實(shí)例做個(gè)簡單測試便可):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box"> 哈哈
<ul class="par">
<li>python</li>
<li class="item">python01</li>
<li >python02</li>
<li>python03
<ul>
<li>java01</li>
<li id="java">java02</li>
<li>java03</li>
</ul>
</li>
<li>python04</li>
<li>python05</li>
</ul>
<p>hahhaahah</p>
</div>
<div class="div02">
<p>11</p>
<p>12</p>
<p>14</p>
<p>13</p>
<div>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
</div>
</div>
<p class="item">因曾問我西來意,我話山居不記年.
草履只栽三個(gè)耳,麻衣曾補(bǔ)兩番肩.
東庵每見西庵雪,下澗常流上澗泉,
半夜白云消散后,一輪明月到床前.</p>
<button id="btn"></button>
<div id="amid" style="background-color: #01AAED;width: 300px;height: 300px;">我是動漫測試</div>
<script src="../jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
// $('.box li:first').css('color','red');
// $('.box li:not(p)').css('color','yellow');
console.log($('div[class]'));
})
// var amin = $('#btn');
// amin.click(function () {
//
// console.log('1111');
// alert('hhhh');
// $('#amid').animate({right:'+=200'},1000);
// })
</script>
</body>
</html>
// 以下為部分代碼 用于參考使用
<img src="01.jpg">
<img src="01.jpg" alt="hello world">
<img src="01.jpg" alt="hello you">
<img src="01.jpg" alt="abc">
<img src="01.jpg" alt="hello" title="bbd">
$(document).ready(function(){
//$("img[alt]").css("border", "5px solid green")
//$("img[alt='abc']").css("border", "5px solid green");
//$("img[alt!='abc']").css("border", "5px solid green")
//$("img[alt^='hello']").css("border", "5px solid green")
//$("img[alt$='d']").css("border", "5px solid green")
//$("img[alt*='o']").css("border", "5px solid green")
$("img[alt*='o'][title]").css("border", "5px solid green");
})
屬性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>jQuery屬性操作</h1>
<hr>
<img class="im" src="./avatar/1.jpg" alt="MyAvatar" title="hello" loadimg="100.jpg">
<div>
<img src="./avatar/1.jpg" alt="">
<img src="./avatar/2.jpg" alt="">
<img src="./avatar/3.jpg" alt="">
<img src="./avatar/4.jpg" alt="">
<img src="./avatar/5.jpg" alt="">
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
// 獲取屬性值
console.log($('img').attr('src'));
console.log($('img').prop('src'));
console.log($('img').prop('loadimg'));
console.log($('img').attr('title'));
// 修改屬性的值
$('img').attr('title','你好');
console.log($('img').attr('title'));
$('img').prop('title','我好')
console.log($('img').prop('title'));
// 添加屬性
$('img').attr('loadpic','00000.png');
console.log($('img').attr('loadpic'));
$('img').prop('width','200');
// 刪除屬性
$('img').removeAttr('loadimg').removeAttr('loadpic').removeAttr('title');
$('img').removeProp('width');
console.log($('img').attr('loadpic'));
// *************************************************************************
$('img').not('.im').prop('width',100);
// 獲取屬性值 返回集合中第一個(gè)元素的屬性值
console.log($('img').not('.im').prop('src'));
console.log($('img').attr('src'));
})
</script>
</body>
</html>
