簡介：

jquery 全稱 javaScript Query.是js的一個框架。本質上仍然是js。特點：支持各種主流的瀏覽器、使用特別簡單、擁有便捷的插件擴展機制和豐富的插件。

一、JQuery內部封裝原理介紹：匿名閉包。

下面這兩行代碼是jquery包下的已經封裝的代碼，因為window我們可以省略不寫，因此我們可以直接使用 $ 符號。

// Expose jQuery to the global object

window.jQuery = window.$ = jQuery;

匿名自調用，即使用閉包，將函數要執行的數據一次性掛載到window對象下。其推導過程如下：

function fn1(){

console.log("函數");

};

// 調用函數

fn1();

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

(function (){

console.log("函數");

})();

因此對上面函數形參傳進去obj，下面的實參傳進去window對象，即為下面的表示形式

(function(obj){

//var bjsxt={};

obj.test=function(){

alert("工廠");

}

alert("匿名自調用");

})(window)

因此實現了由局部變量到全局變量window的一個轉變。注：因為window是一個全局變量，而且不能夠被修改和重定義。

二、jquery基本選擇器介紹：id，標簽，類，組合

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

下面是一些子選擇器，層級選擇器，等具體哪個可以去查找對應的API

//測試子選擇器

function testChild(){

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

alert(inps.length);

}

//測試層級選擇器

function testCj(){

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

alert(inp.val());

}

function testCj2(){

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

alert(tds.html());

}

三、jquery操作元素屬性

他封裝了set/getattribute方法，這里面對應的是attr ，同樣存在一個問題：不可以獲取實時的input text框中的內容，這個時候要使用value 這里對應的是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操作元素內容

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

jquery 操作元素內容學習：

獲取元素對象

1、獲取

對象名.html()//返回當前對象的所有內容，包括HTML標簽。

對象名.text()//返回當前對象的文本內容，不包括HTML標簽

2、修改

對象名.html("新的內容")//新的內容會將原有內容覆蓋，HTML標簽會被解析執行

對象名.text("新的內容")//新的內容會將原有內容覆蓋，HTML標簽不會被解析

五、jquery操作元素樣式 css

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

六、js操作文檔結構

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

操作文檔結構學習：

獲取元素對象

1、內部插入

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

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

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

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

2、外部插入

after 將指定的內容追加到指定的元素后面

before 將指定的內容追加到指定的元素前面

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

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

3、包裹

4、替換

5、刪除

empty()

七、事件機制的學習

特點：jquery可以對事件添加，并且同一個事件可以添加多種效果，而js只能添加一種，添加多種的話會覆蓋。

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

//js動態添加事件

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");

})

八、動畫效果：

本質就是使用jquery的 hide show屬性來修改div的顯示時間，同時加上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);

}

總結

jquery就是對js的封裝，方便我們調用，在了解了js之后學起來非常塊，對于一個后端開發者來說，了解還是必須的。

在使用jquery實現一些動態效果的時候，可以靈活的運用標志位，比如鼠標點擊事件，點擊一次flag改變一次。可以用來達到某種動態效果的判斷條件。

總結

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

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