JQuery

一、引言

1.JQuery是一個基于javascript語言的框架 --- 是對js代碼的合理封裝

2.js缺點，jquery優點

?1）js代碼比較復雜 var tag = document.getElementById("idvalue")；

?jquery代碼簡單 var tag = $("#idvalue")；

2）js存在著瀏覽器差異，jquery可以屏蔽瀏覽器差異

?3）提供了強大的界面支持

二、第一個Jquery程序

1.搭建環境 -- 引入相關資源文件 （以.js文件形式存在）

<scripttype="test/javascript"src="js資源文件路徑"></script>

2.知識點

?1）$("#id") --- 根據標簽的id屬性值獲取標簽對應的jquery對象

?2）html() --- 獲取標簽體里的內容

?3）css("css屬性"，"css屬性值") --- 設置標簽的css樣式

三、Jquery對象與DOM對象

區別：

?1.通過document.getElementById(..)獲取的dom對象，不能使用jquery定義的函數

?2.通過jquery方式獲取的對象為jquery對象 $("#id")，可以調用jquery定義的函數

四、Jquery對象選擇器

1.通過jquery選擇器獲取jquery對象 [ 重點 ]

?1）基本選擇器

?$("#id") --- id選擇器，根據標簽的id屬性值，得到標簽所有對應的jquery對象 [ 重點 ]

?$(".class") --- 類選擇器，根據標簽的class屬性值獲得相應的jquery對象

?$("標簽名") --- 標簽選擇器，根據標簽名獲取jquery對象 [ 重點 ]

?$("div,span") --- 多路標簽選擇器

?$("*") --- 全選擇器

?注意：$ 就是 jQuery 這幾個字母

2）層次選擇器

?$("選擇符1 選擇符2") -- 后代選擇器，獲取所有出現在選擇器1里的選擇符2（包括孩子和孫子......）

?$("選擇符1>選擇符2") -- 孩子選擇器，獲取選擇符1里面的選擇符2標簽（只包括孩子）

?$("選擇符1~選擇符2") -- 后續所有的兄弟選擇器

?$("選擇符1+選擇符2") -- 后續第一個兄弟選擇器

3）過濾選擇器

?概念：從一組jquery對象中，篩選出有用的jquery對象

?基本過濾選擇器

?:first ---- 獲取一組jquery對象中的第一個jquery對象，例：$("div:first") [ 重點 ]

?:last ---- 獲取一組jquery對象中的第一個jquery對象，例：$("div:last")

?:not（"選擇器"） ---- 排除指定的選擇器對象，例：$("div:not('#dd')")

?:even ---- 獲取一組jquery對象中下標為偶數的jquery對象，下標從0開始，例：$("div:even")

?:odd ---- 獲取一組jquery對象中小標為奇數的jquery對象，例：$("div:odd")

?:eq(index) ---- 獲取下標為index的jquery對象，例：$("div:eq(0)")

?:gt(index) ---- 大于給定下標的jquery對象，例：$("div:gt(1)") [ 重點 ]

?:lt(index) ---- 小于給定下標的jquery對象，例：$("div:lt(1)")

內容過濾選擇器

?:contains(文本內容) ---- 獲取包含指定內容的jquery對象，例：$(".aa:contains('xiaohei')")

?:empty ---- 獲取沒有內容的jquery對象，例：$("div:empty")

?:has(選擇器) ---- 選擇包含特定元素的jquery對象，例：$("div:has('div')")

?:parent ---- 獲取為父元素的jquery對象，例：$("div:parent")

可見性過濾選擇器

?:hidden ---- 獲取一組jquery對象中被隱藏的標簽，例：$("div:hidden")

?:visible ---- 獲取可見的jquery對象，例：$("div:visible")

?屬性過濾選擇器

?[attribute] ---- 獲取一組jquery對象中含有指定屬性的標簽，例：$("select option(value)")

?[attribute=value] ----獲取一組jquery對象中的屬性為value的標簽對象 [ 重點 ]

?例：$("input[type=checkbox]")

?注意：給標簽設置屬性 attr() prop()

?在設置屬性值時如果attr()不行就用prop()

表單屬性過濾選擇器

?:checked ---- 獲取一組jquery對象中的被選中的標簽對象 checked=true的[ 重點 ]

?例：$("input[type='checkbox']:checked").attr()

?:selected ---- 獲取一組option標簽對象中的被選中的option [ 重點 ]

?js ---> var tag = document.getElementById("pro");

?var value = tg.options[tag.selectedIndex].value;

?jquery ---> var value = $("#pro option:selected").val();

五、通過DOM對象獲取jquery對象

Dom 與 JqueryDom對象通過原始js代碼獲取的對象一定是dom對象document.get....document.create.....Jquery對象1.通過jquery方式獲取對象jquery對象2.將dom對象轉為jquery對象$(dom) ---> jquery對象 例：var divDom = document.getElementById("dd");$(divDom).css();注意：只有jquery對象才能調用jquery相關方法普通標簽：text() html()設置樣式：css("","") css({key:value,...})獲取value屬性：val()設置標簽屬性：attr() prop("","")|prop({})

1.通過dom對象獲取jquery對象

? var jqueryObject = $(dom對象)

? 2.通過html標簽獲取jquery對象

? var div = $("chenyu "); ? var input = $(" ");? var span = $("chenyu");

六、Jquery對象的常用功能

注意：jquery對象支持鏈式調用，可以將所有功能通過.的方式全部綴在對象之后 obj.xx().xx()...

