亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

JQ選擇器作業(yè)和自己的小案例

asal 2018-12-18 16:30:58 211
abstrak：<!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>jquery選擇器</title>  <script type="text/javascript" 
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>jquery選擇器</title>
 <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
 <style type="text/css">
 div{width: 120px;height: 80px;background: #ccc;margin-top: 20px;color:#ffffff;text-align: center;}
/* button{width: 100px;height: 30px;border: none;border-radius: 5px;color:#ffffff;font-size: 15px;}*/
 </style>
</head>
<body>
<script type="text/javascript">
/*2-1 基本選擇器
語(yǔ)法
$('#id名')根據(jù)id來(lái)匹配元素
$('.class名')根據(jù)class來(lái)匹配元素
$('element')根據(jù)給定的標(biāo)簽名來(lái)匹配元素
$('*')匹配所有元素
$('#id,.class名,element')匹配到頁(yè)面中多個(gè)選擇器
自己做的
$(document).ready(function(){
 $('#bt1').click(function(){
 $('div').css('background','#2576f0')
 });
 $('#bt2').click(function(){
 $('div').css('background','#f53d3d')
 });
 $('#bt3').click(function(){
 $('div').css('background','#ff5809')
 });
 $('#bt4').click(function(){
 $('div').css('background','#2ccf62')
 });
});

$(document).ready(function(){
 $('.box').css('background','blue')
 $('span').css('font-size','30px')
 $('*').css('font-family','宋體')
 $('#box,.box,span').css('color','pink')
})*/

/*2-2 層級(jí)選擇器(相當(dāng)于父類和子類的元素關(guān)系)

給定的父級(jí)元素下匹配所有的子元素:$('父級(jí)元素 > 子級(jí)元素')
給定的祖先元素下匹配所有的后臺(tái)元素:$('祖先元素 后代元素')
匹配緊跟在prev元素后面的next元素:$('prev + next')(同級(jí)的元素)
匹配prev元素后面所有的siblings元素:$('prev ~ siblings')*/
/*$(document).ready(function(){
 $('ul>li').css('list-style','none')
 $('ul li').css('list-style','none')
 $('label+input').css('height','50px')
 $('label~input').css('height','50px')
 $('label~input').css('background','pink')
}) */

/*2-3 順序選擇器
1、順序
$(':first')第一個(gè)元素
$(':last')最后一個(gè)元素
2、比較
$(':gt(x)')表示大于值x的元素
$(':lt(x)')表示小于值x的元素
$(':eq(x)')表示等于值x的元素
3、奇偶數(shù)
$(':odd')奇數(shù)排序
$(':even')偶數(shù)排序
4、非
$(':not(selector)')匹配不是selector的所有元素*/

/*$(document).ready(function(){
$('p:first').css('color','red')
$('p:last').css('color','blue')
$('p:gt(1)').css('color','red')
$('p:lt(3)').css('color','blue')
$('p:eq(5)').css('color','#2ccf62')
$('p:odd').css('background','red')
$('p:even').css('background','blue')
$('p:not(#box)').css('background','pink')
})
*/

/*2-4 內(nèi)容選擇器
語(yǔ)法：
$(':contains(text)')匹配包含給定文本（text）的元素
$(':has(selector)')匹配包含特定選擇器元素的元素
$(':empty')匹配不含有內(nèi)容的元素（即 不包含子元素或者文本的空元素）
$(':parent')匹配含有子元素或者文本的元素*/

/*$(document).ready(function(){
 // $('div:contains(jun)').css('color','red')
 // $('div:has(span)').css('color','blue')
 // $('div:empty').css('background','red')
 $('div:parent').css('background','red')
})
*/

/*2-5 屬性選擇器
語(yǔ)法：
$('[屬性名]')匹配包含給定屬性的元素
$('[attribute=value]')匹配給定屬性是某個(gè)特定值的元素
$('[attribute !=value]')匹配所有不含有指定值的屬性，或者說(shuō)是屬性不等于特定值的元素
$('[attribute ^=value]')匹配給定屬性是以某些值開始的元素
$('[attribute $=value]')匹配給定屬性是以某些值結(jié)束的元素
$('[attribute *=value]')匹配給定屬性包含某些值的元素
$('attribute[1] attribute[2] attribute[3] ')復(fù)合選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用*/
/*$(document).ready(function(){
 // $('input[type]').css('background','pink')
 // $('input[type=button]').css('background','blue')
 // $('input[type !=button]').css('background','red')
 // $('input[type ^=p]').css('background','#ccc')
 // $('input[type $=n]').css('background','red')
 // $('input[type *=o]').css('background','blue')
 $('input[id][name*=n]').css('background','blue')
})*/

// 2-6 表單選擇器
// 語(yǔ)法:
// $(':enabled')所有激活的inpupt元素(可以使用的input元素)
// $(':disabled')所有禁用的input元素(不可以使用的input元素)
// $(':selected')所有被選中的元素,針對(duì)于select元素
// $(':checked')所有被選中的input元素
$(document).ready(function(){
  // $(':enabled').css('background','pink')
  // $(':disabled').css('background','blue')
  // $(':selected').css('color','red')
  $(':checked').parent().css('color','red')
})

</script>
<!-- 2-6表單選擇器 -->
<form>
 輸入框1<input type="text" name=""><br>
 輸入框2<input type="text" name=""><br>
 輸入框3<input type="text" name="" disabled><br>
 輸入框4<input type="text" name=""><br>
<!--  <select>
 <option>摩羯座</option>
 <option selected>雙魚座</option>
 <option>射手座</option>
 <option>天蝎座</option>
 </select><br> -->
 <label><input type="checkbox" name="">看書</label>
 <label><input type="checkbox" name="" checked>游泳</label>
 <label><input type="checkbox" name="">游戲</label>
</form>

<!-- 屬性選擇器 -->
<!-- <form>
 <label>1</label><input type="text" name="new" id="woman"><br>
 <label>2</label><input type="password" name="new1" id="man"><br>
 <label>3</label><input name="" id="new"><br>
 <label>4</label><input type="button" name="" value="按鈕"><br>
</form>
 -->
<!-- 內(nèi)容選擇器 -->
<!-- <div>jack</div>
<div>jun</div>
<div>jack cheng</div>
<div>jion</div>
<div><span>PHP中文網(wǎng)</span></div>
<div></div>
<div><b></b></div> -->

<!-- 順序選擇器 -->
<!-- <p id="box">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p> -->

<!-- 2-2層級(jí)選擇器 -->
<!-- <ul>
 <li>1</li>
 <li>2</li>
 <div>
 <li>孫子
 <div>
 <li>曾孫子</li>
 </div>
 </li>
 </div>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
</ul>
<form>
 <label>姓名</label>
 <input type="" name="">
 <button>按鈕</button>
 <input type="" name="">
 <input type="" name="">
</form> -->

<!-- 2-1 基礎(chǔ)選擇器 -->
<!-- <div id="box">點(diǎn)擊下方更換背景顏色</div><br>
<button type="button" id="bt1" style="background: #2576f0;">設(shè)置成藍(lán)色</button>
<button type="button" id="bt2" style="background: #f53d3d;">設(shè)置成紅色</button>
<button type="button" id="bt3" style="background: #ff5809;">設(shè)置成橙色</button>
<button type="button" id="bt4" style="background: #2ccf62;">設(shè)置成綠色</button> -->
<!-- <div>吃飽沒(méi)</div>
<span>php中文網(wǎng)</span> -->

</body>
</html>

上面是課程的代碼

下面是自己做的一個(gè)基礎(chǔ)選擇器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器作業(yè)</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 120px;height: 80px;background: #ccc;margin-top: 20px;color:#ffffff;text-align: center;}
button{width: 100px;height: 30px;border: none;border-radius: 5px;color:#ffffff;font-size: 15px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#bt1').click(function(){
$('div').css('background','#2576f0')
});
$('#bt2').click(function(){
$('div').css('background','#f53d3d')
});
$('#bt3').click(function(){
$('div').css('background','#ff5809')
});
$('#bt4').click(function(){
$('div').css('background','#2ccf62')
});
});
</script>
<p>1、基礎(chǔ)選擇器</p>
<div id="box">點(diǎn)擊下方更換背景顏色</div><br>
<button type="button" id="bt1" style="background: #2576f0;">設(shè)置成藍(lán)色</button>
<button type="button" id="bt2" style="background: #f53d3d;">設(shè)置成紅色</button>
<button type="button" id="bt3" style="background: #ff5809;">設(shè)置成橙色</button>
<button type="button" id="bt4" style="background: #2ccf62;">設(shè)置成綠色</button>
</body>
</html>

QQ截圖20181218162806.png

JQ的選擇器很全面，可以根據(jù)自己的很多需求從頁(yè)面中選出自己想要的一些元素，進(jìn)行再加工。這個(gè)非常關(guān)鍵。

由于選擇器有些多，就沒(méi)每個(gè)都做案例了。

Guru membetulkan：天蓬老師Masa pembetulan：2018-12-18 16:32:08
Rumusan guru：jQuery 最大的優(yōu)勢(shì), 就是快速的選擇元素 , 這也是到現(xiàn)在為止, 還有很多開發(fā)者在用jQuery的原因

Nota Keluaran

Penyertaan Popular