手记

《jQuery技术内幕》拾遗 构造函数jQuery()

jQuery( selector [, context] )
  • selector:用来查找的字符串
  • context:作为待查找的 DOM 元素集、文档或 jQuery 对象。
    $('div.foo').click(function() {
    $('span', this).addClass('bar'); // 限定查找范围
    $(this).find('span').addClass('bar');//等价上面
    });
    jQuery( html [, ownerDocument] )、jQuery( html, props )
  • html:用于动态创建DOM元素的HTML标记字符串
  • ownerDocument:创建DOM元素所在的文档
  • props:用于附加到新创建元素上的属性、事件和方法
//创建一个 <div> 元素,同时设定 class 、text,以及点击事件。
$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");
jQuery( element )、jQuery( elementArray )
  • 如果传入一个 DOM 元素或 DOM元素数组,则把 DOM 元素封装到 jQuery 对象中并返回
    $('div.foo').click(function() {
    $(this).slideUp(); //this作为dom被封装成jQuery对象
    });
    jQuery( object )
  • 如果传入一个普通 JavaScript 对象,则把该对象封装到 jQuery 对象中并返回。
    
    // 定义一个普通 JavaScript 对象
    var foo = {foo:'bar', hello:'world'}; // 封装成 jQuery 对象
    var $foo = $(foo);
    // 绑定一个事件

$foo.on('custom', function (){
console.log('custom event was called'); });
// 触发这个事件
$foo.trigger('custom'); // 在控制台打印 "custom event was called"

###jQuery( callback )
- $(document).ready()的简写。
- 当DOM加载完成后,执行其中的函数。

$(function(){
// 文档就绪
});

##jQuery( jQuery object )
- 如果传入一个 jQuery 对象,则创建该 jQuery 对象的一个副本并返回,副本与传入的
- jQuery 对象引用完全相同的 DOM 元素。
##jQuery.extend(object)
- 扩展jQuery对象本身。
```javascript
jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5
jQuery.fn.extend(object)
  • 扩展 jQuery 元素集来提供新的方法(通常用来制作插件)
    
    jQuery.fn.extend({
    check: function() {
    return this.each(function() { this.checked = true; });
    },
    uncheck: function() {
    return this.each(function() { this.checked = false; });
    }
    });

$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

1人推荐
随时随地看视频
慕课网APP