JQuery，jquery官網

JQuery，jquery官網

基本知識

JQuery就是JavaScript和查詢（Query），即是輔助JavaScript開發的庫。

文件類型分為完整版和被編譯過的

使用：在文件中新建文件夾，然後將JQuery包復制到文件夾中，引用

$符號是JQuery的特有符號必須寫

選擇器

例：

<div id="div1" class="div1">

<a>aaaaaaaaaaaaaa</a>

</div>

<div class="div"></div>

<div id="div2"></div>

基本選擇器

ID選擇器：$("#div1")

Class選擇器：$("div")

標簽選擇器 

並列：用逗號隔開   $("#div1,#div2")可以在後面加.css(樣式) 

後代：用空格隔開

過濾選擇器

基本過濾

首尾

$(".div:first/last  ") 

任意個

eq（索引號）$(".div：eq（）") 

不等於

大於

：gt（）；$(".div：gt（）") 

小於

：lt（）；$(".div：lt（）") 

排除

$(".div：not（.div:eq（索引號））") 

奇偶

$(".div:odd/even ")

屬性名過濾

$(".div[屬性名] ")

內容過濾

文字 $(".div::contains("字符串")")

子元素 $(".div:has(選擇器)")

事件

常規事件

1.把js中的onclick的on去掉即可

格式：

$(".div").click(function(){

});  （雙擊dblclick）

復合事件

$(".div").hover(function(){

$(this).css("background-color","red");

}，function(){

$(this).css("background-color","white");

});(光棒)

$(".div").toggle(function(){

$(this).css("background-color","red");

},function(){

$(this).css("background-color","green");

},function(){

$(this).css("background-color","yellow");

},function(){

$(this).css("background-color","gray");

});  (不斷點擊切換)

事件冒泡

阻止時間冒泡：

$(".aa").click(function(){

return false;

})

DOM操作

操作內容(改變內容)

$("#a").click(function(){

$(this).text("bbbb");

});

 文本框內的內容改變

$("#按鈕").click(function(){

$("#文本框").val("改變的內容")；

$(this).val("按鈕改變的內容")；

})

如果寫到head裡面要加上

$(document).ready(function(){

在內部寫

})

操作內容

表單元素

取值：var s = $("選擇器").val()

賦值：$("選擇器").val("值")

非表單元素

取值：var s = $("選擇器").html(),  var s = $("選擇器").text()

賦值：$("選擇器").html("內容"), $("選擇器").text("內容")

操作屬性

獲取屬性：var s = $("選擇器").attr("屬性名")

設置屬性：$("選擇器").attr("屬性名","屬性值")

刪除屬性：$("選擇器").removeAttr("屬性名")

操作樣式

操作內聯樣式 

獲取樣式：var s = $("選擇器").css("樣式名")

設置樣式：$("選擇器").css("樣式名","值")

操作樣式表的css

添加class：$("選擇器").addClass("class名")

移除class：$("選擇器").removeClass("class名") 

添加移除交替class:$("選擇器").toggleClass("class名")

 操作相關元素

例：<style type="text/css">

#div1{

width:400px;

height:400px;

background-color:red;

}

#div2{

width:300px;

height:300px;

background-color:blue;

}

#div3{

width:200px;

height:200px;

background-color:yellow;

}

<div id="div1">

<div id="div2">

<div id="div3">

</div>

</div>

</div>

 

查找

父、前輩

$("div3").click(function(){

var a=$(this).parent();

});(前一個)

在parent後面加.parent就是再前一級

$("div3").click(function(){

 var a=$(this).parents("#div1"); 

});(前輩)

子、後輩 

$("div1").click(function(){

 var a=$(this).children();（子） 

});

$("div1").click(function(){ 

var a=$(this).find("#div3"); (後輩)

});

例：

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

兄弟

next後面一個元素    nextAll（所有的）（選擇器）後面兄弟級的元素

prev前面一個元素    prevAll（所有的）（選擇器）

 $("div1").click(function(){ 

 var a=$(this).next().next(); 

 });

操作

新建

$("HTML字符串")

添加

（1）appen(jquery對象)內部添加 （2）after(,..)下部平級添加（3）before("...")  上部平級添加

復制

clone()

移除

（1）empty()清空內部全部元素   （2）remove()移除元素