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元素