jquery的屬性和樣式

2022-09-10 08:39:12 字數 3230 閱讀 8505

1.attr 和prop

attr 設定或返回被選元素的屬性值

attr(屬性名)  獲取屬性

attr(屬性名,屬性值) 設定屬性

$("span").attr("data-id","1002");//data-id="1001"
console.log($("span").attr("id")); //獲取id

console.log($("span").attr("data-id")); //獲取data-id

<

span

id="span"

data-id

="1001"

>姓名

span

>

prop 獲取在匹配的元素集中的第乙個元素的屬性值。

prop(屬性名)  獲取屬性

prop(屬性名,屬性值) 設定屬性

attr和prop的區別:

prop(屬性名),選中核取方塊為true,沒選中為false

attr(屬性名),選中返回checked,否則返回undefined

var chk=$("#***").prop("checked");

console.log(chk);

//返回true false

var chk2=$("#***").attr("checked");

console.log(chk2);

//選中返回checked,否則返回undefined

<

input

type

="checkbox"

name

="***"

id="***"

>

<

label

for="***"

>全選/全不選

label

>

全選和全不選

//

$(":checkbox").attr("checked",true); 全選中

//$(":checkbox").prop("checked",true); 全選中

$("#***").change(function());

$("#***2").change(function

()對於每個匹配的元素所要執行的函式

$(":checkbox:not([id])").each(function

(index,item)) });

<

form

action

="#"

>

<

span

id="span"

data-id

="1001"

>姓名

span

>

<

input

type

="text"

name

="name"

id=""

>

<

br>

<

input

type

="checkbox"

name

="***"

id="***"

>

<

label

for="***"

>全選/全不選

label

>

<

input

type

="checkbox"

name

="***"

id="***2"

>

<

label

for="***"

>反選

label

>

form

>

<

input

type

="checkbox"

name

="">

<

input

type

="checkbox"

name

="">

<

input

type

="checkbox"

name

="">

2.jquery的樣式

$("div").css("color","red");  //設定div的顏色為紅色

var width=$("div").width();

console.log(width);

//獲取div的寬度(width)

var width2=$("div").css("width");

console.log(width2);

//獲取div的寬度(width)

//兩者一樣

3.html**/文字/值

沒有引數時獲取,帶引數時設定

html 包含html(子元素)標籤的的** div

span

text 純文字 divspan

val 互動控制項(表單控制項)的值 ""在設定時,html會解析其中的標籤,text不會解析,只是原樣輸出

var html=$("div").html();

var text=$("div").text();

var val=$("div").val();

console.log(html,text,val);

4.js擴充套件(優先順序)

把優先順序提到最高:

在style中樣式的最後新增乙個!important

#div

<

div

id="div"

style

="background-color: red;"

>div標籤

div>

5.split()和join()

split():切割成陣列的形式   支援正規表示式

join():將陣列轉換成字串

jQuery的屬性和樣式

prop 獲取在匹配的元素集中的第乙個元素的屬性值。attr 屬性名 屬性值 設定屬性 全選全部選 change function 反選 change function 2 change function body form action span id span data id 1001 姓名 s...

Jquery的一些屬性和樣式

刪除樣式 removeclass 方法 在 裡面新增classname是每個匹配元素移除的乙個或多個用空格隔開的樣式名稱 function index class 在乙個函式裡面,返回乙個或者多個將要被移除的樣式名稱 值得注意的是,如果乙個樣式類名稱作為乙個引數,只有這種樣式類會被從匹配的元素集合中...

jQuery 屬性操作和樣式函式

用於獲得或設定元素的dom屬性 方法描述 addclass 向匹配的元素新增指定的類名。attr 設定或返回匹配元素的屬性和值。hasclass 檢查匹配的元素是否擁有指定的類。html 設定或返回匹配的元素集合中的 html 內容。removeattr 從所有匹配的元素中移除指定的屬性。remov...