jQuery笔记

目录

jQuery入门

一，jQuery 概述

jQuery 库：

jQuery 的概念

二，jQuery 的基本使用

jQuery 的入口函数

三，jQuery 选择器

四. jQuery 样式操作

4.1 设置类样式方法

五. jQuery属性

六.jQuery元素操作

七. JQuery 尺寸和位置操作

八. jQuery 事件导读

九.jQuery对象拷贝

十.多库共存

十一,jQuery插件

十二.bootstrap js插件

十三.本地存储

响应式开发

Bootstrap 前端开发框架

平时我们的响应式尺寸划分

Bootstrap 栅格系统

栅格参数

jQuery入门

1.什么是 jQuery

jQuery 优点

简单使用jQuery

DOM 对象和 jQuery 对象的区别

一，jQuery 概述

jQuery 库：

即library，是一个封装好的特定的集合（方法和函数） 。从封装一大堆函数的角度理解库，就是在这个库中。封装了许多定义好的函数在里面，比如动画animate , hide ,show ,比如获取元素等

简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了

比如jQuery,就是为了快速方便的操作 DOM，里面基本都是函数（方法)

常见的js库

这些库都是对原声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基础选择器

3.2层级选择器

以数组的形式获取: 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 元素(伪数组形式存储)的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行遍历循环，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用
(给每个元素都会绑定事件或者添加方法)

上面的选择器都带有冒号

3.5jQuery 筛选(选择器)方法 *

重点记住 ： 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 尺寸和位置操作

获取元素尺寸大小的方法

以上参数为空，则是获取相应值，返回的是数字型

如果参数为数字，则是修改相应值

参数可以不用写单位

<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）：设置宽度为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 的栅格系统是如何在多种屏幕设备上工作的。

行 (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 ,完全拷贝（拷贝的对象，而不是地址，修改目标对象不会影响被拷贝的对象）