我的Jquery参考词典
由于工作主要用到Asp.net Mvc+Jquery,最近也看了一些Jquery的书籍,在此总结以备回顾。
已读书籍:《Jquery In Action》 主要讲了些Jquery语法以及API用法,感觉不错。
《Javascript the Missing Manual》 前半部分讲了下JS语法,感觉不错,后半部分讲了Jquery插件,没劲。
感觉读有些书还是不要太细了,浪费了很多时间,结果所获寥寥。我感觉自己比较适合泛读书然后实践加深理解。
Jquery
Javascript是一种脚本语言,不同于需编译的语言,运行时才被解释器解读。Jquery是基于JS的一个库。
Jquery filters即Jquery选择器,匹配语法类似CSS选择器,但也有一些进行了扩展(例如::not)。
Jquery选择器
快速回忆
$("p:even") | 匹配所有偶数的<p> |
$("tr:nth-child(1)") | 匹配每个<table>里第一行 |
$("body > div") | 匹配<body>的下一级所有<div> |
$("a[href$='pdf']") | 匹配所有PDF文件<a> |
$("body > div:has(a)") | 匹配<body>下一级所有包含<a>的<div> |
选择语法里的符号
> | 直系子元素 |
^ | 匹配元素对应属性开头字符串 例:a[href^='http://']匹配http://开头的<a> |
$ | 匹配元素对应属性尾部字符串 |
* | 匹配包含该字符串 例:a[href*='jquery.com']匹配包含jquery.com的<a> |
+ | 匹配紧跟在后面的一个同级元素 例:div+ul匹配每一个紧跟在<div>后并与它同级的<ul> |
~ | 匹配跟在后面的所有同级元素 例:div~ul匹配跟在<div>后面的所有同级<ul> |
选择器样板
* | ~所有元素 |
E | ~所有<E> |
E F | ~<E>的所有子节点<F> |
E>F | ~<E>的所有直系子<F> |
E+F | ~紧跟在<E>后的一个同级节点<F> |
E~F | ~跟在<E>后的所有同级节点<F> |
E.C | ~所有class为C的<E> |
E#I | ~Id为I的<E> |
E[A] | ~含有A属性的<E> |
E[A=V] | ~含有A属性值为V的<E> |
E[A^=V] | ~A属性值以V开头的<E> |
E[A$=V] | ~A属性值以V结尾的<E> |
E[A!=V] | ~不包含A属性或者A属性值不为V的<E> |
E[A*=V] | ~A属性值包含V的<E> |
位置选择
:first | ~符合条件的集合中第一个元素 例:li a:first匹配<li>里的第一个<a>(只有一个) |
:last | ~符合条件的集合中最后一个元素 |
:first-child | ~符合条件的第一个子元素 例: li a:first-child匹配每一个<li>里的第一个<a>(集合) |
:last-child | ~符合条件的最后一个子元素 |
:only-child | ~没有同级节点的元素 |
:nth-child(n) | ~符合条件的第n个子元素 注: first-child==nth-child(1) |
:nth-child(even|odd) | ~符合条件的偶数(奇数)位子元素 |
:nth-child(xn+y) | ~符合条件的xn+y位子元素 |
:even | ~偶数位元素 |
:odd | ~奇数位元素 |
:eq(n) | ~第n位元素 注: first==eq(0) |
:gt(n) | ~第n位及以后元素 |
:lt(n) | ~第n位及以前元素 注: first==lt(1) |
Note: 1.:first与:first-child有区别,前面的匹配一个元素,后面的匹配一个集合。详情
2.:eq是从0开始的,:nth-child是从1开始的
状态选择
:animated | ~正处于动画效果的元素 |
:button | ~button元素 包含input[type=submit],input[type=reset],input[type=button],button |
:checkbox | ~input[type=checkbox] |
:checked | ~处于选中状态的单选多选元素 |
:contains(food) | ~包含food文本的元素 |
:disabled | ~disabled的元素 |
:enabled | ~enabled的元素 |
:file | ~input[type=file] |
:has(selector) | ~包含selector元素的元素 |
:header | ~<h1>-<h6>所有标题元素 |
:hidden | ~hidden的元素(display:none) |
:image | ~input[type=image] |
:input | ~input,select,textarea,button |
:not(selector) | ~非selector的其它元素 |
:parent | ~有子元素(或者text)的元素 |
:password | ~input[type=password] |
:radio | ~input[type=radio] |
:reset | ~input[type=reset],button[type=reset] |
:selected | ~处于选中状态的<option> |
:submit | ~input[type=submit],button[type=submit] |
:text | ~input[type=text] |
:visible | ~visible的元素 |
Note:1.$("input[type='checkbox'][checked]")只能匹配初始状态为checked的元素。
$("input[type='checkbox']:checked")却可以匹配实时状态为checked的元素。
2.$(":not(img[src*='dog'])") 不仅匹配src属性包含dog的<img>而且匹配所有其它的标签
$("img:not([src*='dog'])") 只匹配src属性不包含dog的<img>
Jquery事件
on()方法将bind(),delegate(),live()方法已经合在了一块,用于事件绑定。详情
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
on(),live(),delegate()方法可以将事件绑定在动态生成的元素上,而bind(),单纯的click()等事件方法不具备此功能。
on()方法可以通过将事件绑定在目标元素的父元素上对该目标元素进行监听(事件冒泡机制),达到事件在动态元素上依然会触发的目的,
也可以直接绑定在目标元素上,但就不具备触发动态生成的元素的能力了。bind?live?delegate?还是on?–jquery事件绑定方法研究
Jquery扩展
jquery.fn=jquery.prototype
jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: version, constructor: jQuery, // Start with an empty selector
selector: "", // The default length of a jQuery object is 0
length: , toArray: function() {
return slice.call( this );
}, // Get the Nth element in the matched element set OR
// Get the whole matched element set as a clean array
get: function( num ) {
return num != null ? // Return a 'clean' array
( num < ? this[ num + this.length ] : this[ num ] ) : // Return just the object
slice.call( this );
}, // Take an array of elements and push it onto the stack
// (returning the new matched element set)
pushStack: function( elems ) { // Build a new jQuery matched element set
var ret = jQuery.merge( this.constructor(), elems ); // Add the old object onto the stack (as a reference)
ret.prevObject = this;
ret.context = this.context; // Return the newly-formed element set
return ret;
}, // Execute a callback for every element in the matched set.
// (You can seed the arguments with an array of args, but this is
// only used internally.)
each: function( callback, args ) {
return jQuery.each( this, callback, args );
}, map: function( callback ) {
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
}));
}, slice: function() {
return this.pushStack( slice.apply( this, arguments ) );
}, first: function() {
return this.eq( );
}, last: function() {
return this.eq( - );
}, eq: function( i ) {
var len = this.length,
j = +i + ( i < ? len : );
return this.pushStack( j >= && j < len ? [ this[j] ] : [] );
}, end: function() {
return this.prevObject || this.constructor(null);
}, // For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: push,
sort: arr.sort,
splice: arr.splice
};
How does Javascript.prototype work?
jquery.extend=jquery.fn.extend
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[] || {},
i = ,
length = arguments.length,
deep = false; // Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target; // skip the boolean and the target
target = arguments[ i ] || {};
i++;
} // Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
} // extend jQuery itself if only one argument is passed
if ( i === length ) {
target = this;
i--;
} for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) {
// Extend the base object
for ( name in 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)) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : []; } else {
clone = src && jQuery.isPlainObject(src) ? src : {};
} // Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy ); // Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
} // Return the modified object
return target;
};
jquery.extend(object)为jquery类添加静态方法 例如$.trim()
jquery.fn.extend(object)为jquery对象添加方法 例如$("#aa").show()
js中的this与C#中的this有很大的区别:You must remember 'this'!
jquery源代码告诉我们:jquery.extend和jquery.fn.extend是同一个方法,只是会有this的区别。
简单的模拟:
var test = function(){};
test.extend = test.prototype.extend= function(){
var option = arguments[];
var target = this;
for(name in option)
{
target[name]=option[name];
}
return target;
}
test.prototype.extend({
test1:function(){alert("test1 prototype!") }
}); test.extend({test2:function(){ alert("test2 static!") } }); test.test2(); // alert test2 static! var cc = new test();
cc.test1(); // alert test1 prototype!
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);
}
})(jQuery);
总结
JQuery是一个非常棒的JS库,可以学习的东西很多。打算抽空看看JQuery源码
我的Jquery参考词典的更多相关文章
- jQuery 参考手册 - 遍历
jQuery 参考手册 - 遍历 jQuery Ajax jQuery 数据 jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数描述 .add()将元素添加到匹 ...
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- jQuery 参考手册 - 事件
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. bind()向匹配元素附加一个或更多事件处理器 $(selector).bind(event,function) $(select ...
- jquery参考手册
开始使用 jQueryjQuery 本身只有一个 js 文件,所以,要使用它,就和使用其它的 js 文件一样,直接将它引入就可以使用了. <script type="text/java ...
- jQuery 参考手册 - 选择器
jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元 ...
- jQuery 参考手册 - 文档操作
上传图片时页面崩溃..全部付之东流 addClass() after() append() appendTo() attr() before() clone() detach() empty() ha ...
- jQuery 参考手册 - 效果
(speed可选:规定动画的速度.默认是 "normal",可能的值:毫秒(比如 1500)"slow""normal""fast ...
- [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用
[DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用 jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
随机推荐
- char、varchar、varchar2区别
char varchar varchar2 的区别 区别:1.CHAR的长度是固定的,而VARCHAR2的长度是可以变化的, 比如,存储字符串“abc",对于CHAR (20),表示你存储的 ...
- 软件测试——等价类划分(EditText * 3)
一.程序要求 EditBox 同时允许输入三个1到6个英文字符或数字,点击确定结束. 二.测试分析 编号 第一个输入框 第二个输入框 第三个输入框 输出 1 null null null 三个输入框均 ...
- Matlab信号处理工具箱函数
波形产生和绘图chirp 产生扫描频率余弦diric 产生Dirichlet函数或周期Sinc函数gauspuls 产生高斯调制正弦脉冲pulstran 产生脉冲串rectpuls 产生非周期矩形信号 ...
- 【转】跨DLLnew delete问题
转两篇文章来说这个问题的 链接1:https://blog.csdn.net/notebook2001a/article/details/6647850 链接2:https://blog.csdn.n ...
- gradle 刷新缓存
gradle build --refresh-dependencies -x test
- Multithread之为什么spinlock必须是volatile?
[Multithread之为什么spinlock必须是volatile?] 1.编译器的优化 在本次线程内,当读取一个变量时,为提高存取速度,编译器优化时有时会先把变量读取到一个寄存器中:以后再取变量 ...
- 如何在eclipse中添加android ADT(转)
转自: http://jingyan.baidu.com/article/b0b63dbfa9e0a74a4830701e.html 对于程序开发的学者来说,eclipse并不陌生,它为我们提供了一个 ...
- spring 控制反转与依赖注入原理-学习笔记
在Spring中有两个非常重要的概念,控制反转和依赖注入:控制反转将依赖对象的创建和管理交由Spring容器,而依赖注入则是在控制反转的基础上将Spring容器管理的依赖对象注入到应用之中: 所谓依赖 ...
- Educational Codeforces Round 54
这套题不难,但是场上数据水,导致有很多叉点 A. 因为是让求删掉一个后字典序最小,那么当a[i]>a[i+1]的时候,删掉a[i]一定最优!这个题有个叉点,当扫完一遍如果没有满足条件的,就删去最 ...
- jquey下eq()的使用注意事项
写在开始的话: 今天在公司路经同事工位,发现在写jquery代码,刚好遇见一个bug,于是驻足看了一会,发现了jq遍历方法中eq()的使用的一个容易犯错的地方. 同事的代码大概意思是这样的: < ...