目录
jQuery入门
1.什么是 jQuery
jQuery 优点
简单使用jQuery
DOM 对象和 jQuery 对象的区别
一,jQuery 概述
jQuery 库:
即library,是一个封装好的特定的集合(方法和函数) 。从封装一大堆函数的角度理解库,就是在这个库中。封装了许多定义好的函数在里面,比如动画animate , hide ,show ,比如获取元素等
简单理解:就是一个JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了
比如jQuery,就是为了快速方便的操作 DOM,里面基本都是函数(方法)
常见的js库
1.jQuery 2.Prototype 3.YUI 4.Dojo 5. Ext JS 6. 移动端的zepto |
这些库都是对原声js 的封装,内部都是用 js 实现的,我们主要学习jQuery
jQuery 的概念
jQuery 是一个快捷,简洁的javaScript 库,其设计的宗旨是“write Less,Do More",即倡导写更少的代码,做更多的事情
j 就是(JavaScript )Query查询 ,把js中的 DOM 操作进行了封装,我们可以快速的查询使用里面的功能
jQuery 封装了JavaScript常用的功能代码,优化了DOM操作,事件处理,动画设计和Ajax 交互
学习jQuery本质:就是学习调用些函数 (方法) jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率
jQuery 优点
轻量级 核心文件才几十kb,不会影响页面的加载速度 跨浏览器兼容 链式编程,隐式迭代 对事件,样式,动画支持,大大简化了DOM操作 支持插件扩展开发。有着丰富的第三方插件 例如:树形菜单,日期控件,轮播图等· 免费 开源
二,jQuery 的基本使用
jQuery 的入口函数
jQuery 的入口函数 $(function(){ //函数的内容 }) 或者可以写成 jQuery(function(){ // 需要写入的内容 })
// 等页面dom加载完之后执行js代码 1. 方法一 $(document).ready(function(){ // 等待文档执行完之后执行的代码 ...//此处是页面加载完成之后的入口 }); eg. $(document).ready(function(){ $('div').hide(); }) // 等页面加载完之后执行js代码 2. 方法二 $(function(){ ...// 此处时页面dom 加载完成的入口 }); eg. $(function(){ $('div').hide(); }) 等dom结构渲染完毕之后即可执行内部代码,不必等所有外部资源加载完成,jQuery 帮我们完成了封装 相当于我们原生js中的 DOMContentLoaded 不同于原生js中的load 事件是等页面文档,外部的js文件,css文件,图片加载完毕之后才执行内部函数 // 推荐使用第一种方式
jQuery的顶级对象 $
1.$ 是jQuery 的别称,在代码中可以使用jQuery 代替$,但一般为了方便,通常都直接使用 $ 2. $ 是jQuery 的顶级对象,相当于原生JavaScript 中的window 把元素利用$ 包装成 jQuery 对象,就可以调用jQuery 的方法
DOM对象和jQuery 对象 *
1. DOM 对象: 用原生 js 获取过来的对象就是DOM 对象 var myDiv=document.querySelector('div'); // myDiv 是 DOM 对象 不能使用jquery 里面的属性和方法 console.dir(myDiv); myDIv.style.display='none'; 2. jQuery 对象:用jQuery 方式获取过来的对象就是 jQuery 对象 本质:通过 $ 把 DOM 元素进行的包装 $('div'); // $('div'); 是一个 jQuery 对象 不能使用原生js的属性和方法 3. jQuery 对象只能使用 jQuery 方法, DOM 对象则使用原生js 属性和方法 4. jQuery 对象本质是:利用 $ 对 DOM 对象进行封装后产生的对象(伪数组形式存储) 补充:console.dir() 的使用非常简单,直接将需要 dump(打印 输出) 的对象传入该语句即可
jQuery 对象只能使用 jQuery 方法, DOM 对象则使用原生js 属性和方法
DOM 对象和 jQuery 对象之间可以相互转换 因为原生js比jQuery 更大,原生的一些属性和方法jQuery 没有给我们进行封装,想要获取这些属性和方法需要把 jQuery 对象转换为 DOM 对象才能使用 1.dom对象转换为 jQuery 对象 : $(DOM对象) eg. var myDiv=document.querySelector('Div'); $(myDiv); // 获取对象为 dom 对象 将dom 对象转换为 jQuery 对象 2. jQuery 对象转换为 DOM 对象(两种方式) $('div')[index] index 是索引号 $('div').get(index) index 是索引号
<video src="./file/舞蹈.mp4" controls="controls" muted></video> html 引入 视频文件 controls (控制) muted——静音
jQuery 隐式迭代
<div>惊喜不,意外不</div> <div>惊喜不,意外不</div> <div>惊喜不,意外不</div> <div>惊喜不,意外不</div> <script> // 1. 获取四个div元素 $("div"); // 2. 给四个div设置背景颜色为绿色 jquery对象不能使用style $('div').css('background','#bfa'); // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环,给每一个元素添加css这个方法 $("ul > li").css("color", "red"); </script>
三,jQuery 选择器
jQuery 基础选择器
原生js获取元素的方式很多,而且兼容性情况不一致,因此jQuery 给我们做了疯转,使获取元素统一标准
$("选择器") // 里面选择器直接写css选择器即可,但是要加引号
3.1基础选择器
名称 | 用法 | 描述 |
---|---|---|
id 选择器 | $("#id") | 获取指定ID的元素 |
全选选择器 | $("*") | 匹配所有元素 |
类选择器 | $(".class") | 获取同一类class的元素 |
标签选择器 | $("div") | 获取同一标签的所有元素 |
并集选择器 | $("div,p,li") | 选取多个元素 |
交集选择器 | $("li.current") | 交集元素 |
3.2层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $("ul>li") | 使用>号,获取亲儿子层级元素;注意,并不会获取穗子层级的元素 |
后代选择器 | $("ul li") | 使用空格,代表后代选择器,获取ul下所有li 元素,包括孙子等 |
以数组的形式获取: jQuery对象以伪数组的形式存储
3.3jQuery 样式设置
jQuery 设置样式 $('div').css('属性','值'); ************************************* // eg. <div>喜欢你是我的秘密</div> <script> // 1. 获取div 属性 console.log($("div")); // 2.给四个div 设置背景颜色为粉色 jQuery对象不能使用 style $("div").css("background","pink"); </script>
3.4隐式迭代 *
遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代 简单理解:给匹配到的所有元素进行遍历循环,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用 (给每个元素都会绑定事件或者添加方法)
语法 | 用法 | 描述 |
---|---|---|
: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元素中,选择索引号为偶数的元素 |
上面的选择器都带有冒号
3.5jQuery 筛选(选择器)方法 *
语法 | 用法 | 说明 |
---|---|---|
parent() | $('li').parent(); | 查找父级 最近一级的父级元素 |
chlidren(selector) | $("ul").children("li") | 相当于$("ul>li"), 最近一级(亲儿子) |
find(selector) | $("ul").find("li"); | 相当于 $("ul li"), find() 类似后代选择器 |
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开始 |
重点记住 : parent() children() find() siblings() eq()
获取第n个元素的方法 // 第一种方法更推荐 $("ul li").eq(2).css("color,"blue"); $("ul li:eq(2)").css("color,"blue");
jQuery 里面的排他思想
$(function () { // 1. 隐式迭代 给所有的按钮都绑定了点击事件 $("button").click(function () { // 2. 当前的元素变化背景颜色 $(this).css("background", "pink"); // 3.其余的兄弟去掉背景颜色 siblings 查找兄弟节点不包括自己本身 隐式迭代 $(this).siblings("button").css("background", ""); }); });
得到当前索引号的方法
$(this).index()
链式编程
链式编程是为了节省代码量 eg. $(this).css('color','red').sibling().css('color',''); 在使用链式编程的时候一定要注意时那个对象执行样式
四. jQuery 样式操作
https://jquery.cuishifeng.cn/ 参考文档 jQuery API 中文文档
jQuery 可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式 1.参数只写属性名,则是返回属性值 $(this).css("color"); 2. 参数是`属性名,属性值,逗号分隔`,是设置一组样式,属性必须加引号,`值如果是数字可以不跟单位和引号` $(this).css("color","red"); // 属性名一定要加引号 * 3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不加引号 $(this).css({"color":"white","font-size":"20px"}); // ****************************** $("div").css({ width: 400, height: 400, backgroundColor:"red" }) // 如果是复合属性则必须采取驼峰命名法 ,如果值不是数字则需要加引号
-
jquery报错:Uncaught ReferenceError: $ is not defined 出现的可能原因: 1,你未引用jquery库jquery.min.js文件,或者说路径错误;
4.1 设置类样式方法
作用等同于以前的classList, 可以操作类样式,注意操作类里面的参数不要加点
1.添加类: $("div").addClass("current"); 2. 移除类 $("div").removeClass("current"); 3. 切换类 $("div").toggleClass("current");
eg. <title>jQuery操作样式之类操作</title> <script src="./file/jquery.min.js"></script> </head> <style> div { width: 150px; height: 150px; background-color: pink; margin: 100px auto; /* 添加过渡效果 */ transition: all 0.5s; } .current { background-color: red; /* 旋转动画 transform :变换,使...变形 转换*/ transform: rotate(360deg); } </style> <body> <div class="current"></div> <script> $(function () { // 1.添加类 addClass() $("div").click(function () { $(this).addClass("current"); }); // class 已经是类的 里面不用加点 // 2. 删除类 removeClass() $("div").click(function () { $(this).removeClass("current"); }); // 3 . 切换类 toggleClass() $("div").click(function () { $(this).toggleClass("current"); }); }); </script> </body> </html>
4.1.1类操作与className 区别
原生js 中classNme 会覆盖元素原先里面的类名 jQuery 里面类操作只是对指定类进行操作(追加,删除,切换),不影响原先的类名 类名不用加 . ******************************************************** <body> <div class="one"></div> </body> <script> // var one=document.querySelector(".one"); // one.className("two"); // 增加类 会覆盖原先的类 原生的写法 $(".one").addClass("two"); // 增加类 不会覆盖原先的类 会在原生的基础上增加一个 类 // 相当于追加类 不影响以前的类名 // $(".one").removeClass("two"); 删除类名 two </script>
4.1.2jQuery效果(动画效果)
jQuery 给我们封装了很多的动画效果,最常见的如下: `显示 隐藏` show() hide() toggle()--切换 `滑动效果` slideDown()'下拉' SlideUp() '上拉' slideToggle() `淡入淡出` fadeln() fadeOut() fadeToggle() fadeTo() `自定义动画` animate()
1.显示语法规范
show([speed,[easing],[fn]]) 显示参数
2.隐藏语法
hide([speed,[easing],[fn]])
3.切换语法
toggle([speed,[easing],[fn]])
eg, <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 150px; height: 300px; background-color: pink; } </style> <script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <button>显示</button> <button>隐藏</button> <button>切换</button> <div></div> <script type="text/javascript"> $(function(){ $("button").eq(0).click(function(){ $("div").show(1000,function(){ alert(1); }); }) $("button").eq(1).click(function(){ $("div").hide(); }) $("button").eq(2).click(function(){ $("div").toggle(); }) }); </script> </body> </html>
4.滑动效果
下拉滑动
slideDown([speed,[easing],[fn]])
上拉滑动
slideUp([speed,[easing],[fn]])
切换滑动
slideToggle([speed,[easing],[fn]])
事件切换
hover([over,]out)
1)over:鼠标移到元素上要触发的函数 (相当于 mouseenter) 2) out: 鼠标移出元素要触发的函数 (mouseleave) 3)事件切换 hover 就是鼠标经过和离开的复合写法
案例
<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> <script src="./file/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; } .nav>li { position: relative; float: left; width: 80px; height: 41px; text-align: center; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } .nav>li>a:hover { background-color: #eee; } .nav ul { display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1px solid #fecc5b; border-right: 1px solid #fecc5b; } .nav ul li { border-bottom: 1px solid #fecc5b; } .nav ul li a:hover { background-color: #fff5da; } </style> </head> <body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> </ul> <script> $(function () { // // 鼠标经过 // $(".nav>li").mouseover(function(){ // // $(this) jQuery 当前元素 this不要加引号 // // show() 显示元素 hide()隐藏元素 // $(this).children('ul').slideDown(500); // }) // // 鼠标离开 // $(".nav>li").mouseout(function(){ // $(this).children("ul").slideUp(500); children() 方法返回返回被选元素的所有直接子元素。 // }) // 1、事件切换 hover :就是鼠标经过和离开的复合写法 // $(".nav>li").hover(function(){ // $(this).children('ul').slideDown(500); // },function(){ // $(this).children("ul").slideUp(500); // }) // 2、事件切换 hover :如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数 $(".nav>li").hover(function () { $(this).children("ul").slideToggle(200); }); }); </script> </body> </html>
动画队列及停止排队方法
1、动画或者效果一旦触发就会执行,如果多次触发,就会造成多个动画或者效果排队执行
停止动画
stop() 1)stop() 方法用于停止动画或者效果 2) 注意:stop() 写到动画或者效果的前面,`相当于停止结束上一次的动画` // $(this).children("ul").stop().slideToggle(200); 上面的例子写成这个样子就好了,没有 bug
5 淡入淡出效果
1.淡入效果语法规范 fadeIn([speed,[easing],[fn]]) 2.淡出效果语法规范 fadeOut([speed,[easing],[fn]]) 3. 淡入淡出切换效果语法规范 fadeToggle([speed,[easing],[fn]]) 4.渐进方式调整到指定的不透明度 fadeTo([[speed],opactity.[easing],[fn]])
所有动画效果都有的效果参数 (不包括 淡入淡出中修改不透明度的方法)
1)参数可以都省略,无动画直接显示 2) speed :三种预定速度之一的字符串 ("show", "normal", "fast") 或表示动画时长的毫秒数值 (如:1000) 3) easing : (Optional) 用来指定切换效果,默认是"swing" ,可用参数 "linear" 4) fn : 回调函数,在动画完成时执行的函数,每个元素执行一次 动画参数的所有特点
淡入淡出中修改不透明度的效果参数
1)opacity 透明度必须写,取值0~1之间 2) speed :三种预定速度之一的字符串("show" "normal" "fast")或表示动画时长的毫秒数值 (如:1000) `必须写` 3) easing : (Optional) 用来指定切换效果,默认是 "swing",可用参数 "linear" 4) fn : 回调函数,在动画完成时执行的函数,每个元素执行一次 ************************** `速度和透明度 必须写,其他的可以省略`
6.自定义动画 animate
animate(params,[speed],[easing],[fn])
参数
1)`params: 想要更改的样式,以对象形式传递,必须写,属性名可以不带引号,如果是复合属性则需要采取驼峰命名法BorderLeft`其余1参数都可以省略 2) speed :三种预定速度之一的字符串("show" "normal" "fast")或表示动画时长的毫秒数值 (如:1000) 3) easing : (Optional) 用来指定切换效果,默认是 "swing",可用参数 "linear" 4) fn : 回调函数,在动画完成时执行的函数,每个元素执行一次
动画案例:`手风琴` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>王者荣耀手风琴效果01</title> <script src="./file/jquery.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } img { display: block; } ul { list-style: none; } .king { width: 852px; margin: 100px auto; background: url(./file/img09.jpg) no-repeat; overflow: hidden; padding: 10px; } .king ul { overflow: hidden; } .king li { position: relative; float: left; width: 69px; height: 69px; margin-right: 10px; } .king li.current { width: 224px; } .king li.current .big { display: block; } .king li.current .small { display: none; } .big { width: 224px; display: none; } .small { position: absolute; top: 0; left: 0; width: 69px; height: 69px; border-radius: 5px; } </style> </head> <body> <div class="king"> <ul> <li class="current"> <a href="#"> <img src="./file/img.jpg" alt="" class="small"> <img src="./file/img.jpg" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="./file/img02.jpg" alt="" class="small"> <img src="./file/img02.jpg" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="./file/img03.jpg" alt="" class="small"> <img src="./file/img03.jpg" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="./file/img05.jpg" alt="" class="small"> <img src="./file/img05.jpg" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="./file/img04.jpg" alt="" class="small"> <img src="./file/img04.jpg" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="./file/img07.jpg" alt="" class="small"> <img src="./file/img07.jpg" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="./file/img08.jpg" alt="" class="small"> <img src="./file/img08.jpg" alt="" class="big"> </a> </li> </ul> </body> <script> $(function () { $('.king li').mouseenter(function () { //鼠标经过,当前小li宽度变为224px 同时里面的小图片淡出,大图片淡入 $(this).stop().animate({ width: 224 }).find('.small').stop().fadeOut().siblings('.big').fadeIn(); //其余兄弟小li款变为68px 小图淡入。大图淡出 $(this).siblings('li').stop().animate({ width: 69 }).find('.small').stop().fadeIn().siblings('.big').fadeOut(); }); }) </script> </html>
五. jQuery属性
5.1.设置或获取元素固有属性 prop()
固有属性: 元素本身自带的属性
1.获取属性语法
prop("属性")
2.设置(/ 修改)属性语法
prop("属性","属性值")
5.2设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性 我们称之为自定义属性 比如:给div添加的属性 index="1"
1.获取属性语法
attr("属性") //类似原生 getAttribute() attribute ---属性
2,设置属性语法
attr("属性","属性值") // 类似原生 setAttribute()
该方法也可以获取H5自定义属性
5.3 数据缓存
把数据当变量来看,数据存到内存里面,在 dom 里面看不到
用data() 属性获取h5的自定义属性 不用写 data- 开头 直接写data 后面的属性就可以了 返回的是数字型的
date() 方法可以在指定元素上存取数据,并不会修改 DOM元素结构,一旦页面刷新,之前存放的数据都将被移除 这个元素的数据是存放在元素的内存里面的
1.附加数据语法
data("name","value") //向被选元素附加数据
2.获取数据语法
data("name") //向被选元素获取数据
同时,还可以读取html5自定义属性 data-index ,得到的是数字型
<body> <a href="#" title="">都挺好</a> <!-- checked 属性规定在页面加载时应该被预先选定的 input 元素。 --> <input type="checkbox" name="" id="" checked> <div index="1" data-index="2">我是div</div> <span>123</span> </body> <script> // 获取链接属性的值 $(function () { // element.prop("属性名") 获取元素固有属性值 console.log($("a").prop("href")); $("a").prop("title", "我们都挺好"); // change() 当元素的值发生改变时,会发生change 事件 // 当复选框发生改变的时候 输出复选框的checked 属性处于什么状态 $("input").change(function () { console.log($(this).prop("checked")); }) // index 是自定义的属性 不能通过prop 进行获取 // console.log($("div").prop("index")) // 输出 undefined 未定义 // **************************************2 *元素的自定义属性通过 attr进行获取 console.log($("div").attr("index")); // 输出1 console.log($("div").attr("index", 4)); // 元素更改为4 console.log($("div").attr("date-index")); // 元素更改为4 // date-index h5 新增的属性 // 3. ******************数据缓存 date() z这个里面的数据是存放在元素的内存里面 $("span").data("uname", "andy"); // 用户名时 uname 值是 andy console.log($("span").data("uname")); // 把元素当变量来看 ,把相关数据存到元素身上去 // 这个方法获取 data-index h5自定义属性 第一个 不用写 data-而且返回的是数字型 console.log($("div").data("index")); //获取data数据里面的index }) </script>
:checked 选择器 查找被选中的表单元素
Jquery购物车模块-全选
$(function(){ // 1.全选 /全部选功能模块 // 就是把全选按钮(checkall) 的状态赋值给 三个小按钮(j-checkbox)就可以了 // 事件可以使用change $(".checkall").change(function(){ console.log(); var index = $(this).prop("checked"); // 下面那个全选按钮也要绑定, $(".j-checkbox, .checkall").prop("checked",index); }) // 2. 通过小复选框控制全选按钮 如果小复选框选中的个数等于3,就把上下两个全选按钮选上,否则全选按钮不选 $(".j-checkbox").change(function(){ // if(被选中的小的复选框个数与所有小复选框个数相同){ // 全选按钮选中 // }else{ // 不选中全选按钮 // } // 通过checked 选择器 :checked 查找被选中的表单元素 // console.log($(".j-checkbox:checked").length); // $(".j-checkbox").length:所有小复选框个数 if($(".j-checkbox:checked").length===$(".j-checkbox").length){ $(".checkall").prop("checked",true); }else{ $(".checkall").prop("checked",false); } }) })
jQuery购物车模块-修改商品的小计
// 数量 加 $(".increment").click(function () { var n = $(this).siblings(".itxt").val(); n++; $(this).siblings(".itxt").val(n); // 修改商品小计 var p = $(this).parents(".p-num").siblings(".p-price").html(); p = p.substr(1); var price = (p * n).toFixed(2); $(this).parent().parent().siblings(".p-sum").html("¥" + price); getSum(); }) // 数量 减 $(".decrement").click(function () { var n = $(this).siblings(".itxt").val(); if (n == 1) { return false; } n--; $(this).siblings(".itxt").val(n); // 修改商品小计 var p = $(this).parents(".p-num").siblings(".p-price").html(); p = p.substr(1); var price = (p * n).toFixed(2); $(this).parent().parent().siblings(".p-sum").html("¥" + price); getSum(); });
5.4 jQuery内容文本值
主要针对元素的`内容`还有`表单的值`进行操作 1. 普通的元素内容 html() 相当于原生innerHTML html() // 获取元素内容 html("内容") // 设置元素内容
2. 普通元素文本内容 text() (相当于原生 innerText ) 3.表单的值 val() ( 相当于原生 value)
<body> <div> <span>我是内容</span> </div> <input type="text" value=" 请输入内容"> <script> // 1 获取设置元素内容 html() console.log($("div").html()); // $("div").html("123"); // 2 获取设置元素文本内容 text() console.log($("div").text()); // 获取的元素没有标签 // 3 获取设置表单元素 val() console.log($("input").val()); $("input").val("123"); // 修改表单属性的值 // console.log(); </script> </body>
修改普通元素的内容是 text() 方法 截取字符串:substr(1) 从第一个位置开始截取
parents('选择器') 可以返回指定祖先元素 最后计算结果如果想要保留两位小数 通过 toFixed(2) 方法
六.jQuery元素操作
主要是`遍历`、创建、添加、删除元素操作
6.1 遍历操作
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历 语法1: $("div").each(function(index,domEle){xxx;}) 1.each() 方法遍历匹配的每一个元素。主要用到 DOM处理 each 每一个 2.里面的回调函数有两个参数:index是每个元素的索引号;domEle 是每个`DOM元素对象,不是 jQuery 对象` `3.所以要使用jQuery方法,需要给这个dom 元素转换为jQuery 都西昂 $(domEle)` 语法2: $.each(object,function(index,element){xxx;}) 1.$.each() 方法可用于遍历任何对象。主要用于数据处理,比如数组,对象 2.里面的函数有两个参数:index 是每个元素的索引号;element 遍历内容
遍历 dom对象用 each 遍历对象数组 用 $.each() 更合适
6.2创建添加 删除元素
6.2.1 创建元素
$("<li></li>"); // 动态的创建了一个类
6.2.2 添加元素
1)内部添加 $("ul").append(内容); // 添加创建的 内容 把内容放入匹配元素内部的最后面,类似原生 appendChild $("ul").prepend(内容); //内部添加 并且放到内容的最前面 2)外部添加 element.after("内容") // 把内容放入目标元素后面 element.before("内容) // 把元素放入目标元素前面 注: 内部添加元素,生成之后,它们是父子关系 外部添加元素,生成之后,它们是兄弟关系
6.2.3 删除元素
element.reomve() //删除匹配的元素 (本身) element.empty() // 删除匹配的元素集合中所有的子节点 孩子被清空 element.html("") // 清空匹配的元素内容 孩子被清空
七. JQuery 尺寸和位置操作
获取元素尺寸大小的方法
语法 | 用法 |
---|---|
width() / height() | 取得匹配元素宽度和高度 |
innerWidth() / innerHeight() | 取得匹配元素宽度和高度值 包含padding |
outerWidth() / outerHeight() | 取得匹配元素宽度和高度值 包含 padding 、border |
outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值 包含 padding、border、margin |
以上参数为空,则是获取相应值,返回的是数字型
如果参数为数字,则是修改相应值
参数可以不用写单位
<html> <head> <meta charset="utf-8"> <title></title> <script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> div{ width: 200px; height: 200px; background-color: pink; padding: 10px; border: 15px solid #00FFFF; margin: 20px; } </style> </head> <body> <div></div> <script type="text/javascript"> $(function(){ // 1、width() / height() 获取设置元素大小 console.log($("div").width());//200 console.log($("div").innerWidth());//220 = 200 + padding*2 console.log($("div").outerWidth());//250 = 200 + padding*2 + border*2 console.log($("div").outerWidth(true)); //290 = 200 + padding*2 + border*2 + margin*2 }) </script> </body> </html>
jQuery 位置
位置主要有三个:offset() position() scrollTop() / scrollLeft()
offset()
1. offset()方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系 2.该方法有两个属性 left、top。`offset().top`:用于获取元素到文档顶部的距离;`offset().left`:用于获取元素到文档左侧的距离 3.可以设置元素的偏移:offset({top:10,left:30}); 设置当前选定的元素的偏移,于父盒子无关(即使有定位关系)
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin:0; padding: 0; } .father { position: relative; left: 100px; top: 100px; width: 300px; height: 300px; background-color: pink; } .son { position: absolute; width: 100px; height: 100px; background-color: #00FFFF; } </style> <script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="father"> <div class="son"></div> </div> <script type="text/javascript"> $(function() { console.log($(".son").offset());//object() console.log($(".son").offset().top);//100 $(".son").offset({ top:100, left:150 }) console.log($(".son").offset()); // 获取距离带有定位父级位置(偏移)position 如果没有带定位的父级,则以文档稳准 console.log($(".son").position()); }) </script> </body> </html>
position() 获取元素的偏移
position() 获取元素的偏移 1.position()方法用于返回被选元素相对于`带有定位的父级`偏移坐标,如果父级都没有定位,则以文档为准。 2. 这个方法只能获取不能设置偏移
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin:0; padding: 0; } .father { position: relative; left: 100px; top: 100px; width: 300px; height: 300px; background-color: pink; } .son { position: absolute; width: 100px; height: 100px; background-color: #00FFFF; } </style> <script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="father"> <div class="son"></div> </div> <script type="text/javascript"> $(function() { console.log($(".son").offset());//object() console.log($(".son").offset().top);//100 $(".son").offset({ top:100, left:150 }) console.log($(".son").offset()); // 获取距离带有定位父级位置(偏移)position 如果没有带定位的父级,则以文档稳准 console.log($(".son").position()); }) </script> </body> </html>
scrollTop() / scorllLeft() 设置获取元素被卷去的头部和左侧
1.scrollTop() 方法设置或返回被选中元素被卷去的头部 2.animate 动画函数里面有 scrollTop 属性,可以设置位置 但是元素做动画 ,因此 $("body,html").animate({scrollTop:0}) 这里是元素进行的移动 所以我们把`前面的对象`封装成为一个元素
<!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: 50px; height: 50px; background-color: pink; right: 30px; bottom: 100px; display: none; } .container { width: 900px; height: 500px; background-color: skyblue; margin: 400px auto; } </style> <script src="jquery.min.js"></script> </head> <body> <div class="back">返回顶部</div> <div class="container"> </div> <script> $(function() { $(document).scrollTop(100); // 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft() // 页面滚动事件 var boxTop = $(".container").offset().top; $(window).scroll(function() { // console.log(11); console.log($(document).scrollTop()); if ($(document).scrollTop() >= boxTop) { $(".back").fadeIn(); } else { $(".back").fadeOut(); } }); // 返回顶部 元素的动画 $(".back").click(function() { // $(document).scrollTop(0); $("body, html").stop().animate({ scrollTop: 0 }); // $(document).stop().animate({ // scrollTop: 0 // }); 不能是文档而是 html和body元素做动画 }) }) </script> </body> </html>
节流阀 互斥锁
八. jQuery 事件导读
1.单个事件的注册
element.事件(function(){}) eg, 给 div 添加点击事件 $("div").click(function(){事件处理程序}) 其他事件和原生基本一致 比如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
2.事件处理 on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数 语法: element.on(events,[selector],fn) 1.events:一个或多个用空格隔开的事件类型,如:"click"或"keydown" 2.selector:元素的子元素选择器 3.fn:回调函数,即绑定在元素身上的侦听函数
on() 方法优势:1 可以绑定多个事件,多个处理事件处理程序 1. $("div").on({ mouseover:function(){}, mouseout:function(){}, click:function(){} }); 2. 如果处理事件程序相同 $("div").on("mouseover mouseout",function(){ // 鼠标经过和鼠标离开都会触发这个函数 $(this).toggleClass("current"); // toggle 切换 有删除 无增加 });
on() 事件优势2 可以实现委派(委托)操作。事件委派定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素 $("ul").on('click','li',function(){ alert('hello world !'); }); // 上面案例中的 ul 是父选择器 li 是子选择器 ( click是绑定在ul身上的,但是触发的对象是ul里面的小li) // 事假绑定在ul身上,但是触发对象是 li,点击li之后有事假冒泡到父亲身上,父亲身上的点击事件就会执行这个程序
在此之前,有bind() ,live() ,delegate() 等方法来处理事件绑定或者事件委派,目前最新版用 on 来代替他们
on() 事件优势3 动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件 on 可以给未来动态创建的元素绑定事件
3.事假处理 off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序 $("p").off() //解绑p元素所有事件处理程序 $("p").off("click") //解绑p元素上面的点击事件 后面的 off 是侦听函数名 $("ul").off("click","li") //解绑事件委托 如果有的事件只想被触发一次,可以使用one() 来绑定事件 使用方法和off 类似
4.自动触发事件 trigger()
有些事件希望自动触发,比如轮播图自动播放功能跟右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发 // 自动触发事件 第一种简写形式 会触发元素的默认行为 (比如input标签有光标在闪烁) 元素.事件() $("div").click(); // 第二种自动触发模式 元素.trigger() 会触发元素的默认行为 (比如input标签有光标在闪烁) element.trigger("type") $("div").trigger("click"); //第三种自动触发模式 不会触发元素的默认行为 (比如input标签没有光标在闪烁) element.triggerHandler(type) $("div").triggerHandler("click");
jQuery事件对象
事件被触发就会有事件对象的产生 事件对象可以用来阻止默认行为 或者 阻止事件冒泡 element.on(events,[selector],function(event{})) 阻止默认行为:event.preventDefault() 或者 return false 阻止冒泡 : event.stopPropagation()
九.jQuery对象拷贝
如果想要把某个对象拷贝(合并)给另外一个对象使,此时可以使用 $.extend() 方法 语法: $.extend([deep],target,object1,[objectN]) 1.deep: 如果设为 true为深拷贝 , 默认为false 浅拷贝 2.target : 要拷贝的目标对象 3.object1 :待拷贝到第一个对象的对象 4.objectN : 待拷贝的第n个对象的对象 5. 浅拷贝是把被拷贝的对象`复杂数据类型中的地址`拷贝给目标对象,修改目标对象`会影响·`被拷贝的对象 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并在一起
eg. $(function(){ var targetObj={}; var obj={ id:1, name:"andy" }; // $.extend(target,obj); $.extend(targetObj,obj); // 将obj 拷贝给 targetObj console.log(targetObj); // 会覆盖 targetObj 里面原来的数据 })
十.多库共存
jQuery 使用$作为标识符,随着jQuery的流行,其他js库也会用$作为标识符,这样一起使用九会引起冲突,需要一个解决方案,让jQuery和其他的js库不存在冲突,可以同事存在,这就叫多库共存 jQuery解决方案: 1.`把里面的$ 符号统一修改为 jQuery 比如 jQUery("div")` 2.jQuery变量规定新的名称: `$.noConflict() var xx=$.noConflict();` $可以写成jQuery
十一,jQuery插件
jQuery功能比较有限,想要在复杂的特效效果,可以借助于jQuery 插件完成
注意: 这些插件夜市依靠于jQuery 来完成的,所以必须要引入jQuery 文件,因此也称为jQuery 插件
jQuery插件常用的网站: 1.jQuery 插件库 https://www.jq22.com/ 2.jQuery之间 http://www.htmleaf.com/ 推荐 免费开源 jQuery 插件使用步骤: 1.引入相关文件 (jQuery文件和插件文件) 2.复制相关 html css js (调用插件)
图片懒加载
当页面滑动到有图片的位置,图片才进行加载,用以提升页面打开的速度及用户体验,帮助减轻服务器负载 1.该插件必须写在所有图片的下面(现有图片才能懒加载) 我们使用jquery 插件库 EasyLazyload 注意,此时的`js引入文件和js调用`必须写到`DOM元素(图片)最后面`
快捷键
ctrl+h 查找 和替换
全屏滚动 (fullpage.js)
gitHUb: https://github.com/alvarotrigo/fullPage.js 中文翻译网站: https://www.dowebok.com/
十二.bootstrap js插件
bootstrap 矿建也是依赖于jQuery开发的,因此里面的js插件使用,也必须引入 jQuery文件 https://www.bootcss.com/ <div class="container"></div> // 复制的代码写到 这里面
十三.本地存储
页面刷新不会丢失数据,因此需要用到本地存储
存储的数据格式: var todolist=[{title;'xxx',done:false}] // title:'文本框的内容' done:是否完成 注意1: 本地存储localStorage 里面只能存储字符串格式,因此需要把对象转换为字符串 JSON.stringify(date) 注意2:获取本地存储数据,需要把里面的`字符串转换为对象格式` JSON.parse() 我们才能使用里面的数据
页面中的数据,都要从本地存储中获取,这样刷新页面不会丢失数据,所以先要把数据保存到本地存储里面 读取本地存储的数据 eg. function getDate(){ var date=localStorage.getItem("todolist");}
响应式开发
Bootstrap 前端开发框架
响应开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式设置,从而适配不同的设备的目的
设备划分 | 尺寸区间 |
---|---|
超小屏幕(手机) | <768px |
小平设备(平板) | >=768px~<992px |
中等屏幕(桌面显示器) | >=992px~<1200px |
宽屏设备(大桌面显示器) | >=1200px |
响应式布局容器: 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果
原理就是在不同的屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化
平时我们的响应式尺寸划分
超小屏幕(手机,小于768px):设置宽度为100%
小屏幕(平板,大于等于768px):设置宽度为750px
中等屏幕(桌面显示器,大于等于992px) :宽度设置为970px
大屏幕(大桌面显示器,大于等于1200px ):宽度设置为1170px
@media screen and(max-width:767px){ .container{ width:100%;} .container ul li{ width:33.33%}}
Bootstrap 来自ttwitter (推特),是目前最受欢迎的前端框架。bootstrap 是基于HTML 、CSS 和javascript 的,它简洁灵活,
使得web 开发更加快捷
https://www.bootcss.com/ 中文网站 https://getbootstrap.com/ 官网 https://v3.bootcss.com/ 推荐使用 控制权在框架本身,使用者要按照矿建所规定的某种规范进行开发 Bootstrap 使用四部曲:1.创建文件夹结构 2,创建html骨架结构 3,引入相关样式文件 4.书写内容 https://getbootstrap.com/docs/4.0/getting-started/download/# 下载页面
bootstrap 文件的引入: 方式1:引用在线bootstrap 的样式 方式2:将bootstrap 下载到本地进行引用 二,在这里 我是直接引用的 https://v3.bootcss.com/getting-started/#download 里面的链接 (直接使用这些 BootstrapCDN 提供的链接即可。) 引用注意事项::::********************************** <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> bootstrap 官网里面的 入门里面的基本模板 <meta http-equiv="X-UA-Compatible" content="IE=edge"> ————————解释: 要求当前网页使用ie浏览器最高版本的内核来渲染
通过类来调用样式 ,如果对于原先的样式不满意利用我们自己写的样式覆盖原先的样式(通过类来实现)
书写内容:
1,直接拿bootstrap 预先定义好的样式来使用,
2.修改Bootstrap 原先的样式,注意权重问题
3.学好 Bootstrap 的关键在于知道它定义了那些样式,以及这些样式能实现什么样的效果
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,bootstrap 预先定义好了这个类,叫做 .container 它提供了两个作此用处的类
.container 类 实现响应式布局 container 类有一个 左右15px 的边距
container 类
响应式布局的容器 固定宽度
大屏 (>=1200px) 宽度设为1170px
中屏 (>=992px) 宽度设为970px
大屏 (>=768px) 宽度设为750px
超小屏 (100%)
container-fluid 类
流式布局 百分百宽度
占据全部视口 (viewpot) 的容器
适合于单独做移动端开发
Bootstrap 栅格系统
栅格系统英文为 "grid systems", 也有人翻译为 "网络系统" ,它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局
Bootstrap 提供了一套响应式,移动设备优先的栅格化系统,随着屏幕或视口(viewpot )尺寸单独增加,系统会自动分发最多12列
Bootstrap 里面container 宽度是固定的,但是不同屏幕下,container 的宽度不同,我们在把container 划分为12等份
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容可以放入创建好的布局中
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 | None (自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
行 (row) 必须放到container 布局容器中
我们实现列的平均划分,需要给列添加前缀
xs-extra small : 超小 sm-small: 小 md-medium: 中等 lg-large: 大 列 (column)大于12,多余的'列(column)'所在的元素将被作为一个整体另起一行排列 每一列默认有一个左右12像素的padding 可以同时为一列指定多个设备的类名,以便划分不同分数,例如 class="col-md-4-col-sm-6"
JQuery 考核总结
一个元素事件:$("div").on("click keydown",function(){ });
将里面的内容渲染到页面"("div").html("") 将里面的内容清空"
多库共存 : var a = 将"$""符号改为a进行调用实现多库共存
浅拷贝:将拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响拷贝的对象
深拷贝:前面加true ,完全拷贝(拷贝的对象,而不是地址,修改目标对象不会影响被拷贝的对象)