jQuery学习笔记

发表于 | 分类于
| 字数统计: 4.8k 字

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery 概述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
优势: 1.强大的选择器  2.出色的浏览器兼容性  3.方便的链式操作  4.出色的DOM操作的封装  5.完善的Ajax
引入jquery  <script src="js/jquery.js"></script>
            <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js">
            百度静态资源库 采用cdn加速  本地载入速度快
`测试是否引入成功 alert($);  $=jquery`
window.onload       等网页中所有资源(图片,flash,gif等)加载完后才执行 只执行最后一个
$(document).ready() 等dom树加载完毕后就可以执行    可写多个    简化$(function(){})
DOM对象不能使用任何jquery中的方法,只能使用DOM中的方法
jquery对象转成DOM对象方法
  1.使用index  		$(input)[0].value
  2.使用get(index)	$(input).get(0).value
DOM对象转换成jquery对象
  只要把DOM对象用$()包起来就可以了  $(input).val()
取值和赋值合体  html() 取值   html("hello")  赋值
`注: 当选择对象是一组元素时 取值取的是一组中的第一个元素
    当选择对象是一组元素时 赋值时是一组中的所有元素`
jQuery与其他js类库共存  名称冲突
1.jQuery使用$符号作为jQuery的简介方式 其他库中函数同样使用$
    jQuery使用名为noConflict()方法来解决该问题(释放$权)
    var jq=jQuery.noConflict(),帮助您使用自己的名称(比如jq)来代替$符号。
2.改变引入的先后顺序

$()的四大调用方式

  1. $(function(){}) 文档加载完毕执行函数等同于DOMContentLoaded
  2. $(selector) 获取选中的selector(css选择器)元素
  3. $(element) 传递一个Element,document,window等原生js对象会转化为jQuery对象
  4. $(<tag></tag>, object) 创建元素 tag是要创建的元素带<>的标签字符串 object是一个对象,对象里面可以设置创建元素的属性或data或事件
1
2
3
4
5
6
7
8
9
10
// 方式一
$('<div>', {
text: '创建元素',
class: 'box',
css: { background: 'red', color: '#fff', height: 100, width: 100 },
click: function () { alert(11) }
}).appendTo($('body'))
// 方式二
$('<div class="test" onclick="fn1()" style="color:pink">创建元素</div>').appendTo($('body'))
function fn1(){ alert(2222) }

选择器引擎返回代理对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
jquery选择器兼容任何版本的浏览器
1.选择器
  A 基本选择器
    a.Id选择器   返回单个元素
    b.类名选择器
    c.标签选择器
  B 层次选择器
    a.E F  选择E元素所有的后代元素
    b.E>F  选择E元素的子元素
    c.E+F  选择E元素后紧邻的兄弟元素  可以用next()代替
    d.E~F  选择E元素后所有后代元素    可以用nextAll()代替
  C 过滤选择器
    ①基本过滤选择器(过滤选择器以:开头)
    a :first     选取第一个元素
    b :last      选取最后一个元素
    c :not(selector)  选取除指定选择器外的元素(选择器不要加引号)
    d :even      偶数选择器
    e :odd       奇数选择器
    f :eq()      选取指定索引的元素
    g :gt()      选取大于指定索引的元素
    h :lt()      选取小于指定索引的元素
    i :header    选取h1~h6标题标签
    j :animated  选取正在执行动画的元素
    ②内容筛选
    a :contains(text) 选取含有指定文本的元素
    b :has(selector)  选取含有指定后代选择器的元素
    c :empty      选取不包含子元素或文本元素的元素(注意换行被解析为空文本元素)
    d :parent     选取含有子元素或文本元素的元素
    ③可见性筛选
    a :hidden     选取所有不可见元素(不占位置的)
    `注  在网页中看不到的元素   元素不占有空间   opacity:0和visibility:hidden获取不到`
    b :visible    选取所有可见的元素
    ④属性选择器    元素[sttr]
    a [attr]      选取拥有此属性的元素
    b [attr="value"]  选取指定属性值的元素
    c [attr*="value"] 选取属性包含指定字符的元素
    d [attr^="value"] 选取属性以指定字符开头的元素
    e [attr$="value"] 选取属性以指定字符结尾的元素
    f [attr!="value"] 选取属性中不包含指定字符的元素
    g [attr1="value"][attr2="value"] 选取多个属性的元素
    h [attr|="value"] 选取属性值中以指定前缀的元素
    ⑤子元素筛选
    a :first-child   选择父元素的第一个子元素
    b :last-child    选择父元素的最后一个子元素
    c :only-child    选择元素中只包含一个子元素的元素
    d :nth-child(n|even|odd)  选择父元素的第N个元素遵从css规范(n从1开始)
    ⑥表单属性选择器
    a :disabled  选择所有不可用的元素
    b :checked   选择所有选中的元素(单选框,复选框)
    c :selected  选择所有被选中的选项的元素(下拉框)
    d :focus     选择当前获得焦点的元素
    e :enabled   选择所有可用的元素
  D 表单元素选择器
    :input :button :text :password :radio :checkbox :submit :image :file :reset
    (不支持  :textarea获取文本域  :select获取下拉框)
    `注  :input选择的是所有表单元素包括 input textarea select`

