web前端【第十一篇】jQuery屬性相關操作
阿新 • • 發佈：2018-02-20
自定義屬性 utf tab 一個 option on() function gpo pan
知識點總結
1、屬性
屬性（如果你的選擇器選出了多個對象，那麽默認只會返回出第一個屬性）、
attr(屬性名|屬性值)
- 一個參數是獲取屬性的值，兩個參數是設置屬性值
- 點擊加載圖片示例
removeAttr(屬性名)
-刪除屬性的值
prop(屬性名|屬性值)
- 屬性的返回值的是布爾類型
- 單選，反選，取消的例子
removeProp(屬性名)
-刪除屬性的值
循環：each（兩種循環示例）
- $.each(數組/對象, function(i, v){})
- $("div").each(function(){})
CSS類
- addClass 添加類屬性
- removeClass 移除類屬性
- toggleClass 開關|切換（有就移除，沒有就添加）
燈泡的例子
HTML代碼/文本/值
沒有參數就是獲取對應的值，
有參數就設置對應的值
- .html() 添加html標簽 .html("<span>啦啦啦。</span>")
- .text() 添加文本 .text("啦啦啦。")
- .val()
input :一個參數,獲取的是input框裏面的值
checkbox :一個參數，獲取的是value的值
select :
單選：獲取值
多選：得到的是一個數組，設置的時候也要是數組
一、屬性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性示例</title>
</head>
<body>
<img src="Bootstrap_i1.png" >
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>武俠</td>
<td>銷售部</td>
</tr>
<tr>
<td>2</td>
<td>哎哎呀</td>
<td>財經部</td>
</tr>
</tbody>
</table>
<form action="">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="radio">
<select name="" id="">
<option value="">甘肅</option>
<option value="">蘭州</option>
<option value="">永登</option>
<option value="">天水</option>
<option value="">慶陽</option>
</select>
</form>
<script src="jquery-3.2.1.min.js"></script>
<script>
// $("img").attr("src","Bootstrap_i3.png");
// $("table").attr("aaa");
// $("table").attr("aaa","按時");
</script>
</body>
</html>二、示例圖片
1、attr
(1)得到屬性和設置屬性值
(2)設置自定義屬性值
2、removeAttr
3、prop
4、removeProp
三、jquery中的循環的兩種方式
// 方式一
li = [11,22,33];
$.each(li,function (i,v) {
console.log(i,v)// 0 11
// 1 22
// 2 33
})
// 方式二
$(".c1").each(function (i,v) {
console.log(i,v) //這裏的v拿到的是標簽
// 0 <div class="c1">hah</div>
// 1 <div class="c1">年</div>
// 2 <div class="c1">娃的</div>
console.log(v.innerText) //拿到文本
})
</script>
退出循環============================
三、註意的一個下問題：
解決方法
web前端【第十一篇】jQuery屬性相關操作