jQuery經常使用的方法

時間 2019-11-15

原文原文鏈接

jQuery 是一個 JavaScript 庫。如下方法是在jquery對象上使用，不管是不是方法連用
$("div").children("p").css({"color":"red","border":"2px solid red"})
都不能拋棄這個初衷
  
  
  
使用 Google 的 CDN
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
    /jquery/1.4.0/jquery.min.js"></script>
    </head>
使用 Microsoft 的 CDN
    <head>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
    /jquery-1.4.min.js"></script>
    </head>

jQuery 名稱衝突
    jQuery 使用 $ 符號做爲 jQuery 的簡介方式。
    某些其餘 JavaScript 庫中的函數（好比 Prototype）一樣使用 $ 符號。
    jQuery 使用名爲 noConflict() 的方法來解決該問題。
    var jq=jQuery.noConflict()，幫助您使用本身的名稱（好比 jq）來代替 $ 符號。

全部 jQuery 函數位於一個 document ready 函數中，爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼。
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p").css("background-color","red");
      });
    });
    </script>

jQuery 選擇器語法 http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
    $(this) 隱藏當前的 HTML 元素
    $("#test") id="test" 的元素
    $("p") 全部 <p> 元素
    $(".test") 全部 class="test" 的元素

    $("p.intro") 選取全部 class="intro" 的 <p> 元素。
    $("p#demo") 選取全部 id="demo" 的 <p> 元素。
    $("ul li:first")   每一個 <ul> 的第一個 <li> 元素
    $("div#intro .head")   id="intro" 的 <div> 元素中的全部 class="head" 的元素
    $("div,p) 全部的div 和p 的元素


    jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
    $("[href]") 選取全部帶有 href 屬性的元素。
    $("[href='#']") 選取全部帶有 href 值等於 "#" 的元素。
    $("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。
    $("[href$='.jpg']") 選取全部 href 值以 ".jpg" 結尾的元素。

經常使用事件 http://www.w3school.com.cn/jquery/jquery_ref_events.asp

    $("#test").hide() 隱藏
    $("div1").show()
    $("#div1").css("display", "block"); 
    $("#div1").attr("style", "display:block;");

    $(selector).click(function(e){})   點擊
    $(selector).dblclick(function) 雙擊
    $(selector).focus(function)    元素焦點

    select()   select 事件
    submit()   submit 事件
    change()    change 事件
    error()        error 事件
    mousedown()
    mouseenter()   mouse enter 事件
    mouseleave()   mouse leave 事件
    mousemove()    mouse move 事件
    mouseout() mouse out 事件
    mouseover()    mouse over 事件
    mouseup()  mouse up 事件
    event.isDefaultPrevented() 返回 event 對象上是否調用了 event.preventDefault()。
    event.preventDefault() 取消默認行爲，例，點擊提交時阻止對錶單的提交，
                           不被ie支持，ie用window.event.returnValue=false;
    event.timeStamp    事件發生時時間戳
    load() 觸發、或將函數綁定到指定元素的 load 事件
    one()  向匹配元素添加事件處理器。每一個元素只能觸發一次該處理器。

    
經常使用html操做方法  不少方法在設置值時可用函數return值，函數的參數意義可參照
http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp
    $("p").css("background-color")返回
    $("p").css("background-color","red"); css （把全部 p 元素的背景顏色更改成紅色）
    $("#test").attr("href")          返回屬性的值
     $("#test").attr({"href" : "http://。。。。","title" : "。。。"});設置多屬性的值
    $("#test").attr("href",function(index,oldValue){return oldValue + "/jquery";});函數獲取
    $("#div1").width(500).height(500); 設置寬高
    $("li").length  獲取長度
    removeAttr()   從全部匹配的元素中移除指定的屬性。
    addClass() 向匹配的元素添加指定的類名。
    hasClass() 是否擁有指定的類。
    removeClass()  從全部匹配的元素中刪除所有或者指定的類。
    $.trim()清除包括換行符、空格、製表符等常見的兩端空白字符。

    刪除元素/內容
    empty()    刪除匹配的元素集合中全部的子節點。
    remove()移除全部匹配的元素。刪除 class="italic" 的全部 <p> 元素：$("p").remove(".italic");

    添加新的 HTML 內容
    append() - 在被選元素的結尾插入內容
    prepend() - 在被選元素的開頭插入內容
    after() - 在被選元素以後插入內容
    before() - 在被選元素以前插入內容

    得到內容 - text()、html() 以及 val()
    <p id="test1" >這是段落中的<b>粗體</b>文本。</p>
    <p>姓名：<input type="text" id="test2" value="米老鼠"></p>
    $("#test1").text() - 返回文本內容  （這是段落中的粗體文本。）
    $("#test1").html() - 返回所選元素的內容（包括 HTML 標記）（這是段落中的<b>粗體</b>文本。）
    $("#test2").val() - 返回表單字段的值
    設置內容 - text()、html() 以及 val()
    $("#test1").text("Hello world!");
    $("#test1").html("<b>Hello world!</b>");
    $("#test2").val("Dolly Duck");
    $("#test1").text(function(index,oldValue){return oldValue + "/jquery";});
    
    jQuery.param()  建立數組或對象的序列化表示，適合在 URL 查詢字符串或 Ajax 請求中使用。
    $("#Form").serialize() 將表單內容序列化爲字符串。
    $("#Form")..serializeArray()   序列化表單元素，返回 JSON 數據結構數據。
    $("p").get(0) 得到第一個 p 元素的名稱和值
    得到第一個 p 元素的名稱和值：
    $("p").index());
    
    $("li").size() 輸出被 jQuery 選擇器匹配的元素的數量
    
    將 li 元素轉換爲數組，而後輸出該數組元素的 innerHTML
        $("button").click(function(){
          x=$("li").toArray()
          for (i=0;i<x.length;i++)
            {
            alert(x[i].innerHTML);
            }
        });

遍歷方法 （不帶參數時返回指定元素的方法所獲取的全部元素）
http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp
    遍歷父元素
    $("span").parent("p").css({"color":"red","border":"2px solid red"})
                            返回直接父元素中是元素p的
    $("span").parents("ul").css({"color":"red","border":"2px solid red"})
                             返回祖先元素中是元素ul的
    $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"})
                      返回介於給定祖先元素div和備選元素span元素之間的全部祖先元素(不包括div)
    遍歷子元素（find必須帶參數）
    $("div").children("p").css({"color":"red","border":"2px solid red"})
                           返回直接子元素是元素p的
    $("div").find("p").css({"color":"red","border":"2px solid red"}) 
                           返回被選元素的全部後代p元素
    $("div").find("*").css({"color":"red","border":"2px solid red"});
                            返回被選元素的全部後代元素
    遍歷同袍元素
    $("h2").siblings("p").css({"color":"red","border":"2px solid red"})
                        返回被選元素的全部同胞元素p
    $("h2").next("p").css({"color":"red","border":"2px solid red"});
                         返回被選元素的下一個同胞元素是p的
    $("h2").nextAll("h3").css({"color":"red","border":"2px solid red"});
                         返回被選元素的全部跟隨的同胞元素是h3的
    $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
                         返回介於給定參數h6和被選元素h2之間的（不包括h6）全部跟隨的同胞元素
    $("h2").prev("p").css({"color":"red","border":"2px solid red"});
                            返回被選元素的上一個同胞元素是p的
    $("h2").prevAll("h3").css({"color":"red","border":"2px solid red"});
                          返回被選元素的全部前面的同胞元素是h3的
    $("h2").prevUntil("h6").css({"color":"red","border":"2px solid red"});
                    返回介於給定參數h6和被選元素h2之間的（不包括h6）全部前面的同胞元素
    其餘遍歷
    $('li.item-a').closest('ul').css('background-color', 'red');
                    返回被選元素的第一個祖先元素，返回向上的離類是item-a的li元素最近的ul元素
        $("li").each(function(){alert($(this).text())
                    爲每一個匹配元素規定運行的函數。
    .end()返回到上一個選擇器對象
    $('#modifyDialogContent').find('#cateid').val(1).end().find('#catename').val('商品')
                    找到模態框modifyDialogContent的cateid賦值爲1，返回（.end()）到
                    modifyDialogContent選擇器對象 找到catename賦值爲商品

過濾 http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp
    $("div p").first().css("background-color","yellow");返回被選元素的首個元素
    $("div p").last().css("background-color","yellow");返回被選元素的最後一個元素
    $("p").eq(1).css("background-color","yellow");
                                    返回被選元素中帶有指定索引號的元素（必須寫索引號）
    $("p").filter(".intro").css("background-color","yellow");過濾出class="intro"的p元素
    $("p").not(".intro").css("background-color","yellow");過濾出class！="intro"的p元素

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。