1.js我們遇到的一些痛點(diǎn)：
- window.onload 事件有個(gè)事件覆蓋的問題，我們只能寫一個(gè)
- 代碼容錯(cuò)性差
- 瀏覽器兼容性問題
- 書寫很繁瑣，代碼量多
- 代碼很亂茅撞，各個(gè)頁(yè)面到處都是
- 動(dòng)畫效果秉颗，我們很難實(shí)現(xiàn)
在jQuery中得到很好的解決
jQuery就是javascript的一個(gè)庫(kù)，把我們常用的一些功能進(jìn)行了封裝澜建，方便我們來(lái)調(diào)用向挖，提高我們的開發(fā)效率。
注意：
jquery與js的區(qū)別：
- Javascript是一門編程語(yǔ)言炕舵，我們用它來(lái)編寫客戶端瀏覽器腳本何之。
- jQuery是javascript的一個(gè)庫(kù)，包含多個(gè)可重用的函數(shù)咽筋，用來(lái)輔助我們簡(jiǎn)化javascript開發(fā)
- jQuery能做的javascipt都能做到溶推，而javascript能做的事情，jQuery不一定能做到。
2.jQuery的基本使用
min：它是壓縮過(guò)的版本
區(qū)別：
我們開發(fā)過(guò)程中蒜危，會(huì)用未壓縮的版本虱痕，或者壓縮的。
項(xiàng)目上線的時(shí)候辐赞，我們要用壓縮過(guò)的版本部翘。
版本問題：
- 1.xxx 版本 jQuery-1.11.1.js
- 2.xxx 版本 不再支持IE6、7占拍、8
2.1引包
1.要把我們的jQuery源文件拿到我們的項(xiàng)目里面來(lái)
2.在我們的頁(yè)面中引用jQuery文件
如果沒有引用我們的jQuery源文件略就，會(huì)出現(xiàn)如下錯(cuò)誤。
2.2入口函數(shù)
兩種寫法：
$(document).ready(function(){});
$(function(){});
注意：
JS與jQuery入口函數(shù)的差別
- Js的window.onload = function(){}的事件處理程序是等到所有內(nèi)容晃酒，以及我們的外部圖片之類的文件加載完了之后表牢，才回去執(zhí)行
- jQuery的入口函數(shù) 是在 html所有標(biāo)簽都加載之后，就回去執(zhí)行贝次。
-
window.onload()事件和$(document).ready()事件的比
window.onload()=function(){}
如果使用多個(gè)window.onload(),則只有最后一個(gè)綁定的函數(shù)能被執(zhí)行,它將覆蓋前面所有window.onload()綁定的函數(shù)崔兴。
如果使用多個(gè)$(),則它們都能被執(zhí)行。
需要注意的是如果<body onload> body標(biāo)簽的onload事件已經(jīng)注冊(cè)了某個(gè)函數(shù) 則$()事件注冊(cè)的函數(shù)將不會(huì)被執(zhí)行
2.3事件處理程序
- 事件源
Js方式：document.getElementById(“id”)
jQuery方式：$(“#id”)
- 事件
Js方式 :document.getElementById(“id”).onclick
jQuery方式: $(“#id”).click
- 事件處理程序
Js 書寫方式:
Js方式 :document.getElementById(“id”).onclick = function(){
// 語(yǔ)句
}
jQuery 書寫方式:
$(“#id”).click(function(){
// 語(yǔ)句
});
3.jQuery的詳細(xì)介紹
3.1JS與jQuery入口函數(shù)的差別
- Js的window.onload事件是等到所有內(nèi)容蛔翅，以及我們的外部圖片之類的文件加載完了之后敲茄，才回去執(zhí)行
- jQuery的入口函數(shù) 是在 html所有標(biāo)簽都加載之后，就回去執(zhí)行山析。
3.2jquery的基本選擇器
- $(“#demo”) 選擇id為demo的第一個(gè)元素
$(“#demo”).css(“background”,”red”)
- $(“.liItem”) 選擇所有類名（樣式名）為liItem的元素
$(“.liItem”). css(“background”,”red”);
- $(“div”) 選擇所有標(biāo)簽名字為div的元素
$(“div”). css(“background”,”red”);
- $(“*”) 選擇所有元素 少用或配合其他選擇器來(lái)使用
$(“*”). css(“background”,”red”)
- $(“.liItem,div”) 選擇多個(gè)指定的元素堰燎，這個(gè)地方是選擇出了 .liItem元素和div元素
$(“.liItem,div”). css(“background”,”red”)
3.3jquery的其他選擇器
3.3.1層級(jí)選擇器
3.3.2過(guò)濾選擇器
主要通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選出所需要的Dom元素，按照不同的過(guò)濾規(guī)則笋轨，過(guò)濾選擇器可以分為基本過(guò)濾秆剪，內(nèi)容過(guò)濾，可見性過(guò)濾爵政，屬性過(guò)濾仅讽，子元素過(guò)濾和表單對(duì)象屬性過(guò)濾選擇器。
參考：http://www.cnblogs.com/hanyinglong/archive/2012/10/15/2724914.html
基本過(guò)濾選擇器
- :eq(index) index是從0開始的一個(gè)數(shù)字钾挟，選擇序號(hào)為index的元素洁灵。選擇第一個(gè)匹配的元素。
$(“l(fā)i:eq(1)”). css(“background”,”red”)
- :gt(index) Index 是從0開始的一個(gè)數(shù)字掺出，選擇序號(hào)大于index的元素
$(“l(fā)i:gt(2)”). css(“background”,”red”)
- :lt(index) Index是從0開始的一個(gè)數(shù)字徽千，選擇小于index 的元素
- :odd 選擇所有序號(hào)為奇數(shù)行的元素
$(“l(fā)i:odd”). css(“background”,”red”)
- :even 選擇所有序號(hào)為偶數(shù)的元素
$(“l(fā)i:even”). css(“background”,”red”)
- :first 選擇匹配第一個(gè)元素
$(“l(fā)i:first”). css(“background”,”red”)
- :last 選擇匹配的最后一個(gè)元素
$(“l(fā)i:last”). css(“background”,”red”)
可見性過(guò)濾選擇器
? :hidden-選取所有不可見的元素
? :visible-選取所有可見的元素
子元素過(guò)濾選擇器
? :nth-child(index/even/odd/equation)-選取每個(gè)元素下的第 index 個(gè)子元素或者奇偶元素，index 從 1 算起
? :first-child-選取每個(gè)父元素的第 1 個(gè)子元素
? :last-child-選取每個(gè)父元素的最后一個(gè)子元素
? :only-child-選取只有一個(gè)元素的元素
屬性過(guò)濾選擇器
- $(“a[href]”) 選擇所有包含href屬性的元素
$(“a[href]”). css(“background”,”red”)
- $(“a[href=’itcast’]”) 選擇href屬性值為itcast的所有a標(biāo)簽
$(“a[href=’itcast’]”). css(“background”,”red”)
- $(“a[href!=’baidu’]”) 選擇所有href屬性不等baidu的所有元素蛛砰，包括沒有href的元素
$(“a[href!=’baidu’]”). css(“background”,”red”)
- $(“a[href^=’web’]”) 選擇所有以web開頭的元素
$(“a[href^=’web’]”). css(“background”,”red”)
- $(“a[href$=’cn’]”) 選擇所有以cn結(jié)尾的元素
$(“a[href$=’cn’]”). css(“background”,”red”)
- $(“a[href*=’i’]”) 選擇所有包含i這個(gè)字符的元素罐栈，可以是中英文
$(“a[href*=’i’]”). css(“background”,”red”)
- $(“a[href][title=’我’]”) 選擇所有符合指定屬性規(guī)則的元素，都符合才會(huì)被選中泥畅。
$(“a[href][title=’我’]”). css(“background”,”red”)
