jquery筆記

2024-04-27 15:03:49

字體：大中小

來源：轉載

供稿：網友

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，fasthide("slow")：隱藏，速度取值：毫秒，slow，normal，fast8：其他效果toggleClass("bor bg fon");相當于addClass和removeClass的切換toggle()：切換元素可見狀態（show()與hide()的效果）fadeIn("slow"):漸入效果，速度取值：毫秒，slow，normal，fastfadeOut("slow")：漸出效果，速度取值：毫秒，slow，normal，fastfadeToggle("slow")：漸入漸出效果，速度取值：毫秒，slow，normal，fastslideDown("slow")：可以使元素逐步延伸顯示，速度取值：毫秒，slow，normal，fastslideUp("slow")：使元素逐步縮短直至隱藏，速度取值：毫秒，slow，normal，fastslideToggle()：使元素在上拉與下拉切換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);})

上一篇：css自定義滾動條樣式

下一篇：Sublime Text 3配置JavaScript開發環境