web前端三大主流框架對比：jquery參考手冊打不開

本文是我再學習jquery總結的一些筆記，希望給大家帶來一些幫助。基本了解以下內容幾乎就夠用了

1：基本選擇器：

(“li,p”)：li標籤與p標籤並集

(“li p”)：li標籤的後代p標籤

(“li>p”)：li標籤的子代p標籤

(“li.clas”)：li標籤中class屬性值為clas的標籤

(“li#clas”)：li標籤中id屬性值為clas的標籤

(“li~p”)：li標籤後面緊鄰的所有同級標籤

(“li+p”)：li標籤後面緊鄰的下一個同級標籤

2：屬性選擇器

$(“[href]”)：包含href屬性的所有標籤

$(“[href=’#’]”)：包含href屬性值為#的所有標籤

$(“[href!=’#’]”)：包含href屬性值不等於#的所有標籤

$(“[href^=’en’]”)：包含href屬性值開頭為en字元的所有標籤

$(“[href$=’.jpg’]”)：包含href屬性值結尾為.jpg字元的所有標籤

$(“[href*=’txt’]”)：包含href屬性值含有txt字元的所有標籤

$(“li[id][title=新聞])：包含id屬性和title屬性值為新聞的li標籤

3：基本過濾選擇器

$(“li:first”)：所有li標籤中的第一個li標籤

$(“li:last”)：所有li標籤中的最後一個li標籤

$(“li:even”)：所有li標籤中的索引為偶數的li標籤（從0開始）

$(“li:odd”)：所有li標籤中的索引為奇數的li標籤（從0開始）

$(“li:eq(1)”)：所有li標籤中的索引等於1的標籤（從0開始）

$(“li:gt(1)”)：所有li標籤中的索引大於1的標籤（從0開始）

$(“li:lt(1)”)：所有li標籤中的索引小於1的標籤（從0開始）

4：鍵盤事件

keydown()：按下鍵盤時

keyup()：釋放鍵盤時

keypress()：產生可列印的字元時

5：表單事件

focus()：獲得焦點

blur()：失去焦點

（fieldset標籤—-表單域，legend標籤—-域標題）

<fieldset>

<legend>登錄</legend>

帳號：<input type=”text”/>

密碼：<input type=”password”/>

<fieldset>

6：滑鼠游標懸停事件

hover()：相當於mouseover與mouseout事件的組合

7：顯示及隱藏元素

show(“slow”)：顯示，速度取值：毫秒，slow，normal，fast

hide(“slow”)：隱藏，速度取值：毫秒，slow，normal，fast

8：其他效果

toggleClass(“bor bg fon”);相當於addClass和removeClass的切換

toggle()：切換元素可見狀態（show()與hide()的效果）

fadeIn(“slow”):漸入效果，速度取值：毫秒，slow，normal，fast

fadeOut(“slow”)：漸出效果，速度取值：毫秒，slow，normal，fast

fadeToggle(“slow”)：漸入漸出效果，速度取值：毫秒，slow，normal，fast

slideDown(“slow”)：可以使元素逐步延伸顯示，速度取值：毫秒，slow，normal，fast

slideUp(“slow”)：使元素逐步縮短直至隱藏，速度取值：毫秒，slow，normal，fast

slideToggle()：使元素在上拉與下拉切換

animate()：通過控制元素改變樣式的過程的時間來實現動畫效果—-animate({樣式},1000) 一秒之內變成指定的樣式

9:樣式

overflow:hidden 超出區域部分隱藏

position:absolute 絕對定位

position:relative 相對定位

相對定位：人走了 坑還在

position: relative;top: 200px; 像下移動兩百px

絕對定位:最近的祖先元素為參考物

position: absolute;right: 200px;

固定定位：針對瀏覽器定位

fixed; right: 100px;

background-color: rgba(0,0,0,0.5);給背景顏色透明

text-transform:capitalize讓文本每個單詞首字母大寫

10.文本內容

$(“div”).html();//獲取第一個匹配元素的HTML內容或文本

$(“div”).html(“”);//可以編譯成Html語言

$(“div”).text();//獲取所有匹配元素的文本內容

$(“div”).text(“”);//只能獲取文本

$(this).val();//獲取val值

$(this).val(“”);//設置val的值 jquery中調用.val()方法，js中.value的屬性

11.節點插入

元素內部

$(“ul”).append($fd); //將jquery對象插到ul最後

$fd.appendTo(“ul”); //將jquery對象 插到ul最後

$(“ul”).prepend($fd); //將jquery對象插到ul最前

$fd.prependTo(“ul”); //將jquery對象插到ul最前

同輩節點插入

var $na=$(“<p>A</p>”);

$(“ul”).after($na); 在ul之前插入同輩元素

$na.insertBefore(“ul”); 在ul之前插入同輩的另一個元素

var $nae= $(“<ol><li>B</li></ol>”);

$(“ul”).after($nae); 在ul之後插入一個同輩元素

$nae.insertAfter(“ul”); 在ul之後插入一個同輩元素

12.複製節點

$(“”).clone(true)複製節點

13.刪除節點

remove()// 刪除整個節點

empty() // 清空節點內容

function del(test){

$(test).remove();

}

onclick=”del(this)”//當前的

$(function(){

為類.del綁定一個click事件

$(document).on(“click”,”.del”,function(){

$(this).parent().parent.remove();

})

為類.add綁定一個click事件

$(document).on(“click”,”.add”,function(){

})

14.獲取與設置節點的屬性

$(“img”).attr({“title”:”病毒”,”alt”:”模擬”});//設置多個屬性

$(“img”).attr(“title”:”病毒”);//設置單個屬性

$(“img”).removeAttr(“title alt”)//刪除多個屬性用空格

})

15.遍歷

$（”li”）.each(function(index,element){

});

$(“body”).children();//body下面所有子元素

.next()//緊鄰的下一個

.prev()//緊鄰的上一個

.siblings()//除了自己其他的同輩元素

$(“”).parent()//當前的父輩元素

$(“”).parents(“tr”)為tr的父輩元素

$(“”).parents()所有的父輩元素

伺服器端:

Gson g=new Gson();

String json=g.toJson(list);//將list數組轉為json數組

pw.print(json);

前端：

$.post(“/JSP/json”,function(result){

var strs=””;

var json=$.parseJSON(result);//返回一個JS 形式的JSON數組

for(var i=0;i<json.length;i++){

strs+=json[i].id+” “+json[i].title+”<br/>”;

}

$(“div”).html(strs);

})