一、jQuery概述
1、JavaScript库
1.1、概述
是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。
简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
2、jQuery
2.1、概述
jQuery 是一个快速、简洁的 JavaScript 库,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质: 就是学习调用这些函数(方法)。
jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。
2.2、优点
轻量级。文件小,不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持,大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等
免费、开源
二、jQuery基本使用
1、下载
官网地址: jQuery
2、jQuery的入口函数
$(function () {
... // 此处是页面 DOM 加载完成的入口(推荐)
}) ;
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装
相当于原生 js 中的 DOMContentLoaded
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码
3、jQuery的顶级对象
$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $
$ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用jQuery 的方法
4、jQuery 对象和 DOM 对象
用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。
只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。
DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
DOM对象转换为jQuery对象:$('DOM对象')
$('div')
jQuery对象转换为DOM对象(两种方式)
$('div')[index] index是索引号
$('div').get(index) index是索引号
三、jQuery常用的API
1、选择器
名称 | 用法 | 描述 |
id选择器 | $("#id") | 获取指定id的元素 |
全选选择器 | $("*") | 匹配所有元素 |
类选择器 | $(".class") | 获取相同class的元素 |
标签选择器 | $("div") | 获取相同标签的元素 |
并集选择器 | $("div,p,a") | 选取多个元素 |
交集选择器 | $("li.current") | 交集元素 |
子代选择器 | $("ul>li") | 获取亲儿子 |
后代选择器 | $("ul li") | 获取后代的所有元素 |
$('选择器') // 里面选择器直接写 CSS 选择器即可,但是要加引号
2、 隐式迭代(重要)
遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代
简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法
3、筛选选择器
语法 | 用法 | 描述 |
:first | $("li:first") | 获取第一个li元素 |
:last | $("li:last") | 获取最后一个li元素 |
:eq(index) | $("li:eq(2)") | 获取索引号为2的li元素 |
:odd | $("li:odd") | 获取索引号为奇数的li元素 |
:even | $("li:even") | 获取索引号为偶数的li元素 |
4、筛选方法
语法 | 用法 | 说明 |
parent() | $("li").parent() | 查找父级 |
children(selector) | $("ul").children("li") | 查找亲儿子 |
find(selector) | $("ul").find("li") | 相当于后代选择器 |
siblings(selector) | $(".first").siblings("li") | 查找兄弟元素,不包括自己 |
eq(index) | $("li").eq(2) | 查找索引号为2的元素 |
nextAll([expr]) | $(".first").nextAll() | 查找当前元素之后所有的同辈元素 |
prevtAll([expr]) | $(".last").prevtAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $("div").hasClass("protected") | 检查当前元素是否含有某个特定的类,有返回true,否则返回false |
5、排他思想
//想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
$(this).css('color','red');
$(this).siblings(). css('color','');
6、链式编程
$(this).css('color', 'red').sibling().css('color', '');
7、jQuery样式操作
7.1、操作css方法
// 参数只写属性名,则是返回属性值
$(this).css('color');
// 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css('color', 'red');
// 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号,
$(this).css({ "color":"white","font-size":"20px"});
7.2、设置类样式方法
// 添加类
$('div').addClass('current');
// 移除类
$('div').removeClass('current'); $('div').removeClass()
// 切换类
$('div').toggleClass('current');
8、jQuery效果
8.1、显示、隐藏、切换效果
show([speed,[easing],[fn]]) // 显示
hide([speed,[easing],[fn]]) // 隐藏
toggle([speed,[easing],[fn]]) // 切换
参数都可以省略, 无动画,直接显示。
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
8.2、滑动效果
slideDown([speed,[easing],[fn]]) // 下滑
slideUp([speed,[easing],[fn]]) // 上滑
slideToggle([speed,[easing],[fn]]) // 切换
(1)参数都可以省略。(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
8.3、事件切换
hover([over,]out)
(1)over:鼠标移到元素上要触发的函数(相当于mouseenter)(2)out:鼠标移出元素要触发的函数(相当于mouseleave)(3)如果只写一个函数,则鼠标经过和离开都会触发它
8.4、动画队列及其停止排队方法
(1)动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
stop() //停止排队
stop() 方法用于停止动画或效果。
注意: stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。
8.5、淡入淡出效果
fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
fadeTo([[speed],opacity,[easing],[fn]]) // 渐进方式调整到指定的不透明度
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
opacity 透明度必须写,取值 0~1 之间。
8.7、 自定义动画 animate
animate(params,[speed],[easing],[fn])
params: 想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”
fn: 回调函数,在动画完成时执行的函数,每个元素执行一次
9、jQuery属性操作
9.1、设置或获取元素固有属性值 prop()
// 获取属性值
prop("属性名")
// 设置属性值
prop("属性名","属性值")
9.2、设置或获取元素自定义属性值 attr()
// 获取属性语法
attr("属性名") // 类似原生 getAttribute()
// 设置属性语法
attr("属性名", "属性值") // 类似原生 setAttribute()
9.3、数据缓存 data()
// 附加数据语法
data("name","value") // 向被选元素附加数据
// 获取数据语法
date("name") // 向被选元素获取数据
data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。
同时,还可以读取 HTML5 自定义属性 data-index ,得到的是数字型
10、jQuery文本属性值
10.1、元素的内容
普通元素内容html()(相当于原生innerHTML)
html() // 获取元素的内容
html('内容') // 设置元素的内容
普通元素文本内容text() (相当与原生innerText)
text() // 获取元素的文本内容
text('文本内容') // 设置元素的文本内容
10.2、表单的值
表单的值val()(相当于原生value)
val() // 获取表单的值
val('内容') // 设置表单的值
11、jQuery元素操作
11.1、遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历。
$("div").each(function (index, domEle) { xxx; })
each() 方法遍历匹配的每一个元素。主要用DOM处理。
里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象,不是jquery对象
$.each(object,function (index, element) { xxx; })
$.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容
11.2、创建元素
varli=$('<li> 123 </li>'); // 动态的创建了一个 <li>
11.3、 添加元素
// 内部添加元素,生成之后,它们是父子关系
element.append('内容') // 把内容放入匹配元素内部最后面,类似原生 appendChild。
element.prepend('内容') // 把内容放入匹配元素内部最前面。
// 外部添加元素,生成之后,他们是兄弟关系
element.after('内容') // 把内容放入目标元素后面
element.before('内容') // 把内容放入目标元素前面
11.4、删除元素
element.remove() // 删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('') // 清空匹配的元素内容
remove 删除元素本身。
empt() 和 html(' ') 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。
12、jQuery尺寸、位置操作
12.1、jQuery尺寸
语法 | 用法 |
width()/height() | 取得匹配元素宽和高的值(width) |
innerWidth()/innerHeight() | 取得匹配元素宽和高的值(width + padding) |
outerWidth()/outerHeight() | 取得匹配元素宽和高的值(width + padding + border) |
outerWidth(true)/outerHeight(true) | 取得匹配元素宽和高的值(width + padding + border + margin) |
以上参数为空,则是获取相应值,返回的是数字型
如果参数为数字,则是修改相应值
参数可以不必写单位
12.2、 jQuery 位置
offset() 设置或获取元素偏移
offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
可以设置元素的偏移:offset({ top: 10, left: 30 });
position() 获取元素偏移
position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离。
该方法只能获取。
scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
scrollTop() 方法设置或返回被选元素被卷去的头部。
不跟参数是获取
参数为不带单位的数字则是设置被卷去的头部。
四、jQuery事件
1、事件注册
element.事件(function(){})
$('div').click(function(){ 事件处理程序 })
2、事件处理
element.on(events,[selector],fn)
events:一个或多个用空格分隔的事件类型,如"click"或"keydown" 。
selector: 元素的子元素选择器 。
fn:回调函数 即绑定在元素身上的侦听函数。
2.1、事件处理 on() 绑定事件
// 可以绑定一个或多个事件处理程序
$('div').on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
})
// 如果事件处理程序相同
$('div').on(“mouseovermouseout”, function() {
$(this).toggleClass(“current”)
})
// 可以事件委派操作 。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素
// 这里的this指的是 li
$('ul').on('click', 'li', function() {
alert('hello world!')
})
// 动态创建的元素,click() 没有办法绑定事件, on() 可以给动态生成的元素绑定事件
$('div').on("click","p", function(){
alert("俺可以给动态生成的元素绑定事件")
})
$("div").append($("<p>我是动态创建的p</p>"))
2.2 事件处理 off() 解绑事件
$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件
$("ul").off("click", "li"); // 解绑事件委托
2.3、one("事件名",callback())只触发事件一次
2.4、自动触发事件
// 1. 元素.事件() 会触发元素的默认行为
$("div").click();
// 2. 元素.trigger("事件") 会触发元素的默认行为
$("div").trigger("click");
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus", function() {
$(this).val("你好吗");
});
// $("input").triggerHandler("focus");