簡介：

jquery 全稱 javaScript Query.是js的一個(gè)框架。本質(zhì)上仍然是js。特點(diǎn)：支持各種主流的瀏覽器、使用特別簡單、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。

一、JQuery內(nèi)部封裝原理介紹：匿名閉包。

下面這兩行代碼是jquery包下的已經(jīng)封裝的代碼，因?yàn)閣indow我們可以省略不寫，因此我們可以直接使用 $ 符號(hào)。

// Expose jQuery to the global object

window.jQuery = window.$ = jQuery;

匿名自調(diào)用，即使用閉包，將函數(shù)要執(zhí)行的數(shù)據(jù)一次性掛載到window對象下。其推導(dǎo)過程如下：

function fn1(){

console.log("函數(shù)");

};

// 調(diào)用函數(shù)

fn1();

// fn1時(shí)函數(shù)名，它包含函數(shù)的代碼，函數(shù)的代碼就是“function(){console.log("函數(shù)");}”，用括號(hào)包裹，替換fn1，得：

(function (){

console.log("函數(shù)");

})();

因此對上面函數(shù)形參傳進(jìn)去obj，下面的實(shí)參傳進(jìn)去window對象，即為下面的表示形式

(function(obj){

//var bjsxt={};

obj.test=function(){

alert("工廠");

}

alert("匿名自調(diào)用");

})(window)

因此實(shí)現(xiàn)了由局部變量到全局變量window的一個(gè)轉(zhuǎn)變。注：因?yàn)閣indow是一個(gè)全局變量，而且不能夠被修改和重定義。

二、jquery基本選擇器介紹：id，標(biāo)簽，類，組合

注意：id選擇器要加#、標(biāo)簽選擇器什么都不加、類選擇器要加“ . ”、組合選擇器就是直接寫多個(gè)，中間用逗號(hào)隔開。

下面是一些子選擇器，層級(jí)選擇器，等具體哪個(gè)可以去查找對應(yīng)的API

//測試子選擇器

function testChild(){

var inps=$("#showdiv>input");

alert(inps.length);

}

//測試層級(jí)選擇器

function testCj(){

var inp=$("input:first");

alert(inp.val());

}

function testCj2(){

var tds=$("td:not(td[width])");

alert(tds.html());

}

三、jquery操作元素屬性

他封裝了set/getattribute方法，這里面對應(yīng)的是attr ，同樣存在一個(gè)問題：不可以獲取實(shí)時(shí)的input text框中的內(nèi)容，這個(gè)時(shí)候要使用value 這里對應(yīng)的是val 方法

function testField(){

//獲取元素對象

var uname=$("#uname");

//獲取

alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());

}

function testField2(){

//獲取元素對象

var uname=$("#uname");

uname.attr("type","button");

}

四、jquery操作元素內(nèi)容

和js中的是一樣的也是一個(gè)innerHTML 和一個(gè)innerText，只不過是名字不同。

jquery 操作元素內(nèi)容學(xué)習(xí)：

獲取元素對象

1、獲取

對象名.html()//返回當(dāng)前對象的所有內(nèi)容，包括HTML標(biāo)簽。

對象名.text()//返回當(dāng)前對象的文本內(nèi)容，不包括HTML標(biāo)簽

2、修改

對象名.html("新的內(nèi)容")//新的內(nèi)容會(huì)將原有內(nèi)容覆蓋，HTML標(biāo)簽會(huì)被解析執(zhí)行

對象名.text("新的內(nèi)容")//新的內(nèi)容會(huì)將原有內(nèi)容覆蓋，HTML標(biāo)簽不會(huì)被解析

五、jquery操作元素樣式 css

js中的是直接對象.style.color=***;這里可以調(diào)用css()方法加上JSON來使用，

六、js操作文檔結(jié)構(gòu)

將指定內(nèi)容添加到對象內(nèi)部、外部。等等，可以看API手冊

操作文檔結(jié)構(gòu)學(xué)習(xí)：

獲取元素對象

1、內(nèi)部插入

append("內(nèi)容") 將指定的內(nèi)容追加到對象的內(nèi)部

appendTo(元素對象或者選擇器) 將制定的元素對象追加到指定的對象內(nèi)容

prepend() 將指定的內(nèi)容追加到對象的內(nèi)部的前面

prependTo() 將制定的元素對象追加到指定的對象內(nèi)容前面

2、外部插入

after 將指定的內(nèi)容追加到指定的元素后面

before 將指定的內(nèi)容追加到指定的元素前面

insertAfter 把所有匹配的元素插入到另一個(gè)、指定的元素元素集合的后面

insertBefore 把所有匹配的元素插入到另一個(gè)、指定的元素元素集合的前面。

3、包裹

4、替換

5、刪除

empty()

七、事件機(jī)制的學(xué)習(xí)

特點(diǎn)：jquery可以對事件添加，并且同一個(gè)事件可以添加多種效果，而js只能添加一種，添加多種的話會(huì)覆蓋。

注：頁面載入事件：js中式onload在這里不是使用bind而是使用ready方法。。可以看下面代碼！

//js動(dòng)態(tài)添加事件

function testThing(){

//獲取元素對象

var btn=document.getElementById("btn2");

//添加事件

btn.οnclick=function(){

alert("我是js方式");

}

}

//jquery

//測試bind綁定

function testBind(){

$("#btn2").bind("click",function(){alert("我是bind綁定單擊事件")});

$("#btn2").bind("click",function(){alert("我是bind綁定單擊事件2w2222")});

}

//測試unBind解綁

function testUnfBind(){

$("#btn3").unbind("click");

}

//測試one

function testOne(){

$("#btn3").one("click",function(){alert("我是one")});

}

//頁面載入事件

//js方式

window.οnlοad=function(){

alert("我是js方式頁面加載");

}

window.οnlοad=function(){

alert("我是js方式頁面加載2222");

}

//jquery方式

$(document).ready(function(){

alert("我是jQuery");

})

$(document).ready(function(){

alert("我是jQuery22222");

})

八、動(dòng)畫效果：

本質(zhì)就是使用jquery的 hide show屬性來修改div的顯示時(shí)間，同時(shí)加上css的display：none等屬性

function test(){

$("#showdiv").show(3000);

$("#div01").hide(3000);

/*$("#showdiv").hide(3000);

$("#div01").show(3000);*/

$("div").toggle(3000);

$("#showdiv").slideDown(3000);

$("#div01").slideUp(2000);

$("#showdiv").fadeOut(3000);

}

總結(jié)

jquery就是對js的封裝，方便我們調(diào)用，在了解了js之后學(xué)起來非常塊，對于一個(gè)后端開發(fā)者來說，了解還是必須的。

在使用jquery實(shí)現(xiàn)一些動(dòng)態(tài)效果的時(shí)候，可以靈活的運(yùn)用標(biāo)志位，比如鼠標(biāo)點(diǎn)擊事件，點(diǎn)擊一次flag改變一次。可以用來達(dá)到某種動(dòng)態(tài)效果的判斷條件。

總結(jié)

以上是生活随笔為你收集整理的java web使用jquery,JAVA_Web_JQuery的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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