jQuery

• 1、jQuery 介紹
• 2， jQuery核心函數
• 3、jQuery對象和dom對象區分
• • 3.1、什么是jQuery對象，什么是dom對象
  • 3.2、問題: jQuery 對象的本質是什么?
  • 3.3、jQuery 對象和Dom對象使用區別
  • 3.4、Dom對象和jQuery對象互轉
  • • 3.4.1、dom對象轉化為jQuery對象(*重點)
    • 3.4.2、jQuery 對象轉為dom對象(*重點)
• 4、jQuery選擇器(*****重點)
• • 4.1、基本選擇器(*****重點)
  • 4.2、層級選擇器(*****重點)
  • 4.3、過濾選擇器
  • • 基本過濾器:
    • 內容過濾器:
    • 屬性過濾器:
• 5、jQuery的屬性操作
• 6、 DOM的增刪改
• • 內部插入
  • 外部插入:
  • 替換:
  • 刪除:

1、jQuery 介紹

什么是jQuery?
jQuery，顧名思義，也就是JjavaScript和查詢(Query)，它就是輔助JavaScript開發的js類庫。
jQuery核心思想! ! !
它的核心思想是write less, do more(寫得更少,做得更多)，所以它實現了很多瀏覽器的兼容問題。
jQuery流行程度
jQuery現在已經成為最流行的JavaScript 庫，在世界前10000個訪問最多的網站中，有超過55%在使用
jQuery。
jQuery好處! ! !
jQuery是免費、開源的，jQuery 的語法設計可以使開發更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能

2， jQuery核心函數

$ 是jQuery的核心函數，能完成jQuery的很多功能。$()就是調用$這個函數
1、傳入參數為[函數]時:
表示頁面加載完成之后。相當于window.onload = function(){}
2、傳入參數為[HTML 字符串]時:
會對我們創建這個html標簽對象
3、傳入參數為 [選擇器字符串]時:
$("#id屬性值");
id選擇器，根據id查詢標簽對象
$(“標簽名”);
標簽名選擇器，根據指定的標簽名查詢標簽對象
S(".class屬性值");類型選擇器， 可以根據class屬性查詢標簽對象
4、傳入參數為 [DOM對象]時:
會把這個dom對象轉換為jQuery對象

3、jQuery對象和dom對象區分

3.1、什么是jQuery對象，什么是dom對象

Dom對象
1.通過getElementByld(查詢出來的標簽對象是Dom對象
2.通過getElementsByName()查詢出來的標簽對象是Dom對象
3.通過getElementsByTagName()查詢出來的標簽對象是Dom對象
4.通過createElement()方法創建的對象,是Dom對象
5. Dom對象獲取id

document.getElementById("testDiv")

jQuery對象
5.通過JQuery提供的API創建的對象,是JQuery對象
6.通過JQuery包裝的Dom對象，也是JQuery對象
7.通過JQuery提供的API查詢到的對象，是JQuery對象
jQuery對象獲取id

$("#id")

3.2、問題: jQuery 對象的本質是什么?

jQuery對象是dom對象的數組+ jQuery提供的一系列功能函數

3.3、jQuery 對象和Dom對象使用區別

jQuery對象不能使用DOM對象的屬性和方法
DOM對象也不能使用jQuery對象的屬性和方法

3.4、Dom對象和jQuery對象互轉

3.4.1、dom對象轉化為jQuery對象(*重點)

1、先有DOM對象
2、$( DOM對象)就可以轉換成為jQuery 對象

3.4.2、jQuery 對象轉為dom對象(*重點)

1、先有jQuery對象
2、jQuery對象下標]取出相應的

alert( $(document.getElementById("testDiv"))[0] );

4、jQuery選擇器(*****重點)

4.1、基本選擇器(*****重點)

