jQuery学习笔记

7 jQuery

7.1 jQuery简介

​ 用途：访问和操作DOM元素、控制页面样式、对页面事件的处理、方便的使用jQuery插件、与Ajax技术完美结合。

​ 优势：轻量级、强大的选择器、出色的DOM封装、可靠的事件处理机制、隐式迭代、丰富的插件支持、不存在浏览器兼容性问题

 引入方式：<script src="../../js/jquery-3.2.0.js"></script>         主函数：把整个文档加载完毕后才会执行主函数 ①  $(document).ready(function(){    }) ②  $(function(){               })//简写方式 

​ jQuery对象就是通过jQuery包装DOM对象后产生的对象。但是jQuery对象无法使用DOM对象的任何方法，DOM也无法用jQuery的方法。

//jQuery对象与DOM对象的转换1、DOM对象转换为jQuery对象；对于一个DOM对象，需要使用$()将其包装起来，即转为jQuery对象。            var test=document.getElementById("my");    //通过ID获取DOM对象        var jtest=$(test);    //DOM对象转为jQuery对象2、jQuery对象转成DOM对象；[index]和get(index);    ①  jQuery对象是一个数组对象；可以使用下标方式获取            jtest[0].value;     //可以获取test的value值    ②  jQuery本身提供get(index)方法得到对应的DOM对象           jtest.get(0).value;//图片轮播效果    $("li").mouseover(function(){        var flag=$(this).text();        $(this).css("background","yellow");        $(this).siblings().css("background","#333333");        $(".adver").css("background","url(images/"+imgs[flag-1]+")");    });//点击左右按钮切换图片    $(function(){            var imgs=["adver01.jpg","adver02.jpg","adver03.jpg",                      "adver04.jpg","adver05.jpg","adver06.jpg"];            var flag=0;            $(".arrowRight").click(function(){                if(flag==imgs.length-1){                    flag=0;                }else{                    flag++;                }                var i=flag+1;                $(".adver").css("background","url(images/"+imgs[flag]+")");                $("li:nth-of-type("+i+")").css("background","orange");                $("li:nth-of-type("+i+")").siblings().css("background","#333333");            });            $(".arrowLeft").click(function(){                if(flag==0){                    flag=imgs.length-1;                 }else{                    flag--;                }                var i=flag+1;                $(".adver").css("background","url(images/"+imgs[flag]+")");                $("li:nth-of-type("+i+")").css("background","orange");                $("li:nth-of-type("+i+")").siblings().css("background","#333333");            });            $(".adver").mouseover(function(){                $(".arrowLeft").show();                $(".arrowRight").show();            }).mouseout(function(){                $(".arrowLeft").hide();                $(".arrowRight").hide();            });        });

7.2 jQuery选择器

​ jQuery选择器是jQuery的根基，在jQuery中对事件的处理，遍历DOM和Ajax都依赖于选择器。

7.2.1 基本选择器

1、id选择器：$(“#id”) 类似于document.getElementById(“#id”)

2、元素选择器:$(“div”) 类似于document.getElementsByTagName(“#id”)

获得所有页面中的div元素，返回值是一个数组。遍历：var divs=$("div");for(var i=0;i<divs.length;i++){    //此时divs[i]已经转换为DOM对象，所以可以使用DOM方法value    alert(divs[i].value);     }jQuery提供遍历方式:each()方法；以每一个元素作为上下文执行函数；每次执行传递进来的函数时，函数中的this关键字指向一个不同的DOM元素(每次都是一个不同的匹配元素)。返回值是boolean类型，false停止循环；true进行下一个循环。divs.each(function (){    var obj=$(this);    alert(obj.val()+"\n"+obj.html());    //val方法返回obj的value值；html返回标签内容；相当于innerHTML   return false；//跳出循环})

3、class选择器：$(“.class”)类似于document.getElementsByClassName(“.class”)

4、选择器 $(““) 匹配所有元素，多用于结合上下文搜索。不常用

5、多种选择器叠加；使用”,”分隔 $(“#id,div,.class”)返回数组

7.2.2 层次、属性选择器

名称 语法 描述 后代选择器 $(“form input”) 返回form元素下匹配所有的input元素 子选择器 $(“form>input”) 返回form元素下直接子节点input元素 相邻元素选择器 $(“form+input”) 返回紧邻form元素后同辈的input元素 同辈元素选择器 $(“form~input”) 返回form元素后所有同辈的input元素 语法 描述 [attr] a[class] 含有class属性的a元素 [attr=value] a[class=hot] 含有class属性值为hot的a元素 [attr!=value] a[class=!hot] 含有class属性值不为hot的a元素 [attr^=value] a[href^=’www’] 含有href属性值以www开头的元素 [attr=value]|a[href=’html’] 含有href属性值以html结尾的元素 [attr*value] a[href*=k2’] 含有href属性值包含k2的元素

7.2.3 过滤选择器

语法 描述 :first/:last 选取第一个/最后一个元素 :not(selector) li:not(.three)选取class不是three的li元素 :even/:odd 选取索引是偶数/奇数的所有元素 :eq/gt/lt(index) 选取索引等于/大于/小于索引的元素 :header 选取所有标题元素 :focus 选取当前获取焦点的元素 :animated 选取当前所有动画元素 :visible 选取所有可见元素 :hidden 选取所有隐藏的元素

7.2.4 表单选择器

方法名 描述 :input 选取所有 input、textarea、select 和 button 元素 :text :password 选择所有单行文本框、密码框，即 type=text/password :radio :checkbox 选择所有单选框、复选框，即 type=radio/CheckBox :submit :reset 选取所有提交按钮、重置按钮，即 type=submit/reset :image :button 选取所有图像按钮或按钮，即 type=image/button :file 选择所有文件按钮，即 type=file :hidden 选取所有不可见字段，即type=hidden :enabled :disabled 选取所有可用元素或不可用元素 :checked 选取所有被选中的元素，单选和复选字段 :selected 选取所有被选中的元素，下拉列表

7.3 jQuery操作DOM

7.3.1基础 DOM 和 CSS 操作

方法名 描述 html() 获取元素中 HTML 内容，获取内容包含HTML标签 html(value) 设置元素中 HTML 内容，替换HTML内容 text() 获取元素中文本内容，自动解析清理HTML标签， text(value) 设置元素中文本内容，替换文本内容，如有HTML自动转义 val() 获取表单中的文本内容 val(value) 设置表单中的文本内容 attr(key) 获取某个元素 key 属性的属性值 attr(key, value) 设置某个元素 key 属性的属性值 attr({key1:value2, key2:value2…}) 设置某个元素多个 key 属性的属性值 attr(key, function (index, value) {}) 设置某个元素 key 通过 function 来设置

//如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作$("input").val(["男","check2", "radio1" ]);//value 值是这些的将被选定

方法名 描述 css([name1, name2, name3]) 获取某个元素行内多个 CSS 样式 css(name, value) 设置某个元素行内的 CSS 样式 css(name, function (index, value) ) 设置某个元素行内的 CSS 样式css css({name1 : value1, name2 : value2}) 设置某个元素行内多个 CSS 样式 addClass(class1 class2 class3…) 给某个元素添加多个 CSS 类 removeClass(class1 class2 class3…) 删除某个元素的多个 CSS 类 toggleClass(class1 class2 class3…) 来回切换默认样式和指定样式 toggleClass(class, switch) 来回切换样式的时候设置切换频率 toggleClass(function () {}, switch) 在匿名函数设置时也可以设置频率 toggleClass(function (i, c, s) {}, switch) 在匿名函数设置时传递三个参数

在CSS获取时可以获取多个CSS样式，而获取到的是一个对象数组，传统方式解析需要使用 for in 遍历var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象for (var i in box) {       alert(i + ':' + box[i]);//逐个遍历出来}jQuery提供了$.each()方法专门用来处理JavaScript原生对象数组，这个方法可以轻松的遍历对象数组。$.each(box, function (attr, value) {       alert(attr + ':' + value);//遍历 JavaScript 原生态的对象数组});jQuery 对象的数组使用.each()方法：$('div').each(function (index, element) {   //index 为索引，element 为元素 DOM      alert(index + ':' + element);});默认的 CSS 类切换只能是无样式和指定样式之间的切换，如果想实现样式 1 和样式 2之间的切换还必须自己写一些逻辑。$('div').click(function () {        $(this).toggleClass('red size'); //一开始切换到样式 2        if ($(this).hasClass('red')) { //判断样式 2 存在后                $(this).removeClass('blue'); //删除样式 1        } else {                $(this).toggleClass('blue'); //添加样式 1，这里也可以 addClass   }});$('strong').offset().left; //相对于视口的偏移$('strong').position().left; //相对于父元素的偏移$(window).scrollTop(); //获取当前滚动条的位置$(window).scrollTop(300); //设置当前滚动条的位置

方法名 描述 width/height() 获取某个元素的长度、高度 width/height(value) 设置某个元素的长度、高度 width/height(function (index, width) {}) 通过匿名函数设置某个元素的长度 innerWidth() 获取元素宽度，包含内边距 padding innerHeight() 获取元素高度，包含内边距 padding outerWidth() 获取元素宽度，包含边框 border 和内边距 padding outerHeight() 获取元素高度，包含边框 border 和内边距 padding outerWidth/outerHeight(ture) 同上，且包含外边距 offset() 获取某个元素相对于视口的偏移位置 position() 获取某个元素相对于父元素的偏移位置 scrollTop/scrollLeft() 获取垂直/水平滚动条的值 scrollTop/scrollLeft(value) 设置垂直/水平滚动条的值

7.3.2 DOM节点操作

方法名 描述 append/prepend(content) 向指定元素内部后面/前面插入节点 content appendTo/prependTo(content) 将指定元素移入到指定元素 content 内部后面/后面 after、before(content) 向指定元素的外部后面、前面插入节点 content insertAfter、insertBefore(content) 将指定节点移到指定元素 content 外部的后面、前面 wrap(html/element) 向指定元素包裹一层 html 代码/DOM对象节点 unwrap() 移除一层指定元素包裹的内容 wrapAll(html/element) 用 html/DOM节点 将所有元素包裹到一起 wrapInner(html/element) 向指定元素的子内容包裹一层 html/DOM节点 clone(true) 克隆节点，true可选，当含有true时复制事件行为 remove() 移除元素，不保留事件行为 detach() 移除元素，但是保留事件行为 empty() 移除元素节点中的内容；元素还在 replaceWith()/replaceAll() 替换元素；替换后事件行为丢失

​ 在创建或克隆一个新节点时；如 var box=$(“

节点

“);在没有使用append追加到指定元素内之前，新节点保存在内存之中。

​ 注意.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体，分别包含一层外层；后者将所有元素作为一个整体作为一个独立体，只包含一层外层。这两种都是在外层包含，而.wrapInner()在内层包含。.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。

7.4 jQuery事件对象

7.4.1 基础事件

方法名 描述 click/dblclick(fn) 触发每一个匹配元素的 click(单击)/dblclick(双击)事件 mousedown/mouseup(fn) 触发每一个匹配元素的 点击后、点击后弹起事件 mouseover/mouseenter(fn) 触发每一个匹配元素的鼠标移入、鼠标穿过事件 mouseout/mouseleave(fn) 触发每一个匹配元素的鼠标移出、鼠标穿出事件 mousemove(fn) 触发每一个匹配元素的 mousemove(鼠标移动)事件 keydown/keyup(fn) 触发每一个匹配元素的键盘按下、键盘按下弹起事件 keypress(fn) 触发每一个匹配元素的 keypress(键盘按下)事件 resize(fn) 触发每一个匹配元素的 resize(文档改变大小)事件 scroll(fn) 触发每一个匹配元素的 scroll(滚动条拖动)事件 focus/blur、focusin/focusout(fn) 触发每一个匹配元素的焦点激活、丢失事件 select/change(fn) 触发每一个匹配元素的文本选定、文本值改变事件 submit(fn) 触发每一个匹配元素的 submit(表单提交)事件 hover([fn1,]fn2) 当鼠标移入触发第一个 fn1，移出触发 fn2 toggle(fn1,fn2[,fn3..]) 已废弃，当鼠标点击触发 fn1,再点击触发 fn2…

鼠标移入移出的四个事件的区别：当触发事件的元素为单一元素时，没有区别；当触发事件的元素包含子元素时：.mouseenter()和.mouseleave()这组穿过子元素不会触发，而.mouseover()和.mouseout()则会触发。hover方法中封装的就是mouseenter和mouseleave方法。    .keydown()、.keyup()返回的是键码，而.keypress()返回的是字符编码。当触发方法中含有事件参数event或e时，keydown、keyup使用e.keyCode，而keypress使用e.charCode;不可互换    .focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。    .toggle()这个方法比较特殊，这个方法有两层含义，第一层含义就是已经被 1.8 版废用、1.9 版删除掉的用法，也就是点击切换复合事件的用法。第二层含义表示隐藏触发该方法的元素。既然废弃掉了，就不应该使用。如果想要使用被废弃的方法；可以下载 jquery-migrate.js文件，来向下兼容已被删除掉的方法；也可以使用1.8版本的js文件。    由于官方已经删除掉这个方法，所以也是不推荐使用的，可以通过以下方法实现这个功能。      var flag = 1; //计数器      $('div').click(function () {          if (flag == 1) { //第一次点击            $(this).css('background', 'black');            flag = 2;          } else if (flag == 2) { //第二次点击            $(this).css('background', 'blue');            flag = 3          } else if (flag == 3) { //第三次点击            $(this).css('background', 'red');            flag = 1          }      });

7.4.2 事件对象

​ JavaScript 在事件处理函数中默认传递了 event 对象，也就是事件对象。但由于浏览器的兼容性，开发者总是会做兼容方面的处理。jQuery 在封装的时候，解决了这些问题，并且还创建了一些非常好用的属性和方法。

属性名 描述 type 获取这个事件的事件类型，例如：click target 获取绑定事件的 DOM 元素 data 获取事件调用时的额外数据 relatedTarget 获取移入移出目标点离开或进入的那个 DOM 元素 currentTarget 获取冒泡前触发的 DOM 元素，等同与 this pageX/pageY 获取相对于页面原点(浏览器左上角)的水平/垂直坐标 result 获取上一个相同事件的返回值 timeStamp 获取事件触发的时间戳 which 获取鼠标的左中右键(1,2,3)，或获取键盘按键 preventDefault() 取消某个元素的默认行为 isDefaultPrevented() 判断是否调用了 preventDefault()方法 stopPropagation() 取消事件冒泡 isPropagationStopped() 判断是否调用了 stopPropagation()方法 stopImmediatePropagation() 取消事件冒泡，并取消该事件的后续事件处理函数 isImmediatePropagationStopped() 判断是否调用了stopImmediatePropagation()方法

通过 event.data 获取额外数据，可以是数字、字符串、数组、对象$('input').bind('click', 123, function () { //传递 data 数据    alert(e.data); //获取数字数据});    /*注意：如果字符串就传递：'123'、如果是数组就传递：[123,'abc']，如果是对象就传递：{user : 'Lee', age : 100}。数组的调用方式是：e.data[1]，对象的调用方式是：e.data.user。event.data 获取额外数据，对于封装的简写事件也可以使用*/$('input').click({user : 'Lee', age : 100},function (e) {    alert(e.data.user);});键值对的键可以加上引号，也可以不加；在调用的时候也可以使用数组的方式：alert(e.data['user']);    注意：event.target 得到的是触发元素的 DOM，event.currentTarget 得到的是监听元素的DOM。而 this 也是得到监听元素的 DOM。    如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。触发的顺序是从小范围到大范围;这就是所谓的冒泡现象，一层一层往上。    注意：如果想让上面的超链接同时阻止默认行为且禁止冒泡行为，可以把两个方法同时写上： event.stopPropagation()和 event.preventDefault()。 这两个方法如果需要同时启用的时候，还有一种简写方案代替，就是直接 return false。