一、 css選擇器
1.查詢元素的方法按照
形式來寫
2.支援多級查詢:
形式大概在:
3.用jq給css 新增樣式
css()
即4.current 當前
5 .next() 返回後乙個同級元素
這個返回的實際上就是第二個li;
6.parent()取相應的父元素
7.siblings() 取同級元素的集合(不包括自己本身)
實際上去得的是13,14兩個li,它和next()的區別在於 乙個是去集合另乙個是取乙個元素
4. children()取得所有子元素
它可以有引數 結果是取得符合條件的子代元素
$("#ul1").children().css('background',"red");//取得的是前四個
$("#ul1").children('.li2').css("background","yellow"//取得是最後乙個
5.remove()
6.toggleclass() 函式
沒有類則是建立乙個類,如果有則反選。
7.:eq()選擇器
例如 傳-1取得是最後乙個dom元素。
html()函式,是jq的語法,不穿函式的時候用來取得這個dom函式的值,傳值的時候會覆蓋原有的html結構可以是這種東西。
執行的東西應該是乙個$元素,而不是乙個$陣列
8.:even
例如這個函式選擇的是所有奇數的dom元素,1,3,5,7,需要注意的是這個肯定會回傳乙個陣列,所以不能使用像html()這種只能操作乙個的函式。
9.屬性選擇器:
選中 含有aa這個單詞的元素?
選中以aa為結尾的 dom元素
選中以aa為開頭的dom元素
選中不含有aa 的dom元素
//選中以aa 為字首的dom 元素?
10.
1.$("#div h1:first-child")
這句話的意思是選中div下面的第乙個孩子而且必須是h1。
2.$("#div h1:first of type")
選中div下第乙個型別是h1的dom 元素
3.$("#div h1:nth-child(2n)")選擇所有偶數
4.$("#div h1:nth-child(2n+1)")選擇所有奇數
二jq 擴充套件選擇器
1.:animated
選擇正在執行動畫效果的dom元素
$("div:animated").toggleclass("colored");
2.eq()選擇器
例如 傳-1取得是最後乙個dom元素。
html()函式,是jq的語法,不穿函式的時候用來取得這個dom函式的值,傳值的時候會覆蓋原有的html結構可以是這種東西。
執行的東西應該是乙個$元素,而不是乙個$陣列
3.:even
例如這個函式選擇的是所有奇數的dom元素,1,3,5,7,需要注意的是這個肯定會回傳乙個陣列,所以不能使用像html()這種只能操作乙個的函式。
4.:odd
選擇所有偶數的dom元素。
5.:first
匹配第乙個元素
6. :gt(index)
var $div1 =$("#div1 li:gt(0)");
$div1.each(function());
索引從零開始,所以這個是操作所有大於index(0+1)的元素。
7.:header
var $div1 = $("div1:header")
選擇所有header標題元素 類似於h1,h2,h3,h4。
8.:lang(lang)
$( "div:lang(es-es)" ).addclass( "spain" );
選擇指定語言的所有元素
對於html元素,語言值由lang屬性決定,也可能由來自meta元素或http頭資訊決定。
9.:last
$("div:last").css("background","red");
選擇最後乙個div
10.:it(index)
var div1 = $("div:it(0)");
$div1.each(function());
用於操作所有小於index+1的dom元素。
11.:not(selector)
$("input:not(:checked) + span").css("background-color", "yellow");
選擇除了選定元素之外的其他元素。不推薦使用沒有.not()好用。
12.:html
選擇該文件的根元素
在html中,文件的根元素,和$(":root")選擇的元素一樣, 永遠是元素
13.:target
選擇由文件uri的格式化識別碼表示的目標元素
如果文件的uri包含乙個格式化的識別符號,或hash(雜湊), 然後:target選擇器將匹配id和識別符號相匹配的元素。 例如,給定的uri $( "p:target" ),將選擇元素。
14.:empty
var $div1 = $("#div1 li:empty").css("background","red");
選擇空元素的jq元素
15:contains(text)
var $div1 = $("#div1 li:contains(2)").css("background","red");
選擇內容中含有text 的所有jq元素
15.:parent
var $div1 = $("#div1 li:parent").css("background","red");
選擇任何有子元素或者文字的父元素
16.:hidden
選中所有隱藏元素
17.:visible
選中所有可見元素
18.:button
選中所有按鈕
19.:checkbox
選中所有核取方塊的jq元素
20.:checked
$(":checked").val("haha")
選擇所有被選中的單選框,並且單選框不能新增背景和邊框,用於單選框和核取方塊,下拉框用:selected
21.js 物件
分三種jq物件 就是個自定義物件,但可以當做陣列來操作。
22. dom 物件和jq 物件互換
1.dom物件 換成jq 物件
$btn = $("obtn")
console.log($btn);
2.jq 物件轉成 dom 物件
兩種方式
1..get(0) 因為jq 物件相當於乙個陣列
console.log($btn.get(0));
或者console.log($btn[0]);
23.api 函式 就是那些語法
24.js 命名規範
1.o 代表原生的
2.$代表jq 物件
25.屬性選擇器:
選中 含有aa這個單詞的元素?
選中以aa為結尾的 dom元素
選中以aa為開頭的dom元素
選中不含有aa 的dom元素
//選中以aa 為字首的dom 元素?
26.
1.$("#div h1:first-child")
這句話的意思是選中div下面的第乙個孩子而且必須是h1。
2.$("#div h1:first of type")
選中div下第乙個型別是h1的dom 元素
3.$("#div h1:nth-child(2n)")選擇所有偶數
4.$("#div h1:nth-child(2n+1)")選擇所有奇數
27. 我有乙個ul 裡面各種li li不確定多少個,把他橫過來,根據裝置寬度不同,間隙相同,所有li 均分,第一列在最左邊 ,最後一列在最右邊......
1. 檢測不同的裝置用css3響應式設計
28.each()函式
var $div1 =$("#div1 li");
$div1.each(function());
用來遍歷jq元素但是需要用this來指向,並且那個$一定不要忘,是$(this)並不是this。
30..val(value)函式
想乙個jq元素中新增value 屬性 value=value(自己設的東西)。
31.1.toggle 函式
不傳引數的時候
toggle();
改變這個元素的顯示或者隱藏
toggle可以傳遞乙個函式來控制是隱藏還是顯示
這個引數是乙個布林值
jQuery選擇器整理
jquery物件訪問 1.each callback 以每個匹配的元素作為上下文來執行乙個函式,return false 停止迴圈 return true 跳至下乙個迴圈。來個例項 img each function 2.size 與length相同,都是返回jquery物件中元素的個數。img s...
JQuery選擇器 選擇器簡介
在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...
Jquery選擇器 基本選擇器
jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...