jquery学习笔记1

$(function(){}) 是 $(document).ready(function(){}) 的简写，用来在DOM加载完成之后执行一系列预先定义好的函数。

(function(){})(); 这个可以理解为一个闭包 是一个匿名方法的调用 以保证方法内的变量不与外界冲突, 立即执行函数；相当于先申明一个函数，声明完后直接调用；

(function($){...})(jQuery)； 
等同于下面的写法：
var fun = function(params){....};  
fun(jQuery);

如果参数如：
(funtion(str){alert(str)})("output"))；相当于：funtion OutPutFun(str){alert(str);};OutPutFun("output");

(funtion(str){alert(str)})("output"))；相当于：funtion OutPutFun(str){alert(str);};OutPutFun("output");

jQuery(function(){　});用于存放操作DOM对象的代码，执行其中代码时DOM对象已存在。不可用于存放开发插件的代码，因为jQuery对象没有得到传递，外部通过jQuery.method也调用不了其中的方法（函数）。 
(function(){　})(jQuery)；用于存放开发插件的代码，执行其中代码时DOM不一定存在，所以直接自动执行DOM操作的代码请小心使用。

 

jQuery.fn.extend() 函数详解

jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。

jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。

该函数属于jQuery的原型对象(jQuery.fn)。

 

姓名： id="name" name="name" type="text" >


 name="opt" type="checkbox" value="A">A
 name="opt" type="checkbox" value="B">B
 name="opt" type="checkbox" value="C">C
 name="opt" type="checkbox" value="D">D


 id="btn" type="button" value="点击">

jQuery.fn.extend()函数的jQuery示例代码如下：

var obj = {
    site: "CodePlayer",
    check: function(){
        // 扩展到jQuery原型上后，这里的this表示当前jQuery对象
        this.prop("checked", true);
        return this;
    },
    isEmpty: function(){
        return !$.trim( this.val() );
    }
};

// 将对象obj的属性和方法扩展到jQuery的原型对象上，以便于jQuery实例对象调用。
$.fn.extend( obj );


$("#btn").click(function(){
    if( $("#name").isEmpty() ){
        alert("姓名不能为空!");
        return false;
    }
    $("[name=opt]").check( ); // 全选复选框
    
    alert( $("body").site ); // CodePlayer
});

实际上，如果你也可以在jQuery的原型上自行添加新的属性或方法，例如上面的扩展代码等价于：

$.fn.site = "CodePlayer";

$.fn.check = function(){
    // 扩展到jQuery原型上后，这里的this表示当前jQuery对象
    this.prop("checked", true);
    return this;
};

$.fn.isEmpty = function(){
    return !$.trim( this.val() );
};

extend:延伸，伸展，扩大

以下转自:http://www.caihaibo.cn/devpro/webfront/3077.html

虽然 javascript 没用明确的类的概念，但是我们把 Jquery 看成一个类，这个更好理解一些。

Jquery 为开发插件提供了两个方法：Jquery.extend() 和 Jquery.fn.extend()。

可以理解成为 Jquery 类添加静态方法，扩展方法原型是：

 

jQuery中有两个获取元素位置的方法offset()和position()

offset()：获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
用法举例：offset()

offset()和position()的区别：
使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移
使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移。
一般情况下，如果要显示的元素B存放在元素A的同一父元素下（即B为A的兄弟节点），这个时候使用position() 是最合适的；

如果显示的元素B存放在DOM的最顶端或者最底端（即其父元素就是body）。这个时候用offset()是最好的。

 

jQuery中filter()和find()的区别深入了解

filter()过滤DOM元素包装集，是指操作当前元素集，删除不匹配的元素，得到一个新的集合 

复制代码 代码如下:

$('div').filter('.div1');//选择div标签中class属性为div1的div元素 

find()在当前选中元素的上下文中找到符合条件的后代，返回的是子元素 

复制代码 代码如下:

$('div').find('em');//选择div标签中的em标签的元素 

 

最后再介绍一个end()方法，用来返回破坏性修改之前的选择 

$('div').filter('.div1').end();//返回的是使用filter()之前的选择元素，即$('div') 

 

转载于:https://www.cnblogs.com/geekjsp/p/6286262.html