jquery特殊符號含意

jquery寫作方式:

               //完整的寫法
    jQuery(document).ready(function() { alert("Hello"); });


    //jQuery 可簡寫爲 $
    $(document).ready(function() { alert("Hello"); });


    //$(document) 可以簡寫爲 $()
    $().ready(function() { alert("Hello"); });


    //$(document).ready() 也可以簡寫爲 $()
    $(function() { alert("Hello"); });


window.onload與$(function(){})區別

window.onload() 發生在頁面載入完成時,

$(document).ready() 發生在頁面主體框架載入完成時(或許某個圖片還沒下載完);


基本選擇
代碼:

<div id="div1">AAA</div>
<div class="class1">BBB</div>
<span id="div3">CCC</span>

<div class="class2"><span>222</span></div>

<div class='class3'><span id='span2'>hello world</span></div>

<div class='class3'><label id='span2'>label</label></div>


根據 id 選擇$("#div1")

根據class選擇$(".class1")

根據標籤名選擇$('span')

選擇所有的對象$("*")

混合選擇$("#div1,.class1,span")

分層選擇$(".class2 span")或者$(".class2").find('span')

只從子層中選擇    $(".class2>span")

選擇所有緊跟在 div 後面的 span     $(".class2+span")

選擇 #id2 後面同一層級的所有(*)對象    $("#id2~*").

混合使用 $(".class3 label,.class2>span")

選擇同一層級的其他元素$("#div1").siblings();

選擇同一層級的其他 span $("#div1").siblings('span');


特殊字符含義

#  指示 id 

.  指示 class 
*  全選 
,  多選 
空格 後代 
>  子 
~  兄弟 
+  下一個 
:  子(多功能) 

()  函數式的過濾與查找

選取子對象

代碼

定位子對象

<h3>AAA</h3>

<ul> 

               <li>我那年深月久的苦樂年華</li>

    <li> “90後”應該補的課究竟有哪些?</li>

    <li>北京下的不是雪,而是“珍珠米</li>

             <li>一句“沒想過”讓我走出迷霧</li>

</ul>

<ul>

    <li> 麻辣生活,自信勇敢會是最給力!</li>

</ul>

<ul>

    <li>上海給力N日遊之奢華恆隆是這樣</li>

    <li>從這個世界走來一個小小的我--蟬想</li>

    <li>戀愛是不是一場明碼交易?</li>

</ul> 

獲取所有標題對象  $(":header")

獲取 first   $("li:first")或$("li").first()或$("li").get(0)

獲取每組的 first  $("li:first-child")或$("ul li:first-child")

獲取 last  $("li:last")或$("li").last()

獲取每組的 last $("li:last-child")或$("ul li:last-child")

獲取第幾個 $("li:eq(2)")或$("li").eq(2)  //eq 是 0 開始

獲取第幾個之後的 $("li:gt(2)") //gt是0開始

獲取第幾個之前的$("li:lt(2)")//lt是0開始

獲取索引數是偶數的 $("li:even")//even是0開始

獲取索引數是奇數的$("li:odd")//odd是0開始

獲取每小組第偶數個$("li:nth-child(even)")//nth-child是1開始

獲取每小組第奇數個$("li:nth-child(odd)")//nth-child是1開始

獲取每小組第幾個:$("li:nth-child(2)")//nth-child是1開始的

表達式獲取第幾個$("li:nth-child(3n-1)")//n是從1開始的

如果是父元素中唯一的子元素 $("li:only-child")

not是取其反  $("li:not(li:only-child)")

根據屬性來選擇

代碼

<div id="names">names</div>

<div id="hello"  name='ss'>hello</div>

<div id="spans"  name='spanname'><span>中國人</span></div>

<div id="worlds">worlds</div>

<div id="empty"></div>

指定元素包含id的$("div[id]")

指定元素中不包含id的$("div:not([id])")

名稱爲ss的元素 $("div[name='ss']")

名稱不爲ss的元素$("div[name!='ss']")

元素符合以world開始的$("div[id^='world']")

以o結束的$("div[id$='o']")

id 中包含ll的$("div[id*='ll']")

多個條件的,有id屬性並且name中包含d的$("div[id][name*='d']")

查找內容中包括world的$("div:contains('world')")

查找包括span 的$("div:has('span')")

查找空的div     $("div:empty")

查找父元素$("div:parent")

hidden和visible分別對應隱藏和顯示的元素

$("div:hidden")//獲取隱藏的元素

$("div:visible")//獲取顯示的元素

表單元素的獲取

:input匹配  <input />      <select></select>    <textarea></textarea>   <button />

:text匹配<input type='text' />

:password匹配<input type='password' />

:radio 匹配<input type='radio' />

:checkbox 匹配<input type='checkbox' />

:submit 匹配<input type='submit' />

:button 匹配<input type='button' /> <button />

:reset 匹配<input type='reset' />

發佈了56 篇原創文章 · 獲贊 24 · 訪問量 15萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章