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[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。