好程式設計師帶你認識“jQuery”

好程式設計師IT發表於2019-05-17

   好程式設計師 帶你認識 “jQuery” jQuery是JavaScript的一個類庫,$符號它對於jQuery他們是等價的,$(""li)找到所有的li。下面,跟著 好程式設計師 的腳步,去了解一下它的選擇器的一些主要功能。

  選擇器 :基本選擇器、層級選擇器、屬性選擇器與CSS類似。

   基本篩選器

  $('li:first') //第一個元素

  $('li:last') //最後一個元素

  $("tr:even") //索引為偶數的元素,從 0 開始

  $("trdd") //索引為奇數的元素,從 0 開始

  $("tr:eq(1)") //給定索引值的元素

  $("tr:gt(0)") //大於給定索引值的元素

  $("tr:lt(2)") //小於給定索引值的元素

  $(":focus") //當前獲取焦點的元素

  $(":animated") //正在執行動畫效果的元素

  first()

  last()

  next() nextAll()

  prev() prevAll()

  siblings 除了自身以外的數

  find() 空格 查詢後再元素 find(“p”)

  chilren() 查詢子代

  $(“li.box”) 等價於filter

   內容選擇器

  $("div:contains('nick')") //包含nick文字的元素

  $("td:empty") //不包含子元素或者文字的空元素

  $("div:has(p)") //含有選擇器所匹配的元素

  $("td:parent") //含有子元素或者文字的元素

   表單選擇器

  $(":input") //匹配所有 input, textarea, select 和 button 元素

  $(":text") //所有的單行文字框

  $(":password") //所有密碼框

  $(":radio") //所有單選按鈕

  $(":checkbox") //所有核取方塊

  $(":submit") //所有提交按鈕

  $(":reset") //所有重置按鈕

  $(":button") //所有button按鈕

  $(":file") //所有檔案域

  $("input:checked") //所有選中的元素

  $("select option:selected") //select中所有選中的option元素

   篩選器

  過濾

  $("p").eq(0) //當前操作中第N個jQuery物件,類似索引

  $('li').first() //第一個元素

  $('li').last() //最後一個元素

  $(this).hasClass("test") //元素是否含有某個特定的類,返回布林值

  $('li').has('ul') //包含特定後代的元素

  查詢

  $("div").children() //div中的每個子元素,第一層

  $("div").find("span") //div中的包含的所有span元素,子子孫孫

  $("p").next()    //緊鄰p元素後的一個同輩元素

  $("p").nextAll() //p元素之後所有的同輩元素

  $("#test").nextUntil("#test2") //id為"#test"元素之後到id為'#test2'之間所有的同輩元素,掐頭去尾

  $("p").prev() //緊鄰p元素前的一個同輩元素

  $("p").prevAll() //p元素之前所有的同輩元素

  $("#test").prevUntil("#test2") //id為"#test"元素之前到id為'#test2'之間所有的同輩元素,掐頭去尾

  $("p").parent() //每個p元素的父元素

  $("p").parents() //每個p元素的所有祖先元素,body,html

  $("#td1").parentsUntil("#td2") //id為"#td1"元素到id為'#td2'之間所有的父級元素,掐頭去尾

  $("div").siblings() //所有的同輩元素,不包括自己

  CSS操作

  樣式

  $("p").css("color"); //訪問檢視p元素的color屬性

  $("p").css("color","red"); //設定p元素的color屬性為red

  $("p").css({ "color": "red", "background": "yellow" });

  //設定p元素的color為red,background屬性為yellow(設定多個屬性要用{}字典形式)


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2644762/,如需轉載,請註明出處,否則將追究法律責任。

相關文章