jQuery选择器的基本使用
2018-09-18 本文已影响0人
孙子衡
1.基本选择器
element:元素选择器 $('div'),$('p'),$('span')
id: #box $('#box').css('color','red');
class: item $('.item').css('color','yellow');
* :全局选择器 $('*').css('border','1px solid yellow');
实例代码
<!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标签 $('p.item')
li.item+li: + 代表当前标签的下一个 li $('li.item+li').css('color','red');
li.item~li: ~代表当前标签之后的所有兄弟li $('li.item~li').css('color','purple');
实例代码
<!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">因曾问我西来意,我话山居不记年.
草履只栽三个耳,麻衣曾补两番肩.
东庵每见西庵雪,下涧常流上涧泉,
半夜白云消散后,一轮明月到床前.</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实验有点问题
// $('.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>
基本筛选器
实例代码(取几个实例做个简单测试便可):
<!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">因曾问我西来意,我话山居不记年.
草履只栽三个耳,麻衣曾补两番肩.
东庵每见西庵雪,下涧常流上涧泉,
半夜白云消散后,一轮明月到床前.</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);
// 获取属性值 返回集合中第一个元素的属性值
console.log($('img').not('.im').prop('src'));
console.log($('img').attr('src'));
})
</script>
</body>
</html>