2.筛选方法
    a eq(index)       选择指定索引的元素
    b filter(选择器)   从匹配的元素集合中选择指定选择器或表达式的元素(针对元素本身)
    c not(选择器)      从匹配的元素集合中移除指定的元素(针对元素本身)
    c first()   	  选择第一个元素
    d last()          选择最后一个元素
    e is(selector)    检测元素是否返回布尔值
    f has()           包含指定后代的元素
    h slice(n,m)      根据指定的下标范围(不包括m),选择匹配的元素的集合
    i index()         索引就是当前元素在所有兄弟节点中的位置
    `注:选择器  主要用在选择DOM对象上  筛选DOM方法  主要用在链式操作上 `

3.遍历查找
    a children("选择器")  选择子元素
    b parent()            选择父元素
      parents("选择器")   选择祖先元素
      closest("选择器")   取得最近的匹配元素逐级向上查找父元素
      offsetParent()      获取有定位的父级
    c prev()              选择紧邻的前一个兄弟元素
    d next()              选择紧邻的后一个兄弟元素
    e siblings()          选择前后所有的兄弟元素
    f end()               返回到最初匹配的元素
    g find()              选择匹配元素集合中所有后代元素
    h each()              遍历每个jquery对象 为每个元素执行一个函数
    // ex:$("li").each(function(index,elem){})  index下标 elem元素
    i size()              获取一组元素的长度(相当于length)
4.选择器的优化
    a 优先使用id选择器
    b 在class选择器前添加标签名
    c 采用find(),而不使用上下文查找
    d 使用强大的链式操作比缓存更快
    注: 选择器中含有特殊字符的处理需要\\转义   $("#id\\#b")

批量操作dom以及dom树结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
1.属性的操作
    a.  获取元素的属性  attr(name)  name属性的名称
    b.  设置元素的属性  attr(key,value)
        设置多个属性值  attr({key0:value0,key1:value2})
    c.  删除元素的属性  removeAttr(name) 删除指定的属性(name必选)
    `注:prop() 用来处理布尔值的属性或不存在的属性,添加属性名称就会生效时使用  `
    `选中判断  1. obj.attr('checked')   2. obj.prop('checked')  3. obj.is(':checked')`
2.元素的内容操作
    a.html()     只获取第一个匹配元素的HTML内容
      html(val)  会设置所有匹配元素的HTML内容
    b.text()     获取元素的文本内容(会获取一组元素所有的文本)
      text(val)  设置元素的文本内容
    `注:  html()方法仅支持Xhtml的文档 不能用于XML文档 而text()都支持`
    c.val()      获取或设置元素的value值
      val("")    清空值   val("aaa")  设置值
      val([])    设置select radio checkbox 选项被选中
      val(["chk1","chk2"]) 是从最后一个选项往前读取 如果选项的value值或者text中任意一项符合就会被选中
3.元素样式的操作
    a. css("name")        获取元素的指定的样式
       css("name","vaue") 设置元素的指定的样式
       css({"name1":value1,"name2":value2})  设置多个样式
    `注: 如果值是数字 将会被自动转化为像素值
         如果属性中带有"-"符号 不用引号则要采用驼峰命名法 fontSize
         如果用引号则"font-size"和"fontSize"都可以`
    b. addClass(class)    为元素追加class类
       addCalss(class class1 ...) 添加多个class类
    c. toggleClass()      切换不同的元素类别
    d. removeClass([class])  删除指定的类别
    `可选多个 用空格分开 如果不选名称则删除元素中所有类别`
    e. hasClass("class")   判断元素中是否含有某个样式
    f. is(".classname")    判断元素中是否是某个样式
    g  其他样式的获取
       height() 获取或设置元素的高度
       width()  获取或设置元素的宽度
       offset() 获取元素到屏幕的左距离或右距离(只对可见元素有效)
       offset().left   offset().top
       position().left   position().top  到有定位的父级
       scrollTop() 获取或者设置元素的滚动条距顶端的距离
       scrollLeft() 获取或者设置元素的滚动条距左端的距离
       当有多个class的使用可以用 addClass或removeClass  操作指定的class
       当只有一个的时候,可以操作attr('class','acitve')  覆盖掉原来的class
4.元素的节点操作
    ①创建节点
      a.用$()来创建节点      var newElement = $("<div>div标签</div>")
      b.用字符串来创建节点    var newElement = "<div>div标签</div>"
    ②插入节点
      a. append(content)
         append(function(index,html){}) 将函数的返回的内容追加到元素内部的末尾
         appendTo(Tag)      向元素的内部末尾出插入内容
      b. prepend(content)
         prependTo(Tag)     向元素的内部前面插入指定内容
      c. after(content)     在匹配元素外部后面插入内容
      d. before(content)    在匹配元素外部前面插入内容
      e. insertAfter(Tag)    将所选择的元素插入另一个指定的元素的外部后面
      f. insertBefore(Tag)   将所选择的元素插入另一个指定的元素的外部前面
    ③复制节点
      $("").clone().appendTo()  复制匹配的DOM元素本身
      $("").clone(true).appendTo() 复制本身并将该元素的全部行为事件也复制
    ④替换节点
      a. replaceWith(content)  替换节点
         将所选择的元素替换成指定的HTML或DOM元素 用括号中的字符替换所选择的元素
      b. replaceAll(Tag)       替换节点
         将Tag替换成指定的内容(Tag被替换的元素) 用字符串替换括号中所选择的元素
      `注:一旦被替换,被替换的元素的全部事件都消失`
    ⑤包裹节点
      a. wrap(html\elem\fn)  把所选择的元素用指定的HTML或DOM 包裹起来(外包装)
      b. unwrap()无参数   移除所选元素的父元素或包裹标记
      c. wrapAll()     将所选元素用单个元素或DOM元素包裹起来(会改变dom节点结构)
      d. wrapInner()   将所选元素的子内容(包括文本节点)用指定内容包裹起来(内包装)
    ⑥遍历节点
      $("p").each(function(index){
        this.title="第"+index+"个P";
      })
    ⑦删除节点
      a. remove()  删除指定的元素所包含的所有后代元素也一起被删除
         返回指向被删除节点的引用可以继续使用但是其事件都不存在
      b. detach()  删除指定的元素,返回结果是被删除元素但保留其操作方法(事件)
      c. empty()   清空元素里的全部节点或节点所包括的后代元素
      `注:  add()  将节点组合在一起`

