幾個簡單的jquery知識點練習
阿新 • • 發佈：2019-01-24
三、jquery物件和dom物件
<script type="text/javascript">
//頁面的基本元素載入後
$(function () {
var btnObjDom = document.getElementById('btn');
//dom物件變成jquery物件
alert($(btnObjDom).val());//如果val()該方法括號中什麼都不寫，表示的是獲取值
//如果在括號中寫內容了，表示的是設定該屬性的值
//jquery物件變成dom物件
// $(btnObjDom).get(0);//第一種方式
//$(btnObjDom)[0];//第二種方式
//id選擇器
alert($('#btn').val());
});
</script>
</head>
<body>
<input type="button" name="name" value="按鈕啊" id="btn" />
</body>
四、jquery物件操作元素
<script type="text/javascript">
//頁面的基本元素載入後
$(function () {
//id選擇器
$('#btn').click(function () {
//$('#dv').css('backgroundColor', 'red');
//$('#dv').text('就將計就計');//相容性問題沒了
//$('#dv').html('<font face="黑體" color="yellow">哈哈哈</font>');
//鏈式程式設計----只要是設定值 返回的還是當前的元素物件
$('#dv').css('backgroundColor', 'red').text('哈哈哈哈哈').css('width','200px');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="顯示效果" id="btn" />
<div style="width:300px; height:200px; border:1px solid gray;" id="dv"></div>
</body>
五、jquery獲取兄弟元素的幾個方法
1、next(); //當前元素之後的緊鄰著的第一個兄弟元素（下一個）
2、nextAll(); //當前元素之後的所有兄弟元素
3、prev(); //當前元素之前的緊鄰著的兄弟元素（上一個）
4、prevAll(); //當前元素之前的所有兄弟元素
5、siblings(); //當前元素的所有兄弟元素
案例：頁面上有一個ul球隊列表，當滑鼠移動到某個li上的時候改行背景顏色變紅，當點選某個
li的時候，讓該li之前的所有li背景色變黃，之後的所有li背景色變藍，自己不變色。
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$('#uul li').mouseover(function () {
$(this).css('backgroundColor', 'red').siblings().css('backgroundColor', '')
}).click(function(){
//斷鏈了 用end()可以修復到之前的連結
$(this).prevAll().css('backgroundColor', 'yellow').end().nextAll().css('backgroundColor', 'blue');
});
});
</script>
</head>
<body>
<ul id="uul">
<li>馬刺</li>
<li>雷霆</li>
<li>山貓</li>
<li>灰熊</li>
<li>湖人</li>
<li>火箭</li>
<li>公牛</li>
<li>76人</li>
<li>騎士</li>
</ul>
</body>
六、鏈式程式設計|addClass|removeClass
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.cls {
width:300px;
height:200px;
background-color:red;
}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
//新增類樣式
$('#btnAdd').click(function () {
//$('div').addClass('cls');
$('body').addClass('cls');
})
//移除類樣式
$('#btnRemove').click(function () {
//$(\div').removeClass('cls');
$('body').removeClass('cls');
});
$('#btn').click(function () {
$('div').toggleClass('cls');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="新增類樣式" id="btnAdd" />
<input type="button" name="name" value="移除類樣式" id="btnRemove" />
<input type="button" name="name" value="切換" id="btn" />
<div></div>
</body>
</html>
七、基本過濾選擇器 1、：first選取第一個元素。 $("div:first")選取第一個<div>。 2、：last選取最後一個元素。$("div:last")選取最後一個<div>。 3、：not(選擇器)選取不滿足“選擇器”條件的元素。$("input:not(.myclass)")選取樣式名不是myclass的<input> 4、：even，：odd,選取的索引是偶數、奇數的元素：$("input:even")選擇索引是奇數的<input> 5、：eq(索引序號)、：gt(索引序號)、：lt(索引序號)選取索引等於、大於、小於索引序號的元素 6、$(":header")選取所有的h1,h2,h3,h4,h5,h6元素 7、$("div:animated")選取正在執行動畫的<div>元素 案例： 第一行是表頭，所以顯示大字型（fontSize=30px），最後一行是彙總，所以顯示紅色字型。正文的前三行是前三名，所以顯示傻大的字型（28）表格的偶數行是紅色色背景。 用jQuery實現。 注意：gt(0):lt(3),表示先篩選出所有大於0的，然後在此基礎上再篩選出所有小於3的，即：在所有大於0的基礎上再選擇0,1,2。 <!DOCTYPE html>
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('#tb tr:eq(0)').css('fontSize', '30px');
$('#tb tr:lt(4)').css('fontSize', '28px');
$('#tb tr:odd').css('backgroundColor', 'red');
$('#tb tr:last').css('color', 'red');
//$('#tb tr:lt(3)').css('font-weight', 'bolder');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="顯示效果" id="btn" />
<table border="1" id="tb">
<tr>
<td>姓名</td>
<td>成績</td>
</tr>
<tr>
<td>tom</td>
<td>100</td>
</tr>
<tr>
<td>lucy</td>
<td>89</td>
</tr>
<tr>
<td>lili</td>
<td>67</td>
</tr>
<tr>
<td>jim</td>
<td>89</td>
</tr>
<tr>
<td>baby</td>
<td>67</td>
</tr>
<tr>
<td>
平均分
</td>
<td>
99
</td>
</tr>
</table>
</body>
</html>
案例：五角星評分 <script src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () { $('#tb td').mouseover(function () { //當滑鼠經過的時候把當前以及以前的元素變為實心的五角星 $(this).text('★').prevAll().text('★'); }).mouseout(function () { //當滑鼠離開時把實心的五角星換成空心的五角星 $(this).text('☆').siblings().text('☆'); }); }); </script> </head> <body> <table border="1" id="tb" style="cursor:pointer"> <tr> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> </tr> </table> </body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.cls {
width:300px;
height:200px;
background-color:red;
}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
//新增類樣式
$('#btnAdd').click(function () {
//$('div').addClass('cls');
$('body').addClass('cls');
})
//移除類樣式
$('#btnRemove').click(function () {
//$(\div').removeClass('cls');
$('body').removeClass('cls');
});
$('#btn').click(function () {
$('div').toggleClass('cls');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="新增類樣式" id="btnAdd" />
<input type="button" name="name" value="移除類樣式" id="btnRemove" />
<input type="button" name="name" value="切換" id="btn" />
<div></div>
</body>
</html>
七、基本過濾選擇器 1、：first選取第一個元素。 $("div:first")選取第一個<div>。 2、：last選取最後一個元素。$("div:last")選取最後一個<div>。 3、：not(選擇器)選取不滿足“選擇器”條件的元素。$("input:not(.myclass)")選取樣式名不是myclass的<input> 4、：even，：odd,選取的索引是偶數、奇數的元素：$("input:even")選擇索引是奇數的<input> 5、：eq(索引序號)、：gt(索引序號)、：lt(索引序號)選取索引等於、大於、小於索引序號的元素 6、$(":header")選取所有的h1,h2,h3,h4,h5,h6元素 7、$("div:animated")選取正在執行動畫的<div>元素 案例： 第一行是表頭，所以顯示大字型（fontSize=30px），最後一行是彙總，所以顯示紅色字型。正文的前三行是前三名，所以顯示傻大的字型（28）表格的偶數行是紅色色背景。 用jQuery實現。 注意：gt(0):lt(3),表示先篩選出所有大於0的，然後在此基礎上再篩選出所有小於3的，即：在所有大於0的基礎上再選擇0,1,2。 <!DOCTYPE html>
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('#tb tr:eq(0)').css('fontSize', '30px');
$('#tb tr:lt(4)').css('fontSize', '28px');
$('#tb tr:odd').css('backgroundColor', 'red');
$('#tb tr:last').css('color', 'red');
//$('#tb tr:lt(3)').css('font-weight', 'bolder');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="顯示效果" id="btn" />
<table border="1" id="tb">
<tr>
<td>姓名</td>
<td>成績</td>
</tr>
<tr>
<td>tom</td>
<td>100</td>
</tr>
<tr>
<td>lucy</td>
<td>89</td>
</tr>
<tr>
<td>lili</td>
<td>67</td>
</tr>
<tr>
<td>jim</td>
<td>89</td>
</tr>
<tr>
<td>baby</td>
<td>67</td>
</tr>
<tr>
<td>
平均分
</td>
<td>
99
</td>
</tr>
</table>
</body>
</html>
案例：五角星評分 <script src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () { $('#tb td').mouseover(function () { //當滑鼠經過的時候把當前以及以前的元素變為實心的五角星 $(this).text('★').prevAll().text('★'); }).mouseout(function () { //當滑鼠離開時把實心的五角星換成空心的五角星 $(this).text('☆').siblings().text('☆'); }); }); </script> </head> <body> <table border="1" id="tb" style="cursor:pointer"> <tr> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> </tr> </table> </body>