jQuery学习笔记1
1. jQuery入门
1.1. 优点
- 解决浏览器的兼容性问题。
- 支持扩展，通过插件方式实现扩展，避免特性蠕变。
- 使用隐式迭代的技术，使方法的操作面向集合。如“.hide()”
- 使用方法链接编程方式，使多重操作集于一行。
- 强大的选择符。
- 可靠的事件处理机制。
- 完善的Ajax。
- 行为层与结构层的分离。
- 有很多使用者，文档相当完善。
- 开源。
1.2. 缺点
- 不能向后兼容，这是由jQuery的版本发布特性决定
2. 选择符
2.1. DOM
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。
参考网址：
http://zh.wikipedia.org/wiki/文档对象模型
http://www.w3.org/DOM/
2.2. 工厂函数$()
- #id，根据给定的ID匹配一个元素。
例如:查找 ID 为"myDiv"的元素。
$("#myId");
- element，根据给定的元素名匹配所有元素。
例如:查找 div元素。
$("div");
- .class, 根据给定的类匹配元素。
例如:查找所有类是 "myClass" 的元素。
$(".myClass");
HTML 代码如下:
<div id="notMe" class="notMe">div class="notMe"</div>
<div id="myId" class="myClass">div class="myClass"</div>
2.3. CSS选择符
- addClass(class)，为每个匹配的元素添加指定的类名。
例如:为匹配的元素加上 'selected' 类
$("p").addClass("selected");
- removeClass([class])，从所有匹配的元素中删除全部或者指定的类。
例如:从匹配的元素中删除 'selected' 类
$("p").removeClass("selected");
HTML 代码如下:
<p class="first">Hello</p>
2.4. 属性选择符
- [attribute]，匹配包含给定属性的元素。
例如:查找所有 含有name 属性的 input 元素
$(" input[name]") ;
- [attribute=value]，匹配给定的属性是某个特定值的元素。
例如:查找所有 name 属性是 newsletter 的 input 元素
$("input[name='newsletter']");
- [attribute^=value]，匹配给定的属性是以某些值开始的元素。
例如:查找所有 name 属性是 newsletter 的 input 元素
$("input[name='news']");
- [attribute!=value]，匹配所有不含有指定的属性。
例如:查找所有 name 属性不是 newsletter 的 input 元素
$("input[name!='newsletter']");
- [attribute$=value]，匹配给定的属性是以某些值结尾的元素。
例如:查找所有 name 属性是以letter 结尾的 input 元素
$("input[name$='letter']");
- [attribute*=value]，匹配给定的属性是以包含某些值的元素。
例如:查找所有 name 属性是包含news 的 input 元素
$("input[name*='news']") ;
HTML 代码如下:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name=" newsboy" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
2.5. 自定义选择符
2.5.1. :odd和:even
- :even，匹配所有索引值为偶数的元素，从 0 开始计数。
例如:查找表格的2、4、6行
$("tr:odd");
- :odd，匹配所有索引值为奇数的元素，从 0 开始计数。
例如:查找表格的1、3、5行
$("tr:even");
HTML 代码如下:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
2.5.2. 基于表单的选择符
主要有:input，:text，:password，:radio，:checkbox，:submit，:image，:reset，:button，:file，:hidden等元素及:enabled，:disabled，:checked，:selected等元素属性。
例如：即查找所有的input元素
$(":input");
2.6. DOM遍历方法
2.6.1. 过滤
- filter(expr)，筛选出与指定表达式匹配的元素集合。
例如：保留带有select类的元素
$("p").filter(".selected");
2.6.2. 查找
- next([expr])，取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
相对应的还有nextAll([expr])，prev([expr]) ，prevAll([expr])，parent([expr])，children([expr])
例如：找到每个段落的后面紧邻的同辈元素。
$("p").next();
2.6.3. 串联
- andSelf()，加入先前所选的加入当前元素中。
例如：选取所有div以及内部的p，并加上border类。
$("div").find("p").andSelf().addClass("border");
- end()，回到最近的一个"破坏性"操作之前。
例如：选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素。
$("p").find("span").end();
2.7. 访问DOM元素
- get(index)，取得其中一个匹配的元素。
其中$(this).get(0)与$(this)[0]等价。
例如：取得所有img元素的第 1个位置上的元素。
$("img").get(0);
3. 事件
3.1. 在页面加载后执行任务
与window.onload的区别，
- window.onload指的是所有元素下载完后触发，$(document).ready()指的是所有元素可以访问后触发。
- window.onload一次只能保存对一个函数的引用。
- 可以简化为$()
3.2. 简单的事件
可以用bind方法可以指定任何javascript事件，并为该事件添加一种行为。如下示例代码：
$(function() {
$('#btnAdd').bind('click', function() {
alert('click Add');
});
})
以上代码也可以简写成如下代码：
$(function() {
$('#btnAdd').click(function() {
alert('click Add');
});
})
3.3. 复合事件
- hover(over, out)，一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
例如：鼠标悬停的表格加上特定的类
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
- toggle(fn, fn2, [fn3, fn4, ...])，每次点击后依次调用函数。
例如：对表格的切换一个类
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
3.4. 事件的旅程
事件捕获，事件首先交给最外层，接着交给具体的元素。
事件冒泡，事件首先发给最具体的元素，然后向上冒泡给更一般的元素。
3.5. 通过事件对象改变事件的旅程
3.6. 移除事件处理程序
- unbind([type], [data]) bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
如果没有参数，则删除所有绑定的事件。
你可以将你用bind()注册的自定义事件取消绑定。
如果提供了事件类型作为参数，则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
例如：将段落的click事件取消绑定
$("p").unbind( "click" )
3.7. 模仿用户操作
- keydown(fn)，在每一个匹配元素的keydown事件中绑定一个处理函数。
- keypress(fn)，在每一个匹配元素的keypress事件中绑定一个处理函数。
- keyup(fn)，在每一个匹配元素的keyup事件中绑定一个处理函数。
例如：在页面内对键盘按键做出回应，可以使用如下代码:
$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息: http://unixpapa.com/js/key.html
// ...
}
});
4. 效果
4.1. 修改内联CSS
- css(name, value)，在所有匹配的元素中，设置一个样式属性的值。
例如：将所有段落字体设为红色
$("p").css("color","red");
4.2. 基本的隐藏和显示
- show()和hide()显示和隐藏的匹配元素。
例如：显示所有段落
$("p").show()
4.3. 效果和速度
- show(speed, [callback])和hide(speed, [callback]) 以优雅的动画显示和隐藏所有匹配的元素
例如：用缓慢的动画将隐藏的段落显示出来，历时600毫秒。
$("p").show("slow")
- fadeIn(speed, [callback])和fadeOut(speed, [callback]) 通过不透明度的变化来实现所有匹配元素的淡入和淡出效果
例如：用600毫秒缓慢的将段落淡入
$("p").fadeIn("slow");
4.4. 创建自定义动画
- animate(params, [duration], [easing], [callback]) ，用于创建自定义动画的函数。
例如：让指定元素左右移动
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
5. DOM操作
5.1. 操作属性
- attr(key, value)，为所有匹配的元素设置一个属性值。
- removeAttr(name)，从每一个匹配的元素中删除一个属性。
- insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
- insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
- wrap(html) 把所有匹配的元素用其他元素的结构化标记包裹起来。
5.2. 插入新元素
5.3. 包装元素
例如：把所有的段落用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>");
5.4. 复制元素
- clone()克隆匹配的DOM元素并且选中这些克隆的副本。
例如：克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
$("b").clone().prependTo("p");
