jQuery入門基礎知識點彙總

什麼是jQuery?
jquery 是 js的封裝的一個框架 快速開發

• 優點：寫的少 做的比較多 處理瀏覽器之間的兼容性
• 把js的大量語法進行封裝
• 大量的方法
• 大量的學習方法和dom之類
  jquery庫 在head body裏面都是可以引入
• 在寫jquery 代碼的時候先引入jquery文件（庫）
• 才能去寫常規的jquery代碼
• （先跑庫代碼 在走寫的jquery代碼）

  <script src="jquery/jquery.js"></script>
  window.jQuery==window.$=jQuery

  所以在jquery裏面書寫是用$

jquery dom獲取的時候注意元素是否初始化.若不考慮是否初始化 需要以下加載函數
注意：jquery 加載函數 類似 瀏覽器的加載完成事件window.onload

$(document).ready(function () {
    console.log("加載完成");
    console.log($("#btn"));
});

簡寫爲

$(function(){
})

dom元素獲取方式
注意：jquery對象返回的是一個集合 直接使用
jquery 代碼可以進行隱式迭代器 （可以進行一堆的操作）
1）基本選擇器
id class 元素 * 複合元素選取$("button,input")
2）層次選擇器

獲取子元素 +獲取下一個元素 ~獲取當前元素後面的所有元素 以及空格
3）基本篩選器
first last not除了當前的其他所有元素
even odd 按照索引的奇數偶數來獲取
eq gt lt獲取等於 大於 小於索引的元素
header獲取所有的h標籤
focus 獲得獲焦的元素
root 直接獲取html
4）內容選擇器
contains 包含某內容
empty空元素
has包含某個元素
parent 匹配的元素必須是父元素
5）可見性
hidden隱藏
visible顯示
6）屬性
[attribute]包含某屬性的元素
[attribute=value]//指定獲取某元素滿足屬性=屬性值
[attribute!=value]//屬性不等於該值的或者不含有該屬性的
[attribute^=value]//以什麼開頭
[attribute$=value]//以什麼結尾
[attribute=value]//包含某值
$("button[attrSel1][attrSel2][attrSelN]")三者都具備都有的元素
$("button[id='btn'][class='btn']")//兩個都要滿足與的關係
$("button[id!='btn'][class!='btn']");//有id就考慮id是不是不等於該值 沒有id就只考慮class是否滿足條件 若滿足就可獲取
7)子元素過濾選擇器
:first-child 第一個孩子
:first-of-type1.9+ 如果寫指定標籤 獲取指定標籤裏面的第一個 如果沒寫 獲取所有類型標籤裏面的第一個
:last-of-type1.9+ 匹配同類型的最後一個
:nth-child 第幾個孩子 1開始
:nth-last-child()1.9+ 倒着說第幾個孩子 1開始
:nth-last-of-type()1.9+ 後往前 按類型獲取標籤裏面的最後一個
:nth-of-type()1.9+ 前往後 按類型獲取標籤裏面的第n個
:only-child 匹配的元素必須是父元素的唯一子元素
:only-of-type1.9+/ 獲取父元素裏面同類型標籤裏面只有唯一的一個標籤 全部獲取到
8)表單元素選擇器
:input 匹配所有 input, textarea, select 和 button 元素
:text 獲取單行文本框的
:password 獲取密碼框的
:radio //獲取單選按鈕的
:checkbox //獲取複選框的
:submit //獲取表單提交的
:image
:reset 獲取重置按鈕
:button 獲取button
:file 獲取文件路徑