jQuery基礎之一

時間 2019-12-11

標籤 jquery 基礎之一欄目 JQuery 简体版

原文原文鏈接

jQuery基礎之一

初識jQuery

jQuery封裝JavaScript中多個好用的函數成爲並造成代碼庫，
操做時也更符合咱們的習慣，而且減小了瀏覽器之間的兼容性。javascript

引入 本地 <script src="jquery.js" type="text/javascript"></script> 聯網 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

jQuery基礎選擇器

選擇器
    選擇網頁中的DOM元素,精確更改網頁中各個DOM元素的CSS屬性等

    jQuery中的基礎選擇器很相似於CSS

普通選擇器

標籤選擇器 如：$("div") id 選擇器 $("#ID") .class 選擇器 $(".className") * 選擇器 $("*") 獲取網頁中的所有元素包括<head>,<body> 技巧：如獲取div標籤下的所有子元素 $("div *") slec1,slect2,selecN 選擇器 $("slec1,slect2,selecN") 請獲取選擇器slec1,slect2,selecN選擇的元素 實例: $("div,.red,#one")==$("div")+$(".red")+$("#one") 注意： 選擇器之間用","隔開,只有一個選引號

DOM層級以內

prev+next選擇器 $("prev+next") 查找與"prev"元素緊鄰的下一個"next"元素 實例： $("div+p") 釋義:查找與div同一DOM層級的下面的第一個p元素 prev~siblings選擇器 相似於prev+next只不過是後面全部的"siblings"元素

DOM層級之間

ance desc 選擇器 ance==ancestor desc==descendant祖先子孫選擇器 實例： $("div p") 將獲取頁面中全部div下全部p元素 注意： ance desc之間爲一個空格 獲取的是全部的desc後代元素 不單單是第一代子元素 parent>child 選擇器 $("parent>child") 相似於祖先子孫選擇器但只是parent的第一代孩子

jQuery過濾性選擇器

過濾性選擇器是在基礎選擇器的基礎上,在對得到的元素對象加以篩選。jquery

注意：下列全部的過濾性選擇器 緊鄰前面的基礎性選擇器(之間沒有空格) 全部過濾性選擇器都不能獨立存在,前面要有基礎選擇器

普經過濾性選擇器

:first 過濾性選擇器 從已經獲取到的全部元素中只選擇第一個 實例： $("li:first") 從已經獲取到的全部li標籤中只選擇第一個 :last 過濾性選擇器 同:first

:eq(index) 過濾選擇器 從一組標籤中選擇一個任意的一個 實例： $("li:eq(3)") 釋義：從已經獲取到的全部li標籤中只選擇第四個 :contains(text) 過濾選擇器 對已經獲取到的元素再次選擇,只保留含有text文本的元素 實例: $("li:contains('土豪')") 釋義：選擇li標籤內部含有"土豪"的li標籤 注意： 當具備雙重引號時必須是單雙引號一塊兒 不能只有單引號或只有雙引號 contains具備"s" :has(selector) 過濾選擇器 獲取選擇器中包含指定selector的全部元素 實例： $("li:has('p')") 釋義：獲取包含p標籤的全部li標籤

屬性過濾選擇器

[attribute=value] 屬性選擇器 實例： $("li[title='黛玉']") 獲取title的屬性值爲"黛玉"的li標籤 [attribute!=value] 屬性選擇器 取反[attribute=value] [attribute*=value] 屬性選擇器 實例: $("li[title*='最']") 獲取title的屬性值中只要包含"最"字便可的全部li標籤

特殊屬性

:hidden 過濾選擇器 獲取指定的全部具備隱藏屬性的元素 實例： $("p:hidden") 釋義:獲取全部具備display:none屬性的p標籤 :visible 過濾選擇器 與:hidden相反

子元素位置

:first-child 子元素過濾選擇器 實例: $("li:first-child") 只獲取li是第一個子孩子的li標籤 :last-child 子元素過濾選擇器 實例: $("li:first-child") 只獲取li是最後一個子孩子的li標籤

jQuery表單選擇器

針對表單元素設置的選擇器 注意： 表單元素的過濾選擇器與前面的基礎選擇器之間具備空格 且全部的基礎選擇器都是獲取的整個表單

普通選擇器瀏覽器

:input 獲取所有的表單元素 實例 $("form :input") 獲取表單的全部子元素 :text 獲取表單中所有的單行文本框 <input type="text" /> 實例 $("form :text") :password 獲取密碼框

選擇框選擇器

:radio 獲取所有單選按鈕 :checkbox 獲取所有複選框

按鈕選擇器

:submit 實例 $("#frmTest input:submit") 注意： 獲取提交按鈕時,前面要有input :button 獲取所有的<button>

狀態選擇器

:checked 獲取如單選框,複選框，下拉列表框等處於該表單下的 選中狀態的所有元素 :selected 只獲取<select>中處於選中狀態的option 實例： $("#frmTest :selected")

相關標籤：JavaScript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。