1、介紹：
- jQuery 是一個快速，小巧，功能豐富的 JavaScript 庫， 它通過易于使用的 API 在大量瀏覽器中運行，使得 HTML 檔案遍歷和操作，事件處理，影片和 Ajax 變得更加簡單， 通過多功能性和可擴展性的結合，jQuery 改變了數百萬人撰寫 JavaScript 的方式，
2、dom 物件和 jquery 物件：
- dom 物件，使用 javascript 的語法創建的物件叫做 dom 物件， 也就是 js 物件，
//obj是dom物件，也叫做js物件
var obj = document.getElementById("txt1"); - jquery 物件，使用 jquery 語法表示物件叫做 jquery 物件， 注意 ---> 所有 jquery 表示的物件都是陣列，
//jobj就是使用jquery語法表示的物件， 也就是jquery物件，它是一個陣列，現在陣列中就一個值
var jobj = $("#txt1");- dom 物件可以和 jquery 物件相互轉換，
dom 物件可以轉為 jquery ，語法： $(dom物件);
jquery 物件也可以轉為 dom 物件，語法： 從陣列中獲取第一個物件，第一個物件就是 dom 物件， 使用[0]或者get{0)，
- 為什么要進行 dom 和 jquery 的轉換，目的是要使用 jquery / dom 的方法，
3、選擇器：
- 選擇器就是一個字串， 用來定位 dom 物件的，定位了 dom 物件，就可以通過 jquery 的函式操作 dom
常用的選擇器：
1）id 選擇器，通過 dom 物件的 id 定位 dom 物件的，通過 id 找物件
$("#dom物件的id值");
2）class 選擇器，class 表示 css 中的樣式，使用樣式的名稱定位 dom 物件
$(".class樣式名);3）標簽選擇器，使用標簽名稱定位 dom 物件的
$("標簽名稱");
代碼練習：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery選擇器練習</title>
<style type="text/css">
div{
background: #808080;
width: 150px;
height: 100px;
}
</style>
<script type="text/javascript" src="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function fun1(){
//id選擇器
var obj = $("#one");
//使用jQuery中可以改變樣式的函式
obj.css("background","red");
}
function fun2(){
//樣式選擇器
var obj = $(".two");
obj.css("background","blue");
}
function fun3(){
//標簽選擇器
var obj = $("div");
obj.css("background","orange");
}
</script>
</head>
<body>
<div id="one"></div><br />
<div ></div><br />
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/將第一個div變為紅色" onclick="fun1()" />
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/將第二個div變為藍色" onclick="fun2()"/>
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/將所有div變為橙色" onclick="fun3()"/>
</body>
</html>
4、表單選擇器：
- 使用 <input> 標簽的 type 屬性值，定位 dom 物件的方式
$(":type屬性值");
$(":text");//選擇的是所有的單行文本框
$(":button");//選擇的是所有的按鈕
代碼練習：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單選擇器練習</title>
<script type="text/javascript" src="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function fun1(){
//使用表單選擇器
var obj = $(":text");
//輸出文本框value屬性的值,val()是jQuery中的函式,讀取value的值
alert(obj.val());
}
function fun2(){
var obj = $(":radio");
for(var i=0;i<obj.length;i++){
//將jQuery物件轉為dom物件
var dom = obj[i];
alert(dom.value);
}
}
function fun3(){
var obj = $(":checkbox");
for(var i=0;i<obj.length;i++){
alert(obj[i].value);
}
}
</script>
</head>
<body>
<input type="text" /><br />
<input type="radio" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/man" />男<br />
<input type="radio" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/woman" />女<br />
<input type="checkbox" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/dijia" />迪迦奧特曼<br />
<input type="checkbox" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/oubu" />歐布奧特曼<br />
<input type="checkbox" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/gaiya" />蓋亞奧特曼<br />
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/讀取text的值" onclick="fun1()"/>
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/讀取radio的值" onclick="fun2()"/>
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/讀取checkbox的值" onclick="fun3()"/>
</body>
</html>
5、過濾器：
- 過濾器就是過濾條件，對已經定位到陣列中的 DOM 物件進行過濾篩選，過濾條件不能獨立出現在 jquery 函式，如果使用只能出現在選擇器后方，
$("選擇器:first"): //第一個dom物件
$("選擇器:last"): //陣列中的最后一個dom物件
$("選擇器:eq(陣列的下標)");//獲取指定下標的dom物件
$("選擇器:lt(下標)");//獲取小于下標的所有dom物件
$("選擇器:gt(下標)");//獲取大于下標的所有dom物件
代碼練習：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery過濾器練習</title>
<style type="text/css">
div{
background: grey;
width: 150px;
height: 100px;
}
</style>
<script type="text/javascript" src="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
/*
//當頁面中的dom物件加載成功后,會執行ready(),相當于window.onload()
$(document).ready(function(){}): //正常寫法
$(function(){})//簡寫版
*/
$(function(){
//當頁面中所有的dom物件加載后,才能給button物件系結事件
$("#btn1").click(function(){
$("div:first").css("background","red");
})
$("#btn2").click(function(){
$("div:last").css("background","blue");
})
$("#btn3").click(function(){
$("div:gt(3)").css("background","green");
})
$("#btn4").click(function(){
$("div:lt(3)").css("background","purple");
})
$("#btn5").click(function(){
$("div:eq(3)").css("background","white");
})
})
</script>
</head>
<body>
<div></div><br />
<div></div><br />
<div></div><br />
<div></div><br />
<div></div><br />
<div></div><br />
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/作用第一個div(紅)" id="btn1"/>
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/作用最后一個div(藍)" id="btn2"/>
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/作用下標大于3的div(綠)" id="btn3"/>
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/作用下標小于3的div(紫)" id="btn4"/>
<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/作用下標等于3的div(白)" id="btn5"/>
</body>
</html>
6、表單屬性過濾器：
- 根據表單中 dom 物件的狀態情況，定位dom物件
- 選擇可用的文本框：
$(“:text:enabled”);- 選擇不可用的文本框：
$(“:text:disabled”);
- 復選框選中的元素：
$(“:checkbox:checked”);- 選擇指定下拉串列的被選中元素：
選擇器>option:selected;
代碼練習：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單過濾器</title>
<script type="text/javascript" src="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
/*
$(document).ready(函式);//當頁面中的所有dom物件加載成功后,會執行ready()，相當于window.onload()
$(function(){});//也可以簡寫為這種形式
*/
$(function(){
$("#btn1").click(function(){
//獲取所有可以使用的文本框
var obj = $(":text:enabled");
//修改jQuery陣列中所有dom物件的value值
obj.val("就無語~~");
})
$("#btn2").click(function (){
//獲取所有選中的checkbox
var obj = $(":checkbox:checked");
for(var i=0;i<obj.length;i++){
//alert(obj[i].value);也可以這么寫
alert($(obj[i]).val());
}
})
$("#btn3").click(function (){
//獲取下拉串列已被選中的值
//var obj = $("select>option:selected");
var obj = $("#language>option:selected");
alert(obj.val());
})
})
</script>
</head>
<body>
<input type="text" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/本博主王狗蛋帥氣逼人" disabled /><br />
<input type="text" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/你同意嗎？" disabled /><br />
<input type="text" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/我非常認可王先生的看法"/><br />
<input type="text" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/滾啊,普信男..."/><br />
<input type="checkbox" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/老八蜜汁小漢堡" checked />老八蜜汁小漢堡<br />
<input type="checkbox" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/老壇酸菜牛肉面" />老壇酸菜牛肉面<br />
<input type="checkbox" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/雙匯淀粉腸" />雙匯淀粉腸<br />
<select id="language">
<option value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/java">java語言</option>
<option value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/go" selected>go語言</option>
<option value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/python">python語言</option>
</select>
<input type="button" id="btn1" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/將可以修改的文本框的vulue修改為 就無語~~"/>
<input type="button" id="btn2" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/顯示已被選中的復選框的值"/>
<input type="button" id="btn3" value="https://www.cnblogs.com/Burning-youth/archive/2022/03/29/顯示已被選中的下拉串列框的值"/>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/451988.html
標籤：其他