1.length()或者size() --- 獲取一組jquery對象的個數

2.遍歷一組jquery對象 --- each()

語法：$("li").each(function(idx)){ ? this --- 代表當前正在被遍歷的對象，是一個dom對象 ? 使用時，$(this).css().attr().... ? }）； ? 全局遍歷$.each(#("div").function(idx,dd){ ? #(dd).css().attr() ? }); ? 此處idx表示正在被遍歷的對象的下標

3.獲取或者設置jquery對象的屬性 --- prop() attr()

? 獲取屬性 --- jquery對象.prop(屬性名)

? 設置屬性 --- jquery對象.prop(屬性名，屬性值)

? 如果屬性不存在，函數會自動為對象添加屬性

? 刪除屬性 --- jquery對象.removeAttr(屬性名)

如果需要設置多個屬性 $("#input").prop("type","text").prop("name","btn");? $("#input").prop((type:"text",name:"btn"));

4.獲取和設置dom樣式

? 1）獲取或者設置css樣式

? css() --- 單個設置css樣式

? 獲取 --- jquery對象.css("css屬性名")；

? 設置or修改 --- jquery對象.css("屬性名"，"屬性值");

? 2）關于隱藏和顯示標簽

? hide(time) --- 在time毫秒內隱藏jquery對象看（有動畫效果）

? show(time) --- 以動畫效果，在time毫秒內顯示一個jquery對象

? 3）關于添加一類css樣式

? jquery對象.addClass('css里的一類樣式的class名') --- 等價于jquery對象.prop("class","value");

? jquery對象.removeClass()

4）三個關于內容處理

? html() --- 設置或者獲取標簽體里的內容（包括子標簽和文本內容），等價于js里的innerHTML

? 獲取 --- jquery對象.html()；

? 設置 --- jquery對象.html(內容);

? text() --- 設置或者獲取標簽體里的文本內容

? val() --- 設置或者獲取標簽體里的value屬性值

? 獲取 --- jquery對象.val()；

? 設置 --- jquery對象.val(值)；

? 5）向指定標簽中存取數據 data

? 只有一個參數 代表在當前標簽對象上獲取這個參數對應的值

? 設置：$("#dd").data("name","張三")；

? $("#dd").data("age","23");

? 獲取：$("#dd").data("name");

? 移除：$("#dd").removeDate("name");

? 注意：保證鍵名不一致，保存的數據不顯示，可以在之后調用

? 6）測試滑動效果 slideDown slideUp 元素需要隱藏（display:none）

? 例：$("#dd").slideDown(200, function(){? });

? 7）動畫效果

例：$("#ddd").animate({? "marginLeft":"200px",? "backgroundColor":"blue",//不可直接使用? });

? 注意：如果要實現顏色動畫效果，要添加jquery.color.js或者添加jquery-ui.js（ps：后者涵蓋較多）

//實例：用data、事件等功能實現div顏色鼠標移入改變，移出恢復 $("div").mouseover(function(){//保存原來樣式$(this).data("aa",$(this).prop("backgroundColor"));//修改新的樣式$(this).css("background", "blue"); }).mouseout(function(){$(this).css("background", $(this).data("aa")); });

七、Jquery對象添加事件

事件三要素：

1.事件源 通常指html中標簽 2.事件 發生動作 單擊 雙擊... 3.事件處理程序 通常函數完成功能

1.js里的事件處理

標簽式事件處理 <a href="" onclick="fun()"></a> 編程式事件處理 <script type="text/javascript">window.onload = function(){var tag = document.getElementById("btn");tag.onclick = function(){};} </script>

2.jquery里的編程式事件處理

第一種： <script type="text/javascript">$(document).ready(function(){ ===> window.onload=function{}jquery代碼}); </script> 第二種： <script type="text/javascript">$(function(){$("#btn").click(function(){});}); </script>

八、復合事件

$(function(){//1.9之后廢棄，但是通過各種方法可以加入$("div").toggle(functionn(){console.log("===1==="); },function(){console.log("===2==="); },function(){console.log("===3==="); }); });

九、圖片建議放大

$(function(){//鼠標移入$("#img").mouseover(function(e){//0.獲取鼠標的位置var x = e.pageX+20;//e.clientX;var y = e.pageY+20;//e.clientY;//1.創建一個div對象,并使用絕對路徑，浮動顯示var div = $("<div id="showImg"/>").css({"position":"absolute","top":y,"left":x,"display":"none"});//2.創建一個img標簽var img = $("<img>").attr({//設置屬性"src":$(this).attr("src")}).css({//設置樣式"width":$(this).css("width")*2,"height":$(this).css("height")*2});//3.將圖片放入div中div.append(img);//4.將div放入頁面中$("body").append(div);//5.顯示出來div.show(2000);}).mousemove(function(e){//綁定鼠標移動事件//0.獲取當前鼠標的位置var x = e.pageX;//e.clientX;var y = e.pageY;//e.clientY;//1.獲取頁面中的div浮層$("#showImg").hide().css({"top":y+20,"left":x+20,});}).mouseout(function(){$("#showImg").remove();}); });

注：使用過程中還應注意對jquery其他插件的使用

作者：Cszdyz2020
鏈接：前端技術--JQuery - Cszdyz2020 - 博客園
來源:博客園

總結

以上是生活随笔為你收集整理的jquery 在div追加文本_前端技术--JQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

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