1. 程式人生 > 其它 >2021/11/9 JQ屬性與樣式

2021/11/9 JQ屬性與樣式

1、attr(屬性名) 獲取屬性值 attr 返回 (checked) /undefined
attr(屬性名,屬性值) 設定屬性 返回屬性值的函式,第一個引數為當前元素的索引值,第二個引數為原先的屬性值。
var chk2=$("#sex").attr("checked");
// console.log(chk2);
// $("span").attr("data-id","1002")
// console.log($("span").attr("id"));
// console.log($("span").attr("data-id"));

2、prop 獲取字串 true/false 獲取在匹配的元素集中的第一個元素的屬性值
var chk=$("#sex").prop("checked");
// console.log(chk);

3、:checkbox 匹配所有複選框
$(":checkbox").attr("checked",ture);
$(":checkbox").prop("checked",ture);

$("#sex").change(function () {
// // $(":checkbox").prop("checked",ture); :checkbox 匹配所有複選框
// var che1=$(this).prop("checked");
// $(":checkbox:not([id])").prop("checked",che1);
// // console.log(che1)
// })
$("#sex2").change(function () {
// $(":checkbox:not([id])").each(function (index,item) {
// var ck= $(item).prop("checked");
// $(item).prop("checked",!ck);
// })
// })

HTML:
<form action="#">
<span id=name data-id="1001">姓名</span>
<input type="text" name="name">
<br>
<input type="checkbox" name="sex" id="sex">
<label for="sex">全選/全不選</label>
<input type="checkbox" name="sex" id="sex2">
<label for="sex">反選</label>
</form>

<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">

4、 //沒有引數時獲取 , 帶引數的設定
//html 獲取的是包含子元素 html標籤的程式碼 div<span>span</span>
//text 獲取純文字 只獲取文字內容 div span
//val 獲取的空 互動控制元件(表單控制元件)的值
//在設定時 HTML會解析其中的標籤($("div").html("<h1>h1</h1>");)
// text不會解析,只是原樣輸出 ($("div").html("<h1>h1</h1>");)

// var html= $("div").html();
// var text= $("div").text();
// var val= $("div").val();
// console.log(html,text,val);
// $("div").html("<h1>h1</h1>");
// $("div").html("<h1>h1</h1>");

// $("div").css("樣式","值") 只改行內樣式
//$("div").css("color","red")
// $("div").width("100px"); css的簡寫
// $("div").css("width");

HTML:
<div >div<span>span</span></div>