當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

大数据WEB阶段（五）jQuery

發布時間：2024/4/30 编程问答 61 豆豆

生活随笔收集整理的這篇文章主要介紹了大数据WEB阶段（五）jQuery 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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文件方式是一樣的！！！

二、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" : "男"}]}

總結

以上是生活随笔為你收集整理的大数据WEB阶段（五）jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：大数据WEB阶段（四）JavaScrip
下一篇：大数据WEB阶段（六）MySql 下载、