jQuery選擇器,篩選器,屬性選擇器

jQuery

jQuery介紹

  1. jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
  2. jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互,可以極大地簡化JavaScript編程。它的宗旨就是:「Write less, do more.「

jQuery的優點

  1. 一款輕量級的JS框架。jQuery核心js文件才幾十kb,不會影響頁面加載速度。
  2. 豐富的DOM選擇器,jQuery的選擇器用起來很方便,好比要找到某個DOM對象的相鄰元素,JS可能要寫好幾行代碼,而jQuery一行代碼就搞定了,再好比要將一個表格的隔行變色,jQuery也是一行代碼搞定。
  3. 鏈式表達式。jQuery的鏈式操做能夠把多個操做寫在一行代碼裏,更加簡潔。
  4. 事件、樣式、動畫支持。jQuery還簡化了js操做css的代碼,而且代碼的可讀性也比js要強。
  5. Ajax操做支持。jQuery簡化了AJAX操做,後端只需返回一個JSON格式的字符串就能完成與前端的通訊。
  6. 跨瀏覽器兼容。jQuery基本兼容瞭如今主流的瀏覽器,不用再爲瀏覽器的兼容問題而傷透腦筋。
  7. 插件擴展開發。jQuery有着豐富的第三方的插件,例如:樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件,而且用jQuery插件作出來的效果很炫,而且能夠根據本身須要去改寫和封裝插件,簡單實用。

jQuery內容:

  1. 選擇器
  2. 篩選器
  3. 樣式操做
  4. 文本操做
  5. 屬性操做
  6. 文檔處理
  7. 事件
  8. 動畫效果
  9. 插件
  10. each、data、Ajax

下載連接:jQuery官網css

中文文檔:jQuery AP中文文檔html

jQuery版本

  • 1.x:兼容IE678,使用最爲普遍的,官方只作BUG維護,功能再也不新增。所以通常項目來講,使用1.x版本就能夠了,最終版本:1.12.4 (2016年5月20日)
  • 2.x:不兼容IE678,不多有人使用,官方只作BUG維護,功能再也不新增。若是不考慮兼容低版本的瀏覽器可使用2.x,最終版本:2.2.4 (2016年5月20日)
  • 3.x:不兼容IE678,只支持最新的瀏覽器。須要注意的是不少老的jQuery插件不支持3.x版。目前該版本是官方主要更新維護的版本。

維護IE678是一件讓人頭疼的事情,通常咱們都會額外加載一個CSS和JS單獨處理。值得慶幸的是使用這些瀏覽器的人也逐步減小,PC端用戶已經逐步被移動端用戶所取代,若是沒有特殊要求的話,通常都會選擇放棄對678的支持。前端

jQuery對象

jQuery對象就是經過jQuery包裝DOM對象後產生的對象。jQuery對象是 jQuery獨有的。若是一個對象是 jQuery對象,那麼它就可使用jQuery裏的方法:例如$(「#i1」).html()。jquery

$("#i1").html()的意思是:獲取id值爲 i1的元素的html代碼。其中 html()是jQuery裏的方法。編程

至關於: document.getElementById("i1").innerHTML;後端

雖然 jQuery對象是包裝 DOM對象後產生的,可是 jQuery對象沒法使用 DOM對象的任何方法,同理 DOM對象也沒不能使用 jQuery裏的方法。瀏覽器

一個約定,咱們在聲明一個jQuery對象變量的時候在變量名前面加上$:框架

var $variable = jQuery對像
var variable = DOM對象
$variable[0]//jQuery對象轉成DOM對象

拿上面那個例子舉例,jQuery對象和DOM對象的使用:less

$("#i1").html();//jQuery對象可使用jQuery的方法
$("#i1")[0].innerHTML;// DOM對象使用DOM的方法

 

 

 

 

 

jQuery基礎語法

$(selector).action()動畫

查找標籤

基本選擇器

id選擇器:

$("#id")

標籤選擇器:

$("tagName")

class選擇器:

$(".className")

配合使用:

$("div.c1")  // 找到有c1 class類的div標籤

全部元素選擇器:

$("*")

組合選擇器:

$("#id, .className, tagName")

層級選擇器:

x和y能夠爲任意選擇器

$("x y");// x的全部後代y(子子孫孫)
$("x > y");// x的全部兒子y(兒子)
$("x + y")// 找到全部緊挨在x後面的y
$("x ~ y")// x以後全部的兄弟y

基本篩選器:

複製代碼
複製代碼
:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配全部索引值爲偶數的元素,從 0 開始計數
:odd // 匹配全部索引值爲奇數的元素,從 0 開始計數
:gt(index)// 匹配全部大於給定索引值的元素
:lt(index)// 匹配全部小於給定索引值的元素
:not(元素選擇器)// 移除全部知足not條件的標籤
:has(元素選擇器)// 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)
複製代碼
複製代碼

 

 

 

 

 

 

 

例子:

$("div:has(h1)")// 找到全部後代中有h1標籤的div標籤
$("div:has(.c1)")// 找到全部後代中有c1樣式類的div標籤
$("li:not(.c1)")// 找到全部不包含c1樣式類的li標籤
$("li:not(:has(a))")// 找到全部後代中不含a標籤的li標籤

屬性選擇器:

[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於

 

 

例子:

複製代碼
複製代碼
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標籤
$("input[type!='text']");// 取到類型不是text的input標籤
複製代碼
複製代碼
相關文章
相關標籤/搜索