JQuery概述
- JQuery：JavaScript Query(Js查詢)
它是一個輕量的, 免費開源的JS函數(shù)庫, 能夠極大的簡化JS代碼
- JQuery優(yōu)勢
(1)可以極大的簡化JS代碼
(2)可以像css一樣獲取頁面元素
(3)可以操作CSS屬性來控制頁面的效果
(4)可以兼容常用的瀏覽器
在JS中少數(shù)內(nèi)容在不同的瀏覽器中不兼容。比如：innerText简逮、removeNode()庶溶、replaceNode()等在火狐中無法使用.
//在CSS中：
div{ background-color:red }
//在jQuery中：
$("div").css("background-color","red");
//在CSS中：
#d1{ background-color:red }
//在jQuery中：
$("#d1").css("background-color","red");
- 版本支持
1.x – 支持常用瀏覽器, 以及IE6+以上的版本
2.x – 支持常用瀏覽器, 以及IE9+以上的版本
3.x – 支持常用瀏覽器, 以及IE9+以上的版本
jQuery的缺點：jQuery的高版本不兼容低版本仔役。這是因為jQuery在升級時除了會做一些內(nèi)部優(yōu)化之外箕慧，還會增加或刪除一些方法歉胶。如果升級到高版本婿斥，可能會造成之前的部分代碼無法執(zhí)行!
- jQuery引入
jQuery函數(shù)庫本身是一個js文件,所以引入jQuery和引入一個普通的JS文件一樣
<!-- 引入JQuery庫文件,注意文件路徑-->
<script type="text/javascript" src="jquery-x.x.x.js"></script>
1.JQuery語法
-
$符號
**等價JQuery**劝篷，調(diào)用()等價于調(diào)用jQuery(), 該函數(shù)會返回一個jQuery對象, 該對象包含了若干個html元素, 可以調(diào)用jQuery中提供的方法或?qū)傩詠聿僮鬟@些元素.
-
文檔就緒事件
$(function(){...}) 等價于window.onload事件
$(function(){
//在文檔加載完后立即觸發(fā)執(zhí)行
});
-
JQuery對象與JS對象的相互轉(zhuǎn)換
為什么需要相互轉(zhuǎn)換
jQuery是js的簡單框架, 在使用時通過$()可以返回一個jQuery對象, 可以通過jQuery提供的屬性或方法來操作其中的內(nèi)容, 但是, 不可以通過jQuery對象來調(diào)用js的屬性或者js的方法. 反之, 也不可以通過JS對象來調(diào)用jQuery的屬性或者jQuery方法， 否則調(diào)用會報錯!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery引入</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
//文檔就緒事件
$(function(){
//JQuery獲取div元素內(nèi)容
alert($('#hello').html());
//========== JS對象轉(zhuǎn)換成JQuery對象 =========//
var div = document.getElementById("hello");
alert($(div).html());
//========== JQuery對象轉(zhuǎn)換成JS對象 =========//
var info = $('#hello');
alert(info.html());
});
</script>
</head>
<body>
<div id="hello">Hello JQuery!</div>
</body>
</html>
2.JQuery選擇器
-
基本選擇器
1.元素名選擇器：根據(jù)元素的名稱選中指定名稱的元素
格式：$('元素名稱')
//1民宿、改變元素名為 <div> 的所有元素的背景色為 #FF69B4" id="b1"
/* 選中b1按鈕,為b1按鈕綁定點擊事件 */
$('#b1').click(function(){
//css("屬性名","屬性值")
$("div").css("background","#FF69B4");
});
2.類選擇器：根據(jù)元素的class屬性,匹配所有class值相同的元素
格式：$('.class值')
//3娇妓、改變 class 為 mini 的所有元素的背景色為 #FF0033" id="b3"
/* 選中b3按鈕,為b3按鈕綁定點擊事件 */
$('#b3').click(function(){
$('.mini').css("background","#FF0033");
});
3.ID選擇器：根據(jù)元素的id屬性值, 匹配具有特定id的元素
格式：$("#id值")
//2、改變 id 為 one 的元素的背景色為 #9ACD32" id="b2"
/* 選中b2按鈕,為b2按鈕綁定點擊事件 */
$('#b2').click(function(){
$('#one').css("background","#9ACD32");
});
4.多元素選擇器 :匹配多個選擇器選中的元素
格式：$("選擇器1,選擇器2,…選擇器n")
//4活鹰、改變所有的<span>元素和 id 為 two 的,id為one的哈恰，class為 mini的所有的元素的背景色為 #006400" id="b4"
/* 選中b4按鈕,為b3按鈕綁定點擊事件 */
$("#b4").click(function(){
$("span,#two,#one,.mini").css("background-color", "#006400");
});
-
層級選擇器
1.后代選擇器
格式:$("祖先元素 后代元素")
//1、改變 div 內(nèi)所有 span 的背景色為 #FF0000" id="b1"
/* 選中b1按鈕,為b1按鈕綁定點擊事件 */
$("#b1").click(function(){
$("div span").css("background-color", "#FF0000");
});
2.子元素選擇器
格式：$("祖先元素>子元素")
//2志群、改變 body 內(nèi)子 div 的背景色為 #D8C93B" id="b2"
/* 選中b2按鈕,為b2按鈕綁定點擊事件 */
$("#b2").click(function(){
$("body>div").css("background-color","#D8C93B");
});
3.相鄰兄弟選擇器
格式:$("大哥+小弟")
//3蕊蝗、改變 id 為 two 的下一個 div 的背景色為 #0000FF" id="b3"
/* 選中b3按鈕,為b3按鈕綁定點擊事件 */
$("#b3").click(function(){
$("#two+div").css("background-color","#0000FF");
});
4.$(“#two~div”)：匹配id為two元素后面所有的兄弟div元素
//4、改變 id 為 two 的元素后面的所有 div 兄弟元素的背景色為 #76AA0F" id="b4"
/* 選中b4按鈕,為b4按鈕綁定點擊事件 */
$("#b4").click(function(){
$("#two~div").css("background-color","#76AA0F");
});
5.一些方法
| 方法 | 相關描述 |
|---|---|
| siblings() | 返回所匹配元素的所有兄弟元素 |
| next/prev | 返回所匹配元素后面/前面緊鄰的兄弟元素 |
| nextAll/prevAll | 返回所匹配元素后面/前面所有兄弟元素 |
//5赖舟、改變 id 為 two 的元素所有 div 兄弟元素的背景色為 #FF6347" id="b5"
$("#b5").click(function(){
$("#two").siblings("div").css("background-color", "#FF6347");
});
-
基本過濾選擇器
(后面單獨講解過濾)
格式：==元素:過濾形式==
| 過濾 | 相關描述 |
|---|---|
| $("div:first") | 匹配所有div中的第一個div元素 |
| $("div:last") | 匹配所有div中的最后一個div元素 |
| $("div:not(.one)") | 匹配所有div中class值不為one的div元素 |
| $("div:eq(3)") | 匹配所有div中的索引值為3的div元素 |
| $("div:lt(3)") | 匹配所有div中的索引值小于3的div元素 |
| $("div:gt(3)") | 匹配所有div中的索引值大于3的div元素 |
| $("div:even") | 匹配所有div中的索引值為偶數(shù)的div元素 |
| $("div:odd") | 匹配所有div中的索引值為奇數(shù)的div元素 |
baseFilter.gif
/* ---------基本過濾選擇器練習--------- */
$(function() {
//1蓬戚、改變第一個 div 元素的背景色為 #FF6347" id="b1"
$("#b1").click(function(){
$("div:first").css("background-color","#FF6347");
//$("div:eq(0)").css("background-color","#FF6347");
});
//2、改變最后一個 div 元素的背景色為 #9ACD32" id="b2"
$("#b2").click(function(){
$("div:last").css("background-color", "#9ACD32");
});
//3宾抓、改變class不為 one 的所有 div 元素的背景色為 #FF0033" id="b3"
$("#b3").click(function(){
$("div:not(.one)").css("background-color", "#FF0033");
});
//改變索引值等于 3 的 div 元素的背景色為 #006400" id="b4"
$("#b4").click(function(){
$("div:eq(3)").css("background-color", "#006400");
});
})
-
內(nèi)容選擇器
| 選擇器 | 相關描述 |
|---|---|
| :contains | 匹配包含給定文本的元素 |
| :empty | 匹配所有不包含子元素或文本的空元素 |
| :has | 匹配含有選擇器所匹配的元素的元素 |
| :parent | 匹配含有子元素或文本的元素 |
| :parents | 獲取當前所匹配所有祖先元素 |
-
可見選擇器
| 選擇器 | 相關描述 |
|---|---|
| :hidden | 匹配所有不可見元素子漩，或者type為hidden的元素 |
| :visible | 匹配所有的可見元素 |
content_visible_selector.gif
$(function() {
/* ---------內(nèi)容選擇器--------- */
//1、改變含有文本 'one' 的 div 元素的背景色為 #FF6347" id="b1"
$('#b1').click(function() {
$("div:contains('one')").css({
background: '#FF6347'
});
});
//2石洗、改變div空元素(既不包含文本也不包含子元素)的背景色為 #9ACD32" id="b2"
$("#b2").click(function() {
$("div:empty").css({
background: '#9ACD32'
});
});
//=================================
/* ---------可見選擇器練習--------- */
//1幢泼、讓所有隱藏的div元素顯示, 并改變背景色為 #FF69B4" id="b3"
$("#b3").click(function() {
var $div = $("div:hidden");
$div.show();
$div.css({
background: '#FF69B4'
});
});
//2、改變所有可見 div 元素背景色為 #F08080" id="b4"
$("#b4").click(function(){
$("div:visible").css("background-color", "#F08080");
});
})
-
表單選擇器
| 選擇器 | 相關描述 |
|---|---|
| :input | 匹配所有 input, textarea, select 和 button 元素 |
| :text | 匹配所有的單行文本框 |
| :password | 匹配所有密碼框 |
| :radio | 匹配所有單選按鈕 |
| :checkbox | 匹配所有復選框 |
| :submit | 匹配所有提交按鈕 |
| :reset | 匹配所有重置按鈕 |
| :image | 匹配所有圖像域 |
| :checked | 匹配所有選中的被選中元素(復選框讲衫、單選框等缕棵，不包括select中的option) |
| :disabled | 匹配所有不可用元素 |
| :selected | 匹配所有選中的option元素 |
form_selector.gif
$(function() {
/* ---------表單選擇器練習--------- */
//1孵班、打印所有的 :input 元素 id="b1"
/* :input元素可以選中所有的表單項元素(input、select招驴、textarea) */
$("#b1").click(function(){
$(":input").each(function(){
console.log( this );
});
});
//2篙程、打印所有的 :password 元素" id="b2"
/* :password 匹配所有的密碼輸入框 */
$("#b2").click(function(){
$(":password").each(function(){
console.log(this);
});
});
//3、打印所有的 :radio 元素" id="b3"
/* :radio 匹配所有的單選框 */
$("#b3").click(function(){
$(":radio").each(function(){
console.log(this);
});
});
//4别厘、打印所有的 :checked 元素" id="b4"
/* :checked 匹配所有被選中的單選框虱饿、復選框、option選項
* :selected 匹配所有被選中option選項
*/
$("#b4").click(function(){
$(":checked").each(function(){
console.log( this );
});
/*$("input:checked").each(function(){
console.log( this );
});*/
/*$("input[type='radio']:checked").each(function(){
console.log( this );
});*/
/*$("input[type='checkbox']:checked").each(function(){
console.log( this );
});*/
});
})
