jQuery? 學習筆記 （一）


一、選擇器

1. DOM對象

獲取DOM對象? 舉例：
var div=document.getElementById("testDiv");
var div=document.getElementByTagName("div");



2.jQuery包裝集

獲取jQuery包裝集 舉例：
var jQueryObject=$("#testDiv");



3.DOM對象與jQuery對象的轉換

DOM 轉jQuery包裝集：
var domToJQueryObject=$(div);

用索引器訪問其中一個元素(jQuery轉DOM)：
var domObject=$("#testDiv")[0];

通過索引器返回的不是jQuery包裝集，而是一個DOM對象！
each()遍歷方法中this也是DOM元素：
$("#testDiv").each(function(){alert(this)})
使用jQuery方法操作DOM對象：
$("#testDiv").each(function(){$(this).html("修改內容")})

jQuery選擇器
就是一個便是特殊語義的字符串.只要把選擇器字符串傳入上面的方法中就能選擇不同的dom對象，并且以jQuery包裝集方式返回。

基礎選擇器：
#id??????????????????????? $("divId")選擇ID為divId的元素
element???????????????? $("a")選擇所有<a>元素
.class??????????????????? $(".bgRed")選擇所有CSS類為bgRed的元素
*????????????????????????? $("*")選擇頁面所有元素

層次選擇器 Hierarchy：
ancestor descendant????????????? $(".bgRed div") 選擇CSS類為bgRed的元素中的所有<div>元素。
parent>child????????????????????????? $(".myList>li")選擇CSS類為myList元素中的直接子節點<li>對象。
prev+next???????????????????????????? $("#hibius+img")選在id為hibiscus元素后面的img對象。
prev~siblings??????????????????????? $("#someDiv~[title]")選擇id為someDiv的對象后面所有帶有title屬性的元素。

基本過濾器 Basic Filters
:first??????????????????????????????????? 查找表格的第一行：:$("tr:first")
:last??????????????????????????????????? 查找表格的最后一行:$("tr:last")
:not(selector)????????????????????? 查找所有為選中的input元素：$("input:not(:checked):)
:even????????????????????????????????? 查找表格的2 4 6 行: $("tr:even")
:odd?????????????????????????????????? 查找表格的1 3 6行：$("tr:odd")
:eq(index)?????????????????????????? 查找第二行：$("tr:eq(1)")
:gt(index)??????????????????????????? 查找第二第三行，即索引值是1和2，也就是比0大：$(tr:gt(0)")
:lt(index)???????????????????????????? 查找第一第二行，即索引值是0和1，也就是比2小：$("tr:lt(2)")
:header?????????????????????????????? 給頁面所有標題加上背景色：$(":header").css("background","#eee");
:annimated????????????????????????? 匹配所有正在執行動畫效果的元素。只有對不在執行效果的元素執行一個動畫特效：
????????????????????????????????????????? $("#run").click(function(){$("div:not(:animated)").animate({left:"+=20"},1000);});

內容過濾器　Content Filters
:contains(tesxt)??????????????????? 查找所有包含"John"的div元素：$("div:contains('John')")
:empty??????????????????????????????? 查找所有不包含子元素或者文本的空元素：$("td:empty")
:has(selector)????????????????????? 給所有包含p元素的div元素添加一個test類：$("div:has(p)".addClass("test");
:parent??????????????????????????????? 查找所有含有子元素或者文本的td元素：$("td:parent")

可見性過濾器 Visibility Filters
:hidden??????????????????????????????? 查找所有看不見的tr元素：$("tr:hidden")
:visible???????????????????????????????? 查找所有可見的tr元素：$("tr:visible")

屬性過濾器 Attribute Filters
[attribute]???????????????????????????? 查找所有含有id屬性的div元素：$("div[id]")
[attribute=value]?????????????????? 查找所有name屬性石newletter的input元素：
??????????????????????????????????????????? $("input[name='newsletter']").attr("checked",true);
[attribute$=value]???????????????? 查找所有name以'letter'結尾的input元素：$("input[name$='letter']")
[attribute*=value]???????????????? 查找所有name包含'man'的input元素：$("input[name*='man']")
[attribute^=value]???????????????? 查找所有name以news開頭的input元素：$("input[name^='news']")
[attributeFilter][attribute Filter2]??????????? 查找所有含有id屬性，并且它的name屬性是以man結尾的：
??????????????????????????????????????????????????????????? $("input[id][name$='man']")

子元素過濾器 Child Filters
:nth-child(index/even/odd/equation)??????? 在每個ul查找2個li：$("ul li:nth-child(2)")
:first-child?????????????????????????????????????????????? 匹配第一個子元素
:last-child??????????????????????????????????????????????? 匹配最后一個子元素
:only-child?????????????????????????????????????????????? 如果某個元素是父元素中唯一的元素就匹配

表單選擇器 Forms Selectors
:input????????????????????????????????????????????????????? 查找所有的input元素：$(":input")
:text??????????????????????????????????????????????????????? 查找所有文本框：$("text")
:password?????????????????????????????????????????????? 查找所有密碼框：$(":password")
:radio????????????????????????????????????????????????????? 查找所有單選按鈕：$(":radio")
:checkbox?????????????????????????????????????????????? 查找所有復選框：$(":checkbox")
:submit??????????????????????????????????????????????????? 查找所有提交按鈕：$(":submit")
:p_w_picpath???????????????????????????????????????????????????? 查找所有圖像域：$(":p_w_picpath")
:reset????????????????????????????????????????????????????? 查找所有重置按鈕：$(":reset")
:button??????????????????????????????????????????????????? 查找所有按鈕：$(":button")
:file???????????????????????????????????????????????????????? 查找所有文件域：$(":file")

表單過濾器 Form Filters
:enabled??????????????????????????????????????????????? 查找所有可用的input元素：$("input:enabled")
:disabled??????????????????????????????????????????????? 查找所有不可用的input元素：$("input:disabled")
:checked??????????????????????????????????????????????? 查找所有選中的復選框元素：$("input:checked")
:selected???????????????????????????????????????????????? 查找素有選中的選項元素：$("select option:selected")

轉載于:https://blog.51cto.com/ht329/533758

總結

以上是生活随笔為你收集整理的jQuery 学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。