jQuery

jQuery 是一個高效、精簡并且功能豐富的 JavaScript 工具庫
由John Resig 在 2006 年 1 月，jQuery 正式發布
query 本身是選擇的意思，主要對 JavaScript 中的選擇元素的方法進行了大量的優化，

版本發展

1.X：兼容 IE6/7/8，是作業中最常使用的，學習 1.12 版本，
2.X：不兼容 IE6/7/8，多用于 jQuery 官方調整 bug 使用，作業中不使用，
3.X：不兼容 IE6/7/8，只能在高版本瀏覽器中使用，是現在 jQuery 官方主要的維護升級的版本，
http://jquery.com/download/ 或 https://www.bootcdn.cn/jquery/
使用 jQuery 程序，可以參考 API 應用手冊

jQuery 常見操作

1.$() 方法

在 DOM 操作中，基本都是從獲取元素開始的,jQuery 中封裝了一個更加強大的獲取元素方法 $()

在 jQuery 中，只有一個全域變數 $,這是 jQuery 的一大特點，避免了全域變數的污染，
最開始變數不叫做 $，叫做 jQuery() 方法，在庫中兩個名字是并存的，都可以使用，
經典報錯：$ 未定義，此時可能是沒有引入jq檔案或者是檔案路徑有問題
例：通過類選擇器獲取元素
$('.box')

2.jQuery 物件

$() 方法獲取到的內容叫做 jQuery 物件
內部封裝了大量的屬性和方法,比如 .css() 和 .html() 和 .animate() 等方法都是 jQuery 物件的方法，
通過 $() 獲取的元素是一組元素，進行操作時是批量操作，

// 獲取所有標簽為p的元素,改變背景顏色，屬名和屬性值都是字串型別
$('p').css('backgroundColor', 'yellow');
// 更改標簽內容
$('p').html('lalala');
// 設定影片，{ }內寫變化后的屬性，2000為間，單位是毫秒
$('p').animate({
 'width': 1000
}, 2000);

jQuery 物件和原生 js 物件

區別
1. jQuery 物件得到后，只能使用 jQuery 物件的方法，不能使用原生 js 元素物件的方法，
2. 原生 JS 物件也不能使用 jQuery 的方法，
3. jQuery 物件實際是一個類陣列物件，內部包含所有的獲取的原生 js 物件，以及大量的 jQuery 的方法和屬性，
獲取 jQuery 物件中原生 js 物件的個數的方法
1. $().length
  $('p').length
2. $().size()
  $('p').size()

互相轉換

jQuery 轉原生：直接利用陣列下標方式，得到 jQuery 封裝的原生物件，

// 宣告一個變數表示用jq獲取的p 物件類陣列
let $ps = $('p')
// 通過陣列下標方式可以獲取到js原生對 象,就可以使用js 原生物件的方法了
$ps[0].style.color = 'red'

原生轉 jQuery：將原生物件用 $() 方法包裹即可

let op = document.getElementsByTagName('div')[0]
$(op).css('backgroundColor', 'skyblue')

jQuery 選擇器和選擇方法

使用 CSS2.1 和 CSS3 中的選擇器，都可以傳入$()
- 引數：必須是字串格式的選擇器，
  $('p').html('woshishuoyoude') 所有的 p
  $('div p').html('我是box里的p') div 里的 p
  $('input:disabled').css('color', 'black') 選中的是被禁用的(設定了disabled屬性)input
  $('input:enabled').css('color', 'black') 選中的是沒被禁用的(沒設定disabled屬性)input
  $(':input').css('color', 'yellow') 選中所有表單元素
jQuery 中新增的自己的選擇器
篩選選擇器，也叫過濾選擇器
- 用法：在基礎選擇器后面增加一些篩選的單詞，篩選出前面選擇器的選中內容中一部分，或者可以作為高級選擇器的一部分，
- 常用：
  $(":first") 第一個
  $(":last") 最后一個
  $(":eq(index)") 下標為 index 的項
  $(":gt(index)") 大于下標為 index 的項
  $(":lt(index)") 小于下標為 index 的項
  $(":odd") 下標為奇數的項
  $(":even") 下標為偶數的項
  $(":not(selector)") 去除所有與給定選擇器匹配的元素
  $('p:not(:first)').css('background-color', 'yellow') 選中去掉第一個 p 后剩下的所有p
篩選的方法
- 也叫過濾方法，jQuery 中除了用選擇器選擇元素，jQuery 物件內還封裝了一些對應的篩選方法，
- 常用：
  $(“p”).first() ：選中被選中p中的第一個
  $(“p”).last() ：選中被選中p中的最后一個
  $(“p”).eq(3) ：選中下標為3的p

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289608.html

標籤：其他

上一篇：JavaScript--JS中函式名后面的括號加與不加的區別和作用

下一篇：關于 JavaScript 中 this 指向的理解

JQuery獲取元素

jQuery

版本發展

jQuery 常見操作

1.$() 方法

2.jQuery 物件

jQuery 物件和原生 js 物件

jQuery 選擇器 和 選擇方法

jQuery 選擇器和選擇方法