jQuery慢慢啃之工具（十）

1.jQuery.support//一组用于展示不同浏览器各自特性和bug的属性集合

2.jQuery.browser//浏览器内核标识。依据 navigator.userAgent 判断。

可用值: safari opera  msie mozilla

3.jQuery.browser.version//浏览器渲染引擎版本号

4.jQuery.boxModel//浏览器是否使用标准盒模型渲染页面。 建议使用 jQuery.support.boxModel 代替。W3C CSS 盒模型.

5.jQuery.each(object, [callback])//通用例遍方法，可用于例遍对象和数组。

$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n );});
$.each( { name: "John", lang: "JS" }, function(i, n){  alert( "Name: " + i + ", Value: " + n );});

6.jQuery.extend([deep], target, object1, [objectN])//用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

合并 settings 和 options，修改并返回 settings。

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);settings == { validate: true, limit: 5, name: "bar" }

合并 defaults 和 options, 不修改 defaults。

var empty = {};

var defaults = { validate: false, limit: 5, name: "foo" };

var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

7.jQuery.grep(array, callback, [invert])//使用过滤函数过滤数组元素。

此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

$.grep( [0,1,2], function(n,i){  return n > 0;});

array,callback,[invert]//:如果 "invert" 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。
$.grep( [0,1,2], function(n,i){  return n > 0;}, true);

8.jQuery.makeArray(obj)//将类数组对象转换为数组对象。实际中此函数在 jQuery 中将自动使用而无需特意转换

9.jQuery.map(arr|obj,callback)//将一个数组中的元素转换到另一个数组中

$.map( [0,1,2], function(n){  return n + 4;});
结果：[4, 5, 6]

10.jQuery.inArray(value,array,[fromIndex])//确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。

var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr);  //3
jQuery.inArray(4, arr);  //0
jQuery.inArray("David", arr);  //-1
jQuery.inArray("Pete", arr, 2);  //-1

11.jQuery.toArray()//把jQuery集合中所有DOM元素恢复成一个数组

alert($(‘li‘).toArray());
结果:[<li id="foo">, <li id="bar">]

12.jQuery.sub()//可创建一个新的jQuery副本，不影响原有的jQuery对像

13.jQuery.when(deferreds)//提供一种方法来执行一个或多个对象的回调函数，延迟对象通常表示异步事件。

$.when( $.ajax("test.aspx") ).then(function(ajaxArgs){
     alert(ajaxArgs[1]); /* ajaxArgs is [ "success", statusText, jqXHR ] */
});
$.when( { testing: 123 } ).done(   function(x){ alert(x.testing); } /* alerts "123" */);

14.jQuery.merge(first,second)//合并两个数组

first:第一个待处理数组，会改变其中的元素。

second:第二个待处理数组，不会改变其中的元素。

$.merge( [0,1,2], [2,3,4] )

结果:[0,1,2,2,3,4]

15.jQuery.unique(array)//删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组。

$.unique(document.getElementsByTagName("div"));

16返回值:StringjQuery.parseJSON(json)//接受一个JSON字符串，返回解析后的对象。

var obj = jQuery.parseJSON(‘{"name":"John"}‘);
alert( obj.name === "John" );

17.jQuery.parseXML(data)//解析一个字符串到一个XML文件

