您好,登錄后才能下訂單哦!
1.jQuery用法思想一
選擇某個網(wǎng)頁元素,然后對它進(jìn)行某種操作
2.jQuery選擇器
(1)可以快速地選擇元素,選擇規(guī)則和css樣式相同,使用length屬性判斷選擇是否成功。
$(function(){
/*選擇類*/
var $div01 = $('.div1');
$div01.css({'color':'red'});
/*選擇ID*/
var $div02 = $('#box2');
$div02.css({'fontSize':'40px'});
/*選擇類下地標(biāo)簽,像css的類,也可以直接寫li,表示選擇所以li*/
var $li = $('.list li');
/*橫桿式或者駝峰式都可以*/
$li.css({'backgroundColor':'green'});
/*input里name為GOon*/
var $li01 = $('input[name=GOon]');
$li01.css({'color':'pink'});
})
(2)對選擇集進(jìn)行過濾
/*選擇含有p元素的div過濾*/
var $div03 = $('.filter div').has('p');
$div03.css({'backgroundColor':'gold'});
/*簡寫方式,適合一次調(diào)用,選擇除div1類外div元素過濾*/
$('div').not('.div1').css({'backgroundColor':'gold'});
/*選擇filter類過濾出第五個div*/
$('.filter div').eq('5').css({'color':'red'});
(3)選擇集轉(zhuǎn)移
/prev()第五塊的前面一塊緊挨著的/
$('.filter div').eq('5').prev().css({'color':'green'});
/*選擇div內(nèi),類為nine的塊*/
$('.filter div').find('.nine').css({'color':'red'});
/*prevAll()選擇前面類內(nèi)所有div*/
$('.filter div').eq('3').prevAll().css({'color':'red'});
/*0表示第一塊,next表示后面同輩元素,nextAll同上*/
$('.filter div').eq('0').next().css({'color':'green'});
/*父級div,children()所有子元素,siblings()所有同級元素*/
$('.filter div').eq('5').parent().css({'backgroundColor':'pink'});
(4)判斷是否選擇到了元素
jQuery有容錯機制,即使沒有找到元素,也不會出錯,可以用length屬性來判斷是否找到了元素,length等于0,就是沒選擇到元素,length大于0,就是選擇到了元素。
/>0表示獲取元素/
alert($div02.length);
3.jQuery用法思想二
同一個函數(shù)完成取值和賦值
(1)操作行間樣式
注意:選擇器獲取的多個元素,獲取信息獲取的是第一個,比如:$(‘div’).css('width'),獲取的是第一個div的width
(2)操作樣式類名
/在原來樣式名的基礎(chǔ)上加bug/
$div.addClass('bug');
/除去樣式名/
/$div.removeClass('bug another');/
/*重復(fù)切換another樣式*/
$div.toggleClass('another')
**4.綁定click事件**
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>button</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $bTn = $('#btn');
$bTn.click(function(){
/*if($('.box').hasClass('btn')){
$('.box').removeClass('btn');
}
else{
$('.box').addClass('btn')
}*/
/*簡寫方式*/
$('.box').toggleClass('btn');
})
})
</script>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
.btn{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<input type="button" name="" value="切換" id="btn">
<div class="box">123</div>
</body>
</html>
5.索引值-選項卡
獲取元素的索引值
有時需要獲得匹配元素相對于其同胞元素的索引位置,此時可以用index()方法獲取
$(function(){
var $li = $('.list li');
/index,獲取索引值,第一個為0/
alert($li.filter('.mylist').index());
})
例子:選項卡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>選項卡</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $btn = $('.btns input');
var $div = $('.cons div');
/*alert($div.length),判斷是否獲取*/
$btn.click(function(){
/*移出除當(dāng)前的類,siblings選擇同輩元素*/
$(this).addClass('current').siblings().removeClass('current');
/*index()顯示索引*/
$div.eq($(this).index()).addClass('div1').siblings().removeClass('div1');
})
})
</script>
<style type="text/css">
.btns input{
width: 100px;
height: 40px;
background-color: antiquewhite;
border: 0;/*給寬高會有邊框*/
}
.btns .current{
background-color: aqua;
}
.cons div{
width: 500px;
height: 200px;
background-color: aquamarine;
display: none;
line-height: 200px;
text-align: center;
font-size: 30px;
}
.cons .div1{
display: block;
}
</style>
</head>
<body>
<div class="btns">
<input type="button" name="" value="01" class="current">
<input type="button" name="" value="02">
<input type="button" name="" value="03">
</div>
<div class="cons">
<div class="div1">選項卡1</div>
<div>選項卡2</div>
<div>選項卡3</div>
</div>
</body>
</html>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。