#ID 選擇器:根據id查找標簽對象
.class 選擇器:根據class查找標簽對象
element：
選擇器:根據標簽名查找標簽對象
選擇器:表示任意的，所有的元素
selector1, selector2 組合選擇器:合并選擇器1,選擇器2的結果并返回

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {//1.選擇 id 為 one 的元素 "background-color","#bbffaa"$("#btn1").click(function () {// css() 方法 可以設置和獲取樣式$("#one").css("background-color","#bbffaa");});//2.選擇 class 為 mini 的所有元素$("#btn2").click(function () {$(".mini").css("background-color","#bbffaa");});//3.選擇 元素名是 div 的所有元素$("#btn3").click(function () {$("div").css("background-color","#bbffaa");});//4.選擇所有的元素$("#btn4").click(function () {$("*").css("background-color","#bbffaa");});//5.選擇所有的 span 元素和id為two的元素$("#btn5").click(function () {$("span,#two").css("background-color","#bbffaa");});});</script>

4.2、層級選擇器(*****重點)

ancestor descendant
后代選擇器
:在給定的祖先元素下匹配所有的后代元素
parent > child
子元素選擇器:在給定的父元素下匹配所有的子元素
prev + next
相鄰元素選擇器:匹配所有緊接在prev 元素后的next 元素
prev ~ sibings
之后的兄弟元素選擇器:匹配prev元素之后的所有siblings 元素

<script type="text/javascript">$(document).ready(function(){//1.選擇 body 內的所有 div 元素$("#btn1").click(function(){$("body div").css("background", "#bbffaa");});//2.在 body 內, 選擇div子元素 $("#btn2").click(function(){$("body > div").css("background", "#bbffaa");});//3.選擇 id 為 one 的下一個 div 元素 $("#btn3").click(function(){$("#one+div").css("background", "#bbffaa");});//4.選擇 id 為 two 的元素后面的所有 div 兄弟元素$("#btn4").click(function(){$("#two~div").css("background", "#bbffaa");});});</script>

4.3、過濾選擇器

基本過濾器:

:first
獲取第一個元素
:last
獲取最后個元素
:not(selector)
去除所有與給定選擇器匹配的元素
:even
匹配所有索引值為偶數的元素，從0開始計數
:odd
匹配所有索引值為奇數的元素，從0開始計數
:eq(index)
匹配一一個給定索引值的元素
gt(index)
匹配所有大于給定索引值的元素
:t(index)
匹配所有小于給定索引值的元素
:header
匹配如h1, h2, h3之類的標題元素
:animated
匹配所有正在執行動畫效果的元素

<script type="text/javascript">$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();});$(document).ready(function(){//1.選擇第一個 div 元素 $("#btn1").click(function(){$("div:first").css("background", "#bbffaa");});//2.選擇最后一個 div 元素$("#btn2").click(function(){$("div:last").css("background", "#bbffaa");});//3.選擇class不為 one 的所有 div 元素$("#btn3").click(function(){$("div:not(.one)").css("background", "#bbffaa");});//4.選擇索引值為偶數的 div 元素$("#btn4").click(function(){$("div:even").css("background", "#bbffaa");});//5.選擇索引值為奇數的 div 元素$("#btn5").click(function(){$("div:odd").css("background", "#bbffaa");});//6.選擇索引值為大于 3 的 div 元素$("#btn6").click(function(){$("div:gt(3)").css("background", "#bbffaa");});//7.選擇索引值為等于 3 的 div 元素$("#btn7").click(function(){$("div:eq(3)").css("background", "#bbffaa");});//8.選擇索引值為小于 3 的 div 元素$("#btn8").click(function(){$("div:lt(3)").css("background", "#bbffaa");});//9.選擇所有的標題元素$("#btn9").click(function(){$(":header").css("background", "#bbffaa");});//10.選擇當前正在執行動畫的所有元素$("#btn10").click(function(){$(":animated").css("background", "#bbffaa");});//11.選擇沒有執行動畫的最后一個div$("#btn11").click(function(){$("div:not(:animated):last").css("background", "#bbffaa");});});</script>

內容過濾器:

:contains(text)匹配包含給定文本的元素
:empty
匹配所有不包含子元素或者文本的空元素
:parent
匹配含有子元素或者文本的元素
:has(selector)
匹配含有選擇器所匹配的元素的元素

<script type="text/javascript">$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt(); });/** :contains(text) :empty :has(selector) :parent */$(document).ready(function(){//1.選擇 含有文本 'di' 的 div 元素$("#btn1").click(function(){$("div:contains('di')").css("background", "#bbffaa");});//2.選擇不包含子元素(或者文本元素) 的 div 空元素$("#btn2").click(function(){$("div:empty").css("background", "#bbffaa");});//3.選擇含有 class 為 mini 元素的 div 元素$("#btn3").click(function(){$("div:has(.mini)").css("background", "#bbffaa");});//4.選擇含有子元素(或者文本元素)的div元素$("#btn4").click(function(){$("div:parent").css("background", "#bbffaa");});});</script>

屬性過濾器:

[attribute]
匹配包含給定屬性的元素。
[attribute=value]
四配給定的屬性是某個特定值的元素
[attribute! =value]
匹配所有不含有指定的屬性，或者屬性不等于特定值的元素。
[attribute^=value]
匹配給定的屬性是以某些值開始的元素
[attribute$ =value]
匹配給定的屬性是以某些值結尾的元素
[attribute* =value]
匹配給定的屬性是以包含某些值的元素
[attrSel1 ][attrSel2][attrSelN]復合屬性選擇器, 需要同時滿足多個條件時使用。

<script type="text/javascript">$(function() {//1.選取含有 屬性title 的div元素$("#btn1").click(function() {$("div[title]").css("background", "#bbffaa");});//2.選取 屬性title值等于'test'的div元素$("#btn2").click(function() {$("div[title='test']").css("background", "#bbffaa");});//3.選取 屬性title值不等于'test'的div元素(*沒有屬性title的也將被選中)$("#btn3").click(function() {$("div[title!='test']").css("background", "#bbffaa");});//4.選取 屬性title值 以'te'開始 的div元素$("#btn4").click(function() {$("div[title^='te']").css("background", "#bbffaa");});//5.選取 屬性title值 以'est'結束 的div元素$("#btn5").click(function() {$("div[title$='est']").css("background", "#bbffaa");});//6.選取 屬性title值 含有'es'的div元素$("#btn6").click(function() {$("div[title*='es']").css("background", "#bbffaa");});//7.首先選取有屬性id的div元素，然后在結果中 選取屬性title值 含有'es'的 div 元素$("#btn7").click(function() {$("div[id][title*='es']").css("background", "#bbffaa");});//8.選取 含有 title 屬性值, 且title 屬性值不等于 test 的 div 元素$("#btn8").click(function() {$("div[title][title!='test']").css("background", "#bbffaa");});}); </script>

5、jQuery的屬性操作

html()
它可以設置和獲取起始標簽和結束標簽中的內容。
跟dom屬性innerHTML一樣。
text()
它可以設置和獲取起始標簽和結束標簽中的文本。
跟dom屬性innerText -樣。
val()
它可以設置和獲取表單項的value屬性值.
跟dom屬性value- -樣

<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {// 不傳參數，是獲取，傳遞參數是設置// alert( $("div").html() );// 獲取// $("div").html("<h1>我是div中的標題 1</h1>");// 設置// 不傳參數，是獲取，傳遞參數是設置// alert( $("div").text() ); // 獲取// $("div").text("<h1>我是div中的標題 1</h1>"); // 設置// 不傳參數，是獲取，傳遞參數是設置$("button").click(function () {alert($("#username").val());//獲取$("#username").val("超級程序猿");// 設置});});</script> </head> <body><div>我是div標簽 <span>我是div中的span</span></div><input type="text" name="username" id="username" /><button>操作輸入框</button> </body> </html>

val方法同時設置多個表單項的選中狀態:

<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () { /*// 批量操作單選$(":radio").val(["radio2"]);// 批量操作篩選框的選中狀態$(":checkbox").val(["checkbox3","checkbox2"]);// 批量操作多選的下拉框選中狀態$("#multiple").val(["mul2","mul3","mul4"]);// 操作單選的下拉框選中狀態$("#single").val(["sin2"]); */ $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);});</script> </head> <body> <body>單選：<input name="radio" type="radio" value="radio1" />radio1<input name="radio" type="radio" value="radio2" />radio2<br/>多選：<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3<br/>下拉多選 ：<select id="multiple" multiple="multiple" size="4"><option value="mul1">mul1</option><option value="mul2">mul2</option><option value="mul3">mul3</option><option value="mul4">mul4</option></select><br/>下拉單選 ：<select id="single"><option value="sin1">sin1</option><option value="sin2">sin2</option><option value="sin3">sin3</option></select> </body> </body> </html>

6、 DOM的增刪改

內部插入

appendTo() a.appendTo(b) 把a插入到b子元素末尾，成為最后一個子元素
prependTo() a.prependTo(b) 把a插到b所有子元素前面，成為第一個子元素

外部插入:

insertAfter() a.insertAfter(b) 得到ba
insertBefore() a.insertBefore(b) 得到ab

替換:

replaceWith() a.replaceWith(b) 用b替換掉a
replaceAll() a.replaceAll(b) 用a替換掉所有b

刪除:

remove() a.remove(); 刪除a標簽
empty() a.empty(); 清空a標簽里的內容

總結

以上是生活随笔為你收集整理的JavaWbe学习总结之jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。