【JavaWeb-jQuery】筆記（2）--- jQuery 函式精講
阿新 • • 發佈：2022-03-30
第一組函式：
1、val：
- 操作 DOM 陣列中的物件的 value 屬性
$(選擇器).val();//無引數呼叫形式， 讀取陣列中第一個 DOM 物件的 value 屬性值
$(選擇器).val(值);//有參形式呼叫;對陣列中所有 DOM 物件的 value 屬性值進行統一賦值
2、text：
- 運算元組中所有 DOM 物件的【文字顯示內容屬性】
$(選擇器).text();//無引數呼叫，讀取陣列中所有 DOM 物件的文字顯示內容，將得到內容拼接為一個字串返回
$(選擇器).text(值);//有引數方式，對陣列中所有 DOM 物件的文字顯示內容進行統一賦值
3、attr：
- 可以對 DOM 物件的 value，文字顯示內容之外的其他屬性進行操作
$(選擇器).attr(“屬性名”);//根據”屬性名“獲取 DOM 陣列中第一個 DOM 物件的屬性值
$(選擇器).attr(“屬性名”,“值”);//根據”屬性名“對陣列中所有 DOM 物件的屬性重新賦值
程式碼練習：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函式練習</title> <style type="text/css"> div{ background: greenyellow; width: 100px; height: 30px; } </style> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ //獲取dom陣列中第一個物件的value屬性值 var value = $(":text").val(); alert(value); }) $("#btn2").click(function(){ //修改所有文字框的value值 $(":text").val("修改後的value"); }) $("#btn3").click(function(){ //獲取所有span的文字值,連線成一個字串,再將他輸出看看 alert($("span").text()); }) $("#btn4").click(function(){ //修改所有span的文字值 $("span").text("喜羊羊和灰太狼都上天堂了"); }) $("#btn5").click(function(){ //輸出第五個按鈕的class屬性值 alert($(":button:eq(4)").attr("class")); }) $("#btn6").click(function(){ //修改第五個按鈕的class屬性值 $(":button:eq(4)").attr("class","我被修改了！！！"); }) }) </script> </head> <input type="text" name="我是第一個文字框的name屬性!" value="第一個value" /><br /> <input type="text" value="第二個value" /><br /> <input type="text" value="第三個value" /><br /> <span>你好，我是喜羊羊</span><br /> <span>你好，我是灰太狼</span><br /> <input type="button" value="獲取dom陣列中第一個物件的value屬性值" id="btn1" /> <input type="button" value="修改所有文字框的value值" id="btn2" /> <input type="button" value="獲取所有span的文字值連線的字串" id="btn3" /> <input type="button" value="修改所有span的文字值" id="btn4" /> <input type="button" value="輸出第五個按鈕的class屬性值" id="btn5" class="我是第五個按鈕的class屬性值"/> <input type="button" value="修改第五個按鈕的class屬性值" id="btn6" /> <body> </body> </html>
第二組函式：
1、remove：
$(選擇器).remove();//將陣列中所有 DOM 物件及其子物件一併刪除
2、empty：
$(選擇器).empty();//將陣列中所有 DOM 物件的子物件刪除
3、append：
- 為陣列中所有 DOM 物件新增子物件
$(選擇器).append("<div>我動態新增的 div</div>");
4、html：
- 設定或返回被選元素的內容（innerHTML）
$(選擇器).html();//無引數呼叫方法，獲取 DOM 陣列中第一個元素的內容 $(選擇器).html(值);//有引數呼叫，用於設定 DOM 陣列中所有元素的內容
5、each：
- each 可以對 陣列，json 或 dom 陣列等進行遍歷，對每個元素呼叫一次函式（$.each中的引數）
- $ 相當於是 java 的一個類名。each 就是類中的靜態方法，靜態方法呼叫，可以使用 【類名.方法名稱 】的方式呼叫
-
index: 陣列的下標（json中的“key”也可以看作為下標）
-
element: 陣列的物件
$.each( 要遍歷的物件, function(index,element) { 處理程式 } );//語法 1
jQuery 物件.each( function( index, element ) { 處理程式 } );//語法 2
練習程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函式練習2</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//使用remove:刪除父和子所有的dom物件
$("select").remove();
})
$("#btn2").click(function(){
//使用empty 刪除子dom物件
$("select").empty();
})
$("#btn3").click(function(){
//使用append,增加dom物件
$("select").append("<option value='愛心超人'>我是新來的愛心超人</option>");
})
$("#btn4").click(function(){
//使用html()函式,獲取陣列中第一個dom物件的文字值，包括html程式碼(innerHTML)
//alert($("select").text());//不包括hmtl程式碼(innerText)
alert($("select").html());
})
$("#btn5").click(function(){
//使用html(有引數)，設定dom物件的文字值
$("span").html("<h3>我是新來的GG棒！！！</h3>");
})
$("#btn6").click(function(){
//迴圈普通陣列,非dom陣列
var arr = [1,2,3];
$.each(arr,function(i,n){
alert("下標="+i + "元素="+ n);
})
})
$("#btn7").click(function(){
//josn物件:
var json = {"name":"王狗蛋","age":20};
$.each(json,function(i,n){
//迴圈json
alert("key="+i+",value="+n);
})
})
$("#btn8").click(function(){
//dom陣列
var domArray = $("option")
$.each(domArray,function(i,n){
alert("下標="+i+",option的value="+n.value);
})
})
$("#btn9").click(function(){
//each的另一種寫法
$(":button").each(function(i,n){
alert("i="+i+"，n="+ n.value);
})
})
})
</script>
</head>
<body>
<select>
<option value="" selected>-- 超人選擇 --</option>
<option value="開心超人">開心超人</option>
<option value="小心超人">小心超人</option>
<option value="粗心超人">粗心超人</option>
</select>
<br />
<span>我是GG棒！！！</span><br />
<input type="button" value="刪除select物件" id="btn1" />
<input type="button" value="刪除select物件的子物件" id="btn2" />
<input type="button" value="新增select物件的子物件" id="btn3" />
<input type="button" value="獲取select物件的文字值" id="btn4" />
<input type="button" value="修改span文字值" id="btn5" />
<input type="button" value="遍歷普通陣列" id="btn6" />
<input type="button" value="遍歷json" id="btn7" />
<input type="button" value="遍歷dom陣列(option)" id="btn8" />
<input type="button" value="遍歷dom陣列(button)" id="btn9" />
</body>
</html>
隨筆：
1、hide：
$(選擇器).hide();//將陣列中所有 DOM 物件隱藏起來2、show：
$(選擇器).show();//將陣列中所有 DOM 物件在瀏覽器中顯示出來