JQuery

一、引言

1.JQuery是一個(gè)基于javascript語(yǔ)言的框架 --- 是對(duì)js代碼的合理封裝

2.js缺點(diǎn)，jquery優(yōu)點(diǎn)

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

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

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

?3）提供了強(qiáng)大的界面支持

二、第一個(gè)Jquery程序

1.搭建環(huán)境 -- 引入相關(guān)資源文件 （以.js文件形式存在）

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

2.知識(shí)點(diǎn)

?1）$("#id") --- 根據(jù)標(biāo)簽的id屬性值獲取標(biāo)簽對(duì)應(yīng)的jquery對(duì)象

?2）html() --- 獲取標(biāo)簽體里的內(nèi)容

?3）css("css屬性"，"css屬性值") --- 設(shè)置標(biāo)簽的css樣式

三、Jquery對(duì)象與DOM對(duì)象

區(qū)別：

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

?2.通過(guò)jquery方式獲取的對(duì)象為jquery對(duì)象 $("#id")，可以調(diào)用jquery定義的函數(shù)

四、Jquery對(duì)象選擇器

1.通過(guò)jquery選擇器獲取jquery對(duì)象 [ 重點(diǎn) ]

?1）基本選擇器

?$("#id") --- id選擇器，根據(jù)標(biāo)簽的id屬性值，得到標(biāo)簽所有對(duì)應(yīng)的jquery對(duì)象 [ 重點(diǎn) ]

?$(".class") --- 類選擇器，根據(jù)標(biāo)簽的class屬性值獲得相應(yīng)的jquery對(duì)象

?$("標(biāo)簽名") --- 標(biāo)簽選擇器，根據(jù)標(biāo)簽名獲取jquery對(duì)象 [ 重點(diǎn) ]

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

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

?注意：$ 就是 jQuery 這幾個(gè)字母

2）層次選擇器

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

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

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

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

3）過(guò)濾選擇器

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

?基本過(guò)濾選擇器

?:first ---- 獲取一組jquery對(duì)象中的第一個(gè)jquery對(duì)象，例：$("div:first") [ 重點(diǎn) ]

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

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

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

?:odd ---- 獲取一組jquery對(duì)象中小標(biāo)為奇數(shù)的jquery對(duì)象，例：$("div:odd")

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

?:gt(index) ---- 大于給定下標(biāo)的jquery對(duì)象，例：$("div:gt(1)") [ 重點(diǎn) ]

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

內(nèi)容過(guò)濾選擇器

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

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

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

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

可見性過(guò)濾選擇器

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

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

?屬性過(guò)濾選擇器

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

?[attribute=value] ----獲取一組jquery對(duì)象中的屬性為value的標(biāo)簽對(duì)象 [ 重點(diǎn) ]

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

?注意：給標(biāo)簽設(shè)置屬性 attr() prop()

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

表單屬性過(guò)濾選擇器

?:checked ---- 獲取一組jquery對(duì)象中的被選中的標(biāo)簽對(duì)象 checked=true的[ 重點(diǎn) ]

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

?:selected ---- 獲取一組option標(biāo)簽對(duì)象中的被選中的option [ 重點(diǎn) ]

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

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

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

五、通過(guò)DOM對(duì)象獲取jquery對(duì)象

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

1.通過(guò)dom對(duì)象獲取jquery對(duì)象

? var jqueryObject = $(dom對(duì)象)

? 2.通過(guò)html標(biāo)簽獲取jquery對(duì)象

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

六、Jquery對(duì)象的常用功能

注意：jquery對(duì)象支持鏈?zhǔn)秸{(diào)用，可以將所有功能通過(guò).的方式全部綴在對(duì)象之后 obj.xx().xx()...

1.length()或者size() --- 獲取一組jquery對(duì)象的個(gè)數(shù)

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

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

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

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

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

? 如果屬性不存在，函數(shù)會(huì)自動(dòng)為對(duì)象添加屬性

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

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

4.獲取和設(shè)置dom樣式

? 1）獲取或者設(shè)置css樣式

? css() --- 單個(gè)設(shè)置css樣式

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

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

? 2）關(guān)于隱藏和顯示標(biāo)簽

? hide(time) --- 在time毫秒內(nèi)隱藏jquery對(duì)象看（有動(dòng)畫效果）

? show(time) --- 以動(dòng)畫效果，在time毫秒內(nèi)顯示一個(gè)jquery對(duì)象

? 3）關(guān)于添加一類css樣式

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

? jquery對(duì)象.removeClass()

4）三個(gè)關(guān)于內(nèi)容處理

? html() --- 設(shè)置或者獲取標(biāo)簽體里的內(nèi)容（包括子標(biāo)簽和文本內(nèi)容），等價(jià)于js里的innerHTML

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

? 設(shè)置 --- jquery對(duì)象.html(內(nèi)容);

? text() --- 設(shè)置或者獲取標(biāo)簽體里的文本內(nèi)容

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

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

? 設(shè)置 --- jquery對(duì)象.val(值)；

? 5）向指定標(biāo)簽中存取數(shù)據(jù) data

? 只有一個(gè)參數(shù) 代表在當(dāng)前標(biāo)簽對(duì)象上獲取這個(gè)參數(shù)對(duì)應(yīng)的值

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

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

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

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

? 注意：保證鍵名不一致，保存的數(shù)據(jù)不顯示，可以在之后調(diào)用

? 6）測(cè)試滑動(dòng)效果 slideDown slideUp 元素需要隱藏（display:none）

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

? 7）動(dòng)畫效果

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

? 注意：如果要實(shí)現(xiàn)顏色動(dòng)畫效果，要添加jquery.color.js或者添加jquery-ui.js（ps：后者涵蓋較多）

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

七、Jquery對(duì)象添加事件

事件三要素：

1.事件源 通常指html中標(biāo)簽 2.事件 發(fā)生動(dòng)作 單擊 雙擊... 3.事件處理程序 通常函數(shù)完成功能

1.js里的事件處理

標(biāo)簽式事件處理 <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>

八、復(fù)合事件

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

九、圖片建議放大

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

注：使用過(guò)程中還應(yīng)注意對(duì)jquery其他插件的使用

作者：Cszdyz2020
鏈接：前端技術(shù)--JQuery - Cszdyz2020 - 博客園
來(lái)源:博客園

總結(jié)

以上是生活随笔為你收集整理的jquery input值改变事件_前端技术--JQuery的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。