文章目录
五、jQuery
jQuery入门
jQuery的基本使用
jQuery的入口函数
/** * $ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $ * $ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用jQuery 的方法 */ /** 等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装 */ $(document).ready(function(){ alert(11) // 此处是页面DOM加载完成的入口 }) $(function () { alert(11) // 此处是页面DOM加载完成的入口 })
jQuery方法获取的元素
/** 用原生 JS 获取来的对象就是 DOM 对象 */ let myDiv = document.querySelector('div'); // myDiv 是DOM对象 /** * jQuery 方法获取的元素就是 jQuery 对象 * jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储) * 只有 jQuery 对象才能使用 jQuery 方法 * DOM 对象则使用原生的 JavaScript 方法 */ $('div'); // $('div')是一个jQuery 对象
DOM 对象与 jQuery 对象之间是可以相互转换的
/** * 因为原生js比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. * 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用 */ // 1.DOM 对象转换为 jQuery 对象: $(DOM对象) $('div') // 情况一 let div = document.querySelector('div') $(div) // 情况二 // jQuery 对象转换为 DOM 对象(两种方式) $('div') [index] // index 是索引号 $('div') .get(index) // index 是索引号
jQuery常用API
jQuery选择器
基础选择器
$(‘‘选择器’’) // 里面选择器直接写 CSS 选择器即可,但是要加引号
名称 用法 描述 ID选择器 $(“#id”) 获取指定ID的元素 全选选择器 $(‘*’) 匹配所有元素 类选择器 $(“.class”) 获取同一类class的元素 标签选择器 $(“div”) 获取同一类标签的所有元素 并集选择器 $(“div,p,li”) 选取多个元素 交集选择器 $(“li.current”) 交集元素 层级选择器
名称 用法 描述 子代选择器 $(“ul>li”); 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素 后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 隐式迭代
遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代
筛选选择器
语法 用法 描述 :first $(‘li:first’) 获取第一个li元素 :last $(i:last’) 获取最后一个li元素 :eq(index) $(“li:eq(2)”) 获取到的li元素中,选择索引号为2的元素,索引号index从0开始 :odd $(“li:odd”) 获取到的li元素中,选择索引号为奇数的元素 :even $(" li:even") 获取到的li元素中,选择索引号为偶数的元素 :gt(index) $(" li:gt(2)") 获取下标大于2的li元素 :lt(index) $(" li:lt(2)") 获取下标小于2的li元素 :not(#foot) $(" li:not(#foot)") 获取除id='foot’以外的li元素 内容筛选选择器
语法 用法 描述 :contains(‘xxx’) $(“div:contains(‘xxx’)”) 获取包含xxx文本的div元素 :empty $(“div:empty”) 获取不包含子元素或者文本的空的div元素 :has(selector) $(“div:has(selector)”) 获取含有选择器所匹配的div元素 :parent $(“div:parent”) 获取含有子元素或者文本的div元素 可见性筛选选择器
语法 用法 描述 :hidden $(“li:hidden”) 获取所有不可见li元素 :visible $(“li:visible”) 获取匹配所有可见元素 筛选方法
语法 用法 说明 parent() $(“li”).parent(); 查找直接父元素 parents([expr]) $(“li”).parents(); 查找所有父级或指定的父级 parentsUntil(selector) $(“li”).parentsUntil(selector); 查找所有父级直到但不包括selector children(selector) s(“ul”). children(“li”) 相当于$(“ul>li”),最近一级(亲儿子) find(selector) $(“ul”).find("“li”); 相当于s(“ul li”),后代选择器 siblings([expr]) $(“.first”).siblings(“li”); 查找兄弟节点,不包括自己本身 next() $(“.first”).next() 查找当前元素的下一个同辈元素 prev() $(“.first”).prev() 查找当前元素的上一个同辈元素 nextAll([expr]) $(“.first”).nextAll() 查找当前元素之后所有的同辈元素 prevtAll([expr]) $(“.last”).prevAll() 查找当前元素之前所有的同辈元素 hasClass(class) $(‘div’).hasClass(“protected”) 检查当前的元素是否含有某个特定的类,如果有,则返回true eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)” ) ,index从0开始 first() $(“li”).first() 返回被选中元素中第一个元素 last() $(“li”).last() 返回被选中元素中最后一个元素 filter(‘.red’) $(“li”).filter(‘.red’) 返回被选元素中,class含有red的元素 not(‘.red’) $(“li”).not(‘.red’) 返回被选元素中,class不含red的元素
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'');
jQuery效果
动画:
显示和隐藏
show() hide() toggle()
滑动
slideDown() slideUp() slideToggle()
淡入淡出
fadeIn() fadeOut() fadeToggle() fadeTo()
自定义动画
animate()
动画或效果队
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行/** * 参数都可以省略, 无动画直接显示 * speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000) * easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear” * fn:回调函数,在动画完成时执行的函数,每个元素执行一次 */ show([speed,[easing],[fn]]) // 显示语法规范 hide([speed,[easing],[fn]]) // 隐藏语法规范 toggle([speed,[easing],[fn]]) // 切换语法规范 slideDown([speed,[easing],[fn]]) // 下滑效果语法规范 slideUp([speed,[easing],[fn]]) // 上滑效果语法规范 【隐藏元素display: none】 slideToggle([speed,[easing],[fn]]) // 滑动切换效果语法规范 fadeIn([speed,[easing],[fn]]) // 淡入效果语法规范 fadeOut([speed,[easing],[fn]]) // 淡出效果语法规范 【隐藏元素display: none】 fadeToggle([speed,[easing],[fn]]) // 淡入淡出切换效果语法规范 /** opacity 透明度必须写,取值 0~1 之间;speed 动画时长必须写 */ fadeTo([[speed],opacity,[easing],[fn]]) // 渐进方式调整到指定的不透明度 /** * params: 想要更改的样式属性,以对象形式传递,必须写。 * 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略 */ animate(params,[speed],[easing],[fn]) // 自定义动画 animate /** * 事件切换 * over:鼠标移到元素上要触发的函数(相当于mouseenter) * out:鼠标移出元素要触发的函数(相当于mouseleave) * 如果只写一个函数,则鼠标经过和离开都会触发它 */ hover([over,]out) /** * 停止排队 * stop() 方法用于停止动画或效果 * stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画 */ stop()
jQuery属性
设置或获取元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性,比如 元素里面的 href ,比如 元素里面的 typeprop('属性') // 获取属性语法 prop('属性', '属性值') // 设置属性语法
设置或获取元素自定义属性值attr()
用户自己给元素添加的属性,我们称为自定义属性。 比如给 div 添加 index =“1”attr('属性') // 获取属性语法 类似原生 getAttribute() attr('属性', '属性值') // 设置属性语法 类似原生 setAttribute() $(".checkbox:checked").length === $(".checkbox").length // 判断复选框是否全选中
数据缓存data()
data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../../js/jquery.min.js"></script> </head> <body> <div index="1" data-index="23">我是div</div> </body> <script> data('name','value') // 向被选元素附加数据 date('name') // 向被选元素获取数据 /** 还可以读取 HTML5 自定义属性,不用写data-,若属性值为数字型,得到的值也是数字型 */ console.log($("div").data("index")); // 23 $("div").data("index",'bbb'); console.log($("div").data("index")); // bbb console.log($("div").attr("data-index")); // 23 </script> </html>
jQuery内容文本值
普通元素内容html()( 相当于原生inner HTML)
$("div").html() // 获取元素内容 $("div").html("<span>我是新的内容</span>"); // 设置元素内容
普通元素文本内容text() (相当与原生innerText)
$("div").text() // 获取元素内容 $("div").text("<span>我是新的内容</span>"); // 设置元素内容
表单的值val()( 相当于原生value)
$("input").val() // 获取表单值 $("input").val("123456"); // 设置表单值
拓展方法
'¥100'.substr(1); // 100 截取字符串 let price = 100.0 price.toFixed(2) // 100.00 保留2位小数
jQuery元素操作
遍历元素
/** * each() 方法遍历匹配的每一个元素。主要用DOM处理。 * each 每一个里面的回调函数有2个参数: * index 是每个元素的索引号 * demEle 是每个DOM元素对象,不是jquery对象 * 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象 $(domEle) */ $("div").each(function (index, domEle) {}) /** * $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象 * 里面的函数有2个参数: * index:是每个元素的索引号 * element:遍历内容 */ $.each(object,function (index, element) {})
创建元素
$('<li></li>'); // 动态的创建了一个 <li>
添加元素
// 内部添加 element.append('内容') // 把内容放入匹配元素内部最后面,类似原生 appendChild element.prepend('内容') // 把内容放入匹配元素内部最前面 //在被选元素的结尾插入文本内容 element.append("添加到尾部"); //在被选元素的结尾插入html内容 element.append("<p>添加到尾部</p>"); //在被选元素的结尾插入jQuery对象 element.append($('h2')); // 外部添加 element.after('内容') // 把内容放入目标元素后面 element.before('内容') // 把内容放入目标元素前面 // 父级添加,支持任何选择器语法 element.wrap('<div class="new" />'); // 在每个匹配的元素外层包上一个父元素 element.wrap('.classname'); element.wrap($("#id")); element.wrap(document.createElement("div")); element.wrapAll('<div class="new" />'); // 在所有匹配元素外面包一层共同的父元素 element.wrapAll('.classname'); element.wrapAll($("#id")); element.wrapAll(document.createElement("div"));
删除元素
element.remove() // 删除匹配的元素(本身) element.empty() // 删除匹配的元素集合中所有的子节点 element.html('') // 清空匹配的元素内容 element.unwrap(); // 删除匹配的元素的父元素,并保留被选元素及其兄弟元素,支持任何选择器语法 element.clone().appendTo('.goodbye'); // //clone没有参数时,不会复制原有元素的事件,支持任何选择器语法 element.clone(true).appendTo('.goodbye'); // //clone参数为true,会复制元素的事件,支持任何选择器语法
jQuery尺寸、位置操作
jQuery 尺寸
语法 用法 参数说明 width() / height() 取得匹配元素宽度和高度值只算 width / height ①参数为空,则是获取相应值,返回的是数字型 innerWidth() / innerHieght() 取得匹配元素宽度和高度值包含 padding ②如果参数为数字,则是修改相应值 outerWidth() / outerHeight() 取得匹配元素宽度和高度值包含 padding、border ③参数可以不必写单位 outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度值包含 padding、borde、margin jQuery 位置
位置主要有三个: offset()、position()、scrollTop()/scrollLeft()
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() 方法设置或返回被选元素被卷去的头部
②不跟参数是获取,返回的是数字型
③若参数为不带单位的数字,则是设置被卷去的头部返回顶部案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { height: 2000px; } .back { position: fixed; width: 80px; height: 80px; background-color: pink; right: 30px; bottom: 100px; display: none; line-height: 80px; text-align: center; } .container { width: 900px; height: 500px; background-color: skyblue; margin: 400px auto; } </style> <script src="../../js/jquery.min.js"></script> </head> <body> <div class="back">返回顶部</div> <div class="container"> </div> <script> $(function () { // 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft() $(document).scrollTop(100); // 页面滚动事件 let boxTop = $(".container").offset().top; $(window).on('scroll', function () { if ($(document).scrollTop() >= boxTop) { $(".back").fadeIn(); } else { $(".back").fadeOut(); } }); // 返回顶部 $(".back").on('click', function () { // 不能是文档而是 html和body元素做动画 $(document.documentElement).stop().animate({ scrollTop: 0 }); }); }) </script> </body> </html>
jQuery事件
jQuery事件注册
基本事件:
mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll
语法:
element.事件(function(){})
jQuery事件处理
事件处理on()绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
语法:
element.on(events,[selector],fn)
events:一个或多个用空格分隔的事件类型,如"click"或"keydown"
selector: 元素的子元素选择器
fn:回调函数 即绑定在元素身上的侦听函数
on()方法优势1:
可以绑定多个事件,多个处理事件处理程序$(“div”).on({ mouseover: function(){}, mouseout: function(){}, click: function(){} })
如果事件处理程序相同
$(“div”).on(“mouseover mouseout”, function() { $(this).toggleClass(“current”); })
on()方法优势2:
可以事件委派操作 。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素$('ul').on('click', 'li', function() { alert('hello world!'); })
on()方法优势3:
动态创建的元素,click() 没有办法绑定事件, on() 可以给动态生成的元素绑定事件$('div').on('click','p', function(){ alert('俺可以给动态生成的元素绑定事件') })
事件处理on()解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序$("p").off() // 解绑p元素所有事件处理程序 $("p").off( "click") // 解绑p元素上面的点击事件 $("ul").off("click", "li"); // 解绑事件委托
事件处理one()绑定事件
事件只触发一次("p").one("click", function () { alert(11); })
自动触发事件trigger()
$(function() { $("div").on("click", function() { alert(11); }); // 1. 元素.事件() $("div").click(); // 会触发元素的默认行为 // 2. 元素.trigger("事件") $("div").trigger("click"); // 会触发元素的默认行为 // 3. 元素.triggerHandler("事件") $("div").triggerHandler("click"); // 不会触发元素的默认行为 });
jQuery 其他方法
jQuery 拷贝对象
/** * 语法:$.extend([deep], target, object1, [objectN]) * deep: 如果设为true 为深拷贝, 默认为false 浅拷贝 * target: 要拷贝的目标对象 * object1:待拷贝到第一个对象的对象 * objectN:待拷贝到第N个对象的对象 * 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象 * 深拷贝,前面加true, 完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象 */ $(function () { let targetObj = { id: 0 }; let obj = { id: 1, name: "andy" }; /** 会覆盖 targetObj 里面原来的数据 */ $.extend(targetObj, obj); console.log(targetObj); // {id: 1, name: "andy"} let targetObj = { id: 0, msg: { sex: '男' } }; let obj = { id: 1, name: "andy", msg: { age: 18 } }; /** 一、浅拷贝把待拷贝对象里面的复杂数据类型地址拷贝给目标对象 */ $.extend(targetObj, obj); console.log(targetObj); // msg :{age: 18} targetObj.msg.age = 20; console.log(targetObj); // msg :{age: 20} console.log(obj); // msg :{age: 20} /** 二、深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 */ $.extend(true, targetObj, obj); console.log(targetObj); // msg :{sex: "男", age: 20} targetObj.msg.age = 20; console.log(targetObj); // msg :{sex: "男", age: 20} console.log(obj); // msg :{age: 18} })
jQuery 多库共存
问题概述:
jQuery使用$
作为标示符,随着jQuery的流行,其他 js 库也会用这$作为标识符, 这样一起使用会引起冲突。
客观需求:
需要一个解决方案,让jQuery 和其他的js库不存在冲突,可以同时存在,这就叫做多库共存
jQuery 解决方案:
1.把里面的 $ 符号 统一改为 jQuery
比如 jQuery(‘‘div’’)
2.jQuery 变量规定新的名称:
$.noConflict() 如:let xx = $.noConflict();