var xml = ‘<rss version="2.0"><channel><title>RSS Title</title></channel></rss>‘,
      xmlDoc = $.parseXML( xml ),
      $xml = $( xmlDoc ),
      $title = $xml.find( ‘title‘ );	        // append "RSS Title" to #someElement
  $( ‘#someElement‘ ).append( $title.text() );	    // change the title to "XML Title"
  $title.text( ‘XML Title‘ );    // append "XML Title" to #anotherElement
  $( ‘#anotherElement‘ ).append( $title.text() );

18.jQuery.noop//一个空函数。当你仅仅想要传递一个空函数的时候，就用他吧。这对一些插件作者很有用，当插件提供了一个可选的回调函数接口，那么如果调用的时候没有传递这个回调函数，就用jQuery.noop来代替执行。

19.jQuery.proxy(function,context)//返回一个新函数，并且这个函数始终保持了特定的作用域。

强制设置函数的作用域，让this指向obj而不是#test对象。

<div id="test">Click Here!</div>
var obj = {
  name: "John",
  test: function() {
    alert( this.name );
    $("#test").unbind("click", obj.test);
  }
};

$("#test").click( jQuery.proxy( obj, "test" ) );

// 以下代码跟上面那句是等价的:
// $("#test").click( jQuery.proxy( obj.test, obj ) );

// 可以与单独执行下面这句做个比较。
// $("#test").click( obj.test );

20.jQuery.contains(container,contained)//一个DOM节点是否包含另一个DOM节点

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

21.jQuery.isArray(obj)//测试对象是否为数组。

$("b").append( " + $.isArray([]) );

22.jQuery.isFunction(obj)//测试对象是否为函数。

function stub() {
    }
var objs = [
            function () {},
            { x:15, y:20 },
            null,
            stub,
            "function"
          ];
        jQuery.each(objs, function (i) {
        var isFunc = jQuery.isFunction(objs[i]);
        $("span:eq( " + i + ")").text(isFunc);
      });

23.jQuery.isEmptyObject(obj)//测试对象是否是空对象

jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false

24.jQuery.isPlainObject(obj)//测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）。

jQuery.isPlainObject({}) // true
jQuery.isPlainObject("test") // false

25.jQuery.isWindow(obj)//测试对象是否是窗口（有可能是Frame）。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.2.js"></script>
</head>
<body>
  Is ‘window‘ a window? <b></b>
<script>$("b").append( "" + $.isWindow(window) );</script>

</body>
</html>

26.jQuery.isNumeric(value)//确定它的参数是否是一个数字。

$.isNumeric("-10");  // true
$.isNumeric(16);     // true
$.isNumeric(0xFF);   // true
$.isNumeric("0xFF"); // true
$.isNumeric("8e5");  // true (exponential notation string)
$.isNumeric(3.1415); // true
$.isNumeric(+10);    // true
$.isNumeric(0144);   // true (octal integer literal)
$.isNumeric("");     // false
$.isNumeric({});     // false (empty object)
$.isNumeric(NaN);    // false
$.isNumeric(null);   // false
$.isNumeric(true);   // false
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false

27.jQuery.type(obj)//检测obj的数据类型

  • jQuery.type(true) === "boolean"
  • jQuery.type(3) === "number"
  • jQuery.type("test") === "string"
  • jQuery.type(function(){}) === "function"
  • jQuery.type([]) === "array"
  • jQuery.type(new Date()) === "date"
  • jQuery.type(/test/) === "regexp"

28.jQuery.trim(str)//去掉字符串起始和结尾的空格。

$.trim("  hello, how are you?  ");

29.jQuery.param(obj,[traditional])//将表单元素数组或者对象序列化。是.serialize()的核心方法。

  var params = { width:1680, height:1050 };

    var str = jQuery.param(params);
    $("#results").text(str);结果：width=1680&height=1050

对比两种序列化方式

var myObject = {
  a: {
    one: 1,
    two: 2,
    three: 3
  },
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);
//a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
//a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded);
alert(shallowDecoded);
//a=%5Bobject+Object%5D&b=1&b=2&b=3
//a=[object+Object]&b=1&b=2&b=3

30.jQuery.error(message)//接受一个字符串，并且直接抛出一个包含这个字符串的异常。

重载jQuery.error，以便可以在Firebug里显示

jQuery.error = console.error;

31.$.fn.jquery//代表 jQuery 版本号的字符串

var a = { what: "A regular JS object" },
      b = $(‘body‘);
         if ( a.jquery ) { // falsy, since it‘s undefined
      alert(‘ a is a jQuery object! ‘);
      }    if ( b.jquery ) { // truthy, since it‘s a string
      alert(‘ b is a jQuery object! ‘);
  }

取得页面上当前使用的 jQuery 的版本号。

alert( ‘You are running jQuery version: ‘ + $.fn.jquery );
时间： 2024-10-08 09:46:47

jQuery慢慢啃之工具（十）的相关文章

jQuery慢慢啃之CSS（五）

1.css(name|pro|[,val|fn])//访问匹配元素的样式属性 $("p").css("color");//获取 $("p").css({ "color": "#ff0011", "background": "blue" });//属性组设置 $("p").css("color","red");

jQuery慢慢啃之ajax（九）

1.jQuery.ajax(url,[settings])//通过 HTTP 请求加载远程数据 如果要处理$.ajax()得到的数据,则需要使用回调函数.beforeSend.error.dataFilter.success.complete. beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数. error 在请求出错时调用.传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话) dataFilter 在请求成功之后调用

jQuery慢慢啃（四）

1.eq(index|-index) 获取第N个元素 其中负数:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数.(1算起) $("p").eq(1)//获取匹配的第二个元素 $("p").eq(-2)//获取倒数匹配的第二个元素 2.$('li').first()//获取第一个元素 $('li').last()//获取最后个元素 $(this).hasClass("protected")和 $(this).is(".prote

jQuery慢慢啃之CSS（七）

1.ready(fn)//当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){ // 在这里写你的代码...}); 使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何. $(function($) { // 你可以在这里继续使用$作为别名... }); 2.on(events,[selector],[data],fn)//在选择元素上绑定一个或多个事件的事

jQuery慢慢啃之文档处理（五）

1.append(content|fn)//向每个匹配的元素内部追加内容. $("p").append("<b>Hello</b>"); 2.appendTo(content)//把所有匹配的元素追加到另一个指定的元素元素集合中. $("p").appendTo("div"); appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几

jQuery慢慢啃之特效（八）

1.show([speed,[easing],[fn]])\\显示隐藏的匹配元素 //speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) //easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear" $("p").show() $("p").s

jQuery慢慢啃之事件对象（十一）

1.event.currentTarget//在事件冒泡阶段中的当前DOM元素 $("p").click(function(event) { alert( event.currentTarget === this ); // true }); 2.event.data//当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind. $("a").each(function(i) { $(this).bind('click', {index:i},

jQuery慢慢啃（三）

1.attr(name|properties|key,value|fn)设置或返回被选元素的属性值. $("img").attr("src");//获取属性 $("img").attr({ src: "test.jpg", alt: "Test Image" });//设置多个属性 $("img").attr("src","test.jpg");/

CSS3结合jQuery制作的冒泡工具图片提示效果

一款基于CSS3技术的冒泡提示效果,为了演示效果,生成了许多冒泡的提示,实际使用中,可能不需要这么多,结合jQuery和jquery UI共同实现的网页提示特效,挺不错.因CSS不支持IE8及以下低版本,所以请使用IE9.chrome或火狐测试. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition