jQuery学习笔记-分享时光

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。同时它又解决了不同浏览器之间的差异性，极大地提高了开发效率。

说明/链接

目前有1.x版本和2.x版本，其中1.11.x为最新的，1.4.x和1.11.x为比较稳定的版本

2.0不再支持IE6/7/8, 调用上无区别, 兼容1.9的API, 内核发生了变化。同时1.x分支会继续发展下去.

官网

在线文档

离线chm手册jQuery1.11.0.chm

源码分析/插件开发

jQuery的主要结构如下。实际上就是对大量函数的封装，通过$()得到的是jQuery对象，通过$.可以直接使用公用的函数，比如$.ajax

(function(){
    var jq = function(arg){
        return new jq.fn.init()
    }

    jq.fn = {
        init:function(arg){
            //实现各种选择器
        }
    }

    window.$ = jq;
})();

综上jQuery的插件开发有下面两种方式

给jQuery.fn丰富成员，可以给jQuery对象使用
```
 $.fn.成员 = 值
 $.fn.extend(json对象)
```
给$对象丰富成员可以给$对象使用
```
 $.成员 = 值
 $.extend(json对象)
```

选择器

jQuery借鉴了css的样式选择器方式，所以二者很相似

基本选择器

$("#id") id选择器
$("tagName") 标签选择器
$(".class") 类选择器
$("*") 选择所有
$("s1,s2,s3") 选择多个

层次选择器

$("s1 s2")派生选择器：在s1内部获得全部的s2结点，不考虑层次
$("s1>s2")直接子元素选择器，在s1内部获得子元素结点s2
$("s1+s2")直接兄弟选择器：在s1后面紧挨着的s2
$("s1~s2")后续的全部兄弟

过滤选择器

关系过滤

$("s1s2") 并且关系没有空格，选择的s1元素上确定s2，与$("s:not(q)")相反

$("s:parent") s必须是父结点，和$("s:empty")相反

文本也是结点所以
<div><div>不满足
<div> <div>满足
<div><span></span><div>满足

位置过滤

$("s:first") 选择$("s")里面的第一个
$("s:last") 同上最后一个
$("s:eq(n)") 同上第n个
$("s:gt(n)") 同上大于某个范围
$("s:lt(n)") 同上小于某个范围
$("s:even") 同上偶数
$("s:odd") 同上奇数

例如$("li:gt(3):lt(2)")  3+1<=index<=3+2

内容过滤

$("s:contains(text)")

标签不构成影响，比如下面标签的内容是21
<li>2<span>1<span></li>
$("li:contains(2)")可以选择到
$("li:contains(1)")可以选择到
$("li:contains(21)")可以选择到

$("s:not(q)") 取出$("s")里面非$("q")

$("s:empty")内容为空的结点，没有文本（空格，回车算文本）也没有元素，即innerhtml为空

$("s:has(选择器)")，s里面符合选择器，但是最终选择的是s

属性过滤

$("[attrName]") 含有attrName属性

$("[attrName1][attrName1]") 一个标签同时含有attrName1 attrName2两个属性

$("[attrName=value]")

$("[attrName^=value]")//等价于value*

$("[attrName$=value]")//等价于*value

$("[attrName!=value]")//含有attrName属性值不为value的结点，或者没有attrName属性

$("[attrName*=value]")//必须有attrName属性且值为*value*

比如 $("input[type='radio']")

表单域/其他选择器

$(":ckecked") 复选框，单选按钮 选中选择器

$(":selected") 下拉列表 选中选择器

例如$("#ss>option:selected")

$(":header") 等价于$("h1,h2,h3,h4,h5,h6")

常用方法

$('#d').find('span') 等价于 $("#d span")

$("input[type='checkbox']").parent().is("form")

closest(expr|object|element)

从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素

DOM操作

jQuery对象与DOM对象的联系：通过jQuery选择器返回的是jQuery对象，jQuery对象无法直接调用DOM的属性和方法

$()[index]可以将jq对象转换成DOM对象或者$().get(index)

$(dom对象)可以将DOM对象转换为jQuery对象

遍历

$.each(数组/对象,function(key/inedx,value){
    
})

$().each(function(index,domObject){
    //这里面this也代表dom对象
    $(domObject)//变成jq对象
})

获取修改属性

对属性的操作主要用到attr和prop(后来引入的)

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法，比如说a标签的属性有href、target和class，这些属性就是元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

对于某些属性的结果可能会有区别,比如获得a标签的href，prop获得的是绝对路径，attr获得的是在代码中写的路径

自定义的属性的W3C规定的属性都可以获取,部分属性无法修改获取，比如无法获得表单的value，无法修改表单的type

prop(name,value)//同下

attr(name) 获得属性
attr(name,value)
attr(json)
attr(name,function(){
    ...
    return value;
})

removeAttr(name)//强制移除

removeProp(name)//值设置为undefined

表单value操作

使用 val(),val(value)来获取设置，有时可能会得到0

选中的复选框 $("input[type='checkbox']:checked")
单选按钮 $("input[name='sex']:checked")

多选情况$("select").val()得到数组

设置多选的选中$("select").val([v1,v2])

<input type="checkbox" name="hobby" value="11">
<input type="checkbox" name="hobby" value="22">
$("input[type='checkbox']").val([11,22])

设置单选的值$("input[name='sex']").val(['male'])

一些常用操作

$().attr('checked',true) 全选

遍历$().attr('checked',!$().attr('checked')) 反选

//有问题
for(var i=0;i<$("input").length;i++){
    var aa = $("input:eq("+i+")");
    aa.attr('checked',!aa.attr('checked'));
}

