第一部分 jQuery核心
1、jQuery基础
第一章总结了jquery的大致功能,基本原理,使用方式。
point:
(1)、引入:<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js">
(2)、强大的选择器:var checkedValue = $('[name="someRadioGroup"]:checked').val();用于选择分组名为someRadioGroup的单选按钮中被选中的按钮的值。更高级选择器:$("p:even")选择所有偶数行的p元素、$("tr:nth-child(1)")选择每个表格的第一行元素、$("body > div:has(a)")选择body中的直接子节点中包括a标签的div元素。
(3)、实用函数。jQuery会提供一些实用函数,例如trim等便于编写jQuery插件等。
(4)、文档就绪处理机制。由于window.onload = function () { // 触发脚本}该方法需要将文档完全加载完成,包括外部资源之后才可以执行脚本。而使用$(document).ready(function() { //加载完毕后触发的脚本} ),则是在DOM树加载完毕之后就可以触发,页面加载延迟问题得以优化。
(5)、创建DOM元素。$("<p>HI<p>").insertAfter("#followMe")可通过$()函数直接创建,并通过insertAfter函数将新创建的DOM元素放在指定元素后。
(6)、拓展jQuery。为了保持功能的简洁和高可用性,jQuery并未提供满足用户所有需求的函数,不过为用户提供了自定义函数方法来拓展$包装器。
$.fn.disable= function() { //自定义函数实现
return this.each( function () {
if ( this.disable != null) this.disable = true;
//XXX != null 会正确的测试null和undefined
});
}。
返回each方法的执行结果(即包装器),保持jQuery的函数特性,支持链式操作。
(7)、jQuery与其他库共存。当$或者jQuery全局变量发生冲突的时候,调用jQuery.noConflict()函数。
2、选择要操作的元素
第二章玩转选择器,从选择器到创建新元素再到管理包装集。
(1)、$(selector)或$(selector,'div#sampleDOM'),第一个参数为选择器,第二个参数为操作的上下文,如果省略的话,上下文为" * "即整个document。例中表示的是在id为sampleDOM的div元素的子集中选择符合选择器selector的元素。
(2)、选择器。标签选择器li,id选择器#id,类选择器.class,按照DOM之间层级关系选择,以及自定义选择器等。
a、其中基础选择器有:
* 匹配所有元素;
E 匹配标签名为E的所有元素,如$("div");
E F 匹配E的子节点中标签名为F的所有元素,如$("div p");
E>F 匹配E的直接子节点中标签名为F的所有元素,如$("div>p");
E+F 匹配E后边的第一个兄弟元素中标签名为F的所有元素,如$("li+li");
E~F 匹配E后边的所有兄弟元素中标签名为F的所有元素,如$("li~li");
E .C 匹配E的所有元素中类名为C的元素,如$("div .sampleClass");
E #I 匹配E的所有元素中ID为I的元素,如$("div #ID");
E[A] 匹配E的所有所有元素中含有A属性的元素,如$("a[href]");
E[A=V] 匹配E的所有元素中A属性的值为V的元素,如$("a[href='url']");
E[A^=V] 匹配E的所有元素中A属性值以V开头的元素,如$("a[href^='my']");
E[A$=V] 匹配E的所有元素中A属性值以V结尾的元素,如$("a[href$='.html']");
E[A!=V] 匹配E的所有元素中A属性值以V结尾的元素,如$("a[href!='url']");
E[A*=V] 匹配E的所有元素中A属性值以V结尾的元素,如$("a[href*='jquery']");
b、通过位置选择:
:even,:odd,:first,:last,:first-child,:last-child 如字面意思;
:nth-child(n) 匹配上下文中的第n个子节点,可以拓展为函数式例如:nth-child(5n+1) ;
:eq(n) 第n个元素,:gt(n) 第n个元素之后的(不包含n),:lt(n) 第n个元素之前的(不包含n);
注意:nth-child(n)是从1开始计数,而其他的选择器是从0开始计数。
c、自定义选择器
:animated 选择处于动画状态的元素;
:button 选择按钮元素(包括button以及input中type为submit、reset、button的元素);
:checkbox 选择复选框元素(input[type = checkbox]) ;
:checked 选择处于选中状态的复选框或者单选按钮元素;
:contains(food) 选择包含文本food的元素;
:disabled / :enabled 选择处于禁用 / 启用状态的元素;
:file 选择文件输入元素(input[type = file]);
:has(selector) / not(selector) 选择 至少包含一个 / 没有包含 选择器选中的元素 的元素;
:header 选择标题元素 <h1>到<h6>;
:hidden / :visible 选择隐藏 / 可见元素;
:image 选择图片输入元素(input[type = image]);
:input 选择表单元素(input、select、textarea、button);
:parent 选择有子节点(包含文本)的元素,空元素除外;(是:empty的取反);
: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 ]);
To Be Continue!!