大資料WEB階段（五）jQuery
阿新 • • 發佈：2018-12-26
jQuery
一、概述
- 什麼是jQuery？
- jQuery是一個寫的更少 ， 但做的更多的輕量級的 javaScript函式庫 。
- jQuery的優勢？
- 可以簡化JavaScript程式碼
- 可以向css那樣獲取元素
- 可以修改css來控制頁面效果
- 可以相容常用的瀏覽器 。
- jQuery版本支援
- jQuery分為很多版本, 還分為未壓縮版和壓縮版, 根據需要選擇對應的版本進行下載!
- 1.x 支援常用的瀏覽器和IE6+
- 2.x 支援常用的瀏覽器和IE9+
- 3.x 支援常用的瀏覽器和IE9+
- 注意: jQuery不相容老版本. 因為jQuery升級除了會做一些內部優化之外, 還會刪除以前的一些程式碼, 比如刪除一些方法. 或者是新增一些新的方法。所以在升級之後， 以前的程式碼可能會無法執行。
jQuery引入
jQueyr類庫其實就是一個普通的js檔案, 和之前在html中引入js檔案方式是一樣的！！！
<script src="jquery-1.4.2.js"></script>
二、jQuery語法
- “$”介紹
- $符號等價於jQuery, 是jQuery單詞的簡寫
- 例如：
()相當於調用jQuery()，該函數會返回一個jQuery對象,這個jQuery對象中包含零個或多個html元素,比如: (“div”)，可以通過jQuery中提供的方法來操作這些匹配的元素，比如$(“div”).remove()；
文件就緒事件
所謂的文件就緒事件, 就是在整個html文件載入完之後立即觸發, 執行一些操作，格式如下：
$(document).ready(function(){ //xxxx }); 該函式會在整個html文件載入完之後立即執行! 其作用相當於: window.onload = function(){ //xxx }其簡寫形式為:
$(function(){ //xxxx });
DOM物件和jQuery物件相互轉化
- JS物件只能呼叫JS上提供的屬性和方法, 不能呼叫jQuery提供的屬性和方法, 如果非要使用, 必須將JS物件轉化成jQuery物件！反之亦然。
dom物件轉jQuery物件：
var dom = document.getElementById("username"); var $jQuery = $(dom); //jQuery物件要以$開頭jQuery轉dom物件：
var $jQuery = $("#username"); //方式一: var dom1 = $jQuery[0]; // jQuery物件轉成js物件 //方式二: var dom2 = $jQuery.get(0); // jQuery物件轉成js物件案例：
/*通過點選按鈕獲取使用者名稱的值，分別將jQuery物件轉換成js物件和js物件轉換為jQuery物件*/ /* 文件就緒事件 */ $(function(){ //為所有匹配的元素繫結點選事件 $("#btn").click(function(){ //jQuery物件 var $jQuery = $("#username"); //alert($jQuery.val()); //jQuery物件轉成js物件: //方式一: var js1 = $jQuery[0]; //alert(js1.value); //方式二: var js2 = $jQuery.get(0); //alert(js2.value); //js物件轉成jQuery物件: var oInp = document.getElementById("username"); var $Inp = $(oInp); alert($Inp.val()); }); })
三、選擇器
基本選擇器
元素名選擇器
$("div") -- 匹配所有的div元素class選擇器
$(".ca") -- 匹配所有的class值為ca的元素 $("div.ca") -- 匹配所有的class值為ca的div元素id選擇器
$("#d1") -- 匹配所有的id為d1的元素*匹配符
$("*") -- 匹配所有的元素多元素選擇器
$("div , #d1 , .ca")案例：
//讓整個頁面載入完成 $(document).ready(function() { /* ---------基本選擇器練習--------- */ //改變元素名為 <div> 的所有元素的背景色為 #FF69B4" id="b1" $("#b1").click(function(){ $("div").css("background-color", "#FF69B4"); }); //改變 id 為 one 的元素的背景色為 #9ACD32" id="b2" $("#b2").click(function(){ $("#one").css("background-color", "#9ACD32"); }); //改變 class 為 mini 的所有元素的背景色為 #FF0033" id="b3" $("#b3").click(function(){ $(".mini").css("background-color", "#FF0033"); }); //改變所有元素的背景色為 #FDF5E6" id="b4" $("#b4").click(function(){ $("*").css("background-color", "#FDF5E6"); }); //改變所有的<span>元素和 id 為 two 的元素的背景色為 #FF1493" id="b5" $("#b5").click(function(){ $("span,#two").css("background-color", "#FF1493"); }); //改變所有的<span>元素和 id 為 two 的,id為one的，class為 mini的所有的元素的背景色為 #006400" id="b6" $("#b6").click(function(){ $("span,#two,#one,.mini").css("background-color", "#006400"); }); });
層次選擇器
如果想通過DOM元素之間的層次關係來獲取特定元素。例如子元素、兄弟元素等。則需要通過層次選擇器。
1. $("div span") – 匹配div下所有的span元素 2. $("div>span") – 匹配div下所有的span子元素 3. $("div+span") – 匹配div後面緊鄰的span兄弟元素 4. $("div~span") – 匹配div後面所有的span兄弟元素案例
$().ready(function() { /* ---------層級選擇器練習--------- */ //改變 <body> 內所有 <div> 的背景色為 #F08080" id="b1" $("#b1").click(function(){ $("body div").css("background-color", "#F08080"); }); /* $("#b1").click(function(){}) 等價於: document.getElementById("b1").onclick = function(){}; */ //改變 <body> 內子 <div> 的背景色為 #FF0033" id="b2" $("#b2").click(function(){ $("body>div").css("background-color", "#FF0033"); }); //改變 id 為 one 的下一個 <div> 的背景色為 #0000FF" id="b3" $("#b3").click(function(){ $("#one+div").css("background-color", "#0000FF"); }); //改變 id 為 two 的元素後面的所有兄弟<div>的元素的背景色為 #9ACD32" id="b4" $("#b4").click(function(){ $("#two~div").css("background-color", "#0000FF"); }); //改變 id 為 two 的元素所有 <div> 兄弟元素的背景色為 #FF6347" id="b5" $("#b5").click(function(){ $("#two").siblings("div").css("background-color", "#0000FF"); //$("#two").next("div").css("background-color", "#0000FF");//選擇id為two元素後面緊鄰的div兄弟元素 //$("#two").nextAll("div").css("background-color", "#0000FF");//選擇id為two元素後面所有的div兄弟元素 //$("#two").prev("div").css("background-color", "#0000FF");//選擇id為two元素前面緊鄰的div兄弟元素 //$("#two").prevAll().css("background-color", "#0000FF");//選擇id為two元素前面所有的兄弟元素 }); })
基本過濾選擇器
過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素, 該選擇器都以 “:” 開頭
$("div:first") – 匹配所有div中的第一個div元素 $("div:last") – 匹配所有div中的最後一個div元素 $("div:even") – 匹配所有div中索引值為偶數的div元素，0開始 $("div:odd") – 匹配所有div中索引值為奇數的div元素，0開始 $("div:eq(n)") – 匹配所有div中索引值為n的div元素，0開始 $("div:lt(n)") – 匹配所有div中索引值小於n的div元素，0開始 $("div:gt(n)") – 匹配所有div中索引值大於n的div元素，0開始 $("div:not(.one)") – 匹配所有class值不為one的div元素案例：
$(function() { /* ---------基本過濾選擇器練習--------- */ //改變第一個 div 元素的背景色為 #FF6347" id="b1" $("#b1").click(function(){ $("div:first").css("background-color", "#FF6347"); }); //改變最後一個 div 元素的背景色為 #9ACD32" id="b2" $("#b2").click(function(){ $("div:last").css("background-color", "#FF6347"); }); //改變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"); }); //改變索引值為小於 3 的 div 元素的背景色為 #FF69B4" id="b5"/> $("#b5").click(function(){ $("div:lt(3)").css("background-color", "#FF69B4"); }); //改變索引值為大於 3 的 div 元素的背景色為 #F08080" id="b6" $("#b6").click(function(){ $("div:gt(3)").css("background-color", "#F08080"); }); //改變索引值為偶數的 div 元素的背景色為 #FF6347" id="b7" $("#b7").click(function(){ $("div:even").css("background-color", "#F08080"); }); //改變索引值為奇數的 div 元素的背景色為 #FF1493" id="b8" $("#b8").click(function(){ $("div:odd").css("background-color", "#FF1493"); }); })
內容選擇器
$("div:contians('abc')") – 匹配所有div中包含abc內容的div元素 如: <div>xxxabcxx</div> $("div:has(p)") – 匹配所有包含p元素的div元素 如: <div><p></p></div> $("div:empty") – 匹配所有內容為空的div元素 如: <div></div> $("div:parent") – 匹配所有內容不為空的div元素 如: <div>xxxxx</div>可見選擇器
$("div:hidden") -- 匹配所有隱藏的div元素 $("div:visible") -- 匹配所有的可見的元素案例：
$(function() { /* ---------內容選擇器--------- */ //改變含有文字 ‘id’ 的 div 元素的背景色為 #FF6347" id="b1" <div>xxidxx</div> $("#b1").click(function(){ $("div:contains('id')").css("background-color", "#FF6347"); }); //改變空元素div(既不包含文字也不包含子元素)的背景色為 #9ACD32" id="b2" $("#b2").click(function(){ $("div:empty").css("background-color", "#9ACD32"); }); //改變包含div子元素的div元素的背景色為 #FF0033" id="b3" $("#b3").click(function(){ $("div:has(div)").css("background-color", "#FF0033"); }); //改變非空div元素的背景色為 #006400" id="b4" $("#b4").click(function(){ $("div:parent").css("background-color", "#006400"); }); //==================================================== /* ---------可見選擇器練習--------- */ //改變所有可見 div 元素背景色為 #F08080" id="b5" $("#b5").click(function() { $("div:visible").css("background-color", "#F08080"); }) //讓所有隱藏的div元素顯示, 並改變背景色為 #FF69B4" id="b6" $("#b6").click(function() { $("div:hidden").css("background-color", "red").show(); }) })
屬性選擇器
$("div[id]") – 匹配所有具有id屬性的div元素 $("div[id='d1']") – 匹配所有具有id屬性並且值為d1的div元素 $("div[id!='d1']") – 匹配所有id屬性值不為d1的div元素 $("div[id^='d1']") – 匹配所有id屬性值以d1開頭的div元素 $("div[id$='d1']") – 匹配所有id屬性值以d1結尾的div元素子元素選擇器
$("div:nth-child(n)") – n從1開始, 匹配div中第n個子元素。 $("div:first-child") –匹配div中第1個子元素。 $("div:last-child") –匹配div中最後一個子元素。。。案例：
$(function() { /* ---------屬性選擇器練習--------- */ //改變包含id屬性的 div 元素的背景色為 #FF6347" id="b1" $("#b1").click(function(){ $("div[id]").css("background-color", "#FF6347"); }); //改變包含屬性title='aa' 的div 元素的背景色為 #9ACD32" id="b2" $("#b2").click(function(){ $("div[title='aa']").css("background-color", "#9ACD32"); }); //改變type屬性不等於button的input 元素的背景色為 #FF0033" id="b3" $("#b3").click(function(){ $("input[type!='button']").css("background-color", "#9ACD32"); }); //================================================= /* ---------子元素選擇器練習--------- */ //改變div 第二個子元素的背景色為 #006400" id="b4" $("#b4").click(function() { $("div:nth-child(2)").css("background-color", "#006400"); }) //改變div 第一個子元素的背景色為 #FF69B4" id="b5" $("#b5").click(function() { //$("div:nth-child(1)").css("background-color", "#FF69B4"); $("div:first-child").css("background-color", "#FF69B4"); //$("div:last-child").css("background-color", "#FF69B4"); }) })
表單選擇器
$(":input") – 匹配所有的input文字框、密碼框、單選框、複選框、select框、textarea、button。 $(":password") – 匹配所有的密碼框 $(":radio") – 匹配所有的單選框 $(":checkbox") – 匹配所有的複選框 $(":checked") – 匹配所有的被選中的單選框/複選框/option $("input:checked") – 匹配所有的被選中的單選框/複選框 $(":selected") – 匹配所有被選中的option選項案例：
$(function() { /* ---------表單選擇器練習--------- */ //改變所有:input 元素的背景色為 #F08080" id="b1" $("#b1").click(function() { $(":input").css("background-color", "#F08080"); alert($(":input").length); }); //改變:password 元素的背景色為 #9ACD32" id="b2" $("#b2").click(function() { $(":password").css("background-color", "#9ACD32"); }); //彈出 :radio 元素的個數" id="b3" $("#b3").click(function() { alert($(":radio").length); }); //彈出所有 :checked 元素的value值" id="b4" $("#b4").click(function() { $(":checked").each(function(){ alert($(this).val()); }); }); //彈出所有 :selected 元素的value值" id="b5" $("#b5").click(function() { $(":selected").each(function(){ alert($(this).val()); }); }); })
四、文件操作
- parent()
- $(“#d1”).parent() – 獲取id為d1的父元素
- parents()
- $(“#d1”).parents() – 獲取id為d1的祖先元素
- $(“#d1”).parent(“tr”) – 獲取id為d1的祖先tr元素
- next()
- $(“#d1”).next() – 獲取id為d1的後面緊鄰的兄弟元素
- $(“#d1”).next(“span”) – 獲取id為d1的後面緊鄰的兄弟span元素
- nextAll()
- $(“#d1”).nextAll() – 獲取id為d1的後面所有的兄弟元素
- $(“#d1”).nextAll(“span”) – 獲取id為d1的後面所有的兄弟span元素
prev()
- $(“div”).prev() – 獲取所匹配元素前面緊鄰的兄弟元素
- $(“div”).prev(“span”) – 獲取所匹配元素前面緊鄰的span兄弟元素
prevAll()
- $(“div”).prevAll() – 獲取所匹配元素前面所有的兄弟元素
- $(“div”).prevAll(“span”) – 獲取所匹配元素前面所有的span兄弟元素
siblings()
- $(“div”).siblings() – 獲取所匹配元素前後所有的兄弟元素
- $(“div”).siblings(“span”) – 獲取所匹配元素前後所有的span兄弟元素
append()
- $(“div”).append(““) –為所匹配元素追加一個span子元素
remove()
- $(“div”).remove() – 刪除所匹配元素
html()
- $(“div”).html() – 獲取所匹配元素的html內容
- $(“div”).html(“xxx”) – 為所匹配元素設定html內容
text()
- $(“div”).text() – 獲取所匹配元素的文字內容
- $(“div”).text(“xxx”) – 為所匹配元素設定文字內容
attr()
- $(“div”).attr(“id”) – 獲取所匹配元素的id屬性值
- $(“div”).attr(“id”, “xx”) – 為所匹配元素設定id屬性
css
- $(“div”).css(“width”) – 獲取所匹配元素的width樣式屬性值
- $(“div”).css(“width”, “200px”) – 為所匹配元素設定width樣式屬性
- $(“div”).css({“width”:”200px”, “color”:”red”,”font-size”:”24px” }) ; – 為所匹配元素設定width樣式屬性
五、事件
click()
- $(“div”).click(function(){}) – 為所匹配元素繫結點選事件
blur()
- $(“input”).blur(function(){}) – 為所匹配元素繫結失去輸入焦點事件
focus()
- $(“input”).focus(function(){}) – 為所匹配元素繫結獲得輸入焦點事件
change()
- $(“select”).change(function(){}) – 為所匹配元素繫結選項切換事件
ready()
(document).ready(function())–文檔就緒事件其作用相當於:window.onload=function()簡寫形式為: (function(){}) – 在整個文件載入完成後立即執行
六、效果
show()
- $(“div”).show() – 將隱藏元素設定為顯示(底層操作的是display);
hide()
- $(“div”).show() – 將顯示元素設定為隱藏(底層操作的是display);
toggle()
- $(“div”).toggle() – 切換元素的可見狀態, 如果元素顯示則設定為隱藏, 如果元素隱藏則設定為可見.
七、JSON
json是什麼?
json是JavaScript提供的一種資料交換(儲存)格式建立JS物件: var person = { "name":"張飛", "age": 18, "gender": "男" }json語法
- {}括起來的就是一個物件
- json的屬性名只能用雙引號引起來, 不能用單引號!
json的屬性值:
數字（整數或浮點數） 字串（在雙引號中） 邏輯值（true 或 false） 陣列（在方括號中） 物件（在花括號中） null
json和xml比較
- 可讀性: xml比json具有更好的可讀性
- 解析度: xml解析麻煩, 而json是js提供的物件, 可以非常方便的進行解析
- 流行度: xml雖然發展了很多年, 但是由於json易於操作, 所以在某些場景中json比xml更常用.
json格式:
格式一: var p1 = { "name" : "蘭剛", "age" : 18, "gender" : "男" } 格式二 var p2 = { "name" : "蘭剛", "age" : 18, "gender" : "男", "friends" : ["趙棟","靳幸福","樸乾"], "gf" : { "name" : "鳳姐", "age" : "17", "gender" : "女" } } 格式三 var p3 = { "name" : "蘭剛", "age" : 18, "gender" : "男", "friends" : [ { "name" : "趙棟", "age" : 20, "gender" : "男" },{ "name" : "靳幸福", "age" : 19, "gender" : "男" },{ "name" : "樸乾", "age" : 21, "gender" : "男" } ] }