精华内容
参与话题
问答
  • JQuery框架介绍

    千次阅读 2008-08-27 20:43:00
     jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的! 下载地址:Starterkit ...
     官方网站:http://jquery.com

        jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!
       下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip
                           jQuery Downloads (http://jquery.com/src/

       下载完成后先加载到文档中,然后我们来看个简单的例子!
    <script language="javascript" type="text/javascript">   
        $(document).ready(function(){
            $("a").click(function() {
            alert("Hello world!");
       });
    });
    <script>

         上 边的效果是点击文档中所有a标签时将弹出对话框,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个 jQuery对象,click()是这个对象的方法,同理$ (document)也是一个jQuery对象,ready(fn) 是$(document)的方法,表示当document全部下载完毕时执行函数。
         在进行下面内容之前我还要说明一点$("p") 和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p" (<span  id="p"></span>)的元素.

    我将从以下几个内容来讲解jQuery的使用:
    1:核心部分
    2:DOM操作
    3:css操作
    4:javascript处理
    5:动态效果
    6:event事件
    7:ajax支持
    8:插件程序

                                                 一:核心部分
    $(expr)
    说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础
    参数:expr:字符串,一个查询表达式或一段html字符串
    例子:
    未执行jQuery前:
    <p>one</p>
    <div>
          <p>two</p>
    </div>
        <p>three</p> 
        <a href="#" id="test" onClick="jq()" >jQuery</a>

    jQuery代码及功能:
    function jq(){  
        alert($("div > p").html());  
    }
    运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
    function jq(){
        $("<div><p>Hello</p></div>").appendTo("body");
    }
    运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>”

    $(elem)
    说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
    参数: elem:通过jQuery对象压缩的DOM元素
    例子:
    未执行jQuery前:
    <p>one</p>
      <div>
         <p>two</p>
      </div><p>three</p>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
        alert($(document).find("div > p").html());
    }
    运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
    function jq(){
       $(document.body).background("black");
    }
    运行:当点击id为test的元素时,背景色变成黑色

    $(elems)
    说明:限制jQuery作用于一组特定的DOM元素
    参数: elem:一组通过jQuery对象压缩的DOM元素
    例子:
    未执行jQuery前:
    <form id="form1">
          <input type="text" name="textfield">
          <input type="submit" name="Submit" value="提交">
    </form>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){ 
       $(form1.elements ).hide(); 
    }
    运行:当点击id为test的元素时,隐藏form1表单中的所有元素。

    $(fn)
    说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!
    参数:fn (Function):当文档载入时执行的函数!
    例子:
    $( function(){
        $(document.body).background("black");
    })
    运行:当文档载入时背景变成黑色,相当于onLoad。

    $(obj)
    说明:复制一个jQuery对象,
    参数:obj (jQuery): 要复制的jQuery对象
    例子:
    未执行jQuery前:
    <p>one</p>
    <div>
       <p>two</p>
    </div>
    <p>three</p>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
        var f = $("div"); 
        alert($(f).find("p").html()) 
    }
    运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。

    each(fn)
    说明:将函数作用于所有匹配的对象上
    参数:fn (Function): 需要执行的函数
    例子:
    未执行jQuery前:
    <img src="1.jpg"/>
    <img src="1.jpg"/>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
       $("img").each(function(){ 
            this.src = "2.jpg"; });
    }
    运行:当点击id为test的元素时,img标签的src都变成了2.jpg。

    eq(pos)
    说明:减少匹配对象到一个单独得dom元素
    参数:pos (Number): 期望限制的索引,从0 开始
    例子:
    未执行jQuery前:
    <p>This is just a test.</p>
    <p>So is this</p>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
        alert($("p").eq(1).html())
    }
    运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容

    get() get(num)
    说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
    参数:get (Number): 期望限制的索引,从0 开始
    例子:
    未执行jQuery前:
    <p>This is just a test.</p>
    <p>So is this</p>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
        alert($("p").get(1).innerHTML);
    }
    运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
    注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML

    index(obj)
    说明:返回对象索引
    参数:obj (Object): 要查找的对象
    例子:
    未执行jQuery前:
    <div id="test1"></div>
    <div id="test2"></div>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
        alert($("div").index(document.getElementById('test1')));
        alert($("div").index(document.getElementById('test2')));
    }
    运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1

    size()   Length
    说明:当前匹配对象的数量,两者等价
    例子:
    未执行jQuery前:
    <img src="test1.jpg"/>
    <img src="test2.jpg"/>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
        alert($("img").length);
    }
    运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象 


                                                       二:DOM操作
    属性
    我 们以<img id="a" scr="5.jpg"/>为例,在原始的javascript里面可以用 var o=document.getElementById('a')取的id为a的节点对象,在用o.src来取得或修改该节点的scr属性,在 jQuery 里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ],然后可以用 jQuery提供的很多方法来进行操作,如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改 为1,jpg。下面我们来讲jQuery提供的众多jQuery方法,方便大家快速对DOM对象进行操作
    herf()   herf(val)
    说明:对jQuery对象属性herf的操作。
    例子:
    未执行jQuery前
    <a href="1.htm" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
       alert($("#test").href());
       $("#test").href("2.html");
    }
    运行:先弹出对话框显示id为test的连接url,在将其url改为2.html,当弹出对话框后会看到转向到2.html
    同理,jQuery还提供类似的其他方法,大家可以分别试验一下:
    herf()  herf(val)   html()  html(val)   id()  id (val)  name()  name (val)   rel()  rel (val)
    src()    src (val)   title()  title (val)   val()  val(val)

    操作
    after(html)  在匹配元素后插入一段html
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){  
           $("#test").after("<b>Hello</b>");  
    }
    执行后相当于:
    <a href="#" id="test" onClick="jq()">jQuery</a><b>Hello</b>

    after(elem)  after(elems)  将指定对象elem或对象组elems插入到在匹配元素后
    <p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能
    function jq(){  
         $("a").after($("#test"));  
    }
    执行后相当于
    <a href="#" onClick="jq()">jQuery</a><p id="test">after</p>

    append(html)在匹配元素内部,且末尾插入指定html
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){ 
         $("#test").append("<b>Hello</b>");  
    }
    执行后相当于
    <a href="#" onClick="jq()">jQuery<b>Hello</b></a>
    同理还有append(elem)  append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解!

    appendTo(expr)  与append(elem)相反
    <p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能
    function jq(){  
          $("a"). appendTo ($("#test"));  
    }
    执行后相当于
    <p id="test">after<a href="#" onClick="jq()">jQuery</a> </p>

    clone() 复制一个jQuery对象
    <p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){  
         $("#test").clone().appendTo($("a"));  
    }
    复制$("#test")然后插入到<a>后,执行后相当于
    <p id="test">after</p><a href="#" onClick="jq()">jQuery</a><p id="test">after</p>

    empty() 删除匹配对象的所有子节点
    <div id="test">
      <span>span</span>
      <p>after</p>
    </div>
    <a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){  
        $("#test").empty();  
    }
    执行后相当于
    <div id="test"></div><a href="#" onClick="jq()">jQuery</a>

    insertAfter(expr)   insertBefore(expr)
         按照官方的解释和我的几个简单测试insertAfter(expr)相当于before(elem),insertBefore(expr)相当于after (elem)

    prepend (html)  prepend (elem)  prepend (elems)   在匹配元素的内部且开始出插入
    通过下面例子区分append(elem)  appendTo(expr)  prepend (elem)
    <p id="a">p</p>
    <div>div</div>
    执行$("#a").append($("div")) 后相当于
    <p id="a">
      P
      <div>div</div>
    </p>
    执行$("#a").appendTo($("div")) 后 相当于
    <div>
       div
       <p id="a">p</p>
    </div>
    执行$("#a").prepend ($("div")) 后 相当于
    <p id="a">
       <div>div</div>
       P
    </p>

    remove()  删除匹配对象
    注意区分empty(),empty()移出匹配对象的子节点,remove(),移出匹配对象

    wrap(htm) 将匹配对象包含在给出的html代码内
    <p>Test Paragraph.</p> <a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){  
          $("p").wrap("<div class='wrap'></div>"); 
    }
    执行后相当于
    <div class='wrap'><p>Test Paragraph.</p></div>

    wrap(elem) 将匹配对象包含在给出的对象内
    <p>Test Paragraph.</p><div id="content"></div>
    <a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){  
          $("p").wrap( document.getElementById('content') );
    }
    执行后相当于
    <div id="content"><p>Test Paragraph.</p></div>

    遍历、组合
    add(expr)  在原对象的基础上在附加符合指定表达式的jquery对象
    <p>Hello</p><p><span>Hello Again</span></p>
    <a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
         var f=$("p").add("span");    
         for(var i=0;i < $(f).size();i++){
         alert($(f).eq(i).html());}
    }
    执 行$("p")得到匹配<p>的对象,有两个,add("span")是在("p")的基础上加上匹配<span >的对象,所 有一共有3个,从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合,分别是 [<p> Hello</p>],[<p><span>Hello Again< /span></p>],[<span>Hello Again</span>]。

    add(el)  在匹配对象的基础上在附加指定的dom元素。
            $("p").add(document.getElementById("a"));

    add(els)  在匹配对象的基础上在附加指定的一组对象,els是一个数组。
    <p>Hello</p><p><span>Hello Again</span></p>
    jQuery代码及功能:
    function jq(){
         var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
         for(var i=0;i < $(f).size();i++){
                 alert($(f).eq(i).html());}
    }
    注意els是一个数组,这里的[ ]不能漏掉。

    ancestors ()  一依次以匹配结点的父节点的内容为对象,根节点除外(有点不好理解,看看下面例子就明白了)
    <div>
        <p>one</p>
        <span>
        <u>two</u>
        </span>
    </div>
    jQuery代码及功能:
    function jq(){
         var f= $("u").ancestors();
         for(var i=0;i < $(f).size();i++){
          alert($(f).eq(i).html());}
    }
    第一个对象是以<u>的父节点的内容为对象,[ <u>two</u> ]
    第一个对象是以<u>的父节点的父节点(div)的内容为对象,[<p>one</p><span><u>two</u></span> ]
    一般一个文档还有<body>和<html>,依次类推下去。

    ancestors (expr)  在ancestors()的基础上之取符合表达式的对象
    如上各例子讲var f改为var f= $("u").ancestors(“div”),则只返回一个对象:
    [ <p>one</p><span><u>two</u></span>  ]

    children()  返回匹配对象的子介点
    <p>one</p>
    <div id="ch">   
         <span>two</span>
    </div>
    jQuery代码及功能:
    function jq(){
        alert($("#ch").children().html());
    }
    $("#ch").children()得到对象[ <span>two</span> ].所以.html()的结果是”two”

    children(expr)  返回匹配对象的子介点中符合表达式的节点
    <div id="ch">   
          <span>two</span>
          <span id="sp">three</span>
    </div>
    jQuery代码及功能
    function jq(){
        alert($("#ch").children(“#sp”).html());
    }
    $("#ch").children()得到对象[<span>two</span><span id="sp">three</span> ].
    $("#ch").children(“#sp”)过滤得到[<span id="sp">three</span> ]

    parent ()  parent (expr)取匹配对象父节点的。参照children帮助理解

    contains(str)  返回匹配对象中包含字符串str的对象
    <p>This is just a test.</p><p>So is this</p>
    jQuery代码及功能:
    function jq(){
        alert($("p").contains("test").html());
    }
    $("p")得到两个对象,而包含字符串”test”只有一个。所有$("p").contains("test")返回 [ <p>This is just a test.</p> ]

    end() 结束操作,返回到匹配元素清单上操作前的状态.

    filter(expr)   filter(exprs)   过滤现实匹配符合表达式的对象 exprs为数组,注意添加“[ ]”
    <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
    jQuery代码及功能:
    function jq(){
        alert($("p").filter(".selected").html())
    }
    $("p")得到三个对象,$("p").contains("test")只返回class为selected的对象。

    find(expr)  在匹配的对象中继续查找符合表达式的对象
    <p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
    Query代码及功能:
    function jq(){
        alert($("p").find("#a").html())
    }
    在$("p")对象中查找id为a的对象。

    is(expr)  判断对象是否符合表达式,返回boolen值
    <p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
    Query代码及功能:
    function jq(){
        alert($("#a").is("p"));
    }
    在$("#a ")是否符合jquery表达式。
    大家可以用$("#a").is("div");  ("#a").is("#a")多来测试一下

    next()  next(expr)  返回匹配对象剩余的兄弟节点
    <p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
    jQuery代码及功能
    function jq(){
            alert($("p").next().html());
            alert($("p").next(".selected").html());
    }
    $("p").next()返回 [ <p id="a">Hello Again</p> , <p class="selected">And Again</p> ]两个对象
    $("p").next(".selected)只返回 [<p class="selected">And Again</p> ]一个对象

    prev ()  prev (expr)  参照next理解

    not(el)  not(expr)  从jQuery对象中移出匹配的对象,el为dom元素,expr为jQuery表达式。
    <p>one</p><p id="a">two</p>
    <a href="#" οnclick="js()">jQuery</a>
    jQuery代码及功能:
    function js(){
         alert($("p").not(document.getElementById("a")).html());
         alert($("p").not(“#a”).html());
    }
    $("p")由两个对象,排除后的对象为[<p>one</p> ]

    siblings ()  siblings (expr)  jquery匹配对象中其它兄弟级别的对象
    <p>one</p>
    <div>
      <p id="a">two</p>
    </div>
    <a href="#" οnclick="js()">jQuery</a>
    jQuery代码及功能:
    function js(){
           alert($("div").siblings().eq(1).html());
    }
    $("div").siblings()的结果实返回两个对象[<p>one</p>,<a href="#" οnclick="js()">jQuery</a> ]
    alert($("div").siblings(“a”)返回一个对象[<a href="#" οnclick="js()">jQuery</a> ]

    其他
    addClass(class)   为匹配对象添加一个class样式
    removeClass (class)   将第一个匹配对象的某个class样式移出

    attr (name)   获取第一个匹配对象的属性
    <img src="test.jpg"/><a href="#" οnclick="js()">jQuery</a> 
    jQuery代码及功能:
    function js(){
         alert($("img").attr("src"));
    }
    返回test.jpg

    attr (prop)   为第一个匹配对象的设置属性,prop为hash对象,用于为某对象批量添加众多属性
    <img/><a href="#" οnclick="js()">jQuery</a>
    jQuery代码及功能:
    function js(){
         $("img").attr({ src: "test.jpg", alt: "Test Image" }); 
    }
    运行结果相当于<img src="test.jpg" alt="Test Image"/>

    attr (key,value)   为第一个匹配对象的设置属性,key为属性名,value为属性值
    <img/><a href="#" οnclick="js()">jQuery</a>
    jQuery代码及功能
    function js(){
         $("img").attr(“src”,”test.jpg”); 
    }
    运行结果相当于<img src="test.jpg"/>

    removeAttr (name)   将第一个匹配对象的某个属性移出
    <img alt="test"/><a href="#" οnclick="js()">jQuery</a>
    jQuery代码及功能:
    function js(){
         $("img"). removeAttr("alt"); 
    }
    运行结果相当于<img />

    toggleClass (class)   将当前对象添加一个样式,不是当前对象则移出此样式,返回的是处理后的对象
    <p>Hello</p><p class="selected">Hello Again</p><a href="#" οnclick="js()">jQuery</a>
    $("p")的结果是返回对象 [<p>Hello</p>,<p class="selected">Hello Again</p> ]
    $("p").toggleClass("selected")的结果是实返回对象 [ <p class="selected">Hello</p>, <p>Hello Again</p> ] 

             三:CSS操作

          传 统javascript对css的操作相当繁琐,比如<div id="a" style="background:blue">css& lt;/div>取它的background语法 是 document.getElementById("a").style.background,而jQuery对css更方便的操 作,$("#a"). background(),$("#a").background(“red”)
    $("#a")得到jQuery对象[ <div id="a" … /div> ]
    $("#a").background()将取出该对象的background样式。
    $("#a").background(“red”)将该对象的background样式设为redjQuery提供了以下方法,来操作css
    background ()   background (val)     color()    color(val)     css(name)    css(prop)   
    css(key, value)      float()   float(val)   height()   height(val)  width()  width(val) 
    left()   left(val)       overflow()   overflow(val)   position()   position(val)  top()   top(val)

    这里需要讲解一下css(name)  css(prop)  css(key, value),其他的看名字都知道什么作用了!
    <div id="a" style="background:blue; color:red">css</div><P id="b">test</P>

    css(name)  获取样式名为name的样式
    $("#a").css("color") 将得到样式中color值red,("#a").css("background ")将得到blue

    css(prop)  prop是一个hash对象,用于设置大量的css样式
    $("#b").css({ color: "red", background: "blue" });
    最 终效果是<p id="b" style="background:blue; color:red">test</p>, { color: "red", background: "blue" },hash对象,color为key,"red"为value,

    css(key, value)  用于设置一个单独得css样式
    $("#b").css("color","red");最终效果是<p id="b" style="color:red">test</p>

                                                  四:JavaScript处理

    $.browser()  判断浏览器类型,返回boolen值
    $(function(){
        if($.browser.msie) {
            alert("这是一个IE浏览器");}
        else if($.browser.opera) {
            alert("这是一个opera浏览器");}
    })
    当页面载入式判断浏览器类型,可判断的类型有msie、mozilla、opera、safari

    $.each(obj, fn)  obj为对象或数组,fn为在obj上依次执行的函数,注意区分$().each()
    $.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });
        分别将0,1,2为参数,传入到function(i)中
    $.each({ name: "John", lang: "JS" },  function(i){ alert( "Name: " + i + ", Value: " + this );
        { name: "John", lang: "JS" }为一个hash对象,依次将hash中每组对象传入到函数中

    $.extend(obj, prop)  用第二个对象扩展第一个对象
    var settings = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
    $.extend(settings, options);
    执行后settings对象为{ validate: true, limit: 5, name: "bar" }
    可以用下面函数来测试
    $(function(){
           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(){
            var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
            $.each(arr, function(i){ alert(i); });
    })
    我们可以看待执行$.grep后数组[0,1,2,3,4]变成[0,1]

    $.merge(first, second)  两个参数都是数组,排出第二个数组中与第一个相同的,再将两个数组合并
    $(function(){ 
            var arr = $.merge( [0,1,2], [2,3,4] )
            $.each(arr,  function(i){ alert(i); });
    })
    可以看出arr的结果为[0,1,2,3,4]

    $.trim(str)  移出字符串两端的空格
        $.trim("   hello, how are you?   ")的结果是"hello, how are you?"



                                       五:动态效果

           在 将这部分之前我们先看个例子,相信做网页的朋友都遇到n级菜单的情景,但点击某菜单按钮时,如果它的子菜单是显示的,则隐藏子菜单,如果子菜单隐藏,则显 示出来,传统的javascript做法是先用getElementById取出子菜单所在容器的id,在判断该容器的style.display是否等 于none,如果等于则设为block,如果不等于这设为none,如果在将效果设置复杂一点,当点击按钮时,不是忽然隐藏和显示子菜单,而是高度平滑的 转变,这时就要通过setTimeout来设置子菜单的height了,再复杂一点透明度也平滑的消失和显现,这时显现下来需要编写很多代码,如果 js 基础不好的朋友可能只能从别人写好的代码拿过来修改了!jQuery实现上面效果只需要1句话就 行,$("#a").toggle("slow"),,学完jQuery后还需要抄袭修改别人的代码吗?下面我们逐个介绍jQuery用于效果处理的方 法。

    hide()  隐藏匹配对象
    <p id="a">Hello Again</p><a href="#" onClick=’ ("#a").hide()’>jQuery</a>
    当点击连接时,id为a的对象的display变为none。

    show() 显示匹配对象

    hide(speed)  以一定的速度隐藏匹配对象,其大小(长宽)和透明度都逐渐变化到0,speed有3级("slow", "normal",  "fast"),也可以是自定义的速度。

    show(speed)  以一定的速度显示匹配对象,其大小(长宽)和透明度都由0逐渐变化到正常

    hide(speed, callback)  show(speed, callback) 当显示和隐藏变化结束后执行函数callback

    toggle()    toggle(speed) 如果当前匹配对象隐藏,则显示他们,如果当前是显示的,就隐藏,toggle(speed),其大小(长宽)和透明度都随之逐渐变化。
    <img src="1.jpg" style="width:150px"/>
    <a href="#" onClick='$("img").toggle("slow")'>jQuery</a>

    fadeIn(speeds)   fadeOut(speeds)  根据速度调整透明度来显示或隐藏匹配对象,注意有别于hide(speed)和show(speed),fadeIn和fadeOut都只调整透明度,不调整大小
    <img src="1.jpg" style="display:none"/><a href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>
    点击连接后可以看到图片逐渐显示。

    fadeIn(speed, callback)  fadeOut(speed, callback)   callback为函数,先通过调整透明度来显示或隐藏匹配对象,当调整结束后执行callback函数
    <img src="1.jpg"/>
    <a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>
    点击连接后可以看到图片逐渐显示,显示完全后弹出对话框

    fadeTo(speed, opacity, callback)  将匹配对象以speed速度调整倒透明度opacity,然后执行函数callback。Opacity为最终显示的透明度(0-1).
    <img src="1.jpg"/><br>
    <a href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'> jQuery </a>
    大家可以看一下自己看看效果,如果不用jQuery,编写原始javascript脚本可能很多代码!

    slideDown(speeds)  将匹配对象的高度由0以指定速率平滑的变化到正常!
    <img src="1.jpg" style="display:none"/>
    <a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>

    slideDown(speeds,callback)  将匹配对象的高度由0变化到正常!变化结束后执行函数callback

    slideUp("slow")  slideUp(speed, callback) 匹配对象的高度由正常变化到0

    slideToggle("slow") 如果匹配对象的高度正常则逐渐变化到0,若为0,则逐渐变化到正常 


     六:事件处理

     hover(Function, Function)    当鼠标move over时触发第一个function,当鼠标move out时触发第二个function
    样式:<style>.red{color:#FF0000}</style>
    Html代码: <div id="a">sdf</div>
    jQuery代码及效果
    $(function(){
      $("#a").hover(function(){$(this).addClass("red");},
                                function(){ $(this).removeClass("red"); 
                              });
    })
    最终效果是当鼠标移到id为a的层上时图层增加一个red样式,离开层时移出red样式

    toggle(Function, Function)    当匹配元素第一次被点击时触发第一个函数,当第二次被点击时触发第二个函数
    样式:<style>.red{color:#FF0000}</style>
    Html代码: <div id="a">sdf</div>
    jQuery代码及效果
    $(function(){
      $("#a"). toggle (function(){$(this).addClass("red");},
                                  function(){ $(this).removeClass("red"); 
                                });
    })
    最终效果是当鼠标点击id为a的层上时图层增加一个red样式,离开层时移出red样式

    bind(type, fn)   用户将一个事件和触发事件的方式绑定到匹配对象上。
    trigger(type)   用户触发type形式的事件。$("p").trigger("click")
    还有:unbind()   unbind(type)    unbind(type, fn)

    Dynamic event(Function)    绑定和取消绑定提供函数的简捷方式
    例:
    $("#a").bind("click",function() { 
                                           $(this).addClass("red");
    })
    也可以这样写:
    $("#a").click(function() { 
                            $(this).addClass("red");
    });

    最终效果是当鼠标点击id为a的层上时图层增加一个red样式,

    jQuery提供的函数
    用于browers事件
    error(fn)    load(fn)     unload(fn)    resize(fn)    scroll(fn)

    用于form事件
    change(fn)    select(fn)    submit(fn)

    用于keyboard事件
    keydown(fn)    keypress(fn)    keyup(fn)

    用于mouse事件
    click(fn)    dblclick(fn)    mousedown(fn)   mousemove(fn)
    mouseout(fn)  mouseover(fn)     mouseup(fn)

    用于UI事件
    blur(fn)    focus(fn)

    以上事件的扩展再扩展为5类
    举例,click(fn) 扩展 click()  unclick()  oneclick(fn)  unclick(fn)
    click(fn):增加一个点击时触发某函数的事件
    click():可以在其他事件中执行匹配对象的click事件。
    unclick ():不执行匹配对象的click事件。
    oneclick(fn):只增加可以执行一次的click事件。
    unclick (fn):增加一个点击时不触发某函数的事件。
    上面列举的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法扩展。


                                           七: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:当请求完成后出发函数
    jQuery代码及说明
    $.ajax({url: "ajax.htm",
              success:function(msg){ 
                             $(div"#a").html(msg);
                    } 
        });
    将ajax.htm返回的内容作为id为a的div内容
    $.ajax({ url: "ajax.aspx",
                  type:"get",           
                 dataType:"html",
                 data: "name=John&location=Boston",
                 success:function(msg){ 
                                     $("#a").html(msg);
                                  } 
             });

    用get方式向ajax.aspx页面传参数,并将返回内容负给id为a的对象。

    $.ajaxTimeout(time) 设置请求结束时间
       $.ajaxTimeout( 5000 )

    其它简化方式:

    $.get(url, params, callback)  用get方式向远程页面传递参数,请求完成后处理函数,除了url外,其它参数任意选择!
    $.get( "ajax.htm" , function(data){ $("#a").html(data)  })
    $.get(   "ajax.asp", 
                { name: "young", age: "25" },
                function(data){ alert("Data Loaded: " + data); }
            ) 
    $.getIfModified(url, params, callback)  用get方式向远程页面传递参数,从最后一次请求后如果数据有变化才作出响应,执行函数callback
    $.getJSON(url, params, callback)  用get方式向远程json对象传递参数,请求完成后处理函数callback。
    $.getScript(url, callback)  用get方式载入并运行一个远程javascript文件。请求完成后处理函数callback。
    $.post(url, params, callback)  用post方式向远程页面传递参数,请求完成后处理函数callback
    load(url, params, callback)  载入一个远程文件并载入页面DOM中,并执行函数callback
    $("#a").load("ajax.htm", function() { alert("load is done"); } );
    仰天一笑 徐羽 向ajax.htm页面发出请求,将返回结果装入id为a的内容中,然后再执行函数callback。
    loadIfModified(url, params, callback)  用get方式向远程页面传递参数,从最后一次请求后如果数据有变化才作出响应,将返回结果载入页面DOM中,并执行函数callback
    ajaxStart(callback) 当ajax请求发生错误是时执行函数callback
    ajaxComplete(callback)  当ajax请求完成时执行函数callback
    ajaxError(callback)  当ajax请求发生错误时执行函数callback
    ajaxStop(callback)  当ajax请求停止时执行函数callback
    ajaxSuccess(callback)  当ajax请求成功时执行函数callback

       
                                           八:jQuery插件

         随 着jQuery的广泛使用,已经出现了大量jQuery插件,如thickbox,iFX,jQuery-googleMap等,简单的引用这些源文件就 可以方便的使用这些插件。这里我简单的介绍一些网址供大家参考,这些网站头提供了大量的demo,并且使用及其简单,及时E文不好,也能快速掌握!
        http://jquery.com/plugins     官方推荐
        http://interface.eyecon.ro/demos    效果超级棒,使用更简单,一定有你喜欢的!
        http://www.dyve.net/jquery/
        http://bassistance.de/jquery-plugins

       还有其它很多插件,大家可以google以下,如果大家发现好的了,可以留言共享以下!
       

        ??????????????????????????????????????????????


        至此jQuery已经介绍完毕,并合并整理提供给大家 下载 ,更多详细的使用请大家参考官方网站,下面我再推荐一些jQuery的学习网站方便大家更好的掌握这项工具!
        http://keel.sike.googlepages.com/jQuery_getting_started.html     中文入门介绍,Keel翻译
        http://jquery.com/api      jquery提供全部基本方法的介绍及demo,方便大家查询!
    展开全文
  • jQuery框架简单介绍

    千次阅读 2018-07-27 22:30:28
    jQuery框架介绍 1. jQuery框架与javaScript之间的有什么关系? 2. jQuery与原生javaSript对比,有什么优点? 3. jQuery与javaScript之间的区别是什么? 3.1 为什么要使用入口函数? 4. 如何引入jquery文件? 5. ...

    jQuery框架介绍

    1. jQuery框架与javaScript之间的有什么关系?

      javaSript是一门编程语言,jQuery是javaSript中的一个库,jquery是JavaScript中的一个子集。通过使用jQuery框架中的一些接口,我们可以更方便的实现一些网页操作。比起直接使用原生接口,jQuery框架优点多多。

    2. jQuery与原生javaSript对比,有什么优点?

    原生js代码繁琐,代码量大,实现动画复杂。

    3. jQuery与javaScript之间的区别是什么?

    • 编写个数不同window.onload()函数只能在JavaScript中使用一次,但是$(document).ready()可以出现多次。(这两个函数都是用来表示等页面加载完成后,使用JavaScript脚本命令)
    • jquery有简化写法$(document).ready()可以简化写为$(function(){})
    • 执行时间不同:window.onload()必须等到页面加载完成后才能执行,$(document).ready()在DOM树构建完成后就可以执行

    文档加载步骤如下:
    1. 解析HTML结构
    2. 加载外部脚本和样式表文件
    3. 解析并执行脚本代码
    4. DOM树构建完成
    5. 加载图片等外部文件
    6. 页面加载完成

    3.1 为什么要使用入口函数?

    使用window.onload或者是$(document).ready()可以使我们的代码放在html任意位置都会等待页面加载完成后再被调用。如果不使用该函数,代码块正好放在head标签中,那么页面还没有加载完,就会调用js脚本。

    4. 如何引入jquery文件?

    我们从jquery官网下载好jquery文件,然后通过外部样式引入这个库文件就可以在js脚本中使用。
    示例:<script src="jquery-3.3.1.js"></script>

    5. jquery中的选择器

    jquery选择器的语法和css选择器语法一样

    5.1 基本选择器

    类型 示例 作用
    id选择器 $('#wrapper') 选择指定id的标签
    类选择器 $('.box') 选择class的标签
    标签选择器 $('ul') 选择指定的标签
    通配符选择器 $('*') 选择所有标签

    5.2 层级选择器

    类型 示例 作用
    后代选择器 $('div p') 选择div下所有p
    子代选择器 $('div>p') 选择div的儿子中的p
    毗邻选择器 $('div+p') 选择div同级后面紧贴着的p
    兄弟选择器 $('div~p') 选择div同级后面所有的p

    5.3 基本过滤选择器

    类型 示例 作用
    :first $('li:first') 获取第一个li标签
    :last $('li:last') 获取最后一个li标签
    :odd $('li:odd') 获取索引为奇数的li标签
    even $('li:even') 获取索引为偶数的li标签
    eq(index) $('li:eq(1)) 获取索引为index的li标签
    gt(index) $('li:gt(1)) 获取索引大于index的li标签
    lt(index) $('li:lt(1)) 获取索引小于index的li标签

    5.4 属性选择器

    类型 示例 作用
    标签[属性名] $('p[class]') 获取所有含该属性的元素
    标签[属性名=值] $('p[class=what]') 获取特定属性是某个特定值的元素
    标签[属性名^=值] $('p[class^=what]') 获取特定属性是以某个特定值开头
    标签[属性名!=值] $('p[class!=what]') 获取特定属性不是某个特定值、或者不包含该属性的元素
    标签[属性名$=值] $('p[class$=name]') 获取特定属性以特定值结尾的元素
    标签[属性名*=值] $('p[class *='name']') 获取特定属性中包含特定值的元素

    5.5 筛选选择器

    类型 示例 作用
    .eq(index) $('li').eq(1) 获取索引为1的li元素
    .first() $('li').first() 获取第一个li元素
    .last() $('li').last() 获取最后一个li元素
    .parent() $('span').parent('.p1') 选择父亲元素
    .siblings() $('.list').sibling('li') 查找所有兄弟元素
    .find() $('div').find('button') 查找所有后代元素
    .hasClass() $('div').hasClass('button') 是否含有某一标签,返回布尔值(true/false)
    .children() $('div').children('button') 获取匹配元素的子元素集合
    .prev() $('div').prev('button') 获取匹配元素同级的前一个元素
    .prevAll() $('button').prevAll('div') 查找当前元素之前的所有同辈元素

    6. jQuery和DOM对象转换

    6.1 DOM对象转jQuery对象

    直接使用$(DOM对象)
    示例:

    var oDiv = document.getElementsByTag('div');
    $(oDiv) //即转换成jQuery对象

    6.2 jQuery对象转换为DOM对象

    示例:
    $('div')[0]或者$('div').get(0)即可将jquery对象转换为DOM对象

    7. jQuery效果函数

    7.1 显示隐藏动画

    7.11 show,hide,toggle

    函数名 作用
    show(speed,callback) 显示标签(向下,向右增大)
    hide(speed,callback) 隐藏标签(向上,向左减小)
    toggle(speed,callback) 显示隐藏开关,如果标签可见,则隐藏标签;反之标签不可见,则显示标签

    注意:speed参数是控制标签显示/隐藏的速度,可选slow,normal,fast或者直接输入以毫秒为单位的数字;callback是回调函数,执行完动画,调用的函数。toggle只能控制标签的显隐,不能使用回调函数。

    7.12 slideDown,slideUp,slideToggle

    函数名 作用
    slideDown(speed,callback) 显示标签(向下增大)
    slideUp(speed,callback) 隐藏标签(向上减小)
    slideToggle(speed,callback) 显示隐藏开关,如果标签可见,则隐藏标签;反之标签不可见,则显示标签

    7.13 fadeIn,fadeOut,fadeTo,fadeToggle

    函数名 作用
    fadeIn(speed,callback) 显示标签(淡入)
    fadeOut(speed,callback) 隐藏标签(淡出)
    fadeTo(speed,opacity,callback) 调整到指定不透明度
    fadeToggle(speed,callback) 开关控制淡入淡出

    7.14 这几组有什么区别呢?

    首先,三组都是通过控件的display属性来达到控制显隐的效果。show,slide,这两组都是通过控制标签的widthheight来达到动画效果,fadeIn通过控制opacity不透明度来达到动画的效果。

    7.15 其他函数

    函数名 作用
    click(function) 添加标签单击事件
    hove(function1,function2) 添加鼠标悬浮标签事件,function1代表鼠标悬浮执行时间,function2代表鼠标离开标签事件。等同于mouseenter和mouseleave合集
    mouseover(function) 鼠标移上去时候
    mouseout(function) 鼠标移出时
    mouseenter(function) 鼠标移入时
    mouseleave(function) 鼠标移除时

    7.2 创建自定义动画animate函数

    animate(params,speed,callback)

    用于创建自定义动画函数
    示例:$('#he').animate({left:'300px'})
    注意:params:动画终值属性集合(用大括号括起来),speed动画速度,callback回调函数。

    stop(clearQueue,gotoEnd)

    停止在指定元素上正在运行的动画
    示例:$('#he').stop();
    注意:clearQueue为true清空队列,立即结束动画;
    gotoEnd让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等

    delay(speed)

    用来做延迟操作,传入毫秒数
    示例:$('#he').animate({left:'800px'},2000).delay(1000).animate({top:'300px'});

    注意:这些函数都可以通过点.连接起来,按顺序调用,这种调用方式称之为链式调用

    8. jQuery属性操作

    jQuery属性操作模块分为四部分:html属性操作、DOM属性操作、类样式操作、值属性操作。

    8.1 html属性操作

    attr()

    可以获取或修改html标签属性

    获取值
    传入一个需要获取的属性参数
    示例:$('div').attr('id')

    设置值
    传入两个参数设置一个值,或者设置多个值将多个键值对由大括号括起来当一个参数传入
    示例一:$('#box').attr('class','wrapper');
    示例二:$('#box').attr({'class':'123','name':'aaa'});
    注意:在示例二中,大括号括起来的键值对,键可以不用引号引起来,值必须有引号引起来

    removeAttr()

    删除匹配元素一个指定的属性
    示例:$('p').removeAttr('id');

    8.2 dom属性操作

    prop()

    可以获取或修改DOM属性,用法等同于attr()

    获取值
    示例:$('p').prop('name');

    设置值
    示例一:$('p').prop('name',2);
    示例二:$('p').prop({'name':2})

    removeProp

    示例:$('p').removeProp('name')

    8.3 类样式操作

    addClass()

    为每个元素添加指定的类名,若要添加多个类名用空格隔开
    示例一:$('#he').addClass('wrapper');
    示例二:$('#he').addClass('wrapper1 box2')

    removeClass()

    从所匹配的元素中删除全部或指定的类
    示例一:$('#he').removeClass('wrapper1') 删除wrapper1
    示例二:$('#he').removeClass(); 删除全部类

    toggleClass()

    开关,若该标签有这个类就删除,没有则添加这个类
    示例一:$('#he').toggleClass('changeColor');

    attr()和使ddClass()加入一个类属性有什么区别?

    使用attr()设置类时,不能追加类属性,只会覆盖掉原来的类属性;使用addClass()会在不改变原来类的基础上添加一个类,删除类同理;

    8.4 值操作

    html()

    获取或设置选中标签的内容,设置值时将会被解析为HTML语言

    获取值
    示例:$('p').html()

    设置值
    示例:$('p').html('<a href="#">what</a> fk?')

    text()

    获取或设置元素中包括文本的内容,设置时仅会被解析为纯文本

    获取值
    示例:$('p').text()

    设置值
    示例:$('p').text('what fk?')

    html()和text()有什么区别?

    在获取值时,html()会将内容中标签读出来,而text()会忽视标签,读取纯文本;
    例如:p标签中文本为<span>12</span>34,html()读出来的效果是<span>12</span>34,而text()读出来的效果是1234
    在设置值时,html()会将字符串解析为html语言,然后显示出来,而text()仅仅将其解析为纯文本显示;
    例如:同样设置'<a href="#">what</a> fk?'这一段内容,html()显示出来的是带有超链接的what fk,而text()显示出来的是'<a href="#">what</a> fk?'
    也就是说:值中含有标签时,text()不会渲染出标签元素,只会将标签代码原封不动的显示出来

    val()

    关于input的value用法

    9. jQuery文档操作

    9.1 插入操作

    函数名 使用方法 示例 作用
    append() 父元素.append(子元素) $('div').append('<a href="#">百度</a>') 在父元素里面追加子元素标签
    appendTo() 子元素.appendTo(父元素) $('<a href="#">新浪</a>').appendTo($('div')) 在父元素里面追加子元素标签
    prepend() 父元素.prepend(子元素) $('ul').prepend("<li>我是谁?</li>") 将子元素标签追加到父元素内的第一个位置
    prependTo() 父元素.prependTo(父元素) $('p').prependTo($('ul')); 将子元素标签追加到父元素内的第一个位置
    after() 父元素.after(子元素) $('p').after($('ul')); 在父元素的后面插入子元素
    insertAfter() 父元素.insertAfter(父元素) $('p').insertAfter($('ul')); 在父元素的后面插入子元素
    before() 父元素.before(子元素) $('p').before($('ul')); 在父元素的前面插入子元素
    insertBefore() 父元素.insertBefore(父元素) $('p').insertBefore($('ul')); 在父元素的前面插入子元素

    注意:
    1. 他是jQuery方法,所有调用时务必保证转换为jquery对象$()
    2. 父元素是jquery对象,子元素可以使字符串,DOM对象,jquery元素
    3. append()和appendTo()方法就父子元素位置不同,功能相同。
    4. 如果子元素是页面上某个标签,则相当于移动操作

    9.2 复制操作

    clone()
    克隆匹配这些DOM元素,并选中这些克隆的副本。
    可以传入一个布尔值,为true时,将该标签的事件也克隆(默认不克隆)
    示例:$('#btn3').clone(true).insertAfter($('p'));

    9.3 替换操作

    replaceWith()
    选择器.repalceWith(内容)
    示例:$('#btn').replaceWith("<a href='#'>我是替换后的标签</a>>");
    注意:内容替换选择器,内容可以是DOM,jquery,字符串。

    replaceAll()
    内容.replaceAll(选择器)
    示例:$('p').replaceAll($('ul'));

    注意:这两个函数区别只是内容和选择器位置不同

    9.3删除操作

    empty() 清空
    清空被选元素的内容
    示例:$('ul').empty() 会清空ul中所有内容(相当于html(”))

    remove() 删除
    会删除被选元素,事件也没了
    示例:$('ul').remove() 会删除ul标签和标签的内容

    detach() 删除并返回
    会删除被选元素,但是会返回删除的元素,事件会保留
    示例:var $btn = $('button').detach() 将页面上的button全部删除,返回给变量btn

    10. jquery中的css

    函数名 功能
    position() 获取匹配元素相对于父元素的偏移位置,返回一个对象,对象中有left,top两个属性
    offset() 获取匹配元素相对于浏览器左上角偏移位置,同样有left,top两个属性
    scrollTop() 获取元素相对于滚动条顶部的偏移像素值
    scrollLeft() 获取元素相对于滚动条左侧的偏移像素值
    innerHeight() 获取内部区域高度(内容高+padding)
    innerWidth() 获取内部区域宽(内容宽+padding)
    outHeight() 获取外部区域高(内容高+padding+border)
    outWidth() 获取外部区域宽(内容宽+padding+border)
    width() 获取或设置内容宽
    height() 获取或这是内容高

    scroll()

    当元素滚动时,调用的方法
    示例:

    $(function () {
        $(document).scroll(function () {
                console.log($(document).scrollTop());
                console.log($(document).scrollLeft());
        });

    获取浏览器滚动时的top和left
    在DOM中用onScroll(),在jquery中用scroll()方法监听滚动条。

    11.jquery事件

    HTML中与JavaScript交互是通过事件来交互的。

    11.1 什么是事件流?

    事件流就是从页面中接受事件的顺序

    DOM事件流

    DOM2级事件流包括三个阶段
    1. 事件捕获阶段
    2. 处于目标阶段
    3. 事件冒泡阶段

    addEventListener()
    DOM事件监听器
    参数一事件名,参数二function,参数三bool值(捕获阶段为true,冒泡阶段为false)

    document,document.documentElement,document.document.body关系

    document代表整个html
    document.documentElement代表<html>标签
    document.document.body代表<body>标签

    事件流过程分析

    例如一个id为btn的按钮设置click事件,document对象首先接受到click事件,然后按照dom树依次传到btn。而事件冒泡过程是由具体元素接受,向上传到document。

    11.2 事件属性

    属性 作用
    e.type 获取事件的类型
    e.target 获取事件发生的DOM对象
    e.pageX和e.pageY 获取光标相对页面的x的坐标和y的坐标
    e.which 获取事件的左中右键,键盘事件获取键盘按键

    示例:

    $("#btn").click(function (e) {
        console.log("type:"+e.type);
        console.log("target:"+ e.target);
        console.log("page.x:"+ e.pageX+"  page.y:"+ e.pageY);
        console.log("which:"+ e.which);
    });

    显示结果:

    type:click
    target:[object HTMLButtonElement]
    page.x:42  page.y:233
    which:1

    11.3 事件冒泡

    jquery不支持事件捕获
    一般来说父子盒子都设置一个click事件,单击子盒子事件,则父子两个盒子事件一起触发。

    阻止冒泡stopPropagation()

    原因:子盒子处于click冒泡阶段后,父盒子随之也处于click冒泡阶段,由内而外,最终传到DOM.
    解决办法:阻止事件冒泡。阻止子盒子事件冒泡,父盒子就接受不到冒泡,即只触发子盒子事件。
    示例:

    $('#box #p1').click(function (e) {
        e.stopPropagation();
        console.log('我是p标签');
    });
    $('#box').click(function () {
        console.log('我是div标签');
    })

    阻止默认事件preventDefault()

    像超链接a标签,都有默认click事件,form表单的submit有默认submit事件。
    示例:

    <--标签内容-->
    <a href="https://www.baidu.com">我是一个超链接</a>   
    //jquery内容  
    $('a').click(function (e) {
        e.preventDefault();
    })

    即便我们给a标签设置了链接,由于我们在click事件中设置了阻止默认事件,导致a标签不能跳转。

    综上,还有另一种方法既可以阻止默认事件,也可以阻止冒泡
    示例:

    $('#p1 a').click(function (e) {
        return false;
    })

    通过return false即可

    11.4 jquery常用事件

    jquery事件绑定bind()

    将元素和事件绑定时,有bind(),on()两种方法

    bind()
    示例一:$('#box').bind('click',function(){})

    绑定多个事件时,事件之间用空格隔开
    示例二:

    $(".box").bind('click mouseleave', function () {
        alert("已经绑定了好几个事件")
    })

    绑定多个不同的事件时,可以使用键值对的方式
    示例三:

    $(".box").bind({'click':sayhi,'mouseout':sayhello});
    function sayhi(){
        alert('hi');
    }
    function sayhello(){
        alert('hello');
    }

    绑定自定义事件

    示例:

    $('.box').bind('myHover', function (e) {
         alert('看看这就执行了');
    });
     $('.box').trigger('myHover');

    注意:
    1. 自定义事件不能自动触发,只有使用trigger()方法时才能触发。
    2. trigger()方法第二个参数是一个参数数组,传入参数后,自定义事件方法就必须要用相应数目的形参来接受
    3. 绑定事件仅对该行代码前面的元素有效,后面新加入的元素不会触发该绑定事件。举一个例子,若在代码后父盒子中添加一个子盒子,父盒子事件对子盒子无效。也就是说动态生成的元素不能直接添加对象里面的时间也不能发生。

    事件代理on()

    on()
    既然子盒子做不了,将事件交给父盒子取做。
    语法:父标签.on(“事件名”,”需要绑定的选择器”,fn回调函数);
    示例:

    $('ul').on("click","li", function () {
                console.log($(this).index());
    });
    $("ul").append("<li>我是动态创建的元素</li>")

    移除事件unbind()

    unbind()传入需要移除的事件名,不传入参数时,移除所有事件
    示例:$("#box").unbind("mouseout");
    只能移除bind()绑定的对象

    合成事件

    例如:hover()事件是由mouseenter()mouseleave事件合成的
    hover()第一个参数移入函数,第二个移出函数

    11.5 鼠标事件

    属性 功能
    click() 单击事件
    dblclick() 双击事件
    mousedown()/up() 鼠标按下/弹起触发事件
    mousemove() 鼠标移动事件
    mouseover()/out() 鼠标移入/移出
    mouseenter()/leave() 鼠标进入/离开触发事件
    focus()/blur() 鼠标聚焦/失去焦点触发事件
    keydown()/up 键盘按下/弹起事件

    click()和dblClick()

    双击会触发一次双击事件和两次单击事件,所以一般不会对一个盒子既设置单击事件又设置双击事件

    mouseover()/mouseout()和mouseenter()/mouseleave()区别?

    假设子盒子设置鼠标移入移出事件,mouseover()/mouseout()在父盒子子盒子之间都会触发;而mouseenter()/mouseleave()仅仅在父盒子触发。
    举一个例子:
    子盒子设置mouseover()/mouseout(),那么鼠标从父盒子移入子盒子,会触发父盒子的置mouseover()和子盒子的mouseout()。
    子盒子设置mouseenter()/mouseleave(),那么鼠标从父盒子移入子盒子,两个事件都不会触发;仅仅在鼠标移入移出父盒子会触发这两个事件。

    mousemove()用途

    通常用在鼠标拖拽动作上

    11.6 表单事件

    属性 功能
    change() 表单元素发生改变时触发事件 (此事件仅限于input)
    select() 文本元素发生改变时触发事件(仅限于input中type=text或者textarea)
    submit() 表单元素发生改变时触发事件

    注意:
    1. select()方法仅对文本元素有效,对其他元素无效。在文本被选中时触发
    2. submit()事件是form表单中submit按钮的默认事件,默认提交表单。通过设置该函数,可以设置在提交前触发的事件(当然,也可以通过阻止默认提交表单事件),该函数与服务端有很大挂钩

    12. jquery中ajax技术(简介)

    什么是ajax?

    AJAX = 异步的javascript和XML(Asynchronous Javascript and XML),即在不重载整个网页情况下,通过后台加载数据,将其显示在网页上。

    jquery的load()方法

    从服务器加载数据,并把返回的数据放入被选元素中。
    示例:$("selector").load(url,data,callback);
    注意:
    selector:选择器
    url:url地址
    data:键值对集合
    callback:回调函数集合
    示例:

    $('#btn').click(function(){
        //只传一个url,表示在id为#new-projects的元素里加载index.html
        $('#new-projects').load('./index.html');
    })

    jquery的getJSON()方法

    异步加载json数据,并对数据进行解析,显示到页面上
    语法:$.getJSON(url,[data],[callback])

    jquery的$.get()方法

    $.get() 方法请求从服务器上请求数据
    语法:$.get(URL,callback)

    jquery的post()方法

    post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面
    语法:$.post(URL,data,callback);

    jquery的ajax方法

    $.ajax();
    具体参数:
    1. url : 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
    2. type:默认为get,有get和post两种方法
    3. timeout:超时时间
    4. async:默认true异步,有同步异步两种方法
    5. cache:默认true,是否从浏览器加载缓存
    6. data:要求为Object或String类型的参数,发送到服务器的数据。data为需要发送的值,以键值对形式。
    7. dataType:要求为string类型的参数,预期服务器返回的数据类型。作为回调函数的参数可用类型:xml,html,script,json,jsonp,text。相当于,想要什么类型数据就指定什么类型。发过来就转换成什么类型的
    8. script:返回纯文本JavaScript代码。
    9. beforeSend: 要求为Function类型的参数,发送请求前调用函数。
    10. success:data为成功时返回的对象,Function类型的参数。
    11. error:data为失败时返回的对象,Function类型的参数。

    展开全文
  • Jquery框架

    千次阅读 2013-08-15 12:54:04
    (function( window, undefined ) { // Use the correct document accordingly with window argument (sandbox) var document = window.document, navigator = window.navigator, location = window.location;...
    (function( window, undefined ) {
    
    // Use the correct document accordingly with window argument (sandbox)
    var document = window.document,
    	navigator = window.navigator,
    	location = window.location;
    var jQuery = (function() {
    
    // Define a local copy of jQuery
    var jQuery = function( selector, context ) {
    		// The jQuery object is actually just the init constructor 'enhanced'
    		return new jQuery.fn.init( selector, context, rootjQuery );
    };
    
    	
    jQuery.fn = jQuery.prototype = {
    	constructor: jQuery,
    	init: function( selector, context, rootjQuery ) {
    		
    
    		return jQuery.makeArray( selector, this );
    	}
    
    };
    
    // Give the init function the jQuery prototype for later instantiation
    jQuery.fn.init.prototype = jQuery.fn;
    
    jQuery.extend = jQuery.fn.extend = function() {
    	
    	// Return the modified object
    	return target;
    };
    
    jQuery.extend({
    	
    	// 这里都是方法
    
    	browser: {}
    });
    
    // Populate the class2type map
    jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) {
    	class2type[ "[object " + name + "]" ] = name.toLowerCase();
    });
    
    
    browserMatch = jQuery.uaMatch( userAgent );
    
    
    if ( browserMatch.browser ) {
    	jQuery.browser[ browserMatch.browser ] = true;
    	jQuery.browser.version = browserMatch.version;
    }
    
    // Deprecated, use jQuery.browser.webkit instead
    if ( jQuery.browser.webkit ) {
    	jQuery.browser.safari = true;
    }
    
    // IE doesn't match non-breaking spaces with \s
    if ( rnotwhite.test( "\xA0" ) ) {
    	trimLeft = /^[\s\xA0]+/;
    	trimRight = /[\s\xA0]+$/;
    }
    
    // All jQuery objects should point back to these
    rootjQuery = jQuery(document);
    
    // Cleanup functions for the document ready method
    if ( document.addEventListener ) {
    	DOMContentLoaded = function() {
    		document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
    		jQuery.ready();
    	};
    
    } else if ( document.attachEvent ) {
    	DOMContentLoaded = function() {
    		// Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
    		if ( document.readyState === "complete" ) {
    			document.detachEvent( "onreadystatechange", DOMContentLoaded );
    			jQuery.ready();
    		}
    	};
    }
    
    // The DOM ready check for Internet Explorer
    function doScrollCheck() {
    	if ( jQuery.isReady ) {
    		return;
    	}
    
    	try {
    		// If IE is used, use the trick by Diego Perini
    		// http://javascript.nwbox.com/IEContentLoaded/
    		document.documentElement.doScroll("left");
    	} catch(e) {
    		setTimeout( doScrollCheck, 1 );
    		return;
    	}
    
    	// and execute any waiting functions
    	jQuery.ready();
    }
    
    return jQuery;
    
    })();
    
    
    // String to Object flags format cache
    var flagsCache = {};
    
    // Convert String-formatted flags into Object-formatted ones and store in cache
    function createFlags( flags ) {
    	var object = flagsCache[ flags ] = {},
    		i, length;
    	flags = flags.split( /\s+/ );
    	for ( i = 0, length = flags.length; i < length; i++ ) {
    		object[ flags[i] ] = true;
    	}
    	return object;
    }
    
    /*
     * Create a callback list using the following parameters:
     *
     *	flags:	an optional list of space-separated flags that will change how
     *			the callback list behaves
     *
     * By default a callback list will act like an event callback list and can be
     * "fired" multiple times.
     *
     * Possible flags:
     *
     *	once:			will ensure the callback list can only be fired once (like a Deferred)
     *
     *	memory:			will keep track of previous values and will call any callback added
     *					after the list has been fired right away with the latest "memorized"
     *					values (like a Deferred)
     *
     *	unique:			will ensure a callback can only be added once (no duplicate in the list)
     *
     *	stopOnFalse:	interrupt callings when a callback returns false
     *
     */
    jQuery.Callbacks = function( flags ) {
    
     
    	return self;
    };
    
    
    
    
    var // Static reference to slice
    	sliceDeferred = [].slice;
    	
    	
    
    jQuery.extend({
     
    });
    
    
    
    
    jQuery.support = (function() {
    
    	 
    
    	return support;
    })();
    
    
    
    
    var rbrace = /^(?:\{.*\}|\[.*\])$/,
    	rmultiDash = /([A-Z])/g;
    
    jQuery.extend({
    	 
    });
    
    jQuery.fn.extend({
    	 
    });
    
    function dataAttr( elem, key, data ) {
    	// If nothing was found internally, try to fetch any
    	 
    	return data;
    }
    
    // checks a cache object for emptiness
    function isEmptyDataObject( obj ) {
    	 
    	return true;
    }
    
    
    
    
    function handleQueueMarkDefer( elem, type, src ) {
    	 
    }
    
    jQuery.extend({
    
    	_mark: function( elem, type ) {
    		if ( elem ) {
    			type = ( type || "fx" ) + "mark";
    			jQuery._data( elem, type, (jQuery._data( elem, type ) || 0) + 1 );
    		}
    	},
     
    });
    
    jQuery.fn.extend({
    	queue: function( type, data ) {
    		if ( typeof type !== "string" ) {
    			data = type;
    			type = "fx";
    		}
    
    		if ( data === undefined ) {
    			return jQuery.queue( this[0], type );
    		}
    		return this.each(function() {
    			var queue = jQuery.queue( this, type, data );
    
    			if ( type === "fx" && queue[0] !== "inprogress" ) {
    				jQuery.dequeue( this, type );
    			}
    		});
    	} 
    });
    
    
    
    
    var rclass = /[\n\t\r]/g,
    	rspace = /\s+/,
    	rreturn = /\r/g,
    	rtype = /^(?:button|input)$/i,
    	rfocusable = /^(?:button|input|object|select|textarea)$/i,
    	rclickable = /^a(?:rea)?$/i,
    	rboolean = /^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,
    	getSetAttribute = jQuery.support.getSetAttribute,
    	nodeHook, boolHook, fixSpecified;
    
    jQuery.fn.extend({
    	 
    });
    
    jQuery.extend({
    	 
    });
    
    // Add the tabIndex propHook to attrHooks for back-compat (different case is intentional)
    jQuery.attrHooks.tabindex = jQuery.propHooks.tabIndex;
    
    // Hook for boolean attributes
    boolHook = {
    	get: function( elem, name ) {
    		// Align boolean attributes with corresponding properties
    		// Fall back to attribute presence where some booleans are not supported
    		var attrNode,
    			property = jQuery.prop( elem, name );
    		return property === true || typeof property !== "boolean" && ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ?
    			name.toLowerCase() :
    			undefined;
    	} 
    };
    
    // IE6/7 do not support getting/setting some attributes with get/setAttribute
    if ( !getSetAttribute ) {
    
    	fixSpecified = {
    		name: true,
    		id: true
    	};
    
    	 
    
    	// Apply the nodeHook to tabindex
    	jQuery.attrHooks.tabindex.set = nodeHook.set;
    
    	 
    }
    
    
    // Some attributes require a special call on IE
    if ( !jQuery.support.hrefNormalized ) {
    	 
    }
    
    if ( !jQuery.support.style ) {
    	 
    }
    
    // Safari mis-reports the default selected property of an option
    // Accessing the parent's selectedIndex property fixes it
    if ( !jQuery.support.optSelected ) {
    	 
    }
    
    // IE6/7 call enctype encoding
    if ( !jQuery.support.enctype ) {
    	jQuery.propFix.enctype = "encoding";
    }
    
    // Radios and checkboxes getter/setter
    if ( !jQuery.support.checkOn ) {
    	 
    }
    jQuery.each([ "radio", "checkbox" ], function() {
    	 
    });
    
    
    
    
    var rformElems = /^(?:textarea|input|select)$/i,
    	rtypenamespace = /^([^\.]*)?(?:\.(.+))?$/,
    	rhoverHack = /\bhover(\.\S+)?\b/,
    	rkeyEvent = /^key/,
    	rmouseEvent = /^(?:mouse|contextmenu)|click/,
    	rfocusMorph = /^(?:focusinfocus|focusoutblur)$/,
    	rquickIs = /^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,
    	quickParse = function( selector ) {
    		var quick = rquickIs.exec( selector );
    		if ( quick ) {
    			//   0  1    2   3
    			// [ _, tag, id, class ]
    			quick[1] = ( quick[1] || "" ).toLowerCase();
    			quick[3] = quick[3] && new RegExp( "(?:^|\\s)" + quick[3] + "(?:\\s|$)" );
    		}
    		return quick;
    	},
    	quickIs = function( elem, m ) {
    		var attrs = elem.attributes || {};
    		return (
    			(!m[1] || elem.nodeName.toLowerCase() === m[1]) &&
    			(!m[2] || (attrs.id || {}).value === m[2]) &&
    			(!m[3] || m[3].test( (attrs[ "class" ] || {}).value ))
    		);
    	},
    	hoverHack = function( events ) {
    		return jQuery.event.special.hover ? events : events.replace( rhoverHack, "mouseenter$1 mouseleave$1" );
    	};
    
    /*
     * Helper functions for managing events -- not part of the public interface.
     * Props to Dean Edwards' addEvent library for many of the ideas.
     */
    jQuery.event = {
    
    	add: function( elem, types, handler, data, selector ) {
     
    	},
    
    	global: {},
    
    	// Detach an event or set of events from an element
    	remove: function( elem, types, handler, selector, mappedTypes ) {
     
    	},
    
    	// Events that are safe to short-circuit if no handlers are attached.
    	// Native DOM events should not be added, they may have inline handlers.
    	customEvent: {
    		"getData": true,
    		"setData": true,
    		"changeData": true
    	},
    
    	trigger: function( event, data, elem, onlyHandlers ) {
    		 
    
    		return event.result;
    	},
    
    	dispatch: function( event ) {
    
    		 
    		return event.result;
    	},
    
    	// Includes some event props shared by KeyEvent and MouseEvent
    	// *** attrChange attrName relatedNode srcElement  are not normalized, non-W3C, deprecated, will be removed in 1.8 ***
    	props: "attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),
    
    	fixHooks: {},
    
    	keyHooks: {
    	 
    	},
    
    	mouseHooks: {
    		 
    	},
    
    	fix: function( event ) {
    	},
    
    	special: {
    		 
    	} 
    };
    
    // Some plugins are using, but it's undocumented/deprecated and will be removed.
    // The 1.7 special event interface should provide all the hooks needed now.
    jQuery.event.handle = jQuery.event.dispatch;
    
    jQuery.removeEvent = document.removeEventListener ?
    	function( elem, type, handle ) {
    		if ( elem.removeEventListener ) {
    			elem.removeEventListener( type, handle, false );
    		}
    	} :
    	function( elem, type, handle ) {
    		if ( elem.detachEvent ) {
    			elem.detachEvent( "on" + type, handle );
    		}
    	};
    
    jQuery.Event = function( src, props ) {
    	// Allow instantiation without the 'new' keyword
    	 
    	// Mark it as fixed
    	this[ jQuery.expando ] = true;
    };
    
    function returnFalse() {
    	return false;
    }
    function returnTrue() {
    	return true;
    }
    
    // jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding
    // http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
    jQuery.Event.prototype = {
    	 
    };
    
    // Create mouseenter/leave events using mouseover/out and event-time checks
    jQuery.each({
    	mouseenter: "mouseover",
    	mouseleave: "mouseout"
    }, function( orig, fix ) {
    	 
    	};
    });
    
    // IE submit delegation
    if ( !jQuery.support.submitBubbles ) {
      
    }
    
    // IE change delegation and checkbox/radio fix
    if ( !jQuery.support.changeBubbles ) {
    
    	jQuery.event.special.change = {
     
    	};
    }
    
    // Create "bubbling" focus and blur events
    if ( !jQuery.support.focusinBubbles ) {
    	jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {
    
    		// Attach a single capturing handler while someone wants focusin/focusout
    		var attaches = 0,
    			handler = function( event ) {
    				jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true );
    			};
    
    		jQuery.event.special[ fix ] = {
    			 
    		};
    	});
    }
    
    jQuery.fn.extend({
    
    	 
    });
    
    jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    	"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    	"change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {
    
    	 
    });
    
    
    
    /*!
     * Sizzle CSS Selector Engine
     *  Copyright 2011, The Dojo Foundation
     *  Released under the MIT, BSD, and GPL Licenses.
     *  More information: http://sizzlejs.com/
     */
    (function(){
    
    var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,
    	expando = "sizcache" + (Math.random() + '').replace('.', ''),
    	done = 0,
    	toString = Object.prototype.toString,
    	hasDuplicate = false,
    	baseHasDuplicate = true,
    	rBackslash = /\\/g,
    	rReturn = /\r\n/g,
    	rNonWord = /\W/;
    
    // Here we check if the JavaScript engine is using some sort of
    // optimization where it does not always call our comparision
    // function. If that is the case, discard the hasDuplicate value.
    //   Thus far that includes Google Chrome.
    [0, 0].sort(function() {
    	baseHasDuplicate = false;
    	return 0;
    });
    
    var Sizzle = function( selector, context, results, seed ) {
    	 
    
    	return results;
    };
    
    Sizzle.uniqueSort = function( results ) {
    	 
    
    	return results;
    };
    
    Sizzle.matches = function( expr, set ) {
    	return Sizzle( expr, null, null, set );
    };
    
    Sizzle.matchesSelector = function( node, expr ) {
    	return Sizzle( expr, null, null, [node] ).length > 0;
    };
    
    Sizzle.find = function( expr, context, isXML ) {
    	 
    
    	return { set: set, expr: expr };
    };
    
    Sizzle.filter = function( expr, set, inplace, not ) {
     
    	return curLoop;
    };
    
    Sizzle.error = function( msg ) {
    	throw new Error( "Syntax error, unrecognized expression: " + msg );
    };
    
    /**
     * Utility function for retreiving the text value of an array of DOM nodes
     * @param {Array|Element} elem
     */
    var getText = Sizzle.getText = function( elem ) {
        
    	return ret;
    };
    
    var Expr = Sizzle.selectors = {
    	 
    };
    
    var origPOS = Expr.match.POS,
    	fescape = function(all, num){
    		return "\\" + (num - 0 + 1);
    	};
    
    for ( var type in Expr.match ) {
    	Expr.match[ type ] = new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) );
    	Expr.leftMatch[ type ] = new RegExp( /(^(?:.|\r|\n)*?)/.source + Expr.match[ type ].source.replace(/\\(\d+)/g, fescape) );
    }
    
    var makeArray = function( array, results ) {
     
    };
    
    // Perform a simple check to determine if the browser is capable of
    // converting a NodeList to an array using builtin methods.
    // Also verifies that the returned array holds DOM nodes
    // (which is not the case in the Blackberry browser)
    try {
    	Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType;
    
    // Provide a fallback method if it does not work
    } catch( e ) {
    	 
     
    }
    
    var sortOrder, siblingCheck;
    
    if ( document.documentElement.compareDocumentPosition ) {
    	
    
    } else {
    	 
    }
    
    // Check to see if the browser returns elements by name when
    // querying by getElementById (and provide a workaround)
    (function(){
    	 
    })();
    
    	 
    }
     
    })();
    
    (function(){
    	 
    })();
    
    
    var runtil = /Until$/,
    	rparentsprev = /^(?:parents|prevUntil|prevAll)/,
    	// Note: This RegExp should be improved, or likely pulled from Sizzle
    	rmultiselector = /,/,
    	isSimple = /^.[^:#\[\.,]*$/,
    	slice = Array.prototype.slice,
    	POS = jQuery.expr.match.POS,
    	// methods guaranteed to produce a unique set when starting from a unique set
    	guaranteedUnique = {
    		children: true,
    		contents: true,
    		next: true,
    		prev: true
    	};
    
    jQuery.fn.extend({
    	 
    });
    
    jQuery.extend({
    	
    });
    
    // Implement the identical functionality for filter and not
    function winnow( elements, qualifier, keep ) {
    
    }
    
    
    
    
    function createSafeFragment( document ) {
    	 
    }
    
     
    
    wrapMap.optgroup = wrapMap.option;
    wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
    wrapMap.th = wrapMap.td;
    
    // IE can't serialize <link> and <script> tags normally
    if ( !jQuery.support.htmlSerialize ) {
    	wrapMap._default = [ 1, "div<div>", "</div>" ];
    }
    
    jQuery.fn.extend({
    	 
     
    });
    
    function root( elem, cur ) {
    	return jQuery.nodeName(elem, "table") ?
    		(elem.getElementsByTagName("tbody")[0] ||
    		elem.appendChild(elem.ownerDocument.createElement("tbody"))) :
    		elem;
    }
    
    function cloneCopyEvent( src, dest ) {
    
    	 
    }
    
    function cloneFixAttributes( src, dest ) {
    	var nodeName;
     
    }
    
    jQuery.buildFragment = function( args, nodes, scripts ) {
    	 
    };
    
    jQuery.fragments = {};
    
    jQuery.each({
    	appendTo: "append",
    	prependTo: "prepend",
    	insertBefore: "before",
    	insertAfter: "after",
    	replaceAll: "replaceWith"
    }, function( name, original ) {
    	 
    });
    
    function getAll( elem ) {
    	
    }
    
    // Used in clean, fixes the defaultChecked property
    function fixDefaultChecked( elem ) {
    	 
    }
    // Finds all inputs and passes them to fixDefaultChecked
    function findInputs( elem ) {
     
    }
    
    // Derived From: http://www.iecss.com/shimprove/javascript/shimprove.1-0-1.js
    function shimCloneNode( elem ) {
     
    }
    
    jQuery.extend({
    	
    });
    
    function evalScript( i, elem ) {
    	 
    }
    
    
    
    
    var ralpha = /alpha\([^)]*\)/i,
    	ropacity = /opacity=([^)]*)/,
    	// fixed for IE9, see #8346
    	rupper = /([A-Z]|^ms)/g,
    	rnumpx = /^-?\d+(?:px)?$/i,
    	rnum = /^-?\d/,
    	rrelNum = /^([\-+])=([\-+.\de]+)/,
    
    	cssShow = { position: "absolute", visibility: "hidden", display: "block" },
    	cssWidth = [ "Left", "Right" ],
    	cssHeight = [ "Top", "Bottom" ],
    	curCSS,
    
    	getComputedStyle,
    	currentStyle;
    
    jQuery.fn.css = function( name, value ) {
    	
    };
    
    jQuery.extend({
    	// Add in style property hooks for overriding the default
    	// behavior of getting and setting a style property
    	
    });
    
    // DEPRECATED, Use jQuery.css() instead
    jQuery.curCSS = jQuery.css;
    
    jQuery.each(["height", "width"], function( i, name ) {
     });
    
    if ( !jQuery.support.opacity ) {
    	
    }
    
    jQuery(function() {
    	// This hook cannot be added until DOM ready because the support test
    	// for it is not run until after DOM ready
     
    }
    
    curCSS = getComputedStyle || currentStyle;
    
    function getWH( elem, name, extra ) {
    
    	
    
    	return val + "px";
    }
    
    if ( jQuery.expr && jQuery.expr.filters ) {
    	jQuery.expr.filters.hidden = function( elem ) {
    		var width = elem.offsetWidth,
    			height = elem.offsetHeight;
    
    		return ( width === 0 && height === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
    	};
    
    	jQuery.expr.filters.visible = function( elem ) {
    		return !jQuery.expr.filters.hidden( elem );
    	};
    }
    
    
    
    
    v
    jQuery.fn.extend({
    	
    });
    
    // Attach a bunch of functions for handling common AJAX events
    jQuery.each( "ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split( " " ), function( i, o ){
    	jQuery.fn[ o ] = function( f ){
    		return this.on( o, f );
    	};
    });
    
    jQuery.each( [ "get", "post" ], function( i, method ) {
    	
    });
    
    jQuery.extend({
    
    	
    	},
    
    	
    
    });
    
    // Animations created synchronously will run synchronously
    function createFxNow() {
    	setTimeout( clearFxNow, 0 );
    	return ( fxNow = jQuery.now() );
    }
    
    function clearFxNow() {
    	fxNow = undefined;
    }
    
    // Generate parameters to create a standard animation
    function genFx( type, num ) {
    	var obj = {};
    
    	jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice( 0, num )), function() {
    		obj[ this ] = type;
    	});
    
    	return obj;
    }
    
    // Generate shortcuts for custom animations
    jQuery.each({
    	slideDown: genFx( "show", 1 ),
    	slideUp: genFx( "hide", 1 ),
    	slideToggle: genFx( "toggle", 1 ),
    	fadeIn: { opacity: "show" },
    	fadeOut: { opacity: "hide" },
    	fadeToggle: { opacity: "toggle" }
    }, function( name, props ) {
    	jQuery.fn[ name ] = function( speed, easing, callback ) {
    		return this.animate( props, speed, easing, callback );
    	};
    });
    
    jQuery.extend({
    
    
    });
    
    jQuery.fx.prototype = {
     
    };
    
    jQuery.extend( jQuery.fx, {
    	
    });
    
    // Adds width/height step functions
    // Do not set anything below 0
    jQuery.each([ "width", "height" ], function( i, prop ) {
    	jQuery.fx.step[ prop ] = function( fx ) {
    		jQuery.style( fx.elem, prop, Math.max(0, fx.now) + fx.unit );
    	};
    });
    
    if ( jQuery.expr && jQuery.expr.filters ) {
    	jQuery.expr.filters.animated = function( elem ) {
    		return jQuery.grep(jQuery.timers, function( fn ) {
    			return elem === fn.elem;
    		}).length;
    	};
    }
    
    // Try to restore the default display value of an element
    function defaultDisplay( nodeName ) {
    
    	 
    	return elemdisplay[ nodeName ];
    }
    
    
    
    
    var rtable = /^t(?:able|d|h)$/i,
    	rroot = /^(?:body|html)$/i;
    
    if ( "getBoundingClientRect" in document.documentElement ) {
    	jQuery.fn.offset = function( options ) {
    		 
    		return { top: top, left: left };
    	};
    
    } else {
    	jQuery.fn.offset = function( options ) {
    		 
    		return { top: top, left: left };
    	};
    }
    
    
    jQuery.fn.extend({
    
    	position: function() {
    	
    });
    
    
    // Create scrollLeft and scrollTop methods
    jQuery.each( ["Left", "Top"], function( i, name ) {
     
    }
    });
    
    function getWindow( elem ) {
     
    }
    
    
    
    
    // Create width, height, innerHeight, innerWidth, outerHeight and outerWidth methods
    jQuery.each([ "Height", "Width" ], function( i, name ) {
    
    	var type = name.toLowerCase();
    
    	// innerHeight and innerWidth
    	jQuery.fn[ "inner" + name ] = function() {
     
    	};
    
    	// outerHeight and outerWidth
    	jQuery.fn[ "outer" + name ] = function( margin ) {
    		 
    	};
    
    	jQuery.fn[ type ] = function( size ) {
    	 
    	};
    
    });
    
    
    
    
    // Expose jQuery to the global object
    window.jQuery = window.$ = jQuery;
    
    // Expose jQuery as an AMD module, but only for AMD loaders that
    // understand the issues with loading multiple versions of jQuery
    // in a page that all might call define(). The loader will indicate
    // they have special allowances for multiple jQuery versions by
    // specifying define.amd.jQuery = true. Register as a named module,
    // since jQuery can be concatenated with other files that may use define,
    // but not use a proper concatenation script that understands anonymous
    // AMD modules. A named AMD is safest and most robust way to register.
    // Lowercase jquery is used because AMD module names are derived from
    // file names, and jQuery is normally delivered in a lowercase file name.
    // Do this after creating the global so that if an AMD module wants to call
    // noConflict to hide this version of jQuery, it will work.
    if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    	define( "jquery", [], function () { return jQuery; } );
    }
    
    
    
    })( window );
    

    展开全文
  • JQuery框架介绍【上】

    千次阅读 2009-11-24 15:13:00
    jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优秀的js效果,jQuery可以帮你达到目的!下载地址:Starterkit ...

     jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优秀的js效果,jQuery可以帮你达到目的!
    下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip)
    jQuery Downloads (http://jquery.com/src/)

    下载完成后先加载到文档中,然后我们来看个简单的例子!
    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
    $("a").click(function() {
    alert("Hello world!");
    });
    });
    <script>

    上边的效果是点击文档中所有a标签时将弹出对话框,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个 jQuery对象,click()是这个对象的方法,同理$ (document)也是一个jQuery对象,ready(fn) 是$(document)的方法,表示当document全部下载完毕时执行函数。
    在进行下面内容之前我还要说明一点$("p") 和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p" (<span id="p"></span>)的元素.

    我将从以下几个内容来讲解jQuery的使用:
    1:核心部分
    2:DOM操作
    3:css操作
    4:javascript处理
    5:动态效果
    6:event事件
    7:ajax支持
    8:插件程序

    一:核心部分
    $(expr)
    说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础
    参数:expr:字符串,一个查询表达式或一段html字符串
    例子:
    未执行jQuery前:
    <p>one</p>
    <div>
    <p>two</p>
    </div>
    <p>three</p>
    <a href="#" id="test" onClick="jq()" >jQuery</a>

    jQuery代码及功能:
    function jq(){
    alert($("div > p").html());
    }
    运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
    function jq(){
    $("<div><p>Hello</p></div>").appendTo("body");
    }
    运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>”

    $(elem)
    说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
    参数: elem:通过jQuery对象压缩的DOM元素
    例子:
    未执行jQuery前:
    <p>one</p>
    <div>
    <p>two</p>
    </div><p>three</p>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    alert($(document).find("div > p").html());
    }
    运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
    function jq(){
    $(document.body).background("black");
    }
    运行:当点击id为test的元素时,背景色变成黑色

    $(elems)
    说明:限制jQuery作用于一组特定的DOM元素
    参数: elem:一组通过jQuery对象压缩的DOM元素
    例子:
    未执行jQuery前:
    <form id="form1">
    <input type="text" name="textfield">
    <input type="submit" name="Submit" value="提交">
    </form>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    $(form1.elements ).hide();
    }
    运行:当点击id为test的元素时,隐藏form1表单中的所有元素。

    $(fn)
    说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!
    参数:fn (Function):当文档载入时执行的函数!
    例子:
    $( function(){
    $(document.body).background("black");
    })
    运行:当文档载入时背景变成黑色,相当于onLoad。

    $(obj)
    说明:复制一个jQuery对象,
    参数:obj (jQuery): 要复制的jQuery对象
    例子:
    未执行jQuery前:
    <p>one</p>
    <div>
    <p>two</p>
    </div>
    <p>three</p>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    var f = $("div");
    alert($(f).find("p").html())
    }
    运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。

    each(fn)
    说明:将函数作用于所有匹配的对象上
    参数:fn (Function): 需要执行的函数
    例子:
    未执行jQuery前:
    <img src="1.jpg"/>
    <img src="1.jpg"/>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    $("img").each(function(){
    this.src = "2.jpg"; });
    }
    运行:当点击id为test的元素时,img标签的src都变成了2.jpg。

    eq(pos)
    说明:减少匹配对象到一个单独得dom元素
    参数:pos (Number): 期望限制的索引,从0 开始
    例子:
    未执行jQuery前:
    <p>This is just a test.</p>
    <p>So is this</p>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    alert($("p").eq(1).html())
    }
    运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容

    get() get(num)
    说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
    参数:get (Number): 期望限制的索引,从0 开始
    例子:
    未执行jQuery前:
    <p>This is just a test.</p>
    <p>So is this</p>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    alert($("p").get(1).innerHTML);
    }
    运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
    注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML

    index(obj)
    说明:返回对象索引
    参数:obj (Object): 要查找的对象
    例子:
    未执行jQuery前:
    <div id="test1"></div>
    <div id="test2"></div>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    alert($("div").index(document.getElementById('test1')));
    alert($("div").index(document.getElementById('test2')));
    }
    运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1

    size() Length
    说明:当前匹配对象的数量,两者等价
    例子:
    未执行jQuery前:
    <img src="test1.jpg"/>
    <img src="test2.jpg"/>
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    alert($("img").length);
    }
    运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象


    二:DOM操作
    属性
    我们以<img id="a" scr="5.jpg"/>为例,在原始的javascript里面可以用 var o=document.getElementById('a')取的id为a的节点对象,在用o.src来取得或修改该节点的scr属性,在 jQuery 里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ],然后可以用 jQuery提供的很多方法来进行操作,如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法,方便大家快速对DOM对象进行操作
    herf() herf(val)
    说明:对jQuery对象属性herf的操作。
    例子:
    未执行jQuery前
    <a href="1.htm" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    alert($("#test").href());
    $("#test").href("2.html");
    }
    运行:先弹出对话框显示id为test的连接url,在将其url改为2.html,当弹出对话框后会看到转向到2.html
    同理,jQuery还提供类似的其他方法,大家可以分别试验一下:
    herf() herf(val) html() html(val) id() id (val) name() name (val) rel() rel (val)
    src() src (val) title() title (val) val() val(val)

    操作
    after(html) 在匹配元素后插入一段html
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    $("#test").after("<b>Hello</b>");
    }
    执行后相当于:
    <a href="#" id="test" onClick="jq()">jQuery</a><b>Hello</b>

    after(elem) after(elems) 将指定对象elem或对象组elems插入到在匹配元素后
    <p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能
    function jq(){
    $("a").after($("#test"));
    }
    执行后相当于
    <a href="#" onClick="jq()">jQuery</a><p id="test">after</p>

    append(html)在匹配元素内部,且末尾插入指定html
    <a href="#" id="test" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    $("#test").append("<b>Hello</b>");
    }
    执行后相当于
    <a href="#" onClick="jq()">jQuery<b>Hello</b></a>
    同理还有append(elem) append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解!

    appendTo(expr) 与append(elem)相反
    <p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能
    function jq(){
    $("a"). appendTo ($("#test"));
    }
    执行后相当于
    <p id="test">after<a href="#" onClick="jq()">jQuery</a> </p>

    clone() 复制一个jQuery对象
    <p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    $("#test").clone().appendTo($("a"));
    }
    复制$("#test")然后插入到<a>后,执行后相当于
    <p id="test">after</p><a href="#" onClick="jq()">jQuery</a><p id="test">after</p>

    empty() 删除匹配对象的所有子节点
    <div id="test">
    <span>span</span>
    <p>after</p>
    </div>
    <a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    $("#test").empty();
    }
    执行后相当于
    <div id="test"></div><a href="#" onClick="jq()">jQuery</a>

    insertAfter(expr) insertBefore(expr)
    按照官方的解释和我的几个简单测试insertAfter(expr)相当于before(elem),insertBefore(expr)相当于after (elem)

    prepend (html) prepend (elem) prepend (elems) 在匹配元素的内部且开始出插入
    通过下面例子区分append(elem) appendTo(expr) prepend (elem)
    <p id="a">p</p>
    <div>div</div>
    执行$("#a").append($("div")) 后相当于
    <p id="a">
    P
    <div>div</div>
    </p>
    执行$("#a").appendTo($("div")) 后 相当于
    <div>
    div
    <p id="a">p</p>
    </div>
    执行$("#a").prepend ($("div")) 后 相当于
    <p id="a">
    <div>div</div>
    P
    </p>

    remove() 删除匹配对象
    注意区分empty(),empty()移出匹配对象的子节点,remove(),移出匹配对象

    wrap(htm) 将匹配对象包含在给出的html代码内
    <p>Test Paragraph.</p> <a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    $("p").wrap("<div class='wrap'></div>");
    }
    执行后相当于
    <div class='wrap'><p>Test Paragraph.</p></div>

    wrap(elem) 将匹配对象包含在给出的对象内
    <p>Test Paragraph.</p><div id="content"></div>
    <a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    $("p").wrap( document.getElementById('content') );
    }
    执行后相当于
    <div id="content"><p>Test Paragraph.</p></div>

    遍历、组合
    add(expr) 在原对象的基础上在附加符合指定表达式的jquery对象
    <p>Hello</p><p><span>Hello Again</span></p>
    <a href="#" onClick="jq()">jQuery</a>
    jQuery代码及功能:
    function jq(){
    var f=$("p").add("span");
    for(var i=0;i < $(f).size();i++){
    alert($(f).eq(i).html());}
    }
    执行$("p")得到匹配<p>的对象,有两个,add("span")是在("p")的基础上加上匹配<span >的对象,所有一共有3个,从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合,分别是 [<p> Hello</p>],[<p><span>Hello Again< /span></p>],[<span>Hello Again</span>]。

    add(el) 在匹配对象的基础上在附加指定的dom元素。
    $("p").add(document.getElementById("a"));

    add(els) 在匹配对象的基础上在附加指定的一组对象,els是一个数组。
    <p>Hello</p><p><span>Hello Again</span></p>
    jQuery代码及功能:
    function jq(){
    var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
    for(var i=0;i < $(f).size();i++){
    alert($(f).eq(i).html());}
    }
    注意els是一个数组,这里的[ ]不能漏掉。

    ancestors () 一依次以匹配结点的父节点的内容为对象,根节点除外(有点不好理解,看看下面例子就明白了)
    <div>
    <p>one</p>
    <span>
    <u>two</u>
    </span>
    </div>
    jQuery代码及功能:
    function jq(){
    var f= $("u").ancestors();
    for(var i=0;i < $(f).size();i++){
    alert($(f).eq(i).html());}
    }
    第一个对象是以<u>的父节点的内容为对象,[ <u>two</u> ]
    第一个对象是以<u>的父节点的父节点(div)的内容为对象,[<p>one</p><span><u>two</u></span> ]
    一般一个文档还有<body>和<html>,依次类推下去。

    ancestors (expr) 在ancestors()的基础上之取符合表达式的对象
    如上各例子讲var f改为var f= $("u").ancestors(“div”),则只返回一个对象:
    [ <p>one</p><span><u>two</u></span> ]

    children() 返回匹配对象的子介点
    <p>one</p>
    <div id="ch">
    <span>two</span>
    </div>
    jQuery代码及功能:
    function jq(){
    alert($("#ch").children().html());
    }
    $("#ch").children()得到对象[ <span>two</span> ].所以.html()的结果是”two”

    children(expr) 返回匹配对象的子介点中符合表达式的节点
    <div id="ch">
    <span>two</span>
    <span id="sp">three</span>
    </div>
    jQuery代码及功能
    function jq(){
    alert($("#ch").children(“#sp”).html());
    }
    $("#ch").children()得到对象[<span>two</span><span id="sp">three</span> ].
    $("#ch").children(“#sp”)过滤得到[<span id="sp">three</span> ]

    parent () parent (expr)取匹配对象父节点的。参照children帮助理解

    contains(str) 返回匹配对象中包含字符串str的对象
    <p>This is just a test.</p><p>So is this</p>
    jQuery代码及功能:
    function jq(){
    alert($("p").contains("test").html());
    }
    $("p")得到两个对象,而包含字符串”test”只有一个。所有$("p").contains("test")返回 [ <p>This is just a test.</p> ]

    end() 结束操作,返回到匹配元素清单上操作前的状态.

    filter(expr) filter(exprs) 过滤现实匹配符合表达式的对象 exprs为数组,注意添加“[ ]”
    <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
    jQuery代码及功能:
    function jq(){
    alert($("p").filter(".selected").html())
    }
    $("p")得到三个对象,$("p").contains("test")只返回class为selected的对象。

    find(expr) 在匹配的对象中继续查找符合表达式的对象
    <p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
    Query代码及功能:
    function jq(){
    alert($("p").find("#a").html())
    }
    在$("p")对象中查找id为a的对象。

    is(expr) 判断对象是否符合表达式,返回boolen值
    <p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
    Query代码及功能:
    function jq(){
    alert($("#a").is("p"));
    }
    在$("#a ")是否符合jquery表达式。
    大家可以用$("#a").is("div"); ("#a").is("#a")多来测试一下

    next() next(expr) 返回匹配对象剩余的兄弟节点
    <p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
    jQuery代码及功能
    function jq(){
    alert($("p").next().html());
    alert($("p").next(".selected").html());
    }
    $("p").next()返回 [ <p id="a">Hello Again</p> , <p class="selected">And Again</p> ]两个对象
    $("p").next(".selected)只返回 [<p class="selected">And Again</p> ]一个对象

    prev () prev (expr) 参照next理解

    not(el) not(expr) 从jQuery对象中移出匹配的对象,el为dom元素,expr为jQuery表达式。
    <p>one</p><p id="a">two</p>
    <a href="#" οnclick="js()">jQuery</a>
    jQuery代码及功能:
    function js(){
    alert($("p").not(document.getElementById("a")).html());
    alert($("p").not(“#a”).html());
    }
    $("p")由两个对象,排除后的对象为[<p>one</p> ]

    siblings () siblings (expr) jquery匹配对象中其它兄弟级别的对象
    <p>one</p>
    <div>
    <p id="a">two</p>
    </div>
    <a href="#" οnclick="js()">jQuery</a>
    jQuery代码及功能:
    function js(){
    alert($("div").siblings().eq(1).html());
    }
    $("div").siblings()的结果实返回两个对象[<p>one</p>,<a href="#" οnclick="js()">jQuery</a> ]
    alert($("div").siblings(“a”)返回一个对象[<a href="#" οnclick="js()">jQuery</a> ]

    其他
    addClass(class) 为匹配对象添加一个class样式
    removeClass (class) 将第一个匹配对象的某个class样式移出

    attr (name) 获取第一个匹配对象的属性
    <img src="test.jpg"/><a href="#" οnclick="js()">jQuery</a>
    jQuery代码及功能:
    function js(){
    alert($("img").attr("src"));
    }
    返回test.jpg

    attr (prop) 为第一个匹配对象的设置属性,prop为hash对象,用于为某对象批量添加众多属性
    <img/><a href="#" οnclick="js()">jQuery</a>
    jQuery代码及功能:
    function js(){
    $("img").attr({ src: "test.jpg", alt: "Test Image" });
    }
    运行结果相当于<img src="test.jpg" alt="Test Image"/>

    attr (key,value) 为第一个匹配对象的设置属性,key为属性名,value为属性值
    <img/><a href="#" οnclick="js()">jQuery</a>
    jQuery代码及功能
    function js(){
    $("img").attr(“src”,”test.jpg”);
    }
    运行结果相当于<img src="test.jpg"/>

    removeAttr (name) 将第一个匹配对象的某个属性移出
    <img alt="test"/><a href="#" οnclick="js()">jQuery</a>
    jQuery代码及功能:
    function js(){
    $("img"). removeAttr("alt");
    }
    运行结果相当于<img />

    toggleClass (class) 将当前对象添加一个样式,不是当前对象则移出此样式,返回的是处理后的对象
    <p>Hello</p><p class="selected">Hello Again</p><a href="#" οnclick="js()">jQuery</a>
    $("p")的结果是返回对象 [<p>Hello</p>,<p class="selected">Hello Again</p> ]
    $("p").toggleClass("selected")的结果是实返回对象 [ <p class="selected">Hello</p>, <p>Hello Again</p> ]

    展开全文
  • jQuery框架

    千次阅读 2020-06-24 21:21:18
    jQuery框架 什么是jQuery jQuery框架是JS代码写出来的,本身就是一个JS文件 由第三方厂商做出来的,免费开源。 提供了大量的方法,以前需要编写多行代码的功能,现在一行代码就可以实现 程序员只需要编写一套代码 ...
  • jQuery EasyUI框架介绍

    2017-07-12 20:37:32
    jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。 开发者不需要编写复杂的javascript, 也不需要对css样式有深入的了解,开发者...
  • Jquery验证框架介绍

    千次阅读 2011-04-18 19:26:00
    转载于:http://blog.sina.com.cn/s/blog_49b531af0100h67m.html<br />  jquery.validate.js是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的...
  • script> //利用自执行函数封装jq代码,避免暴露太多的全局变量 (function (window) { //为了以后能方便借用数组的各种方法,提前存到变量中,全局都是用这一个数组,节约空间 var arr = [];...
  • JQuery框架简介

    千次阅读 2019-03-21 11:20:58
    jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript...
  • jQuery框架总结

    2018-04-10 20:40:55
    What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with...
  • jquery框架概述

    千次阅读 2014-08-06 17:35:46
    (function(window,... var jQuery = (function(){ var jQuery = function(selector,context){ return new jQuery.init(selector,context,rootjQuery) }, //一堆局部变量声明 jQuery.fn = jQuery.pro
  • 手写jQuery框架

    千次阅读 2017-05-16 15:10:52
    功能的实现只是机械地调用,框架的编写才是代码的升华
  • jQuery框架学习

    2012-03-14 00:34:55
    jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuery操作元素的属性与样式 jQuery
  • 初级学软件之jquery框架

    千人学习 2016-08-31 21:39:47
    初级学软件之jquery框架,全面介绍jquery框架
  • jQuery开发框架

    千人学习 2017-01-01 09:55:28
    jQuery是使用多的前台开发框架,利用jQuery可以帮助用户解决复杂的页面DOM操作所带来的困扰,同时提供的一系列选择器、动画操作都可以更加方便前台用户开发,本课程主要讲解jQuery中核心概念的使用。 同时在本课程中...

空空如也

1 2 3 4 5 ... 20
收藏数 51,072
精华内容 20,428
关键字:

jquery框架