JQuery
官方API
jQuey官网API.
Day01
1、jQuery概述
(1)JQuery是一个快速、简洁的JavaScript库,其设计的宗旨是倡导写更少的代码,做更多的事情;
j 就是javascript;Query查询,意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
jQuery封装了Javascript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法);
jQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。
(2)jQuery的优点
轻量级。核心文件才几十kb,不会影响页面加载速度;
跨浏览器兼容。基本兼容了现在主流的浏览器;
链式编程、隐式迭代;
对事件、样式、动画支持,大大简化了DOM操作;
支持插件扩展开发。有着丰富的第三方插件,例如:树行菜单、日期控件、轮播图等;
免费、开源;
2、jQuery的顶级对象$
$ 符号本质是一个函数,用$的时候,记得跟小括号。
$(document).ready(function(){}); //jQuery入口函数的第一种写法
$(function(){ //jQuery的入口函数的第二种写法
....
})
windown.load(function(){ // js入口函数
})
js函数比jQuery执行的晚一点。js会等待图片加载完成,jQuery不会等待图片加载完成就执行了。
1、$ 是jQuery的别称,在代码中可以使用jQuery代替 $,但一般使用 $;
2、 $ 是jQuery的顶级对象,相对于原生JavaScript中的window。把元素利用 $包装成jQuery对象,就可以调用jQuery的方法。
3、jQuery对象和DOM对象
1、用原生JS获取来的对象就是DOM对象;
2、jQuery方法获取的元素就是jQuery对象;
3、jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储);
3、jQuery对象只能使用jQuery方法,DOM对象则使用原生的Javascript属性和方法;
4、jQuery对象和DOM对象相互转换
DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
1、DOM对象转换为jQuery对象:$(DOM对象);
2、jQuery对象转换为DOM对象(两种方式):
方式一:$('div')[index];方法二:$('div').get(0);
5、jQuery API
1、jQuery 选择器
(1)jQuery基础选择器
原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准;
$("选择器") //里面选择器直接写CSS选择器即可,但是要加引号
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $("#id") | 获取指定ID的元素 |
全选选择器 | $("*") | 匹配所有元素 |
类选择器 | $(".class") | 获取同一类class的元素 |
标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”) | 选取多个元素 |
交集选择器 | $(“li.current”) | 交集元素 |
(2)jQuery 层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $(“ul>li”) | 使用>号,获取亲儿子层级的元素,并不会获取孙子层级的元素 |
后代选择器 | $(“ul i”) | 使用空号,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
(3)隐式迭代(遍历)
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
(4)jQuery 筛选选择器
语法 | 用法 | 描述 |
---|---|---|
:first | $(‘li:first’) | 获取第一个li元素 |
:last | $(‘li:last’) | 获取最后一个li元素 |
:eq(index) | $(“li:eq(2)”) | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始 |
:odd | $(“li:odd”) | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“li:even”) | 获取到的li元素中,选择索引号为偶数的元素 |
(5)jQuery 筛选方法
语法 | 用法 | 描述 |
---|---|---|
parent() | $(‘li’).parent() | 查找父级,返回的是 最近一级的父级元素 |
children(selector) | $(‘ul’).children(“li”) | 相当于$(“ul>li”),最近一级(亲儿子) |
find(selector) | $(“ul”).find(“li”) | 相当于$(ul li),后代选择器 |
siblings(selector) | $(".first").siblings(“li”) | 查找兄弟节点,不包括自己本身 |
nextAll([expr]) | $(".first").nextAll() | 查找当前元素之后所有的同辈元素 |
prevAll([expr]) | $(".last").prevAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $(“div”).hasClass(‘protected’) | 检查当前的元素是否含有某个特定的类,如果有,则返回true |
eq(index) | $(“li”).eq(2) | 相当于$(“li:eq(2)”),index从0开始 |
(5)jQuery 排他思想
<script>
// 1、隐式迭代 给所有按钮都绑定了点击事件
$("button").click(function () {
// 2.当前的元素变化背景颜色
$(this).css("background","pink");
// 3.其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background","");
})
</script>
(6)jQuery 链式编程
链式编程是为了节省代码量,看起来更优雅。
$(this).css("color","red").siblings().css("color","");
2、jQuery 样式操作
jQuery设置样式:
$('div').css('属性','值');
jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式。
1、参数只写属性名,则是返回属性值
$(this).css("color");
2、参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css("color","red");
3、参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号;如果属性名时复合属性,使用驼峰形式
$(this).css({"color":"white","font-size":"20px"});
(2)设置类样式方法(更常用)(注意权重问题)
作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点。
1、添加类
$("div").addClass("current");
2、移除类
$("div").removeClass("current");
3、切换类
$("div").toggleClass("current");
(3)类操作与className区别
原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作,不影响原先的类名。
3、jQuery 效果
jQuery给我们封装了很多动画效果,最为常见的如下:
3.1、 jQuery 显示隐藏效果
一般情况下,我们都不加参数直接显示隐藏就可以了。
1、显示语法规范
show([speed,[easing],[fn]])
2、显示参数
(1)参数都可以省略,无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
1、隐藏语法规范
hide([speed,[easing],[fn]])
2、隐藏参数
(1)参数都可以省略,无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
3.2 jQuery 滑动效果以及事件切换
1、上滑效果
slideUp([speed,[easing],[fn]])
2、上滑参数
(1)参数都可以省略,无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
1、下滑效果
slideDown([speed,[easing],[fn]])
2、下滑参数
(1)参数都可以省略,无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
1、滑动切换效果语法规范
slideToggle([speed,[easing],[fn]])
2、滑动切换效果参数
(1)参数都可以省略,无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
3.3 jQuery 事件切换
hover([over,]out)
3.4 jQuery 动画队列及其停止排队方法
1、动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就会造成多个动画或者效果排队执行。
2、停止排队
stop(); //写在动画前面
3.5 jQuery 淡入淡出
1、淡入效果语法规范
fadeIn([speed,[easing],[fn]])
2、淡出效果语法规范
fadeOut([speed,[easing],[fn]])
3、淡入淡出效果切换
fadeToggle([speed,[easing],[fn]])
4、淡入淡出效果
1、渐进方式调整到指定的不透明度
fadeTo([speed],opacity,[easing],[fn])
2、效果参数
(1)opacity 透明度必须写,取值0~1;
(2)speed:三种预定速度之一(“slow”,“normal” or “fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
3.6 jQuery 自定义动画 animate
1、语法
animate(params,[speed],[easing],[fn])
2、参数
(1)params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
(2)speed:三种预定速度之一(“slow”,“normal” or “fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
3.7 mouseover 和mouseenter的区别
mouseover 不论鼠标指针穿过被选元素或其子元素,都会触发这个事件;
mouseover mouseout
mouseenter 只有在鼠标指针穿过被选元素时,才会触发mouseenter事件。
mouseenter mouseleave(成对使用)
4、jQuery 属性操作
1、设置或获取元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性,比如a 元素里面的href,比如input元素里面的type
1、获取属性语法
prop("属性")
2、设置属性值
prop("属性","值")
2、设置或获取元素自定义属性值 attr()
1、获取属性语法
attr("属性")
2、设置属性值
attr("属性","值")
3、数据缓存 data()
data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新,之前存放的数据都将被移除。
5、jQuery 内容文本值
主要针对元素的内容还有表单的值操作。
1、普通元素内容 html() (html()相当于原生innerHTML)
html() //获取元素的内容
html("内容") //设置元素的内容
2、普通元素文本内容 text() (相当于原生innerText)
text() //获取元素文本内容
text("内容") //设置元素文本内容
3、表单的值 val() (相当于原生value)
val() //获取表单的值
val("内容") //设置表单的值
6、jQuery 元素操作
主要是遍历、创建、添加、删除元素操作。
6.1 遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。
语法1:
$("div").each(function(index,domEle){xxx;})
1、each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2、里面的回调函数有2个参数:index是每个元素的索引号;domEle是每个DOM元素对象,不是jQuery对象。
3、所以要想使用jQuery方法,需要给这个dom元素转换为jQuery对象$(domEle);
语法2:
$.each(object,function(index,element){xxx;});
1、$.each()方法可用于遍历任何对象。主要用于数据处理,比如数组、对象;
2、里面的函数有2个参数:index是每个元素的索引号;element 遍历内容
6.2 创建元素
1、内部添加
element.append("内容")
把内容放入匹配元素内部最后面,类似原生appendChild。
element.prepend("内容")
把内容添加并且放到内容的最前面
2、外部添加
element.after("内容") //把内容放入目标元素后面
element.before("内容") //把内容放入目标元素前面
3、删除元素
element.remove(); //删除匹配的元素(本身)
element.empty(); //删除匹配元素的子节点(孩子)
element.html(""); //删除匹配元素的子节点(孩子)
7、jQuery 尺寸、位置操作
7.1 jQuery 尺寸
语法 | 用法 |
---|---|
width()/height() | 取得匹配元素宽度和高度值 只算width/height |
innerWidth()/innerHeight() | 取得匹配元素宽度和高度值 包含padding |
outerWidth()/outerHeight() | 取得匹配元素宽度和高度值 包含 padding、border |
outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度值 包含 padding、border、margin |
7.2 jQuery 位置
位置主要有三个:offset()、position()、scrollTop()/scrollLeft()
1、offset()设置或获取元素偏移
(1)offset()方法设置或返回被选中元素相对于文档的偏移坐标,跟父级没有关系。
(2)该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离,offset().left用于获取距离文档左侧的距离。
(3)可以设置元素的偏移:offset({top:10,left:30});
2、position()获取元素偏移
(1)position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
(2)这个方法不能设置偏移
3、scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
(1)scrollTop()方法设置或返回被选元素被卷去的头部;
Day02
1、jQuery 事件注册
2、jQuery 事件处理
2.1 事件处理 on() 绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数。
语法:
element.on(event,[selector],fn);
1、events:一个或多个用空格分隔的事件类型,如“click”或“keydown”
2、selector:元素的子元素选择器
3、fn:回调函数 即绑定在元素身上的侦听函数。
on()方法的优势1:可以绑定多个事件;
on()方法的优势2:可以事件委派操作,事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素;
on()方法优势3:动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件。
2.2 事件处理 off() 解绑事件
off()方法可以移除通过on()方法添加的事件处理程序。
$("p").off() //解绑p元素所有事件处理程序
$("p").off("click") //解绑p元素上面的点击事件
$("ul").off("click","li") //解除事件委托
如果有的事件只想触发一次,可以使用one()来绑定事件。
2.3 jQuery自动触发事件
有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
element.click(); //第一种简写形式
element.trigger("type") //第二种自动触发模式
element.triggerHandle(type) //第三种自动触发模式,不会触发元素的默认行为
3、jQuery 事件对象
事件被触发,就会有事件对象的产生。
element.on(events,[selector],function(event){})
阻止默认行为:event.preventDeafault()或者return false;
阻止冒泡:event.stopPropagation()
4、jQuery 对象拷贝 extend
如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend()方法。
$.extend([deep],target,object,[objectN])
1、deep:如果设为true为深拷贝,默认为false 浅拷贝
2、target:要拷贝的目标对象
3、object:待拷贝到第一个对象的对象
4、objectN:待拷贝到第N个对象的对象
5、浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
6、深拷贝把里面的数据完全复制一份给目标对象,如果里面有不冲突的属性,会合并到一起,修改目标对象不会影响被拷贝对象。
5、jQuery 多库共存
问题概述:
jQuery使用$作为标识符,随着jQuery的流行,其他js库也会用 $作为标识符,这样一起使用会引起冲突。
客观需求:
需要一个解决方案,让jQuery和其他js库不存在冲突,可以同时存在,这就叫做多库并存。
jQuery 解决方案:
1、把里面的 $符号统一改为jQuery。比如jQuery(“div”);
2、jQuery 变量规定新的名称: $.noConflict()
var xx = $.noConflict();
6、jQuery 插件
jQuery功能比较有限,想要更复杂的特效效果,可以借助于jQuery插件完成。
注意:这些插件也是依赖于jQuery来完成的,所以必须先引入jQuery文件,因此也称为jQuery插件。
jQuery插件常用的网站:
1、jQuery 插件库 http://www.jq22.com/
2、jQuery 之家 http://www.htmleaf.com/
jQuery 插件演示:
1、瀑布流
2、图片懒加载技术(图片使用延迟加载可提高网页下载速度。它也能帮助减轻服务器负载)。当我们页面滑动到可视区域,再显示图片。
3、全屏滚动插件(fullpage.js)
gitHub:http://github.com/alvarotrigo/fullPage.js
中文翻译网站:http://www.dowebok.com/demo/2014/77/
bootstrap JS插件:
bootstrap 框架也是依赖于jQuery开发的,因此里面的js插件使用,也必须引入jQuery文件。
7、todolist案例
1、本地存储里面只能存储字符串的数据格式,把我们的数组对象转换为字符串格式JSON.stringify()
2、获取本地存储的数据,我们需要把里面的字符串数据转换为对象格式JSON.parse()