jQuery基本概念
学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果。
为什么要学习jQuery?
【01-让div显示与设置内容.html】
使用javascript开发过程中,有许多的缺点:
1 | 1. 查找元素的方法太少,麻烦。 |
jQuery初体验
【02-让div显示与设置内容.html】
1 | $(document).ready(function () { |
优点总结:
1 | 1. 查找元素的方法多种多样,非常灵活 |
没有对比,就没有伤害,有了对比,处处戳中要害。
什么是jQuery?
jQuery的官网 http://jquery.com/
jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。
js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)
我们知道了,jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。
jQuery的版本
官网下载地址:http://jquery.com/download/
jQuery版本有很多,分为1.x 2.x 3.x
大版本分类:
1 | 1.x版本:能够兼容IE678浏览器 |
关于压缩版和未压缩版
1 | jquery-1.12.4.min.js:压缩版本,适用于生产环境,因为文件比较小,去除了注释、换行、空格等东西,但是基本没有颗阅读性。 |
jQuery的入口函数
使用jQuery的三个步骤:
1 | 1. 引入jQuery文件 |
关于jQuery的入口函数:
1 | //第一种写法 |
jQuery入口函数与js入口函数的对比
1 | 1. JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。 |
jQuery对象与DOM对象的区别(重点)
1 | 1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。 |
DOM对象转换成jQuery对象:【联想记忆:花钱】
1 | var $obj = $(domObj); |
jQuery对象转换成DOM对象:
1 | var $li = $(“li”); |
【练习:隔行变色案例.html】
选择器
什么是jQuery选择器
jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。
jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】
jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
基本选择器
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $(“#id”); | 获取指定ID的元素 |
类选择器 | $(“.class”); | 获取同一类class的元素 |
标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”); | 使用逗号分隔,只要符合条件之一就可。 |
交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
总结:跟css的选择器用法一模一样。
层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $(“ul>li”); | 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
跟CSS的选择器一模一样。
过滤选择器
这类选择器都带冒号:
名称 | 用法 | 描述 |
---|---|---|
:eq(index) | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为偶数的元素 |
【案例:隔行变色】
筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
名称 | 用法 | 描述 |
---|---|---|
children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”),子类选择器 |
find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点,不包括自己本身。 |
parent() | $(“#first”).parent(); | 查找父亲 |
eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
next() | $(“li”).next() | 找下一个兄弟 |
prev() | $(“li”).prev() | 找上一次兄弟 |
1 | 【案例:下拉菜单】this+children+mouseenter+mouseleave |
jQuery特殊属性操作
val方法
val方法用于设置和获取表单元素的值,例如input、textarea的值
1 | //设置值 |
【案例:京东搜索.html】
html方法与text方法
html方法相当于innerHTML text方法相当于innerText
1 | //设置内容 |
区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。
width方法与height方法
设置或者获取高度
1 | //带参数表示设置高度 |
获取网页的可视区宽高
1 | //获取可视区宽度 |
scrollTop与scrollLeft
设置或者获取垂直滚动条的位置
1 | //获取页面被卷曲的高度 |
【案例:仿腾讯固定菜单栏案例】
【案例:小火箭返航案例】
offset方法与position方法
offset方法获取元素距离document的位置,position方法获取的是元素距离有定位的父元素的位置。
1 | //获取元素距离document的位置,返回值为对象:{left:100, top:100} |
jQuery事件机制
JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件的处理能力。
jQuery事件发展历程(了解)
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
简单事件注册
1 | click(handler) 单击事件 |
缺点:不能同时注册多个事件
bind方式注册事件
1 | //第一个参数:事件类型 |
缺点:不支持动态事件绑定
delegate注册委托事件
1 | // 第一个参数:selector,要绑定事件的元素 |
缺点:只能注册委托事件,因此注册时间需要记得方法太多了
on注册事件
on注册事件(重点)
jQuery1.7之后,jQuery用on统一了所有事件的处理方法。
最现代的方式,兼容zepto(移动端类似jQuery的一个库),强烈建议使用。
on注册简单事件
1 | // 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。 |
on注册委托事件
1 | // 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定 |
on注册事件的语法:
1 | // 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件) |
事件解绑
unbind方式(不用)
1 | $(selector).unbind(); //解绑所有的事件 |
undelegate方式(不用)
1 | $( selector ).undelegate(); //解绑所有的delegate事件 |
off方式(推荐)
1 | // 解绑匹配元素的所有事件 |
触发事件
1 | $(selector).click(); //触发 click事件 |
jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装,处理了兼容性。
1 | //screenX和screenY 对应屏幕最左上角的值 |
【案例:钢琴版导航(加强).html】
jQuery补充知识点
链式编程
通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 jQuery对象。
1 | end(); // 筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态。 |
【案例:五角星评分案例.html】
each方法
jQuery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了。
作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数
1 | // 参数一表示当前元素在所有匹配元素中的索引号 |
【案例:不同的透明度.html】
多库共存
jQuery使用$作为标示符,但是如果与其他框架中的$冲突时,jQuery可以释放$符的控制权.
1 | var c = $.noConflict();//释放$的控制权,并且把$的能力给了c |
插件
常用插件
插件:jquery不可能包含所有的功能,我们可以通过插件扩展jquery的功能。
jQuery有着丰富的插件,使用这些插件能给jQuery提供一些额外的功能。
jquery.color.js
animate不支持颜色的渐变,但是使用了jquery.color.js后,就可以支持颜色的渐变了。
使用插件的步骤
1 | 1. 引入jQuery文件 |
jquery.lazyload.js
懒加载插件
jquery.ui.js插件
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API:http://api.jqueryui.com/category/all/
其他教程:jQueryUI教程
基本使用:
1 | 2. 1. 引入jQueryUI的样式文件 |
使用jquery.ui.js实现新闻模块的案例
制作jquery插件
原理:jquery插件其实说白了就是给jquery对象增加一个新的方法,让jquery对象拥有某一个功能。
1 | //通过给$.fn添加方法就能够扩展jquery对象 |
制作手风琴插件