//原生的可以
for(var i=0;i<$("input").length;i++){
    $("input").get(i).checked = !$("input").get(i).checked;
}

旧版本使用attr来改变check状态可以，新版本会有问题，推荐使用prop

for(var i=0;i<$("input").length;i++){
    var flag = $("input:eq("+i+")").is(":checked");
    $("input:eq("+i+")").prop('checked',!flag);
}

获取/设置css属性

注意：如果读取到多个，只会显示第一个的属性

$("li").css("font-size")

复合样式要分开获取，比如border会得到1px solid rgb(255, 0, 0)，要分别获取可以css(‘border-color’)

设置样式

$("li").css("font-size","50px")

或者使用对象字面量的形式

$("li").css({"font-size":"50px","backgroundColor":"pink"})

删除一个style只需要将值设置为空(不是null)即可

添加/删除class

$("li").addClass("tip1 tip2");
$("li").addClass("tip3");
$("li").removeClass("tip2")

toggleClass()

显示/隐藏

hide() 等价于设置style为display：none

toggle()

show()

添加/删除/修改DOM

注意，如果选中的DOM在DOM树上，把它放到DOM树上的位置会是它移动

$(a).insertAfter($(b))//a插在b的后面

$().insertBefore($());

$(a).after($(b))//b插在a的后面，a的后面放上b

$("ul").append($("<li>666</li>")) //里面最后一个追加

$("ul").prepend($("<li>666</li>"))//里面追加到第一个

$("<li>666</li>").appendTo($("ul"));

$("<li>666</li>").prependTo($("ul"));

删除操作

$("li:eq(1)").remove();

过滤删除

$("li").remove(":eq(1)");

$("li").remove(":contains('1')");

$("ul").empty();//清空内容

替换操作

$().replaceWith($()); //前面的被后面的替换

$("<li>6666</li>").replaceAll($("li:contains('1')"));//后面的被前面的替换

修改通过html(),text()方法
html()
html(value)
text() 不会把标签算进来，所有子文本结点连接
text(value) 会把部分符号变成符号实体，比如<>   

var a = $("li:first");
a.text(a.text()+"666");

克隆结点

$().clone(false)//不复制事件,这些被复制的时间必须是通过JQ添加的

$().clone(true)//复制事件

事件

onload区别

语法

$(document).ready(function)//把DOM对象变成JQ对象

$().ready(function) //$()也是创建JQ对象，不过内部没有DOM对象罢了

$(function)//第一种加载的封装

执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行
简化写法

window.onload没有简化写法

$(document).ready(function(){})可以简写成$(function(){});

原生js window.onload //

事件级别

DOM 一级事件,一个DOM的同一个事件可以设置多个但是只执行最后设置的那一个

< onclick = "过程代码">
< onclick = "函数()">

dom.onclick = function

取消 `dom.onclick = null`

DOM 二级事件,一个DOM的同一个事件可以设置多个会都会执行

dom.addEventListener(类型，处理，事件流)
dom.removeEventListener(类型，处理，事件流)

dom.attachEvent()
dom.detachEvent()

jQuery事件

常见事件类型有click,keyup,keydown,mouseover,mouseout,blur,focus,change,submit…..

一级事件，无法取消

$().事件类型(事件处理函数)

$().事件类型

二级事件，可以取消

$().bind(事件类型,function)

$().bind(事件类型1 事件类型2,function)

$().bind(json对象)

取消

$().unbind() 取消全部事件

$().unbind(事件类型) 取消某一事件的所哟处理函数

$().unbind(事件类型，有名函数) 取消某一事件的单个处理函数

阻止默认动作/冒泡

传统的事件对象

e.preventDefault();//主流浏览器
e.returnValue = false;//IE

e.stopPropagation()//主流浏览器
e.cancelBubble = true;//IE

jQuery中

这里的event和原生的js事件对象不同，jq采用了原始的名字，但是对他进行了处理，消除了兼容差异

e.preventDefault();
e.stopPropagation()

比如禁止右键弹出
$(document).contextmenu(function(ev){
    ev.preventDefault();
})

动画

常用动画 - 宽高透明度在变化

hide([时间][,回调函数]) 时间可以是是一些预设的比如fast slow,
show([时间][,回调函数])
toggle([时间][,回调函数])

垂直动画 - 高度在变化

$("li").slideUp([时间][,回调函数]); 隐藏
$("li").slideDown([时间][,回调函数]); 显示
slideToggle([时间][,回调函数]);

渐变动画 - 不透明度在变化

fadeIn([时间][,回调函数])
fadeOut([时间][,回调函数])
fadeToggle([时间][,回调函数])
fadeTo(时间,到某个透明度[,回调函数])

css样式过渡

animate(params,[speed],[easing],[fn])

 $("#div").animate({width:'200px'},2000,'swing',function(){
    console.info(1)
});

ajax的使用

$.get(url,[data],[function(msg){回调函数}],[返回数据类型])

data是传递给服务器的数据,可以是请求字符串和json

$.post(url,[data],[function(msg){回调函数}],[返回数据类型])

以上两种都是异步请求，如需设置同步请求换用下面的方法

$.ajax({
    url:'地址',
    [data:xxx],
    [dataType:xxx],
    [type:post/get/jsonp],
    [sucess:function(msg){}],
    async:[true 异步true同步false默认异步],
    cache:[true,是否缓存]
    [timeout:超时]
});

加载网页到DOM

$().load(url, [data], [callback])载入远程 HTML 文件代码并插入至 DOM 中

总结

综上就是常见的jQuery的操作，更多的操作可以查阅手册了解