[总结]jQuery之常用函数方法参考手册

前端开发作者： 2024-08-20 18:50:02

w3school参考地址：http://www.w3school.com.cn/jquery/index.asp runoob参考地址：http://www.runoob.com/jquery/jqu

stop()

1、stop([stopAll],[gotoEnd])方法有两个参数（当然可以不传或直传一个），其中stopAll的意思是清除之后的所有动画。gotoEnd的意思是，执行完当前动画。
2、stopAll == true时，停止队列中的所有动画， stopAll ==false时，只停止队列中的当前动画，后续动画继续执行。
3、gotoEnd == true时，立即跳到当前动画的末尾， gotoEnd ==false时，停在当前状态。且gotoEnd只有在设置了stopAll的时候才起作用
4、在项目中，如果不进行动画队列清理，就会产生动画积累的问题。因此在写入动画时，最好先清除队列中的重复动画。

$(".nav li.has_list").hover(function(){
    $(this).children("a").addClass("curr");
    $(this).children("div").stop(true,true).slideDown(400);                            
},this).children("a").removeClass("curr"true).slideUp(400);   
   }
);

clone()

includeEvents：可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。

$("button").click((){
  $("body").append($("p").clone());
});

$("button").click((){
  $(this).clone(true).insertAfter(this);
});

<button>Clone Me!</>
>

attr()

$("button").click((){
    $("img").attr("width","500");
});

//返回属性的值：
$(selector).attr(attribute)

设置属性和值：
$(selector).attr(attribute,value)

使用函数设置属性和值：
$(selector).attr(attribute,1)">(index,currentvalue))

设置多个属性和值：
$(selector).attr({attribute:value,attribute:value,...})

参数	描述
attribute	规定属性的名称。
value	规定属性的值。
function(index,currentvalue)	规定要返回属性值到集合的函数 index - 接受集合中元素的 index 位置。 currentvalue - 接受被选元素的当前属性值。

prop()

$("button").click((){
    var $x = $("div");
    $x.prop("color","FF0000");
    $x.append("The color 属性： " + $x.prop("color"));
    $x.removeProp("color");
});

$(selector).prop(property)

$(selector).prop(property,1)">使用函数设置属性和值：
$(selector).prop(property,1)">设置多个属性和值：
$(selector).prop({property:value,property:value,...})

参数	描述
property	规定属性的名称。
value	规定属性的值。
function(index,currentvalue)	规定返回要设置的属性值的函数。 index - 检索集合中元素的 index 位置。 currentvalue - 检索被选元素的当前属性值。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

a href="http://www.baidu.com" target="_self" class="btn">百度a>

="#" id="link1" action="delete">删除>

wrap(),unwrap(),wrapAll(),wrapInner(),unwrap()

wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。
wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。
wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。
unwrap() 方法删除被选元素的父元素。

<div class="content">
    p>我是第一条文本内容。</>我是第二条文本内容。>
div>

$("p").wrap("<strong></strong>");

strong><></>

$("p").wrapAll("<strong></strong>");

$("p").wrapInner("<strong></strong>");

$("p").unwrap();

="city">
 label>北京>上海>
 
 >

$(function(){
    $(".city label").each((i){
        $(".city label").slice(i*4,i*4+4).wrapAll("<div class='same'></div>");
    });
})

="same">

map()

.map(callback(index,domElement))

form method="post"="">
  fieldset>
    div>
      label for="two">2labelinput type="checkbox" value="2"="two" name="number[]"="four">4="4"="four"="six">6="6"="six"="eight">8="8"="eight"form>

var result = $(':checkbox').map(() {
     return .id;
}).get().join(',');
console.log(result); two,four,six,eight

each()

index - 选择器的 index 位置；
element - 当前的元素（也可使用 "this" 选择器）。

