JQuery深刻理解
JQuery深刻理解
一：导言
有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就对别人说非常熟悉JQuery。我曾经也是这样的人，直到有一次公司里的技术交流，我才改变了自己对自己的看法。
二：普及JQuery知识
知识1：用JQuery写插件时，最核心的方法有如下两个：
$.extend(object) 可以理解为JQuery 添加一个静态方法。
$.fn.extend(object) 可以理解为JQuery实例添加一个方法。
基本的定义与调用：
/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1: function () { alert("执行方法一"); } });
$.fun1();
/* $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert("执行方法2"); } });
$(this).fun2();
//等同于
$.fn.fun3 = function () { alert("执行方法三"); }
$(this).fun3();
知识2:jQuery(function () { }); 与(function ($) { })(jQuery);的区别：
jQuery(function () { });
//相当于
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) { })(jQuery);
//相当于
var fn = function ($) { };
fn(jQuery);
jQuery(function () { });是某个DOM元素加载完毕后执行方法里的代码。
(function ($) { })(jQuery); 定义了一个匿名函数，其中jQuery代表这个匿名函数的实参。通常用在JQuery插件开发中，起到了定义插件的私有域的作用。
三：开发JQuery插件标准结构
1，定义作用域：定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。说了这么多，那要怎样定义一个插件的私有作用域？
//step01 定义JQuery的作用域
(function ($) {
})(jQuery);
别小看了这个作用域，就像c#定义一个类的class关键字一样重要。
2，为JQuery扩展一个插件：当定义好了JQuery的作用域后，最核心也是最迫切的一步就是为这个JQuery的实例添加一个扩展方法。首先我们为这个Jqury插件命名一个方法，叫easySlider，当在调用这个插件的时候，我们可以通过options来给这个插件传递一些参数。具体的定义方法看如下代码：
//step01 定义JQuery的作用域
(function ($) {
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
}
})(jQuery);
到现在为止，其实一个最简单的JQuery插件就已经完成了。调用的时候可以$("#domName").easySlider({})，或者$(".domName").easySlider({})或者更多的方式来调用这个插件。
3，设置默认值：定义一个JQuery插件，就像定义一个.net控件。一个完美的插件，应该是有比较灵活的属性。我们来看这段代码：
//step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
}
})(jQuery);
做程序的人都喜欢创新，改改变量名呀，换一个行呀这些。当看到用var defaults = {}来表示一个默认属性时，在自己写JQuery插件时就想着与众不同，所以用var default01 ={} ，var default02 ={}来表示默认属性了。然后默认属性名五花八门，越来越糟。所以建议在写JQuery插件时，定义默认属性时，都用defaults变量来代表默认属性，这样的代码更具有可读性。
有人看到这行代码：var options = $.extend(defaults, options)，皱起眉头，表示不解。那我们先来看如下代码：
var obj01 = { name: "英文名：Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} }
var obj02 = { name: "中文名：XiaoJian", girlfriend: { name: "YY"} };
var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);
var d = $.extend(true,{}, obj01, obj02);
把代码拷贝到开发环境中，分别看一下a,b,c,d的值，就明白了var options = $.extend(defaults, options)的含义了。表示options 去覆盖了defaults的值，并把值赋给了options。
在插件环境中，就表示用户设置的值，覆盖了插件的默认值；如果用户没有设置默认值的属性，还是保留插件的默认值。
4，支持JQuery选择器：JQuery选择器，是JQuery的一个优秀特性，如果我们的插件写来不支持JQuery选择器，确实是一个不小的遗憾。如了使自己的JQuery插件能支持多个选择器，我们的代码应该这样定义：
//step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
//step4 支持JQuery选择器
this.each(function () {
});
}
})(jQuery);
5，支持JQuery的链接调用：上边的代码看似完美了，其实也不那么完美。到目前为止还不支持链接调用。为了能达到链接调用的效果必须要把循环的每个元素return
//step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
//step4 支持JQuery选择器
//step5 支持链式调用
return this.each(function () {
});
}
})(jQuery);
这样的定义才能支持链接调用。比如支持这样的调用：$(".div").easySlider({prevId:"",prevText:""}).css({ "border-width": "1", "border-color": "red", "border-bottom-style": "dotted" });
6，插件里的方法：往往实现一个插件的功能需要大量的代码，有可能上百行，上千行，甚至上万行。我们把这代码结构化，还得借助function。在第一点已经说了，在插件里定义的方法，外界不能直接调用，我在插件里定义的方法也没有污染外界环境。现在就尝试着怎么样在插件里定义一些方法：
//step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step06-a 在插件里定义方法
var showLink = function (obj) {
$(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
}
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
//step4 支持JQuery选择器
//step5 支持链式调用
return this.each(function () {
//step06-b 在插件里定义方法
showLink(this);
});
}
})(jQuery);
步骤step06-a：在插件里定义了一个方法叫showLink(); 这个方法在插件外是不能直接调用的，有点像C#类里的一个私有方法，只能满足插件内部的使用。步骤step06-b演示了怎样调用插件内部的方法。
四：总结
开发只要形成了标准，然后再去阅读别人的代码就没有那么吃力了。
js和jquery获取父级元素、子级元素、兄弟元素的方法
原文地址：js和jquery获取父级元素、子级元素、兄弟元素的方法作者：草根gis 先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素。可以用： var a = docuemnt.getElementById("test").getElementsByTagName_r("div"); 这样是没有问题的 此时a.length=2； 但是如果我们换另一种方法 var b =document.getElementByIdx_x("test").childNodes; 此时b.length 在IE浏览器中没问题，其依旧等于2，但是在FF浏览器中则会使4，是因为FF把换行也当做一个元素了。 所以，在此，我们就要做处理了，需遍历这些元素，把元素类型为空格而且是文本都删除。 functiondel_ff(elem){ varelem_child = elem.childNodes; for(vari=0; i< p=""> if(elem_child[i].nodeName == "#text" && !/s/.test(elem_child.nodeValue)) {elem.removeChild(elem_child)
} } } 上述函数遍历子元素，当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。 nodeNames可以得到一个节点的节点类型，/s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符 test() 方法用于检测一个字符串是否匹配某个模式.语法是：RegExpObject.test(string) 如果字符串string 中含有与RegExpObject 匹配的文本，则返回true，否则返回false。 nodeValue表示得到这个节点里的值。 removeChild则是删除元素的子元素。 之后，在调用子，父，兄，这些属性之前，调用上面的函数把空格清理一下就可以了 下面介绍JQUERY的父，子，兄弟节点查找方法 jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery常用功能大全
jQuery常用功能大全 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery 对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementByIdx_x("msg"))则为jquery对象，可以使用jquery的方法。 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。 如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。 以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery 对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个
jQuery前端开发实战教程
《jQuery前端开发实战教程》试卷 得分 单选题（每题2分，共计30分） 1．页面中存在可见元素div，代码“if( $("div").show().is(:animated) ){ $("div").hide(1000); }” 的执行效果是（） A、元素以动画效果隐藏 B、元素没有任何变化 C、元素无动画效果隐藏 D、元素先以动画效果隐藏，再无动画形式显示 2．关于代码“$.fn.test = function() { };”，下列说法错误的是（） A、test方法可以被jQuery对象调用 B、test方法被jQuery对象调用时，this指向调用该方法的jQuery对象 C、在test方法中可以书写代码“return this”来实现链式编程 D、$.fn是jQuery原型对象jQuery.prototype的简写3．jQuery Mobile选择菜单中，当选择菜单中含有多个类别时，可添加（）元素，让jQuery Mobile根据此元素中label属性的文本创建含有分割项的选项。 A、label B、optgroup C、select D、option 4．在使用tree组件时，dnd属性和lines属性设置为true分别代表（）含义。 A、显示横线条显示竖线条 B、显示竖线条显示横线条 C、表示可拖动表示可拖拽 D、表示可拖动表示显示竖线条 5．下列哪种方法不可以让元素设置为不可见（） A、fadeIn B、fadeOut C、fadeTo D、hide 总分题型单选题多选题填空题简答题题分 得分
6．在jQuery Mobile列表视图中，可以将任意大小的图片自动缩放到（）像素，展示到列表中。 A、60 B、70 C、80 D、90 7．跟jQuery相继诞生的JavaScript库还有很多，不包括（） A、Prototype B、ExtJS C、YUI D、node.js 8．下面选项中this的使用说法正确的是（） A、this指向当前元素 B、this可以用来绑定事件 C、this可以获取到所有元素 D、this是一种方法9．使用animate方法实现与代码$("div").fadeIn(600)相同效果的代码写法是（） A、$("div").animate({"opacity":"1"}) B、$("div").animate({"opacity":"1"},"fast") C、$("div").animate({"opacity":"1"},600) D、$("div").animate({"opacity":"1"},"normal") 10．从EasyUI网站下载到的“jquery-easyui-1.5.4.2.zip”压缩包解压，保存到“chapter08\ easyui-1.5.4.2”目录中下面说法错误的是（） A、locale目录是国际化资源文件包 B、plugins是插件包目录 C、jsrc是源码包目录 D、demo和demo-mobile目录都是样例，没有区别 11．在jQuery事件中，当调整浏览器窗口时触发的事件是（）事件。 A、resize() B、change() C、scroll() D、select()
jquery学习总结(超级详细)
window.onload $(document).ready() 执 行时机必须等待网页中所有的内容加载完毕后（包括 图片）才能执行 网页中所有DOM结构绘制完毕后就 执行，可能DOM元素关联的东西并 没有加载完 编写个数不能同时编写多个，以下代码无法正确执行： window.onload =function({alert("test1");}window.onload = function(){alert("test2");}结果只会输出 "test2" 能同时编写多个 简 化写法无 $(document).ready(function(){}); 可以简写成$(function(){}); 一、选择网页元素 jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。 选择表达式可以是CSS选择器： $(document)//选择整个文档对象 $('#myId')//选择ID为myId的网页元素 $('div.myClass')//选择class为myClass的div元素 $('input[name=first]')//选择name属性等于first的input元素 也可以是jQuery特有的表达式： $('a:first')//选择网页中第一个a元素 $('tr:odd')//选择表格的奇数行 $('#myForm :input')//选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)')//选择所有的div元素，除了前三个 $('div:animated')//选择当前处于动画状态的div元素
jquery