jQuery学习笔记

Flchy 于 2016-04-20 发布

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的插件开发有下面两种方式

  1. 给jQuery.fn丰富成员,可以给jQuery对象使用

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

     $.成员 = 值
     $.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)//第一种加载的封装
  1. 执行时间

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

    $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

  2. 编写个数不同

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

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

  3. 简化写法

    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

这里的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的操作,更多的操作可以查阅手册了解