《锋利的jQuery》读书笔记(一)
jQuery版本”1.6.3” (jQuery.fn.jquery)
一、解决jQuery和其他库的冲突
1、jQuery库在其他库之后导入
- 使用
jQuery.noConflict();
将变量$的控制权移交给其他的js插件
//使用jQuery
jQuery(document).ready(function(){
...
});
- 重新定义jQuery快捷方式:
var $j = jQuery.noConflict();
//自定义jQuery快捷方式
$j(function(){
...
});
//使用其他js插件
$("p")...
- 使用闭包
jQuery(function($){
//在函数内部继续使用$
$("p")...
});
//使用其他js插件
$("p")...
或
(function($){
$(function(){
...
});
})(jQuery);
//使用其他js插件
$("p")...
2、jQuery库在其他库之前导入
可以直接使用jQuery
来做一些jQuery的工作。同时,也可以使用$()方法作为作为其他库的快捷方式。这里无需调用jQuery.noConflict()
函数。
jQuery(function(){
jQuery('p')...
});
//使用其他js插件
$("p")...
二、Javascript库
-
Prototype
Prototype去除了客户端Web编程的复杂性,对DOM操作和Ajax提供了优雅的API。
-
Dojo
Dojo是一个Javascript工具包,提供构建Web app需要的任何东西:语言工具、UI组件等,节省开发时间。
-
YUI(Yahoo UI)
YUI是一个用来构建具有丰富交互的Web应用的JavaScript和CSS库。
-
Ext js
Ext Js是构建数据密集型Web app的最好的JavaScript框架,它拥有一套非常大的UI组件。
-
MooTools
MooTools是给高级JavaScript开发者使用的一套JavaScript工具,它为你提供了优雅的、清晰的API和非常完整的文档来书写强大灵活的代码。
-
jQuery
三、jQuery开发工具和插件
-
Dreamweaver
-
Aptana
-
Eclipse + jQueryWTP插件或Spket插件
-
Visual Studio
-
其他文本编辑器
四、jQuery选择器
1、基本选择器
-
ID选择器:
#id
-
类选择器:
.class
-
元素选择器:
Element
-
选择所有元素:
*
-
群组选择器:
Selector1,Selector2,...,SelectorN
检查某个元素是否存在时,应该根据获取到的元素的长度或转换为DOM对象来判断:
if($("#elm").length > 0){
//do something
}
//或
if($("#elm")[0]){
//do something
}
2、层级选择器
-
后代选择器:
$("ancestor descendant")
-
子元素选择器:
$("parent>child")
-
同级选择器
$("prev+next")
$("prev~siblings")
3、过滤选择器
-
基本过滤选择器
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:header
:选择所有标题元素(h1 - h6)
:animated
:选择当前的动画元素
:focus
-
内容过滤选择器
:contains(text)
:empty
:has(selector)
:parent
:选取是parent的元素,即含有子元素或者文本的元素 -
可见性过滤选择器
:hidden
:visible
-
属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attribute|=value]
:选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符”-“)的元素
[attribute~=value]
:选取属性用空格分隔的值中包含一个给定值的元素
[attribute1][attribute2][sttributeN]
-
子元素过滤选择器
:nth-child(index/even/odd/equation)
:nth-child(0/even/odd/3n+1)
:first-child
:last-child
:only-child
:属于某个父元素的唯一一个子元素 -
表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
4、表单选择器
:input
:选取所有的<input>、<textarea>、<select>和<button>元素
:text
:password
:radio
:submit
:image
:reset
:button
:file
:hidden
5、特殊符号处理
选择器中含有特殊符号(“.”、”#”、”[“等)使用”\“转义
<div id="id#b"></div>
$("#id\\#b")