导图社区 编程基础12:jQuery编程
编程基础12:jQuery编程知识梳理,包括jQuery 介绍、jQuery 的基本使用、jQuery 选择器、jQuery 样式操作等等。
编辑于2022-11-27 21:42:47 四川省编程基础12:jQuery编程
1: jQuery 介绍
JavaScript 库
即 library,是一个封装好的特定的集合(方法和函数)
常见的JavaScript 库:jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等
jQuery的概念
jQuery 是一个快速、简洁的 JavaScript 库
把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质: 就是学习调用这些函数(方法)。
jQuery的优点
1. 轻量级。核心文件才几十kb,不会影响页面加载速度。
2. 跨浏览器兼容,基本兼容了现在主流的浏览器。
3. 链式编程、隐式迭代。
4. 对事件、样式、动画支持,大大简化了DOM操作。
5. 支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等。
6. 免费、开源。
2:jQuery 的基本使用
jQuery 的下载
jQuery的官网地址: https://jquery.com/,
版本差别
1x :兼容 IE 678 等低版本浏览器, 官网不再更新
2x :不兼容 IE 678 等低版本浏览器, 官网不再更新
3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的版本
jQuery中的顶级对象$
$是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用 $ 。
$是jQuery的顶级对象,相当于原生JavaScript中的 window
把元素利用$包装成jQuery对象,就可以调用jQuery 的方法
jQuery 对象和 DOM 对象
jQuery 方法和原生JS获取的元素是不一样的
1. 用原生 JS 获取来的对象就是 DOM 对象
2. jQuery 方法获取的元素就是 jQuery 对象。
3. jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)
只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。
jQuery 对象和 DOM 对象转换
把DOM对象转换为 jQuery 对象:$(Dom对象)
jQuery 对象转换为 DOM 对象: $('div')[0]
jQuery 对象转换为 DOM 对象:$('div').get(0)
知识铺垫
jQuery 设置样式
$('div').css('属性', '值')
jQuery 里面的排他思想
当前元素设置样式,其余的兄弟元素清除样式。
$(this).css(“color”,”red”); $(this).siblings(). css(“color”,””);
隐式迭代
遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。
页面中所有的div全部隐藏,不用循环操作:$('div').hide();
链式编程
$(this).css('color', 'red').sibling().css('color', '');
3:jQuery 选择器
基础选择器
$("#id) 获取指定D的元素
$("*") 匹配所有元素
$(".class")获取同一类class的元素
$("div") 获取同一类标签的所有元素
$("div,p, i")选取多个元素
$("li.current") 交集元素
层级选择器
$("ul>1i");使用>号,获取亲儿子层级的元素;注意,井不会获取孙子层级的元素
$("u1 1i”);使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等
筛选选择器
$("li:first") 获取第一个li元素
$("li:last") 获取最后一个li元素
$("li:eq(2)") 获取到的li元素中,选择索引号为2的元素,索引号index从0开始
$("li:odd") 获取到的li元素中,选择索引号为奇数的元素
$("li:even") 获取到的li素中,选择索引号为偶数的元素
筛选方法
4:jQuery 样式操作
操作 css 方法
参数只写属性名,则是返回属性值 :$(this).css('color');
参数是属性名,属性值,逗号分隔,是设置一组样式: $(this).css("color", "red");
参数可以是对象形式,方便设置多组样式 :$(this).css({ "color":"white","font-size":"20px"});
设置类样式方法
作用等同于以前的 classList,可以操作类样式, 注意操作类里面的参数不要加点
添加类 : $("div").addClass("current");
删除类 :$("div").removeClass("current");
切换类 :$("div").toggleClass("current");
5:jQuery 效果
显示隐藏
显示:show([speed, [easing],[fn]])
隐藏:hide([speed, [easing],[fn]])
切换显示隐藏:toggle([speed, [easing],[fn]])
参数
参数都可以省略,无动画直接显示。
speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数数
easing:(Optional) 用来指定切换效果,默认是 "swing",可用参数"linear"
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
滑入滑出
下滑:slideDown([speed,[easing],[fn]])
上滑:slideUp([speed,[easing],[fn]])
切换上滑夏欢:slideToggle([speed,[easing],[fn]])
淡入淡出
淡入:fadeIn([speed,[easing],[fn]])
淡出: fadeOut([speed,[easing],[fn]])
切换淡入淡出:fadeToggle([speed,[easing],[fn]])
渐进方式:fadeTo([[speed],opacity,[easing],[fn]])
opacity透明度必须写,取值0~1之间
参数
参数都可以省略,无动画直接显示。
speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数数
easing:(Optional) 用来指定切换效果,默认是 "swing",可用参数"linear"
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
自定义动画
animate(params, [speed],[easing], [fn])
params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法,如 borderLeft,其余参数都可以省略。
speed:三种预定速度之一的字符串("slow","normal",or "fast”)或表示动画时长的毫秒数值
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数 "linear"
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
停止动画队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
stop() 方法用于停止动画或效果。
stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画
每次使用动画之前,先调用 stop() ,在调用动画
事件切换
hover([over,]out)
over:鼠标移到元素上要触发的函数(相当于mouseenter)
out:鼠标移出元素要触发的函数(相当于mouseleave)
如果只写一个函数,则鼠标经过和离开都会触发它
6:jQuery 属性操作
元素固有属性值 prop()
获取属性 prop("属性")
设置属性 prop("属性","层性值")
元素自定义属性值 attr()
获取属性 attr("属性")
设置属性 attr("属性","层性值")
数据缓存 data()
获取数据 date("name")
附加数据 data("name","value")
7:jQuery 文本属性值
html()
普通元素内容 html(相当于原生 innerHTML)
html() 获取元素的内容
html("内容") 设置元素的内容
text()
普通元素文本内容text() (相当与原生innerText)
text() 获取元素的文本内容
text("文本内容") 设置元素的文本内容
val()
表单的值val()(相当于原生 value)
val() 获取表单的值
val("内容")设置表单的值
8: jQuery 元素操作
遍历元素 each()
DOM 遍历
语法 $("div").each(function (index domEle){xxx})
each()方法遍历匹配的每一个元素。主要用Dom处理。each每一个
里面的回调函数有2个参数: index是每个元素的索引号; demEle是每个DoM元素对象,不是jquery对象
所以要想使用 jquery方法,需要给这个dom元素转换为 jquery对象$(domEle)
数据遍历
$.each(object, function (index, element){xxx;})
$.each() 方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
里面的函数有2个参数: index是每个元素的索引; element遍历内容
创建
动态创建li标签: $(" ")
添加
内部添加
把内容放入匹配元素内部最后面 element.append("内容")
把内容放入匹配元素内部最前面 element.prepend("内容")
外部添加
把内容放入目标元素后面 element.after("内容")
把内容放入目标元素前面 element.before("内容")
删除
删除匹配的元素(本身) element.remove()
删除匹配的元素集合中所有的子节点 element.empty()
清空匹配的元素内容 element.html(")
总结
remove删除元素本身。
empty()和html()作用等价,都可以删除元素里面的内容,只不过htm还可以没置内容。
9:jQuery 尺寸、位置操作
尺寸操作
width()/height() 取得匹配元素宽度和高度值; 只算 width/ height
innerWidth()/innerHieght() 取得匹配元素宽度和高度值; 包含 padding
outerWidth()/outerHeight() 取得匹配元素宽度和高度值; 包含 padding、 border
outerWidth(true)/outerHeight(true) 取得匹配元素宽度和高度值;包含 padding、borde、margin
使用
参数为空,则是获取相应值,返回的是数字型
如果参数为数字,则是修改相应值
参数可以不必写单位。
位置操作
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() 方法设置或返回被选元素被卷去的头部
不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部
10:jQuery 事件
事件注册
element.事件名称(function(){})
事件处理
on(): 用于事件绑定
可以绑定多个事件,多个处理事件处理程序。
可以事件委派操作
动态创建的元素
$(div)on({ mouseover: function(){}, mouseout: function(){}, click: function(){} });
off(): 事件解绑
off()方法可以移除通过on()方法添加的事件处理程序
trigger() / triggerHandler() :自动触发事件
elment.trigger("type")
elment.triggerHandler("type")
triggerHandler 模式不会触发元素的默认行为
事件对象
jQuery 对DOM中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大
阻止默认行为: event.preventDefault() 或者 return false
阻止冒泡: event.stopPropagation()
11: jQuery 拷贝对象
$.extend([deep], target, objectl, [objectN])
deep:如果设为tue为深拷贝,默认为浅拷贝
target:要拷贝的目标对象
object1:待拷贝到第一个对象的对象
objectN:待拷贝到第N个对象的对象
浅拷贝目标对象引用的被拷贝的对象地址,修改目标对象会影响被拷贝对象
深拷贝,前面加true,完全克隆,修改目标对象不会影响被拷贝对象
12:jQuery 多库共存
把里面的$符号统一改为 jQuery.比如 jQuery("div")
jQuery变量规定新的名称: $noConflict() ; var x=$.noConflict()
13:jQuery 插件
jQuery 插件常用的网站
1. jQuery 插件库 http://www.jq22.com/
2. jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用
引入相关文件。(jQuery 文件 和 插件文件)
复制相关html、css、js (调用插件)。
案例
瀑布流插件
图片懒加载插件
全屏滚动插件
bootstrap组件
bootstrap插件(JS)