jQuery
一、jQuery的介绍
1.1 jQuery的遗留问题
-
window.onload事件只可以出现一次，重复出现会覆盖前面的
-
代码容错性差，前面代码出错后面也不会继续执行
-
浏览器兼容性问题
-
简单功能实现复杂化
1.2 什么是JQuery
-
jQuery是JS的一个库，封装我开发过程中常用的一些功能，方便调用，提高开发效率
-
主要学习JQuery封装API
1.3 jQuery的两大特点
-
链式编程
$('div').hide().text('内容')-
原理 return this
-
$('div').hide() 返回的还是$('div')
-
-
隐式迭代：方法内部会为匹配到的所有元素进行循环遍历，执行相应的方法
1.4 jQuery的使用
-
引入（引包）
-
入口函数
-
功能代码的实现
1.4.1 版本
-
1.x 版本：最新版 v1.11.3 兼容IE678 不兼容新特性
-
2.x 版本：最新版v2.1.4 不兼容IE678 不兼容新特性
-
3.x版本： 最新版v3.6.3 不兼容IE678 兼容新特性
二、jQuery的入口函数和$符
2.1入口函数
-
原生javascript的入口函数是：window.onload = function(){}
-
jQuery的入口函数：
-
$(document).ready(function(){}) -
$(function(){})
-
2.2jQuery的$符
-
jQuery使用$的原因：书写简洁，相对于其他字符与众不同，容易记
-
jQuery占用了两个变量：$和jQuery;
-
$和jQuery被称为jQuery顶级对象；
2.2.1jQuery入口函数和原生javaScript入口函数的区别
-
区别一：书写方式不同
-
原生的入口函数只能出现一次，出现多次会存在事件覆盖的问题；
-
jQuery的入口函数，可以出现任意次，并不存在覆盖；
-
-
区别二：执行时机不同
-
JavaScript入口函数是在所有文件资源加载完毕后执行，这些文件资源包括：页面文档，外部的js文件，外部的css文件、图片、视频等；
-
2.3 DOM对象和jQuery对象的比较
2.3.1区别
-
jQuery 获取的是一个数组 数组中包含原生JS的DOM对象
2.3.2 DOM对象与jQuery对象之间的转换
-
DOM对象为jQuery对象
-
$(DOM对象)
-
-
jQuery对象转换为DOM对象
-
jQuery对象[index] -
jQuery对象.get(index)
-
三、jQuery选择器
3.1jQuery的基本选择器
-
语法 说明 用法 $('#idName')选择id为指定值的第一个元素 $('#container').text()$('.container')选择所有类名指定值的元素 $('.container').css()$('element')选择所有标签为指定值的元素 $('div').text()$('*')选择所有元素 $('*').css('padding',0).css('margin',0)$('.container')选择多个指定元素
3.2层次选择器
-
语法 说明 用法 后代选择器 空格 $('div span')子代选择器 > $('div>span')紧邻选择器 + $('div+span')兄弟选择器 ~ $('div~span')
3.3基本过滤选择器
-
语法 说明 用法 eq(index) index是从0开始的索引，选择索引号为index的元素 $('div:eq(2)')gt(index) 选择序号大于index的元素 $('div:gt(3)')It(index) 选择序号小于index的元素 $('div:It(2)'):odd 选择奇数的所有索引 $('div:odd'):even 选择偶数的所有索引 $('div:even'):first 选择匹配第一个元素 $('div:first'):last 选择匹配最后一个索引 $('div:last')
3.4属性选择器
-
符号 说明 用法 $('a[href]')选择所有包含href属性的a元素 $('a[href]')$('a[href = "ele"]')选择所有包含href = 指定值的元素 $('a[href = "one"]')$('a[href != "baidu"]')选择所有href属性不等于daidu的元素，包含没有href属性的元素 $('a[href != "baidu"]')$('a[href ^="b"]')选择所有href值以b开头的元素 $('a[href ^="b"]')$('a[href $="u"]')选择所有href值中以u结尾的元素 $('a[href $="u"]')$('a[href *= "i"]')选择所有href值中包含i的元素 $('a[href *= "i"]')$('a[href][title = "ele"]')选择所有符合指定属性规则的元素，都符合才会被选中 $('a[href][title = "ele"]')
3.5筛选选择器
-
符号 说明 用法 find(selector)查找指定元素的所有后代元素，参数必填 $('.box').find('span')children()查找指定元素的子代元素 $('.box').children()siblings()查找所有的兄弟元素（不包含自身） $('.box').siblings()parent()查找父元素 $('.box').parent()eq(index)查找指定元素的第index元素 $('.box').eq(index)parents(selector)获取指定的祖代 next()获取当前元素的下一个兄弟 nextAll()获取当前元素的后面所有的兄弟 prev()获取当前元素的上一个兄弟 prevAll()获取当前元素的上面所有兄弟 filter()获取当前元素 not()获取除了当前元素的所有兄弟
四、jQuery常用的API
4.1样式操作和类操作
4.1.1样式操作
-
设置样式
-
$('div').click(function(){ //$('div').css('backgroundColor','pink').css('height','300') $('div').css({ 'backgroundColor':'salmon', 'height':'400' }) }) //传递 json
-
-
获取样式
-
获取单个
-
$('ele').css('样式名')
-
-
获取多个
-
$('ele').css('样式1'，'样式2'，···)
-
-
4.1.2类操作
-
添加类样式
-
$('selector').addClass('className')
-
-
移除类样式
-
$('selector').removeClass('className')
-
-
判断有没有样式
-
$('selector').hasClass('className')
-
-
切换类样式
-
$('selector').toggleClass('className')
-
4.1.3样式操作和类操作的比较
-
操作的样式非常少，那么可以通过.css()来实现；
-
操作的样式很多，通过class类操作来表现；
-
如果考虑以后维护方便，建议使用类的方式进行；
4.2动画
4.2.1显示隐藏动画
-
$('div').show()-
无参数，表示让指定的元素直接显示出来，这个方法的原理是通过display：'block'，来实现的；
-
-
$('div').show(speed,callback) -
$('div').hide()-
参数同上；
-
-
$('div').toggle()
4.4.2滑入滑出
-
$('div').slideDown(speed,callback); -
$('div').slideUp(speed,callback); -
`$('div').slideToggle(speed,callback);-
参数同上；
-
4.4.3淡入淡出
-
$('div').fadeIn(speed,callback); -
$('div').fadeOut(speed,callback);
4.2.4自定义动画
-
$('div').animate({params},speen,callback); -
执行一组css属性的自定义画面；
-
第一个参数表示：要执行动画的css属性，必填；
-
第二个参数表示：执行动画的时长，选填；
-
第三个参数表示：动画执行完后，立即执行的回调函数，选填
-
4.2.5停止动画
-
$('div').stop(boo,boo); -
第一个参数：
-
true：后续动画不执行
-
false：后续动画会执行
-
-
第二个参数：
-
true：立即执行完当前画面
-
false：立即停止当前画面
-
-
stop方法的总结
-
当调用stop()方法后，队列里面下一个动画将会立即开始，但是可如果第一个参数被设置为true，那么队列里面剩余的动画就会被删除，并且永远不会执行；
-
如果第二个参数设置为true，那么当前画面会停止，但是参与画面的每一个css属性，将被立即设置为他们的目标值；
-
4.3jQuery属性操作
4.3.1设置或获取元素的固有属性
-
所谓元素固有属性就是元素本身自带的属性，比如
<a href=""></a>元素里的href就是固定属性 -
获取属性的方法
-
$('div').prop('属性名')
-
-
设置属性的方法
-
$('div').prop('属性名','属性值')
-
4.3.2设置或获取元素自定义属性
-
用户自己给元素添加的属性，我们称之为自定义属性；
-
获取属性的方法
-
$('div').attr('属性名')
-
-
设置属性的方法
-
$('div').attr('属性名','属性值')
-
4.4jQuery内容文本
4.4.1普通元素内容
-
$('div').html-
不加参数，是获取元素内容
-
加参数，是设置元素内容
-
4.4.2普通元素文本内容
-
$('div').text()-
不加参数，获取元素内容
-
加参数，是设置元素的文本内容
-
4.4.3表单的val()值
-
$('input').val()-
不加参数，获取表单内容
-
加参数，设置表单内容
-
4.5元素操作
4.5.1遍历元素
-
jQuery隐式迭代是对同一种元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用到遍历；
-
语法1：
-
$('div').each(function(index,ele){})-
eash()方法遍历匹配的每一个元素，主要用DOM处理；
-
里面的回调函数有两个参数：index是索引，ele是每个DOM元素，不是jQuery对象
-
要想使用jQuery方法，需要把这个DOM元素转换为jQuery对象，
$(ele)
-
-
-
语法2：
-
$.each('div',function(index,ele){})-
$each()方法遍历任何对象，主要用于数据处理，比如数组、对象；
-
-
4.5.2创建元素
-
$('<div></div>')
4.5.3添加元素
-
内部添加
-
$('div').append():内容放在指定元素内的最后面； -
$('div').prepend():内容放在指定元素内的最前面；
-
-
外部添加
-
$('div').after():内容放在指定元素的最后面； -
$('div').before():内容放在指定元素的最前面； -
外部添加，生成之后，他们是兄弟关系；
-
4.5.4删除元素
-
$('div').remove():删除匹配的元素(自身)； -
$('div').empty():清空指定元素中的所有节点； -
$('div').html()：清空指定元素中的所有节点，与empty方法相同，但是他可以设置内容；
4.6尺寸位置
4.6.1尺寸
| 语法 | 用法 |
|---|---|
| width() height() | 获取元素的宽高，只包含width和height |
| innerWidth() innerHeight() | 获取元素的宽高，包含padding |
| outerWidth() outerHeight() | 获取元素的宽高，包含padding、boeder |
| outerWight(true) outerHeight(true) | 获取元素的宽高，包含padding、border和margin |
-
以上参数，为空时，则获取相应值，返回的是数值型；
-
参数不为空时，这是设置相应的数值；
-
参数不能写单位；
4.6.2位置
-
offset，设置或获取元素偏移-
offset()方法，设置或返回指定元素相对于文档的偏移坐标，跟父级没有关系；
-
该方法有一个参数，是一个对象，这个对象有两个属性，一个是top，一个是left；
-
-
position，获取元素偏移-
position()方法用于返回指定元素相对于带有定位的父级的坐标偏移，如果父级没有定位，则以body；
-
同上；
-
-
scrollTop，设置或获取元素被卷进去的头部-
设置或返回元素被卷去的头部；
-
4.7事件
4.7.1事件注册
-
$('div').事件(function(){})`
4.7.2事件处理
-
划过
-
$('div').hover(function() {})
-
①事件处理on()绑定事件
-
on()方法在指定元素上绑定一个或绑定多个事件的事件处理函数；
-
语法：
-
$('div').on(events，[selector]，callback) -
events：表示事件类型，多个事件可以用空格隔开；
-
selector：是指定元素的事件委托给子元素，选填；
-
callback：回调函数；
-
②on方法的优势1：
-
可以绑定多个事件，多个事件处理程序；
-
$('button').on('click',function(){ console.log($(this).text()); }); $('button').on({ click: function() { console.log('点击了'); }, mouseleave: function() { console.log('移出了'); } });
-
③on方法的优势2：
-
可以事件委派操作。事件委派的定义是：把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素；
-
$('ul').on('click', 'li', function() { console.log($(this).text()); });
-
④on方法的优势3：
-
动态创建的元素，click()无法绑定事件。
-
$('ul').on('click', 'li', function() { console.log($(this).text()); }); $('button').click(function() { $('ul').append('<li>这是隐藏的li</li>') });
-
4.7.3解绑事件
-
off()方法可以移除通过on方法添加事件和事件注册的事件
-
$('div').off()：移除指定元素身上所有事件； -
$('div').off('事件1 事件2')：移除指定元素身上的指定事件，可以是多个； -
$('div').off('事件1'，'事件2')：移除事件委托；
-
-
one()方法可以移出on方法添加事件和事件注册的事件
-
$('div').one('事件1 事件2')：一次性事件，只执行一次；
-
4.7.4自动(禁止)触发
-
$('button').click(); -
$('button').trigger('click'); -
$('button').triggerHandler('click'); -
禁止触发右键
-
$('button').contextmenu(function() {})
-
4.7.4 事件委托
-
$(e.target)
4.7.5. 事件集合
| 事件 | 说明 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover / onmouseenter | 鼠标经过触发 |
| onmouseout onmouseleave | 鼠标离开触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
| onfocus | 聚集时触发 |
| onblur | 失焦时触发 |
| dbclick | 双击 |
| mouseover | 移入 |
| mouseout | 移出 |
| mousemove | 移动 |
| mouseleave | 移出 |
| mouseenter | 移入 |
| change | input |
| input | input |
| focus | 聚焦 |
| blur | 失焦 |
| mouseUp | 鼠标抬起 |
| mousedown | 鼠标按下 |
| keyUp | 键盘抬起 |
| keydown | 键盘按下 |
| keypress | 键盘 |
| load | 预加载 |
| resize | 窗口变化 |
| scroll | 滚动 |
| contextmenu | 鼠标右键 |
4.8 jQ封装
-
let p = new Promise((res, rej) => { res(); rej(); }).then((res) => { console.log(1) }).catch((err) => { console.log(2) })
可能会有丢丢的不全，不要嫌弃，差不多就算这样的
1780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