type ="hidden"="hidden1"/>
="hidden2"script ="text/javascript">    
$(function(){
     //方式一
     $.each($("input:hidden),(i,val){  
        console.log(i,val);  
     }); 
     
     方式二:
     $().each( 打印结果:
// 0  <input type ="hidden" value="hidden1"/> 1  <input type ="hidden" value="hidden2"/>

 $.each([1,2,3],val){
    console.log(i,val)
 })

0 1
1 2
2 3

 (object,callback,args) {
    该方法有三个参数:进行操作的对象obj，进行操作的函数fn，函数的参数args
    var name,i = 0,length = object.length;
    if (args) {
        if (length == undefined) {
            for (name in object) {
                if (callback.apply(object[name],args) === false) {
                    break;
                }
            }
        } else {
            for (; i < length;) {
                if (callback.apply(object[i++],1)">;
                }
            }
        }
    }  {
        if (callback.call(object[name],name,object[name]) === for (var value = object[0]; i < length && callback.call(value,i,value) !== false; value = object[++i]) {}
        /*object[0]取得jQuery对象中的第一个DOM元素，通过for循环，
        得到遍历整个jQuery对象中对应的每个DOM元素，通过 callback.call( value,value);
        将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；
        其中callback是类似于 function(index,elem) { ... } 的方法。
        所以就得到 $("...").each(function(index,elem){ ... });
        */
        }
    }
    return object;
}

add()

element：必需。规定要添加到已存在的元素集合的选择器表达式、jQuery 对象、一个或多个元素、HTML 片段。
context：可选。规定选择器表达式在文档中开始进行匹配的位置。

$("h1").add("p").add("span")

$("body").add("<div class='test'>test</div>");

not()

p>This is a paragragh.p id="selected">

script
$(p).not(#selected).css('background-color,1)">red);
>

has()

$(selector).has(element)

ulli>list item 1>list item 2
    >list item 2-a>list item 2-b>list item 3>list item 4li).has(ul>

is()

>list strong>item 1></><span>list item 2>

$("ul").click((event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color","red");
  }
});

>list> item 1 - one strong tag> item  -
    two >strong tags>list item 5>

$("li").click(() {
  var $li = $(() {
      return $('strong',1)">this).length === 2;
    });
   ( isWithTwo ) {
    $li.css("background-color","green");
  }  {
    $li.css("background-color",1)">);
  }
});

$.proxy()

function：要被调用的已有的函数。
context：函数所在的对象的名称。
name：已有的函数，其上下文将被改变（应该是 context 对象的属性）。

$(selector).proxy(function,context)

<div>这是一个 div 元素。</div>
$(document).ready((){
    test=(){ 
        this.txt="这是一个对象属性";
        $("div").click($.proxy(this.myClick,1)">));
    };

    test.prototype.myClick = (event){
        console.log(.txt);
        console.log(event.currentTarget.nodeName);
    };

    var x = new test();
});

$(selector).proxy(context,name)

$(document).ready((){
  var objPerson = {
    name: "John Doe"(){
      $("p").after("Name: " + this.name + "<br> Age: " + .age);
    }
  };
  $("button").click($.proxy(objPerson,"test"));
});

 A global GUID counter for objects
    guid: 1 Bind a function to a context,optionally partially applying any
     arguments.
    proxy: ( fn,context ) {
        var tmp,args,proxy;
        if ( typeof context === "string" ) {
            tmp = fn[ context ];
            context = fn;
            fn = tmp;
        }

         Quick check to determine if target is callable,in the spec
         this throws a TypeError,but we will just return undefined.
        if ( !jQuery.isFunction( fn ) ) {
             undefined;
        }

         Simulated bind
        args = slice.call( arguments,2 );
        proxy = () {
            return fn.apply( context ||  Set the guid of unique handler to the same of original handler,so it can be removed
        proxy.guid = fn.guid = fn.guid || jQuery.guid++;
         proxy;
    }

jQuery.extend()与jQuery.fn.extend()

$.extend():将一个或多个对象的内容合并到目标对象
$.fn.extend():为jQuery扩展一个或多个实例属性和方法

$.extend()

$.extend( target [,object1 ] [,objectN ] )

$.extend( [deep ],target,object1 [,objectN ] )

deep：可选。 Boolean类型指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。
target：Object类型目标对象，其他对象的成员属性将被附加到该对象上。
object1：可选。 Object类型第一个被合并的对象。
objectN：可选。 Object类型第N个被合并的对象。

var object1 = {
        apple: 0},cherry: 97
    };
    var object2 = {
        banana: {price: 200 object2 合并到 object1 中 
    $.extend(object1,object2);  
    console.log(object1); {apple: 0,banana: {…},cherry: 97,durian: 100}

$.extend({
    hello:function(){console.log('hello');}
});
$.hello();

$.extend({net:{}});

$.extend($.net,{
     hello:function(){alert('hello');}
 })

$.fn.extend()

$.fn.extend( object )

object：Object类型指定的对象，用来合并到jQuery的原型对象上。

="foo"> Foo="bar"> Bar () { 
    $.fn.extend({
        check: () {
            return this.each(() {
                .checked = true;
            });
        },uncheck: false;
            });
        }
    });
     使用新创建的.check() 方法
    $( input[type='checkbox'] ).check();
})
>

jQuery.extend = jQuery.fn.extend实现源码

 合并两个或更多对象的属性到第一个对象中，jQuery后续的大部分功能都通过该函数扩展
// 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数

 如果传入两个或多个对象，所有对象的属性会被添加到第一个对象target

 如果只传入一个对象，则将对象的属性添加到jQuery对象中。 用这种方式，我们可以为jQuery命名空间增加新的方法。可以用于编写jQuery插件。 如果不想改变传入的对象，可以传入一个空对象：$.extend({},object1,object2); 默认合并操作是不迭代的，即便target的某个属性是对象或属性，也会被完全覆盖而不是合并 第一个参数是true，则会迭代合并 从object原型继承的属性会被拷贝 undefined值不会被拷贝 因为性能原因，JavaScript自带类型的属性不会合并

 jQuery.extend( target,[ object1 ],[ objectN ] ) jQuery.extend( [ deep ],[ objectN ] )

jQuery.extend = jQuery.fn.extend = () {
     options,src,copy,copyIsArray,clone,target = arguments[0] || {},i = 1 arguments.length,deep = ;

     Handle a deep copy situation
     如果第一个参数是boolean型，可能是深度拷贝
    typeof target === "boolean" ) {
       deep = target;
       target = arguments[1] || {};

        skip the boolean and the target
        跳过boolean和target，从第3个开始
       i = 2;
    }

     Handle case when target is a string or something (possible in deep copy)
     target不是对象也不是函数，则强制设置为空对象
    typeof target !== "object" && !jQuery.isFunction(target) ) {
       target = {};
    }

     extend jQuery itself if only one argument is passed
     如果只传入一个参数，则认为是对jQuery扩展
    if ( length === i ) {
       target = ;
       --i;
    }
 
    for ( ; i < length; i++ ) {
        Only deal with non-null/undefined values
        只处理非空参数
       if ( (options = arguments[ i ]) != null ) {
            Extend the base object
           for ( name  options ) {
              src = target[ name ];
              copy = options[ name ];

               Prevent never-ending loop
               避免循环引用
              if ( target === copy ) {
                  continue;
              }

               Recurse if we're merging plain objects or arrays
               深度拷贝且值是纯对象或数组，则递归
              if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {

                   如果copy是数组
                   ( copyIsArray ) {
                     copyIsArray = ;

                      clone为src的修正值
                     clone = src && jQuery.isArray(src) ? src : [];
                
                  } else {  如果copy的是对象
                      clone为src的修正值
                     clone = src && jQuery.isPlainObject(src) ? src : {};
                  }

                   Never move original objects,clone them
                   递归调用jQuery.extend
                  target[ name ] = jQuery.extend( deep,copy );

               Don't bring in undefined values
               不能拷贝空值
              } else if ( copy !== undefined ) {
                  target[ name ] = copy;
              }
           }
       }
    }
     Return the modified object
     返回更改后的对象
     target;
};

jQuery noConflict()

jQuery.noConflict(removeAll)

$.noConflict();
jQuery(document).ready((){
  jQuery("button").click((){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

var jq = $.noConflict();
jq(document).ready((){
  jq("button").click((){
    jq("p").text("jQuery 仍然在工作!");
  });
})

($){
  $("button").click((){
    $("p").text("jQuery 仍然在工作!");
  });
});

var

     Map over jQuery in case of overwrite
    _jQuery = window.jQuery,1)"> Map over the $ in case of overwrite
    _$ = window.$;

jQuery.noConflict = ( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }

    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }

     jQuery;
};

$.expr自定义伪类选择器

div ="con1"="con2"="con3"

$(function() {
        //初始测试数据
        var init=function(){
            $("#con1").add("#con3").data("key","10001");
        };
        init();
        var select="newSelect";
        var name="key";
        //定义一个新选择器
        $.expr[ ":" ][ select ] = function( elem ) {
            return $.data( elem,name );
        };
        //使用
        $("div:newSelect").each(function(){
            console.log(this.id);//结果:con1 con3
        })
    });

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_65666.html

相关资讯： [总结]jQuery之常用函数方法参考手册