JQuery-学习笔记01【基础——JQuery基础】
- Java后端 學(xué)習(xí)路線 筆記匯總表【黑馬程序員】
目錄
第1節(jié) JQuery基礎(chǔ)
今日內(nèi)容
JQuery_概念
JQuery_快速入門
JQuery_對象和JS對象區(qū)別與轉(zhuǎn)換
JQuery_事件綁定&入口函數(shù)&樣式控制
JQuery文檔——jQuery1.11.3_hemin.chm
jQuery 選擇器分類
第1節(jié) JQuery基礎(chǔ)
今日內(nèi)容
1. JQuery（JavaScript框架）基礎(chǔ)：
?? ?1. 概念
?? ?2. 快速入門
?? ?3. JQuery對象和JS對象區(qū)別與轉(zhuǎn)換
?? ?4. 選擇器
?? ?5. DOM操作
?? ?6. 案例
JQuery_概念
JQuery 基礎(chǔ)
1. 概念： 一個JavaScript框架(半成品軟件)，簡化JS開發(fā)。
?? ?* jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設(shè)計的宗旨?? ?是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計模式，優(yōu)?? ?化HTML文檔操作、事件處理、動畫設(shè)計和Ajax交互。
?? ?* JavaScript框架：本質(zhì)上就是一些js文件，封裝了js的原生代碼而已。
2. 快速入門
3. JQuery對象和JS對象區(qū)別與轉(zhuǎn)換
4. 選擇器：篩選具有相似特征的元素(標簽)
5. DOM操作
6. 案例
JQuery_快速入門
JQuery 基礎(chǔ)
1. 概念
2. 快速入門
?? ?1. 步驟：
?? ??? ?1. 下載JQuery
?? ??? ??? ?* 目前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，只支持最新的瀏覽器。除非特殊要求，
?? ??? ??? ??? ??? ? 一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。
?? ??? ??? ??? ??? ? 目前該版本是官方主要更新維護的版本。最新版本：3.2.1（2017年3月20日）
?? ??? ??? ?* jquery-xxx.js 與 jquery-xxx.min.js區(qū)別：
?? ??? ??? ??? ?1. jquery-xxx.js：開發(fā)版本。給程序員看的，有良好的縮進和注釋。體積大一些。
?? ??? ??? ??? ?2. jquery-xxx.min.js：生產(chǎn)版本。程序中使用，沒有縮進。體積小一些，程序加載更快。
?? ??? ?2. 導(dǎo)入JQuery的js文件：導(dǎo)入min.js文件
?? ??? ?3. 使用
?? ??? ??? ?var div1 = $("#div1");
?? ??? ??? ?alert(div1.html());
3. JQuery對象和JS對象區(qū)別與轉(zhuǎn)換
4. 選擇器：篩選具有相似特征的元素(標簽)
5. DOM操作
6. 案例
JQuery_對象和JS對象區(qū)別與轉(zhuǎn)換
JQuery對象和JS對象區(qū)別與轉(zhuǎn)換
? ? 1. JQuery對象在操作時，更加方便。
? ? 2. JQuery對象和js對象方法不通用的。
? ? 3. 兩者相互轉(zhuǎn)換
? ? ? ? * jq -- > js : jq對象[索引] 或者 jq對象.get(索引)
? ? ? ? * js -- > jq : $(js對象)
JQuery_事件綁定&入口函數(shù)&樣式控制
JQuery 基礎(chǔ)
1. 概念
2. 快速入門
3. JQuery對象和JS對象區(qū)別與轉(zhuǎn)換
4. 選擇器：篩選具有相似特征的元素(標簽)
?? ?1. 基本操作學(xué)習(xí)：
?? ??? ?1. 事件綁定
?? ??? ??? ?//1.獲取b1按鈕
? ? ? ? ? ? $("#b1").click(function(){
? ? ? ? ? ? ? ? alert("abc");
? ? ? ? ? ? });
?? ??? ?2. 入口函數(shù)
?? ??? ??? ? $(function () {
? ??? ??? ??? ? });
?? ??? ??? ? window.onload ?和 $(function) 區(qū)別
? ? ? ? ? ? ? ? ?* window.onload 只能定義一次,如果定義多次，后邊的會將前邊的覆蓋掉
? ? ? ? ? ? ? ? ?* $(function)可以定義多次的。
?? ??? ?3. 樣式控制：css方法
?? ??? ??? ? // $("#div1").css("background-color","red");
? ? ? ?? ??? ?$("#div1").css("backgroundColor","pink");
?? ?2. 分類 ...
5. DOM操作
6. 案例
jQuery選擇器（基本操作學(xué)習(xí)）1. 事件綁定
??
jQuery選擇器（基本操作學(xué)習(xí)）2. 入口函數(shù)
window.onload ?和 $(function) 區(qū)別：
?? ?* window.onload 只能定義一次,如果定義多次，后邊的會將前邊的覆蓋掉
?? ?* $(function)可以定義多次的。
??
jQuery選擇器（基本操作學(xué)習(xí)）3. 樣式控制
JQuery文檔——jQuery1.11.3_hemin.chm
jQuery 選擇器分類
1. 基本選擇器
?? ??? ??? ?1. 標簽選擇器（元素選擇器）
?? ??? ??? ??? ?* 語法： $("html標簽名") 獲得所有匹配標簽名稱的元素
?? ??? ??? ?2. id選擇器?
?? ??? ??? ??? ?* 語法： $("#id的屬性值") 獲得與指定id屬性值匹配的元素
?? ??? ??? ?3. 類選擇器
?? ??? ??? ??? ?* 語法： $(".class的屬性值") 獲得與指定的class屬性值匹配的元素
?? ??? ??? ?4. 并集選擇器：
?? ??? ??? ??? ?* 語法： $("選擇器1,選擇器2....") 獲取多個選擇器選中的所有元素
2. 層級選擇器
?? ??? ??? ?1. 后代選擇器
?? ??? ??? ??? ?* 語法： $("A B ") 選擇A元素內(nèi)部的所有B元素?? ??? ?
?? ??? ??? ?2. 子選擇器
?? ??? ??? ??? ?* 語法： $("A > B") 選擇A元素內(nèi)部的所有B子元素
3. 屬性選擇器
?? ??? ??? ?1. 屬性名稱選擇器?
?? ??? ??? ??? ?* 語法： $("A[屬性名]") 包含指定屬性的選擇器
?? ??? ??? ?2. 屬性選擇器
?? ??? ??? ??? ?* 語法： $("A[屬性名='值']") 包含指定屬性等于指定值的選擇器
?? ??? ??? ?3. 復(fù)合屬性選擇器
?? ??? ??? ??? ?* 語法： $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器
4. 過濾選擇器
?? ??? ??? ?1. 首元素選擇器?
?? ??? ??? ??? ?* 語法： :first 獲得選擇的元素中的第一個元素
?? ??? ??? ?2. 尾元素選擇器?
?? ??? ??? ??? ?* 語法： :last 獲得選擇的元素中的最后一個元素
?? ??? ??? ?3. 非元素選擇器
?? ??? ??? ??? ?* 語法： :not(selector) 不包括指定內(nèi)容的元素
?? ??? ??? ?4. 偶數(shù)選擇器
?? ??? ??? ??? ?* 語法： :even 偶數(shù)，從 0 開始計數(shù)
?? ??? ??? ?5. 奇數(shù)選擇器
?? ??? ??? ??? ?* 語法： :odd 奇數(shù)，從 0 開始計數(shù)
?? ??? ??? ?6. 等于索引選擇器
?? ??? ??? ??? ?* 語法： :eq(index) 指定索引元素
?? ??? ??? ?7. 大于索引選擇器?
?? ??? ??? ??? ?* 語法： :gt(index) 大于指定索引元素
?? ??? ??? ?8. 小于索引選擇器?
?? ??? ??? ??? ?* 語法： :lt(index) 小于指定索引元素
?? ??? ??? ?9. 標題選擇器
?? ??? ??? ??? ?* 語法： :header 獲得標題（h1~h6）元素，固定寫法
5. 表單過濾選擇器
?? ??? ??? ?1. 可用元素選擇器?
?? ??? ??? ??? ?* 語法： :enabled 獲得可用元素
?? ??? ??? ?2. 不可用元素選擇器?
?? ??? ??? ??? ?* 語法： :disabled 獲得不可用元素
?? ??? ??? ?3. 選中選擇器?
?? ??? ??? ??? ?* 語法： :checked 獲得單選/復(fù)選框選中的元素
?? ??? ??? ?4. 選中選擇器?
?? ??? ??? ??? ?* 語法： :selected 獲得下拉框選中的元素
總結(jié)
以上是生活随笔為你收集整理的JQuery-学习笔记01【基础——JQuery基础】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Filter和Listener-学习笔记
- 下一篇： JQuery-学习笔记02【基础——JQ