处理事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
1.事件绑定 on或bind
    a. $("").click(fn);
    b. $("").bind("事件类型",[event.data],fn)
       $("").bind("click dblclick",function(){})
       $("").bind({focus:function(){alert(111);},
    c. $(document).on(events,[selector],[data],fn);
       events 一个或多个事件 多个事件用空格分割
       selector 选择器元素
       data 事件触发传递event.data参数给事件处理函数
       fn   事件触发时执行的函数
       `注:  可以为动态创建或生成的元素添加事件`
    $("p").on({
        mouseover:function(){$("body").css("background-color","lightgray");},
        mouseout:function(){$("body").css("background-color","lightblue");},
        click:function(){$("body").css("background-color","yellow");}
    });
2.事件切换
    a. hover(over,out)
       当鼠标移动到所选的元素上时(mouseover)执行第一个函数
       当鼠标移出这个元素(mouseout)执行第二个函数
    ex: $("p:eq(1)").hover(function(){
            $("#hi").show();
        },function(){
            $("#hi").hide()
        });
    b. toggle() 每次单击后依次调用函数通过函数设置的前后顺序进行调用
       toggle(fn,fn2,[fn3]....) 依次调用fn函数
3.移除事件
    unbind(type,[fn])或off(type,[fn])  移除元素绑定的事件
    参数type为移除的事件类型,fn为需要移除的事件处理函数,如果没有参数
    则移除所有绑定的事件.如果有参数fn则只移除绑定时指定的函数fn
4.其他事件
    a. one(type,[fn])  为所选元素绑定一个仅触发一次的函数
        ex: $("").one("click",function(){});
    b. trigger(type)   在所选择的元素上触发指定类型的事件(自动触发)
        ex: $().trigger("select");
        ex: otxt.bind("a",function(){
               $("#divtop").html($(this).val());
            }).trigger("a");   自动触发自定义事件
5.事件对象的属性
    a. e.type()   获取事件的类型
    b. e.stopPropagation()  阻止冒泡事件(事件从里向外传递)
    c. e.preventDefault()   阻止默认行为
       return false     同时阻止默认事件和冒泡事件
    d. e.target()       获取到触发事件的元素(事件目标或事件源)
    e. e.pageX()/e.pageY 获取到光标相对于文档的x坐标和y坐标
       e. clientX/e.clientY 获取到光标相对于可视区的x坐标和y坐标
    f. e.which() 获取键盘键值或鼠标按下的左 中 右健的那个键
       1=鼠标左键 left  2=鼠标中键 3=鼠标右键
    g. e.data()   事件中传输的数据
       ex: $().on("click",{name:'hello'},function(ev){
              alert(ev.data.name);  //hello
           })
6.事件委托
    a. delegate()  利用冒泡实现
       好处  1.省略循环操作 2.对后添加元素直接拥有事件操作
       ex: $("ul").delegate("li","click",function(){})
    b. undelegate()  取消事件委托
    c. on() 常用于动态添加的元素使用
    ex: $('#div1').on('click','li',function(){
            alert('ok');
        })
        $('#div1').append($('<li>new</li>'));

执行动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
1.hide()和show()   显示或隐藏html元素
    hide(speed,callback)  show(speed,callback)
    可选参数speed 速度 ("slow","normal","fast",1000)
       其对应的速度分别是0.6秒  0.4秒 0.2秒
    可选参数callback 显示或隐藏完成后执行的函数
    ex $("#test").hide(3000,function(){alert(1111);});
2.toggle()  切换hide()和show()方法
    toggle(speed,[callback]);
    ex $("#test").toggle(3000,function(){alert("已隐藏");});
3.淡入淡出
    a. fadeIn()  实现淡入已隐藏元素
       fadeIn(speed,callback)
    b. fadeOut() 实现淡出可见元素
       fadeOut(speed,callback)
    c. fadeToggle() 实现fadeIn与fadeOut之间的切换
       ex $("#test").toggle(2000);
    d. fadeTo() 方法允许渐变为给定的透明度
       ex $("#test").fadeTo(2000,0.6);
4.滑动
    a. slideDown()  用于向下滑动元素
    b. slideUp()    用于向上滑动元素
    c. slideToggle()在slideDown()与slideUp()之间进行切换
5.animate  自定义动画
    animate(params,[duration],[easing],[callback])
        参数params 表示用于制作动画效果的属性样式和值的集合 可选[duration]表示速度
        [easing]控制动画的表现效果 [callback]动画完成执行的回调函数
    a 简单的动画   ex :$("#test").animate({height:"100px"},1000);
    b 移动位置的动画  ex: $(this).animate({left:"500px",top:"300px"},3000)
        1.要使页面中的元素移动必须对该元素进行定位 相对或绝对
        2.在animate中第一个参数params在表示动画属性时需采用驼峰命名
          如果是font-size 必须写成fontSize才有效 否则报错
    c 队列中的动画
        元素执行多个动画效果时,这些animate()方法执行的先后顺序形成了动画的队列
        产生队列后,动画的效果便按队列的顺序进行展示
    ex: $(this).animate({left:"500px"},3000).animate({top:"300px"},3000)
    注:  left等属性有无引号都可以
    d 动画的停止和延时
        stop([clearQueue],[gotoend])  停止所选元素中正在执行的动画
        可选参数[clearQueue]布尔值是否停止正在执行的动画(阻止后续运动)
        可选参数[gotoend]   布尔值表示是否立即完成正在执行的动画
        stop() 停止当前动画   stop(true) 停止所有动画
        stop(true,true)  停止所有动画 到达动画结果
        finish()  立即停止到所有指定的目标点
        delay(duration,[queueName])  推迟对列中动画的执行 duration时间值毫秒数 [queueName]动画队列
6.动画回调函数
    如果想在最后一步切换元素的CSS样式,而css()方法在刚开始执行动画时就执行
    原因是css()方法并不会加入到动画对列中而是立即执行,可以使用callback对
    非动画方法实现排队,只要把css()方法放在最后一个动画的回调函数里(非动画
    元素的插队)
注: toggle() 两个意思 不写参数或写一个可选参数fn时表示切换显示和隐藏
    toggle(speed,[fn]) 用于元素的显示和隐藏的切换
    toggle(fn1,fn2)  单击时依次调用函数

其他

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1. serialize()  序列化表单内容为字符串,用于 Ajax 请求。
2. serializeArray()  序列化表单内容为数组(json格式),返回的是JSON对象
3.  this.defaultValue  当前文本框的默认值
4.  innerWidth() width+padding
    outerWidth() width+padding+border
    outerWidth(true) width+padding+border+margin
5. 工具方法
    // $().xxx() 是 jQuery 对象方法
    // $.xxx()  工具方法 即可给jQuery对象用,也可给原生js对象使用
    a.  $.type()      判断数据类型比typeof更多
        ex: var a="hello" alert(typeof a)或alert($.type(a)) //string
    b.  $.trim()      去除前后的空格
    c.  $.inArray()   判断数组中是否存在某字符类似indexOf
        ex:  var arr=['a',2,"c"];   alert($.inArray('c',arr))  //2
    d.  $.proxy()     改变this指向
        ex:  $.proxy(show,document,参数)
    e.  $.noConflict()  防止冲突的
    f.  $.parseJSON()   将严格模式下的json格式字符串转换成json数据
    g.  $.makeArray(obj).push()  将类似数组的集合转换成数组
    i.  $.each()  循环遍历操作元素
6. 插件的扩展
    a.  $.extend()     扩展工具方法下的插件形式  $.xxx()
        ex: $.extend({
              leftTrim:function(str){
                return str.replace(/^\s+/g,'');
              }
            });   调用  $.leftTrim(str)
    b.  $.fn.extend()  扩展到JQ对象下的插件形式  $().xxx()
        ex: $.fn.extend({
              aaa:function(){
                alert(1111);
              }
            });   调用   $().aaa();  ///1111
-------------本文结束感谢您的阅读-------------
0%