1、 jQuery核心函式
$是jQuery的核心函式，能夠完成jQuery的很多功能，$()就是呼叫$這個函式，
2、DOM物件和jQuery物件的相互轉換
1、dom物件轉換為jQuery物件
- 先獲得dom物件
- $(dom物件) 就可以轉換為 jQuery物件
2、jQuery物件轉換為DOM物件
- 先獲得jQuery物件
- jQuery物件[下標] 取出相應的DOM物件
3、jQuery選擇器（重點）
3.1、 基本選擇器
id 選擇器： 根據id查找標簽物件
.class 選擇器：根據class查找標簽物件
element 選擇器：根據標簽名查找標簽物件
selector1,selector2 組合選擇器：合并選擇器1，選擇器2的結果并回傳
3.2、層級選擇器
ancestor descendent 后代選擇器：在給定的祖先元素下匹配所有的后代元素
parent->child 子元素選擇器：在給定的父元素下匹配所有的子元素
prev + next 相鄰元素選擇器:匹配所有緊接在prev 元素后的next元素
prev~sibings 之后的兄弟元素選擇器
3.3、過濾選擇器
基本過濾器
：first 獲取第一個元素
- ：last 獲取最后一個元素
- eq(index) 匹配一個給定索引值的元素
屬性過濾器
[attribute] 匹配包含給定屬性的元素
[attribute==value] 匹配給定的屬性是某個特定值的元素
表單過濾器
: text 匹配所有文本輸入框
：password 匹配所有的密碼輸入框
：radio 匹配所有的單選框
：CheckBox 匹配所有的復選框
表單物件屬性過濾器
:checked 匹配所有選中的單選，復選和下拉串列中選中的option標簽物件
:selected 匹配所有選中的option
4、屬性操作
prop() 可以設定或獲取屬性的值，只推薦操作checked,readOnly,selected,disabled等
attr() 可以設定或獲取屬性的值，不推薦操作checked,readOnly,selected,disabled等
html() 可以設定或獲取起始標簽和結束標簽的內容
text() 可以設定或獲取起始標簽和結束標簽的文本
val() 可以設定或獲取表單項的value屬性值
4.1、全選、全不選練習
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://www.cnblogs.com/y-tao/archive/2023/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//全選系結單擊事件
$("#checkedAllBtn").click(function () {
$(":checkbox").prop("checked",true);
});
//全不選系結單擊事件
$("#checkedNoBtn").click(function () {
$(":checkbox").prop("checked",false);
});
//反選系結單擊事件
$("#checkedRevBtn").click(function () {
$(":checkbox[name='items']").each(function () {
//在each遍歷的function函式中，有一個this物件，這個this物件是當前正在遍歷的dom物件
this.checked = !this.checked;
});
// alert($(":checkbox").length);//5
//alert($(":checkbox[name='items']").length);//4
var allCount = $(":checkbox[name='items']").length;//全部的數量
var checkedCount = $(":checkbox[name='items']:checked").length;//被選中的數量
// if(allCount==checkedCount){
// $("#checkedAllBox").prop("checked",true);//注意使用的是哪一個的id屬性的值 checkedAllBox
// }else{
// $("#checkedAllBox").prop("checked",false);
// }
//改進
$("#checkedAllBox").prop("checked",allCount==checkedCount);
});
//提交系結單擊事件
$("#sendBtn").click(function () {
//獲取全部的復選框
$(":checkbox[name='items']:checked").each(function () {
alert(this.value);
})
});
//全選或者全不選的系結單擊事件
$("#checkedAllBox").click(function () {
// alert(this);//[object HTMLInputElement]
// alert(this.checked);//true或者false
$(":checkbox[name='items']").prop("checked",this.checked);
});
//給每個球系結單擊事件
$(":checkbox[name='items']").click(function () {
var allCount = $(":checkbox[name='items']").length;
var checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked",allCount==checkedCount);
})
});
</script>
</head>
<body>
<form method="post" action="">
你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選
<br />
<input type="checkbox" name="items" value="https://www.cnblogs.com/y-tao/archive/2023/03/03/足球" />足球
<input type="checkbox" name="items" value="https://www.cnblogs.com/y-tao/archive/2023/03/03/籃球" />籃球
<input type="checkbox" name="items" value="https://www.cnblogs.com/y-tao/archive/2023/03/03/羽毛球" />羽毛球
<input type="checkbox" name="items" value="https://www.cnblogs.com/y-tao/archive/2023/03/03/乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="https://www.cnblogs.com/y-tao/archive/2023/03/03/全 選" />
<input type="button" id="checkedNoBtn" value="https://www.cnblogs.com/y-tao/archive/2023/03/03/全不選" />
<input type="button" id="checkedRevBtn" value="https://www.cnblogs.com/y-tao/archive/2023/03/03/反 選" />
<input type="button" id="sendBtn" value="https://www.cnblogs.com/y-tao/archive/2023/03/03/提 交" />
</form>
</body>
</html>
4.2、左到右，右到左 練習
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="https://www.cnblogs.com/y-tao/archive/2023/03/03/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//完成頁面的加載
$(function () {
//第一個按鈕[選中添加到右邊]
$("button:eq(0)").click(function () {
$("select:eq(o) option:selected").appendTo($("select:eq(1)"));
});
//第2個按鈕[全部添加到右邊]
$("button:eq(1)").click(function () {
$("select:eq(o) option").appendTo($("select:eq(1)"));
});
//第3個按鈕[選中洗掉到左邊]
$("button:eq(2)").click(function () {
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
});
//第4個按鈕[全部洗掉到左邊]
$("button:eq(3)").click(function () {
$("select:eq(1) option").appendTo($("select:eq(0)"));
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="https://www.cnblogs.com/y-tao/archive/2023/03/03/opt01">選項1</option>
<option value="https://www.cnblogs.com/y-tao/archive/2023/03/03/opt02">選項2</option>
<option value="https://www.cnblogs.com/y-tao/archive/2023/03/03/opt03">選項3</option>
<option value="https://www.cnblogs.com/y-tao/archive/2023/03/03/opt04">選項4</option>
<option value="https://www.cnblogs.com/y-tao/archive/2023/03/03/opt05">選項5</option>
<option value="https://www.cnblogs.com/y-tao/archive/2023/03/03/opt06">選項6</option>
<option value="https://www.cnblogs.com/y-tao/archive/2023/03/03/opt07">選項7</option>
<option value="https://www.cnblogs.com/y-tao/archive/2023/03/03/opt08">選項8</option>
</select>
<button>選中添加到右邊</button>
<button>全部添加到右邊</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>選中洗掉到左邊</button>
<button>全部洗掉到左邊</button>
</div>
</body>
</html>
遺忘知識點
find(expr|obj|ele)
搜索所有與指定運算式匹配的元素，這個函式是找出**正在處理的元素的后代元素的好方法**，
所有搜索都依靠jQuery運算式來完成，這個運算式可以使用CSS1-3的選擇器語法來寫，
confirm()
confirm 是JavaScript語言提供的一個確認提示框函式.你傳什么給他，他就提示什么；
當用戶點擊確定是就回傳true，點擊取消就回傳false
first() 獲取第一個元素
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$('li').first()
//結果為：[ <li>list item 1</li> ]
// 在事件回應的function函式中，有一個this物件，這個this物件是正在回應事件的dom物件
:gt(index)
匹配所有大于給定索引值的元素
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:gt(0)")
/* 結果：[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
*/
:contains(text)
匹配包含給定文本的元素
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
$("div:contains('John')")
結果：[
John Resig, Malcom John Sinclair ]轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/545765.html
標籤：其他