可以設定或者獲採樣式,也可以一次設定多個樣式(寫為json模式)
$
("#btn").
css(
"width"
,"200px");
//設定
console.
log($(
"#btn").
css(
"width"))
;//獲取$(
"#btn").
css(
"width"
,function
(index, old));
$("#btn").
css(
);
同理元素屬性也可以一次操作多個和移除多個(仍然是removeattr
,不加s,空格隔開)
$
("#btn").
attr()
;$("#btn").
removeattr
("title data-index"
);
csshooks
:給c3樣式寫不同瀏覽器的相容性處理;(了解)
在標籤內看不到相容性的效果,比如標籤內一直都是transform:……
但是其實根據不同瀏覽器已經修改為標準的相容性寫法,比如輸出為:
//自定義樣式格式
//jquery css3樣式相容處理的
//官方**
(function
($)function
stylesupport
(prop)
} div =
null
; $.support[prop]
= supportedprop
return supportedprop;
}var transform =
stylesupport
("transform");
if(transform)
,set
:function
(elem, value)};
}})(jquery);$
("#btn").
css(
"transform"
,"rotatez(45deg)"
);
overflow-y
和overflow-x
設定後,如果想讓其中乙個消失,不重新設定hidden
無法取消
offset()
獲取當前元素的偏移位置的 ,引數都為number
型別,不帶畫素單位,相對於視口偏移
position()
相對父元素的偏移
//offset() 獲取當前元素的偏移位置的 相對於視口偏移
console.
log($(
".block").
offset()
.left)
;/*獲取偏移*/
console.
log($(
".block").
offset()
.top)
;//position() 相對父元素的偏移
console.
log($(
".block").
position()
);$(
".block").
on("scroll"
,function()
);$(
".block").
scrollleft(30
);// 引數為number型別,設定偏移
同樣可以獲取或者設定margin不計入元素的內外寬高
);//設定的寬高
console.
log($(
".box").
height()
);console.
log($(
".box").
innerwidth()
);//包括padding
console.
log($(
".box").
innerheight()
);console.
log($(
".box").
outerwidth()
);//包括border
jquery 裡面的當前物件是 $(this)
eq 根據索引(從0開始)匹配元素 ,根據±決定起始從頭還是尾
hasclass() 檢測是否具有什麼類 ,直接寫類名稱,不加「.」filter 的引數為:匹配器 篩選出與指定表示式匹配的元素集合。
要寫符號is 的引數 匹配器要寫符號has 匹配包含特定後代的元素(父)
not 刪除與指定表示式匹配的元素
slice 類似原生的slice,擷取陣列,取小不取大
get()
console.
log($(
"ul>li").
eq(0)
);console.
log($(
"ul>li").
eq(-2
)); console.
log($(
"ul>li").
first()
);console.
log($(
"ul>li").
last()
);console.
log($(
"ul>li").
eq(2)
.hasclass
("lilist"))
; console.
log($(
"ul>li").
filter
("li.lilist"))
;//選中特定元素,標籤.屬性
console.
log($(
"ul>li").
eq(2)
.is(".lilist"))
;$("ul>li").
each
(function
(index)
) console.
log(boo);}
);var num =$(
"ul>li").
map(
function()
);//get() 引數索引 取對應索引的元素 如果不寫引數轉化為array
console.
log(num.
get())
; console.
log($(
"ul").
has(
".lilist"))
; console.
log($(
"ul>li").
not(
".lilist"))
; console.
log($(
"ul>li").
slice(0
,2))
;
jQuery對元素內容操作
jquery提供了對元素的內容和值進行操作的方法,其中,元素的值是元素的一種屬性,大部分元素的值都對應value屬性。下面我們再來對元素的內容進行介紹。元素的內容是指定義元素的起始標記和結束標記中間的內容,又可分為文字內容和html內容。那麼什麼是元素的文字內容和html內容?通過下面這段來說明。測...
jQuery對元素 節點的操作
一 文字內容的操作 方法 text text val 例子 div div 獲取 div元素 console.log div.text 獲取文字內容 div.text aaaaa 設定了文字的內容 二 html內容的操作 html 用於獲取第乙個匹配元素的 html 內容 html val 用於設定...
Jquery對Jquey元素屬性的操作
獲取屬性和設定屬性 如果要獲取p元素的屬性title,那麼只需要給attr 方法傳遞乙個引數,即屬性名稱。1 var para p 獲取節點 2 varp txt para.attr title 獲取元素節點屬性title 如果要設定元素的屬性title的值,也可以使用同乙個方法,不同的是,需要傳遞...