jquery學習總結
---------------基礎語法---------
添加一個下屬節點
var $h=$("<p>第一段文字</p>");
$("#h11").append($h);
添加一個樣式
$("li").addClass("normalStyle");
添加一個屬性
$("li").css("color","blue");
移除id爲tr1的第二個表框
$("#tr1 td:eq(1)").remove();
克隆一個按鈕並顯示在id爲tr1的元素後面
$("#btn").click(function(){
$(this).clone().insertAfter($("#tr1"));
});
設置id爲key的 屬性
$("#key").attr("color","#ccc");
點擊以動畫出現 toggle 表示它下面的方法依次調用
$(function(){
$("h2").toggle(function(){
$(this).next("p").slideUp();
},function(){
$(this).next("p").slideDown();
});
});
<h2>點擊出現下面</h2>
<p style=" height:60px; background:#faa; border:solid 1px #d00;">一段文字</p>
# ////////////////////////////////////////////////////////////////////////////////
# // 目 錄 //
# // //
# // 1: 核心部分 //
# // 2: DOM操做 //
# // 3: css操做 //
# // 4: javascript處理 //
# // 5: 動態效果 //
# // 6: event事件 //
# // 7: ajax支持 //
# // //
# ////////////////////////////////////////////////////////////////////////////////
#
#
# ////////////////////////////////////////////////////////////////////////////////
# // 一：核心部分 //
# ////////////////////////////////////////////////////////////////////////////////
#
# /** (1)
# * $()
# * 運行：點擊文檔中全部a標籤時將彈出對話框
# * 說明：$("a") 是一個jQuery選擇器；$自己表示一個jQuery類，全部$()是構造一個 jQuery對象；
# * click() 是這個對象的方法。同理$ (document)也是一個jQuery對象，ready(fn)是$(document)的方法，
# * 表示當document所有下載完畢時執行函數。
# */
# /*
# $(document).ready(function(){
# // do something here
# $("a").click(function() {
# alert("Hello world!");
# });
#
# });
# */
#
# /** (2)
# * html()
# * 運行：當點擊id爲test的元素時，彈出對話框文字爲two，即div標籤下p元素的內容
# */
# /*
# function jq(){
# alert($("div > p").html());
# }
# */
#
# /** (3)
# * appendTo()
# * 運行：當點擊id爲test的元素時，向body中添加「<div><p>Hello</p>< /div>」
# */
# /*
# function jq(){
# $("<div><p>Hello</p></div>").appendTo("body");
# }
# */
#
# /** (4)
# * css()
# * 運行：當點擊id爲test的元素時，背景色變成黑色
# * 說明：原文爲$(document.body).background("black"); 在 jQuery1.2及以上版本中,@符號應該去除,background方法被css方法取代
# */
# /*
# function jq(){
# $(document.body).css("background-color","black");
# }
# */
#
# /** (5)
# * $(elems)
# * 運行：當點擊id爲test的元素時，隱藏form1表單中的全部元素。
# * 說明：限制jQuery做用於一組特定的DOM元素
# * 參數： elem：一組經過jQuery對象壓縮的DOM元素
# */
# /*
# function jq(){
# $(form1.elements ).hide();
# }
# */
#
# /** (6)
# * $(obj)
# * 運行：當點擊id爲test的元素時，彈出對話框文字爲two，即div標籤下p元素的內容。
# * 說明：複製一個jQuery對象
# */
# /*
# function jq(){
# var f = $("div");
# alert($(f).find("p").html());
# }
# */
#
# /** (7)
# * each(fn)
# * 運行：當點擊id爲test的元素時，img標籤的src都變成了2.jpg
# * 說明：將函數做用於全部匹配的對象上
# */
# /*
# function jq(){
# $("img").each(function(){
# this.src = "http://news.xinhuanet.com/ent/2006-08/23/xinsrc_592080323084167412218.jpg"; });
# }
# */
#
# /** (8)
# * get(num)
# * 運行：當點擊id爲test的元素時，alert對話框顯示：So is this，即第二個<p> 標籤的內容
# * 說明：獲取匹配元素，get(num)返回匹配元素中的某一個元素
# * 參數：get (Number): 指望限制的索引，從0 開始
# * 注意：get和eq的區別，eq返回的是jQuery對象，get返回的是所匹配的dom對象，全部取$("p").eq(1)對象的內容用jQuery方法html()，而取$("p").get(1)的內容用innerHTML
# */
# /*
# function jq(){
# alert($("p").get(1).innerHTML);
# }
# */
#
# /** (9)
# * eq(pos)
# * 運行：當點擊id爲test的元素時，alert對話框顯示：So is this，即第二個<p> 標籤的內
# * 說明：減小匹配對象到一個單獨的dom元素
# * 參數：pos (Number): 指望限制的索引，從0 開始
# * 注意：get和eq的區別，eq返回的是jQuery對象，get返回的是所匹配的dom對象，全部取$("p").eq(1)對象的內容用jQuery方法html()，而取$("p").get(1)的內容用innerHTML
# */
# /*
# function jq(){
# alert($("p").eq(1).html())
# }
# */
#
# /** (10)
# * index(obj)
# * 運行：當點擊id爲test的元素時，兩次彈出alert對話框分別顯示0，1
# * 說明：返回對象索引
# * 參數：obj (Object): 要查找的對象
# */
# /*
# function jq(){
# alert($("div").index(document.getElementById('test1')));
# alert($("div").index(document.getElementById('test2')));
# }
# */
#
# /** (11)
# * size()或Length
# * 運行：當點擊id爲test的元素時，彈出alert對話框顯示2，表示找到兩個匹配對象
# * 說明：當前匹配對象的數量，二者等價
# */
# /*
# function jq(){
# //alert($("img").length);
# alert($("img").size());
# }
# */
#
#
# ////////////////////////////////////////////////////////////////////////////////
# // 二：DOM操做 //
# ////////////////////////////////////////////////////////////////////////////////
# /** (1)
# * attr("屬性名")或attr("屬性名","屬性值")
# * 運行：先彈出對話框顯示id爲test的鏈接url(1.html)，在將其url改成2.html，當彈出對話框後會看到轉向到2.html
# * 說明： jquery自1.2.3版本取消了直接的href等相關操做屬性的方法，只能使用attr方式。包括src屬性等
# */
# /*
# function jq(){
# alert($("#test").attr("href"));
# $("#test").attr("href","2.html");
# }
# */
#
# /** (2)
# * after("html代碼")
# * 運行：在匹配元素後插入一段 html <b>Hello</b>；<a href="#" id="test" onClick="jq()"& gt;jQuery</a><b>Hello</b>
# * 說明：執行完後在界面可看見執行效果
# */
# /*
# function jq(){
# $("#test").after("<b>Hello</b>");
# }
# */
# /** (3)
# * after(elem)或after(elems)
# * 運行：將指定對象elem或對象組elems插入到在匹配元素後
# * 說明：執行後至關於 <a href="#" onClick="jq()">jQuery& lt;/a><p id="test">after</p>
# */
# /*
# function jq(){
# $("#test").after($("#hello"));
# }
# */
#
# /** (4)
# * append(html)
# * 運行：在匹配元素內部，且末尾插入指定html
# * 說明：同理還有 append(elem) append(elems) before(html) before(elem) before(elems)請執行參照 append和after的方來測試、理解！
# */
# /*
# function jq(){
# $("#test").append("<b>Hello</b>");
# }
# */
# /** (5)
# * appendTo(html)
# * 運行：在匹配元素內部，且末尾插入指定html
# * 說明：appendTo()與append() 正好相反
# */
# /*
# function jq(){
# $("<b>Hello</b>").appendTo($("#test"));
# }
# */
# /** (6)
# * appendTo(html)
# * 運行：複製一個id爲hello的對象而且放在id爲test的元素內部未尾
# * 說明：原元素無保持無變化
# */
# /*
# function jq(){
# $("#hello").clone().appendTo($("#test"));
# }
# */
# /** (7)
# * empty()
# * 運行：刪除匹配對象的全部子節點
# */
# /*
# function jq(){
# $("#delete").empty();
# }
# */
# /** (8)
# * prepend(elem/elems/html)
# * 運行：在匹配元素的內部且開始處插入
# * 說明：比較：append(elem),appendTo(expr),prepend(elem) ,append在匹配元素內部結束處插入,appendTo 與append匹配相反
# */
# /*
# function jq(){
# $ ("#delete").prepend($("#test1"))
# alert($ ("#delete").html());
# }
# */
# /** (8)
# * after(elem)
# * 運行：在匹配元素的外部後面開始插入
# * 說明：比較：before(elem)在匹配元素的外部前面開始插入,insertAfter(elem)與 after相反匹配,insertBefore(elem)與before匹配相反
# */
# /*
# function jq(){
# $ ("#delete").before($("#test1"))
# }
# */
# /** (9)
# * remove()
# * 運行：移除匹配對象
# * 說明：注意區分empty()，empty()移出匹配對象的子節點，remove()，移出匹配對象
# */
# /*
# function jq(){
# $ ("#delete").remove();
# }
# */
# /**(10)
# * wrap(htm)
# * 運行：將匹配對象包含在給出的html代碼內
# * 說明：wrap(elem) 將匹配對象包含在給出的對象內(只是一種包裝，原對象不變)
# */
# /*
# function jq(){
# //$("#delete").wrap("<b></b>");
# $("#delete").wrap($("#content"));
# }
# */
# /**(11)
# * add(el)
# * 運行：在匹配對象的基礎上在附加指定的dom元素
# * 說明：add(els)在匹配對象的基礎上在附加指定的一組對象，els是一個數組
# */
# /*
# function jq(){
# var f=$("p").add("b");
# //var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
# for(var i=0;i < $(f).size();i++){
# alert($(f).eq(i).html());}
# }
# */
# /**(12)
# * parents()
# * 運行：一依次以匹配結點的父節點的內容爲對象,通常一個文檔還有<body> 和<html>，依次類推下去
# * 說明：parents(expr)在parents()的基礎上之取符合表達式的對象
# * 注意：新版本中取代老版本的ancestors()
# */
# /*
# function jq(){
# var f= $("span").parents();
# for(var i=0;i < $(f).size();i++){
# alert($(f).eq(i).html());}
# }
# */
#
# /** (13)
# * children()
# * 運行：返回匹配對象的全部子結點
# * 說明：children(expr)返回匹配對象的子介點中符合表達式的節點,與之對應的有parent()和parent(expr)
# */
#
# /*
# function jq(){
# //alert($("#delete").children("span").html());
# alert($("#delete").children().html());
# }
# */
#
# /** (14)
# * contains( String text ) returns Array<Element>
# * 運行：匹配元素根據提供的test
# * 說明：contents( ) returns jQuery
# */
# /*
# function jq(){
# //$("p:contains('just')").css("text-decoration", "underline"); //pass
# //alert($("p:contains('just')").css("text-decoration", "underline").html()); //pass
# //$("p").contents().wrap("<b/>"); //pass Find all the text nodes inside a paragraph and wrap them with a bold tag.
# // $("p").not(".green, #blueone").css("text-decoration", "underline")//pass emoves elements matching the specified expression from the set of matched elements.
# }
# */
#
# /** (15)
# * filter( Function fn ) returns jQuery
# * 運行：首先選擇全部的div並設計其css,而後過濾掉除index爲1或id爲delete的元素，而且設置其css
# * 說明：過濾元素，把不匹配的 filter中定義的方法都過濾掉(當function return true時選擇，不然過濾)
# */
# /*
# function jq(){
# $("div").css("background", "#b4b0da")
# .filter(function (index) {
# return index == 1 || $(this).attr("id") == "delete";
# })
# .css("border", "3px double red");
# }
# */
# /** (15)
# * find("elem")
# */
# /*
# function jq(){
# alert($("div").find("#span").html());
# alert($("#delete").find("span").html());
# alert($("div").find("span").html());
# }
# */
# /**
# * is(expr)
# * 運行：判斷對象是否符合表達式,返回boolen值
# */
# /*
# function jq(){
# alert($("#p").is("#p"));
# }
# */
#
# /**
# * next()
# * 運行：返回匹配對象下一個兄弟節點
# * 說明：next(expr) 返回匹配對象下一個符合條件的兄弟節點中;prev(),prev,(expr) 參照next理解
# */
#
# /*
# function jq(){
# alert($("p").next().html());
# alert($("p").next("#one").html());
# }
# */
#
# /**
# * toggleClass(String)
# * 運行：將當前對象添加一個樣式，不是當前對象則移出此樣式，返回的是處理後的對象
# */
# /*
# function jq(){
# $("p").toggleClass("selected");
# }
# */
#
# /**
# * removeAttr (name)
# * 運行：將對象的指定屬性移出
# */
# /*
# function jq(){
# $("img"). removeAttr("src");
# }
# */
# function jq(){
# //alert($("#payoutListTable").size());
# //alert($("#payoutListTable").find("#tr2").html());
# //alert($("#payoutListTable").html());
# alert($("html").html());
# }
# ////////////////////////////////////////////////////////////////////////////////
# // 三：css操做 //
# ////////////////////////////////////////////////////////////////////////////////
# /*
# *css(name)
# *css(prop)
# *css(key, value)
# *說明：css(name) 獲取樣式名爲name的樣式；css(prop) prop是一個hash對象，用於設置大量的css樣式；css(key, value) 用於設置一個單獨得css樣式
# *
# */
# /*
# function jq(){
# //$("#b").css({ color: "red", background: "blue" });
# //$("#b").css("color","red");
# //alert($("#b").css("color"));
# }
# */
#
# ////////////////////////////////////////////////////////////////////////////////
# // 四：javascript處理 //
# ////////////////////////////////////////////////////////////////////////////////
# /**
# *
# */
# /*
# function jq(){
# if($.browser.msie) {
# alert("這是一個IE瀏覽器");}
# else if($.browser.opera) {
# alert("這是一個opera瀏覽器");}
# else alert("others");
# }
# */
# /**
# * $.each(obj, fn)
# * 說明：obj爲對象或數組，fn爲在obj上依次執行的函數，obj能夠爲一個hash對象，依次將hash中每組對象傳入到函數中
# */
# /*
# function jq(){
# //$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });
# $.each({ name: "John", lang: "JS" }, function(i){ alert( "Name: " + i + ", Value: " + this )});
# }
# */
# /**
# *
# */
# /*
# function jq(){
# var settings = { validate: false, limit: 5, name: "foo" };
# var options = { validate: true, name: "bar" };
# $.extend(settings, options);
# $.each(settings, function(i){ alert( i + "=" + this ); });
# }
# */
# /**
# * $.grep(array,fn)
# * 說明：經過函數fn來過濾array，將array中的元素依次傳給fn，fn必須返回一個boolen，如 fn返回true，將被過濾
# */
# /*
# function jq(){
# var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
# $.each(arr, function(i){ alert(i); });
# }
# */
# /*
# function jq(){
# var arr = $.merge([0,1,2],[2,1,3])
# $.each(arr,function(i){ alert(arr[i]); });
# }
# */
# /**
# * $.trim(str
# * 說明：移出字符串兩端的空格
# */
# /*
# function jq(){
# var arr ="Hello World!~ "
# var arrTrim=$.trim(arr);
# alert(arr.length);
# alert(arrTrim.length);
# }
# */
#
#
#
#
# ////////////////////////////////////////////////////////////////////////////////
# // 五：動態效果 //
# ////////////////////////////////////////////////////////////////////////////////
#
# /**
# * hide(speed)
# */
# /*
# function jq(){
# //$("#one").hide();
# //$("#one").hide("slow");//speed有3級 ("slow", "normal", "fast")
# //$("#one").hide(1300); //也能夠是自定義的速度
# //$("#one").hide(1300,function(){alert("hide");});//執行hide後招待指定方法
# }
# */
# /**
# * hide(speed)
# */
# /*
# function jq2(){
# //$("#one").show();
# //$("#one").show("slow");
# //$("#one").show(1300,function(){alert("shwo");});
# }
# */
# /**
# * fadeIn(speeds)
# */
# /*
# function jq(){
# $("#one").fadeIn("slow");
# //$("#one").hide("slow");//speed有3級 ("slow", "normal", "fast")
# //$("#one").hide(1300); //也能夠是自定義的速度
# //$("#one").hide(1300,function(){alert("hide");});//執行hide後招待指定方法
# }
# */
# /**
# * fadeOut(speeds)
# */
# /*
# function jq2(){
# $("#one").fadeOut("slow");
# //$("#one").hide("slow");//speed有3級 ("slow", "normal", "fast")
# //$("#one").hide(1300); //也能夠是自定義的速度
# //$("#one").hide(1300,function(){alert("hide");});//執行hide後招待指定方法
# }
# */
# /**
# * fadeTo(speed, opacity, callback)
# */
# /*
# function jq(){
# $("#one").fadeTo("slow",0.2,function(){alert("fadeTo 0.2");});
# }
# */
# /**
# * slideDown(speed, callback)
# */
# /*
# function jq(){
# $("#one").slideUp("slow",function(){alert("slideUp");});
# }
# */
# /**
# * slideDown(speed,callback)
# */
# /*
# function jq2(){
# $("#one").slideDown("slow",function(){alert("slideDown");});
# }
# */
# /**
# * slideToggle(speed,callback)
# */
# function jq2(){
# $("#one").slideToggle("slow",function(){alert("slideToggle");});
# }
#
# ////////////////////////////////////////////////////////////////////////////////
# // 六：event事件 //
# ////////////////////////////////////////////////////////////////////////////////
# /**
# * hover(fn,fn)
# */
# /*
# $(function(){
# $("#one").hover(
# function(){$(this).addClass("red");},
# function(){ $(this).removeClass("red");
# });
# })
# */
#
# /**
# * toggle(fn,fn)
# */
# /*
# $(function(){
# $("#one").toggle (
# function(){$(this).addClass("red");},
# function(){ $(this).removeClass("red");
# });
# })
# */
# /**
# * bind(type, fn)
# */
# /*
# $(function(){
# $("#one").bind("click",function(){
# alert("click");
# $("#one").unbind("click");
# });
# })
# */
# ////////////////////////////////////////////////////////////////////////////////
# // 七：ajax支持 //
# ////////////////////////////////////////////////////////////////////////////////
# /**
# 通用方式：
# $.ajax(prop) 經過一個ajax請求，回去遠程數據，prop是一個hash表，它能夠傳遞的key/value有如下幾種 。
# (String)type：數據傳遞方式(get或post)。
# ((String)url：數據請求頁面的url
# ((String)data：傳遞數據的參數字符串，只適合post方式
# ((String)dataType：期待數據返回的數據格式(例如 "xml", "html", "script",或 "json")
# ((Boolean)ifModified： 當最後一次請求的相應有變化是才成功返回，默認值是 false
# ((Number)timeout: 設置時間延遲請求的時間。能夠參考$.ajaxTimeout
# ((Boolean)global：是否爲當前請求觸發ajax全局事件，默認爲true
# ((Function)error：當請求失敗時觸發的函數。
# ((Function)success：當請求成功時觸發函數
# ((Function)complete：當請求完成後出發函數
# */
# /*
# // 示例：
# function pageselectCallback(page_id, jq) {
# $.ajax({
# type: "POST",
# url: "../account/alloplist.action?pageNo=" + (page_id*1+1),
# data: "timedesc=" + $("#TiemDese").val()+"&userid=<c:out value='${userid}'/>",
# success: function(msg) {
# $("#tabs-3").html(msg);
# }
# });
# }
# //說明：些示例爲翻頁的ajax請求jquery處理,
# 傳遞方式爲post,指定了請求路徑(URL),傳遞的參數數據，若是操做成功將更新id爲 tabs-3的標籤
# */
javascript
- 1. jQuery學習總結
- 2. JQuery--學習總結
- 3. jquery學習總結
- 4. jquery學習全面總結
- 5. jquery一週學習總結
- 6. jquery mobile 學習總結
- 7. jquery的學習總結（一）
- 8. jquery -ajax學習總結
- 9. jQuery學習總結（一）——jQuery基礎與學習資源
- 10. jquery學習筆記總結（轉載）
- 更多相關文章...
- • XML 總結 下一步學習什麼呢？ - XML 教程
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
- 1. jQuery學習總結
- 2. JQuery--學習總結
- 3. jquery學習總結
- 4. jquery學習全面總結
- 5. jquery一週學習總結
- 6. jquery mobile 學習總結
- 7. jquery的學習總結（一）
- 8. jquery -ajax學習總結
- 9. jQuery學習總結（一）——jQuery基礎與學習資源
- 10. jquery學習筆記總結（轉載）