jQuery学习之旅

jQuery的特点

1. 轻量级。采用UglifyJs压缩，大小只有30KB左右
2. 强大的选择器。兼容css几乎所有选择器
3. 出色的DOM封装。封装了大量的DOM操作
4. 可靠的事件处理机制。采用预留退路、循序渐进和非入侵式编程思想
5. 完善的Ajax。无需处理浏览器兼容性问题
6. 不污染顶级变量。使用闭包，绝对不会污染其他对象
7. 出色的浏览器兼容性。修复了一些浏览器之间的差异
8. 链式操作。jQuery操作返回的是jQuery对象，使其无需重复获取对象，直接进行下一步操作

$('.test').addClass('.red').removeClass('.green')//连续操作，可以使用.end()方法退回到选择元素

jQuery选择器

以下为几种常见的选择器

//选择器使用方法（$+（选择器））
$('#id')

1. 基本选择器（#id、.class、element、*）
2. 层级选择器（parent>child、prev+next、prev~siblings）
3. 基本筛选器（:first、:not(selector)、:even、:odd、:eq(index)、gt(index)、lt(index)、:header、:animated、:focus）
4. 内容选择器（:contains(text)、:empty、has(selector)、:parent）
5. 可见性选择器（:visible、:hidden）
6. 子元素选择器（:first-child、:last-child、:nth-child）
7. 表单选择器（:input、:text、:password、:redio、:checkbox、:submit）
8. 表单对象属性选择器（:enabled、:disabled、:checked、:submit）
9. 属性选择器（[attr]、[attr=value]、[attr != value]、[attr ^= value]）

jQuery元素的增加、删除、复制、移动、修改元素属性

1. jQuery创建对象（将对象穿给jQuery）

$('<div></div>')

2. jQuery删除对象

$('.test').remove()//删除对象和对象绑定事件
$('.test').detach()//删除对象但保留对象绑定事件
$('.test').empty()//删除对象内容

3. jQuery复制对象

$('test').clone()

4. jQuery移动对象

$('.test').append('啦啦啦')//在匹配元素内部后面追加内容
$('啦啦啦').appendTo('.test')//将内容追加到匹配元素的后面
$('.test').prepend('啦啦啦')//在匹配元素内容的前面追加内容
$('啦啦啦').prependTo('.test')//将内容追加到匹配元素的前面
$('.test').after('啦啦啦')//在匹配元素的后面追加内容
$('啦啦啦').insertAfter('.test')//将内容追加到匹配元素后面
$('.test').before('啦啦啦')//在匹配元素的前面追加内容
$('啦啦啦').insertBefore('.test')//将内容追加到匹配元素前面

5. jQuery修改元素属性

$('.test').attr('href','xxx')

jQuery常用事件

1. ready(fn)，设置页面加载结束后执行函数，可以使用无数次

$(document).ready(function(){
  });

2. hover()事件，设置鼠标经过移除事件

$(".test").hover(
  function () {
  //移入事件
    $(this).addClass("hover");
  },
  function () {
  //移出事件
    $(this).removeClass("hover");
  }
);

3. toggle([speed],[easing],[fn])，点击元素，设置内容显示与隐藏，speed为显示效果

$(".test").toggle("fast",function(){		 	 	 	
 });

4. click([[data],fn])点击事件

$(".test").click( function () {
 });

5. change([[data],fn])设置元素值发生改变时的事件

$(".test").change( function() {
 });

6. focus([[data],fn])设置元素获得焦点的动画，多用于输入框

$(".test").focus(function(){
});

7. blur([[data],fn])设置元素失去焦点时触发的事件，多用于输入框

$(".test").blur( function () { 
} );