jQuery学习笔记【黑马程序员】

最新推荐文章于 2023-03-17 11:30:50 发布

原创最新推荐文章于 2023-03-17 11:30:50 发布 · 2.8k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #前端框架

文章目录

前言
JQury学习

前言

提示：这是学习黑马程序员的《4天玩转JQuery》所记录的学习笔记

关于这门技术，我发现网上很多人说不用学了，已经落伍了！可是，我却坚持把它学了！事实证明，这是个不错的选择。掌握jquery后，对我写项目有极大的帮助！

JQury学习

1、引入JQury

原生JS缺点：
- 不能添加多个入口函数(window.onload)，如果添加多个，后面的会把前面的给覆盖
- 原生js的API名字都太长
- 原生JS有时候代码都太长太难记
- 原生JS中有些属性或者方法，有浏览器兼容问题
- 原生js容错率比较低，前面的代码出了问题，后面的代码执行不了
JQury优势
- 可以写多个入口函数的
- jQuery的API名字都容易记忆
- jqury的代码简洁（隐式迭代）
- jqury帮我们解决了浏览器兼容问题
- 容错率较高，前面的代码出了问题，后面的代码不受影响

2、jqury简介

JQury就是一个封装了很多方法的JavaScript库，我们学习jqury，其实就是学习jqury中封装的一大堆方法（调用参数，返回值，方法效果……）

如何使用JQury

引入jQuery文件
写一个人入口编程
找到你要操作的元素（jQuery选择器），去操作他（给他添加属性，样式，文本……）

$(document).ready(function((){
$('div').width(100).height(100).css('backgroundColor','red').text('哈哈');//链式编程
});

3、jQuery入口函数

第一种写法

 $(document).ready(function (){
            console.log("我是jQuery入口函数第一种写法");
        });

第二种写法：推荐

$(function () {
   console.log("我是jQuery入口函数第二种写法，推荐这种写法哟，亲！");
});

jQuery入口函数与js入口函数对比：

JavaScript的入口函数要等到页面中所有资源（包括图片、文件、dom树，外部css、js连接、图片）加载完成才开始执行。
jQuery的入口函数只会等待文档（dom）树[标签、元素]加载完成就开始执行，并不会等待图片、文件的加载。
js的入口函数赋值法写，只能写一个；而jquery的入口函数可以写多个

值得注意的是：

如果你的文件中没有任何图片或者内容，那么window.onload的写法会显示先执行，因为它不需要加载这些东西了，使用就快
而jQuery的两种写法看顺序先执行
忽略了点1的情况（就是文件中没有任何的图片或内容），在开发过程中，一般是jQuery执行先。

细节详谈

$是一个函数，等价于jQuery（也是一个自执行函数）
如一个js文件，就会执行这js文件中的代码
jQuery文件是一个自执行函数，执行这个JQuery文件中的代码，其实就是执行这个自执行函数
这个自执行文件就是给window对象添加一个jQuery属性和$属性
$是一个函数
- 参数传递不同，效果也不同
- 如果参数传递的是一个匿名函数，那就是入口函数——$()
- 如果参数传递的是一个字符串，那它就是选择器，在是标签的情况下，还会创建一个标签
- 如果参数是一个dom对象，那它会把dom对象转换为jQuery对象

4、dom对象与jQuery对象

4.1、dom对象

含义:原生js选择器获取的对象
特点：只能调用dom方法或者属性，不能调用jQuery属性或者方法，否则就会报错
如果你的文件中没有任何图片或者内容，那么window.onload的写法会显示先执行，因为它不需要加载这些东西了，使用就会报错

var div1 =  document.getElementById("0ne");//dom对象
  document.getElementsByTagName("div");//dom对象
    div1.style.backgroundColor ="red";//调用dom方法或者属性
    div1.css("backgroundColor","yellow");//不能调用jQuery的属性和方法，否则报错：Uncaught TypeError: div1.css is not a function

4.2、jQuery对象

含义：利用jQuery选择器获取的对象
特点：只能调用jQuery的方法和属性，不能调用原生js的dom对象的属性和方法。否则就会报错！

var $div1 =$("#0ne");//一般规定jQuery对象开头用$来标识
$div1.css('backgroundColor','green');//调用jQuery方法或属性
$div1.style.backgroundColor ="yellow";//不能调用dom对象的属性，和方法，不然会报错：Cannot set properties of undefined (setting 'backgroundColor')

4.3、jQuery对象是怎么样的？

jQuery对象是一个伪数组(不是数组)，本质上是dom对象的一个包装集

jQuery.fn.init(1)

4.4、dom对象与jQuery对象之间的转换

dom对象转换为jQuery对象

var $obj = $(domObj);//domObj是dom对象，用document.getElementById()……等等dom方法获取的，下面的div1也是
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象
            var $div2 =$(div1);
            $div2.css("backgroundColor","yellow");

联想：钞能力，花钱[直接用$对象把dom对象包起来，得到的就是jquery对象]

jquery对象转换为dom对象

使用下标取出来

var $divs =$("div");
var div1 =divs[0];//使用下标
console.log(div1);

使用jQuery的方法get(0)

var $divs =$("div");
var div1 =$divs.get(0);
console.log(div1);

4.5、两者之间转换的案例：开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开关灯</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 500px;
            width: 500px;
        }
    </style>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
           var butt =document.getElementsByTagName("button");
           butt[1].onclick =function () {
             $('body').css('backgroundColor','black');
           };

           $(butt[0]).click(function () {//在这里的butt[0]的dom对象转为jquery对象
              $('body')[0].style.backgroundColor ="white";//将jquery对象取出dom对象，因为body元素只有一个所以下标为0；
           });
        });
    </script>
</head>
<body>
<button id="on">开灯</button>
<button id="off">关灯</button>
<img src="铭先生1.jpg" alt="me">
</body>
</html>

4.6、拓展1、text（）

text()：设置和获取文本

-获取文本，不传参数

<div id="box">我是div <span>我是span</span></div>
console.log($("#box").text() );//我是div 我是span

注意：

会获取到标签中的所有文本，包括后代元素的文本
包含了多个dom元素的jquery对象，通过text()方法获取文本，会把所有dom元素的文本都获取到

设置文本

<div id="box">我是div <span>我是span</span></div>
 console.log($("#box").text("我是天下第一！") );//我是天下第一！

注意：

会覆盖原来的内容，如果text()参数里包含标签，是不会把标签给解析出来的
连同其后代元素都会被覆盖掉
包括了多个dom元素的jquery对象，通过text()方法设置文本，会把所有的dom元素都设置上。（这里面有个隐式迭代）

<div id="box">我是div <span>我是span</span></div>
<div></div>
================================
 $("div").text("我是天下第一！");//隐式迭代
 ==============结果==================
 我是天下第一！//这里出现了两个，我是天下第一，是前面的div和后面的div的，span标签直接被覆盖掉了！
我是天下第一

5、jQuery选择器

5.1、什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。
注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。
【查看jQuery文档】
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。
所以我们平时真正能用到的只是少数的最常用的选择器。

5.2、基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

总结：跟css的选择器用法一模一样。

代码演示：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>基本选择器</title>
</head>
<body>
<div>
  <ul>
    <li id="slg">国共联合司令官</li>
  </ul>
  <!-- 独立团 -->
  <ul id="dlt">
    <li class="tz">独立团团长-李云龙</li>
    <li>狙击手</li>
    <li>士兵</li>
    <li>士兵</li>
    <li>士兵</li>
    <li class="hf">伙夫</li>
    <li class="wsy">卫生员</li>
  </ul>
  <!-- 358团 -->
  <ul id="t358">
    <li class="tz">358团团长-楚云飞</li>
    <li>狙击手</li>
    <li class="nj">士兵</li>
    <li>士兵</li>
    <li>士兵</li>
    <li class="hf">伙夫</li>
    <li class="wsy">卫生员</li>
  </ul>
</div>
<div>
  <p class="nj">老百姓</p>
  
  <p class="nj">老百姓</p>
  
  <p>老百姓</p>
  
  <p>老百姓</p>
  
  <p>老百姓</p>
  
  <p>老百姓</p>
  
  <p>老百姓</p>
</div>

</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {

    // 基本选择器   和css里面的选择器是一样的
    //  id选择器            $('#id')
    //  类选择器            $(".类名")
    //  标签选择器          $("标签名")
    //  并集选择器          $('.box,.box2')
    //  交集选择器          $('li.current')


    //抗日开始，action
    //首先，司令官发表讲话
    //司令官官比较大，要把司令官变得大一点。
    // id选择器
    // 格式：$("#id")
    // 作用：通过id来获取页面中的元素
    $("#slg").css("fontSize","40px");

    // 团长回去讲话
    // 团长官也比较大,要把团长弄大一点，但是团长官能大过司令官吗？？我们要把团战弄二大
    // 类选择器
    // 格式：$(".class");
    // 作用：获取页面中一类元素，通过class属性来获取
    // jQuery中支持隐式迭代，迭代就是遍历的意思
    $(".tz").css("fontSize","30px");



    //接下来，要上战场，全军出击!!
    //要把所有的并都派上去,上战场，前线的兵背景色都是红色。
    // 标签选择器
    // 格式；$("标签名");
    // 通过标签来获取对应元素
  $("li").css("backgroundColor","red");


    //在战场上发现有人背着锅，伙夫和卫生员是没有战斗力的，应该撤下来。
    //需要把伙夫和卫生员的背景色改成白色。
    // 伙夫和卫生员也想着要帮忙为抗日做贡献。
    // 并集选择器
    // 格式：$("selector1,selector2,...");
    // 功能：获取多个选择器的并集
  $(".hf,.wsy").css("backgroundColor","white");


    //现在，突然发现老打败仗。为什么呢？现在在国共联合军里面出现内奸。
    //现在把联合军里面的内奸找出来，不能干扰到老百姓
    // 交集选择器   li.current
    // 格式： $("selector1selector2");注意，中间没有任何的空格
    // 获取两个选择器之间的交集。
    $("li.nj").css("backgroundColor","green");
  })
</script>

5.3、层次选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

总结：跟css的选择器用法一模一样。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
</head>
<body>
<p></p>
<div id="father">
    <div>
      <span>span1</span>
      <span>span2</span>
      <span>span3</span>
    </div>
    <div>
      <b>1</b>
      <div>div1</div>
      <div>div2</div>
      <div>div3</div>
      <p></p>
    </div>
    <div></div>
    <p></p>
    <p></p>
    <p></p>
    <span>sss1</span>
</div>
</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
    //需求1:获取id为father这个元素的所有子div.不会获取到孙子
    console.log($('#father > div'));


    //需求2:获取id为father这个元素的所有子div以及所有子p.
    //console.log($('#father > div ,  p'));//不行,这种意思是获取id为father这个元素的所有子div以及页面上所有的p.
    // console.log($('#father>div' , '#father>p'));//这样写是错的
      console.log($('#father>div , #father>p'));


    //需求3:获取id为father这个div的所有后代div.
      console.log($('#father div'));


    //需求4:获取id为father这个div的所有后代div,以及id为father这个div的所有后代span.
    console.log($('#father div , #father span'));

  });
</script>

5.4、过滤选择器

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

总结：这类选择器都带冒号

代码演示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>

</head>
<body>
<ul>
    <li>我是第0个li标签</li>
    <li>我是第1个li标签</li>
    <li>我是第2个li标签</li>
    <li>我是第3个li标签</li>
    <li>我是第4个li标签</li>
    <li>我是第5个li标签</li>
    <li>我是第6个li标签</li>
    <li>我是第7个li标签</li>
    <li>我是第8个li标签</li>
    <li>我是第9个li标签</li>
</ul>
</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //设置奇数行li标签颜色为天蓝色.
        $("li:odd").css("backgroundColor", "skyblue");

        //设置偶数行li标签背景色为粉色
        $("li:even").css("backgroundColor", "pink");

        //首尾两行li显示红色.
        $("li:eq(0)").css("backgroundColor", "red");
        $("li:eq(9)").css("backgroundColor", "red");

    });
</script>

5.5、筛选选择器(方法)

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父元素
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

5.5.1、案例1：下拉菜单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(bg.jpg);
        }

        .wrap li{
            background-image: url(libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
    //需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。
    //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。


    //获取一级菜单li的方式:
    //$('li');//不行
    //$('ul>li');//不行
    //$('.wrap li');//不行
    //$('.wrap>ul>li')//可行的.


    //1.给一级菜单li设置鼠标移入事件，二级菜单显示。
    $('.wrap>ul>li').mouseover(function () {
      //  console.log(this);//谁触发了鼠标移入事件,那这个this就是谁,this还是一个dom对象.
       $(this).children('ul').show();//show()方法本质上还是更新display属性为block.
       // $(this).children('ul').css('display','block');
    });


    //2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。
    $(".wrap>ul>li").mouseout(function () {
       // $(this).children('ul').hide(); //hide()方法本质上还是更新display属性为none
        $(this).children('ul').css('display','none');
    });


    //3.思考题:
    //为什么不给一级菜单a标签设置鼠标移入和离开事件?
    //因为这样的话,选不到二级菜单.你一旦离开a标签的范围，那么二级菜单就隐藏了，你就选不了
    // $('.wrap>ul>li>a').mouseover(function () {
    //   $(this).siblings('ul').show();
    // });
    // $('.wrap>ul>li>a').mouseout(function () {
    //   $(this).siblings('ul').hide();
    // });


  });
</script>

改进：

以后如果有鼠标移入事件，请使用mouseenter，而不是mouseover
鼠标离开事件使用mouseleave，就不要使用mouseout
- mouseover:事件在鼠标移动到选取的元素及其子元素上时触发
- mouseenter:事件只有在鼠标移动到选取的元素上时触发

拓展说明：
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

5.5.2、案例2：突出展示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
               height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }

        .wrap img {
            display: block;
               border: 0;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="01.jpg" alt=""/></a></li>
        <li><a href="#"><img src="02.jpg" alt=""/></a></li>
        <li><a href="#"><img src="03.jpg" alt=""/></a></li>
        <li><a href="#"><img src="04.jpg" alt=""/></a></li>
        <li><a href="#"><img src="05.jpg" alt=""/></a></li>
        <li><a href="#"><img src="06.jpg" alt=""/></a></li>
    </ul>
</div>
</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
    //需求1:给小人物所在的li标签设置鼠标移入事件:当前li标签透明度为1,其他的兄弟li标签透明度为0.4
    //需求2:鼠标离开大盒子,所有的li标签的透明度改成1.


    //获取小人物们所在的li
    //$('.wrap li')//可以的
    //console.log($('.wrap').find('li'));//可以的

    //需求1:
    $(".wrap li").mouseenter(function (){
       $(this).css("opacity",1).siblings("li").css("opacity",0.4);
        //console.log($(this).css('opacity', 1));//这个css方法有返回值,返回值就是这个方法的元素本身(jquery对象).
    });

    $(".wrap").mouseleave(function () {
       $(this).find("li").css("opacity",1) ;//console.log($(this));//在这个离开事件中,this是这整个大盒子
    });
  });
</script>

5.5.2、案例3：手风琴

jQuery特性：隐式迭代
jQuery特性：链式编程，在于一个方法返回的时一个jQuery对象，既然是jQuery对象就可以继续点出jQuery的方法来。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style-type: none;
        }

        .parentWrap {
            width: 200px;
            text-align: center;

        }

        .menuGroup {
            border: 1px solid #999;
            background-color: #e0ecff;
        }

        .groupTitle {
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }

        .menuGroup > div {
            height: 200px;
            background-color: #fff;
            display: none;
        }

    </style>
</head>
<body>
    <ul class="parentWrap">
        <li class="menuGroup">
            <span class="groupTitle">标题1</span>
            <div>我是弹出来的div1</div>
        </li>

        <li class="menuGroup">
            <span class="groupTitle">标题2</span>
            <div>我是弹出来的div2</div>
        </li>

        <li class="menuGroup">
            <span class="groupTitle">标题3</span>
            <div>我是弹出来的div3</div>
        </li>

        <li class="menuGroup">
            <span class="groupTitle">标题4</span>
            <div>我是弹出来的div4</div>
        </li>
    </ul>

</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //需求:点击标题li标签,对应的div显示, 他的兄弟标签li下面的div隐藏.
        $('.parentWrap>.menuGroup').click(function () {
            //jQuery特性:隐式迭代
            //jQuery特性:链式编程,在于一个方法返回的是一个jQuery对象,既然是jQueyr对象就可以继续点出jQuery的方法来.
            $(this).children('div').show().parent().siblings('li').children('div').hide();
        });

    });
    // $(function () {
    //     //需求:点击标题li标签,对应的div显示, 他的兄弟标签li下面的div隐藏.
    //     // $(".parentWrap>.menuGroup").click(function () {
    //     $('.parentWrap li').click(function () {
    //         $(this).children("div").show().parent().siblings("li").children("div").hide();
    //     });
    // });
</script>

5.53、案例四：淘宝服装精品

注意知识点：

index()
- 获得第一个匹配元素相对于其同胞元素的 index 位置
- index()方法返回指定元素相对于其他指定元素(兄弟结点)的 index 位置。

 //获得第一个匹配元素相对于其同胞元素的 index 位置
var index =$(this).index();//index() 方法返回指定元素相对于其他指定元素的 index 位置。

$(选择器).find(xx).length
- 找到选择器选择下的xx的有多少个（长度）

var index =$(this).index();
//获取左边的li数
var leftLength= $("#left").find("li").length;

6、元素设置

6.1、样式设置

css() 获取和设置样式

获取样式
- 将要获取的样式名作为参数传入
- 获取包含了多个dom元素的jquery对象的样式，只能获取到第一个dom对象的样式

//获取包含了多个dom元素的jQuery对象的样式,只能获取到第一个dom对象的样式.
      console.log($('div').css('width'));//'200px'
      //注意：获取样式操作只会返回第一个元素对应的样式值。

在IE浏览器中，要获取边框这样的样式值，一定要给一个标准的边框

 console.log($("#div1").css("width"));
                console.log($("#div2").css("backgroundColor"));
                console.log($("#div3").css("border"));
//在ie浏览器中,要获取边框这样的样式值,一定要记得给一个准确的边框
console.log($('#div1').css('border-top-width'));

设置样式【行内样式】
- 分别将获取的样式名和样式值传入-》css(样式名,样式值)
- 也可以给多个元素设置样式

  $("div").css({
               width:"500px",
                height:300  ,//如果你加px就要将双引号，属性可加双引号，也可不加
                backgroundColor:"green",//记住，使用逗号隔开，分号会报错
               border: "10px solid red",
                marginTop:10
            });
                //隐式迭代,把每一个div都设置了同样的样式.

设置单样式

 console.log($("#div1").css("width","300px"));
                console.log($("#div1").css("backgroundColor","red"));
                console.log($("#div1").css("border","10px yellow solid"));

设置多样式

$('#div1').css({
                   width:"400px",
                   backgroundColor:"greenyellow",
                    border:"1px solid black"
                });

6.2、类名设置

添加类

添加一个类

$("#addClass").click(function (){
  $("#div1").addClass("fontSize30");//fontSize30类名
});

添加多个类

$("#div1").addClass("fontSize30 width200");//fontSize30类名 width200类名

切记：类名之间空格隔开

移除类

移除单个类

$("#div1").removeClass("fontSize30");

移除对多个类

$("#div1").removeClass("fontSize30 width200");

切记：类名之间空格隔开

移除所有类

$("#div1").removeClass();

如果removeClass()括号里，不传任何参数，便是移除所有类

判断类

判断一个元素是否有这个类，有返回true，没有返回false

console.log($("#div1").hasClass("fontSize30"));

切换类

如果元素有某个类就移除这个类，如果没有就添加这个类

$("#div1").toggleClass("fontSize30");

代码演示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin-top: 10px;
        }

        .bgc {
            background-color: green;
        }

        .fontSize30 {
            font-size: 30px;
        }

        .width200 {
            width: 200px;
        }

    </style>

</head>
<body>
<input type="button" value="添加类" id="addClass"/>
<input type="button" value="移除类" id="removeClass"/>
<input type="button" value="判断类" id="hasClass"/>
<input type="button" value="切换类" id="toggleClass"/>
<div id="div1" class="bgc ">div1</div>
</body>
</html>

<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //1.添加类 addClass(类名);
        $("#addClass").click(function () {
            //添加一个类
            $("#div1").addClass("fontSize30");//fontSize30类名
            //添加多个类
            $("#div1").addClass("fontSize30 width200");//fontSize30类名 width200类名
        });


        //2.移除类
        $("#removeClass").click(function () {
            //移除单个类
            $("#div1").removeClass("fontSize30");
            //移除多个类
            $("#div1").removeClass("fontSize30 width200");
            //移除所有类
            $("#div1").removeClass();
        });


        // //3.判断类
        $("#hasClass").click(function () {
            //判断一个元素有没有某个类,如果有就返回true,如果没有就返回false.
            console.log($("#div1").hasClass("fontSize30"));
        });


        // //4.切换类
        $("#toggleClass").click(function () {
            //如果元素有某个类就移除这个类, 如果元素没有这类就添加这个类
            $("#div1").toggleClass("fontSize30");
        });

    });
</script>

6.2、案例1：tab栏切换

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }

    </style>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
        </div>
    </div>
</div>

</body>
</html>

<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //需求:给tab栏的每一个li标签设置鼠标移入事件: 当前li添加active类,其他的兄弟li移除active类.
        //    找到当前tab栏索引一致的div,让他添加 selected类,其他的兄弟div移除selected类.

        //需求1
      $(".tab>li").mouseenter(function () {
         $(this).addClass("active") .siblings("li").removeClass("active");

         var index =$(this).index();
         $(".products>.main").eq(index).addClass("selected").siblings("div").removeClass("selected");

      });


    });
</script>

7、动画设置

jquery提供了三组基本动画，这些基本动画都是标准的、有规律的效果，jQuery还提供了自定义动画的功能

7.1、基本动画

7.1.1、显示与隐藏

show() 显示

参数1:代表执行动画的时长(数字) 毫秒数,也可以是代表时长的字符串 fast、normal、slow
- 如果这三个字符串，你拼错。它会默认执行第二个normal的效果。
参数2:代表动画执行完毕后的回调函数。
可以传一个回调函数
如果你不传参数，便直接显现出来，没有效果。
本质上是改变容器的大小和透明度

$("#show").click(function () {
  // $("#div1").show(2000);//传数字
  // $("#div1").show("fast");//200毫秒
  // $("#div1").show("normal");//400毫秒
  // $("#div1").show("slow");//600毫秒
  // $("#div1").show("你拼错了");//400毫秒
  $("#div1").show(2000,function () {
    alert("执行完了");
  });//400毫秒
});

hide() 隐藏

参数及其参数效果同上

$('#hide').click(function () {
  //让id为div1的元素动画影藏.
  //$('#div1').hide();//没有参数没有动画效果.
  $('#div1').hide(2000);
  // $('#div1').hide(2000, function () {
  //   alert('隐藏了');
  // });
});

toggle() 切换

如果元素是隐藏状态就动画显示；如果元素是显示状态就动画隐藏
参数及其参数效果同上

//3.切换 toggle
//如果元素是隐藏状态就动画显示; 如果元素是显示状态就动画影藏.
$('#toggle').click(function () {
  $('#div1').toggle(1000);
});

7.1.2、滑入与滑出

slideDown 滑入

参数1: 动画执行的时长
参数2: 动画执行完毕后的回调函数
参数及其参数效果同上

$("#div1").slideDown(2000,function () {
  alert("wang");
});

slideUp 滑出

参数及其参数效果同上

$("#div1").slideUp("normal");

slideToggle() 切换

$("#div1").slideToggle(2000);

代码演示

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="滑入" id="slideDown"/>
<input type="button" value="滑出" id="slideUp"/>
<input type="button" value="切换" id="slideToggle"/><br/><br/>
<div id="div1"></div>
</body>
</html>

<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
    //1.滑入 slideDown(参数1,参数2);
    //参数1: 动画执行的时长
    //参数2: 动画执行完毕后的回调函数
    $('#slideDown').click(function () {
      //让id为div1的元素滑入.
      //$('#div1').slideDown();//没有给参数相当于给了一个默认的时长,mormal代表的400毫秒
      $('#div1').slideDown(2000);
      // $('#div1').slideDown(2000, function () {
      //   alert('滑入完成了..');
      // });
    });


    //2.滑出 slideUp();
    $('#slideUp').click(function () {
      //让id为div1的元素滑出
      $('#div1').slideUp(2000);
      // $('#div1').slideUp(2000, function () {
      //   alert('滑出做完了...');
      // });
    });

    //3.切换 slideToggle();
    //元素是隐藏状态就滑入; 元素是显示状态就滑出.
    $('#slideToggle').click(function () {
      $('#div1').slideToggle(1000);
    });
  });
</script>

7.1.3、淡入和淡出

fadeIn() 淡入

参数及其参数效果同上

$("#div1").fadeIn(1000,function (){
  alert("done!")
});

fadeOut 淡出

参数及其参数效果同上

$("#div1").fadeOut(1000,function () {
  alert("done!")
});

fadeToggle 淡入淡出切换

参数及其参数效果同上

$("#div1").fadeToggle(1000,function () {
  alert("!")
});

fadeTo

参数1：指定淡入的速度，可传数字，也可传3个字符串，规则同上
参数2：指定淡入的透明度
参数3：回调函数

$("#div1").fadeTo(1000,0.5,function () {//透明度淡出指定
  alert("!!")
});

代码演示

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
      display: none;
    }
  </style>
</head>
<body>
  <input type="button" value="淡入" id="fadeIn"/>
  <input type="button" value="淡出" id="fadeOut"/>
  <input type="button" value="切换" id="fadeToggle"/>
  <input type="button" value="淡入到那里" id="fadeTo"/><br/><br/>
  <div id="div1"></div>
</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
    //1.淡入 fadeIn
    $("#fadeIn").click(function () {
      $("#div1").fadeIn(1000,function (){
        alert("done!")
      });
    });

    $("#fadeOut").click(function () {
      $("#div1").fadeOut(1000,function () {
        alert("done!")
      });
    });

    $("#fadeToggle").click(function () {
      $("#div1").fadeToggle(1000,function () {
        alert("!")
      });
    });

    $("#fadeTo").click(function () {
      $("#div1").fadeTo(1000,0.5,function () {//透明度淡出指定
        alert("!!")
      });
    });

  });
</script>

7.2、自定义动画

animate() 自定义动画

参数1：必选的对象，代表的是需要做动画的属性
参数2：可选的，代表执行动画的时长
参数3：可选的easing代表的是缓动还是匀速linear(匀速) swing(缓动)默认不写是缓动swing
参数4：可选的动画执行完毕的回调函数
animate动画不会改变背景色，如果非要改，则要使用插件
代码演示

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0px;
    }
    #div1 {
      top:50px;
    }
    #div2 {
      top: 170px;
    }
  </style>
</head>
<body>
  <input type="button" value="从左到右800" id="lr800"/>
  <div id="div1"></div>
  <!--<div id="div2"></div>-->
  </body>
</html>

<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
    $("#lr800").click(function () {
      $("#div1").animate({
        width:200,
        height:200,
        "background-color":"blue",
        left:1600
      },2000,"linear",function () {
        $("#div1").animate({
          width: 50,
          height: 50,
          "backgroundColor": "green",
          left: 700
        },2000,"swing",function (){
         $("#div1").animate({
           left:800,
           width:200,
           height:200,
           opacity:0.5,
           "backgroundColor":"black"
         },2000,"linear",function () {
           alert("done!")
         })
        });
      });
    });
  });
</script>

问题：

我在jquery中，写了修改颜色的属性，可是在运行过程中，几乎忽视了颜色的更改，后来查资料有以下说法：

发现是jQuery中的animate没有backgroundColor效果，需要重写一个jquery.backgroundColor.js插件

7.2.1、案例：360开机动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 322px;
            position: fixed;
            bottom: 0;
            right: 0;
            overflow: hidden;
        }

        span {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="box" id="box">
    <span id="closeButton"></span>
    <div class="hd" id="headPart">
        <img src="imgs/t.jpg" alt=""/>
    </div>
    <div class="bd" id="bottomPart">
        <img src="imgs/b.jpg" alt=""/>
    </div>
</div>

</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
      //1.给关闭按钮一个点击事件.
       $("#closeButton").click(function () {
           //2.让下面那部分的高度动画变为0.
          $("#bottomPart").animate({
              height:0
          },1000,"linear",function () {
              $("#box").animate({
                  //3.让整个大盒子的宽度动画变为0
                 width:0
              },1000,"linear");
          });
       });

  });
</script>

7.3、动画队列与stop()

stop() 停止动画

参数1：是否清除队列
参数2：是否跳转到最终效果

$("div").stop();//如果stop()方法不写参数,默认就是两个false.

代码演示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="开始动画" id="start"/>
<input type="button" value="停止动画" id="stop"/> <br/><br/>
<div></div>
</body>
</html>

<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        $("#start").click(function () {
            $("div").slideDown(2000).slideUp(2000);
        });

        //2.停止动画: 执行stop方法.
        //stop();
        // 第一个参数：是否清除队列
        // 第二个参数：是否跳转到最终效果
        $("#stop").click(function () {
            $("div").stop();//如果stop()方法不写参数,默认就是两个false.
            // $("div").stop(false,true);
            // $("div").stop(true,true);
            // $("div").stop(true,false);
            // $("div").stop(false,false);
        });
    });
</script>

8、结点操作

8.1、创建结点

引入：原生JS创建结点：

document.write();
innerHTML;
document.createElement();

jQuery创建结点

html();
$();

html()

设置或者获取内容

不传递参数时，获取内容

console.log($("#div1").html());//获取内容: html()方法不给参数,会获取到元素的所有内容,包括孩子、孙子结点及其内容

把参数传进去会覆盖掉原来内容，包括其中的标签及其内容

$("#div1").html("这是我设置的内容");//会把原来的内容给覆盖，包括其中的标签

如果传进的参数中包含了标签，则会把标签解析出来

$("#div1").html("这是我设置的内容<a href='https://www.baidu.com'>百度一下</a>");//如果设置的内容中包含了标签,是会把标签给解析出来的.

$()

能创建元素,但是创建的元素只存在于内存中,相当于原生JS中的document.createElement();如果要在页面上显示,就要追加.

//确实能创建元素,但是创建的元素只存在于内存中,如果要在页面上显示,就要追加.
var $link = $("<a href='https://www.baidu.com'>百度一下</a>");
console.log($link);
//追加节点.
$("#div1").append($link);

8.1.1、表生成

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
<input type="button" value="获取数据" id="j_btnGetData" />
<table>
    <thead>
    <tr>
        <th>标题</th>
        <th>地址</th>
        <th>说明</th>
    </tr>
    </thead>
    <tbody id="j_tbData">

    </tbody>
</table>
</body>

</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
    //模拟从后端拿到的数据
    //data数组的每一个元素其实就是一个tr.
    var data = [{
      name: "传智播客",
      url: "http://www.itcast.cn",
      type: "IT最强培训机构"
    }, {
      name: "黑马程序员",
      url: "http://www.itheima.com",
      type: "大学生IT培训机构"
    }, {
      name: "传智前端学院",
      url: "http://web.itcast.cn",
      type: "前端的黄埔军校"
    }];

    //需求:点击获取数据按钮,根据data这个数组里面的数据来给tbody追加tr.
    //data这个数组,有多少个元素,就生成多少个tr, 每一个元素又是一个对象,所以对象有多少个键值对就有多少个td.


    //给获取数据按钮设置一个点击事件.
    $('#j_btnGetData').click(function () {
      //1.html();
      //设置内容,内容中有标签会解析; 会覆盖原来的内容的.
       var list = [];
       for(var i = 0 ; i < data.length; i++){
           //生成tr.
         list.push("<tr>");
         //生成td
         for(var key in data[i]){
           list.push('<td>');
           list.push(data[i][key]);
           list.push('</td>');
         }
         list.push("</tr>");
       }
       // console.log(list.join(""));
       $('#j_tbData').html(list.join(""));


      //2.$();
      // for(var i = 0 ; i < data.length; i++){
      //   var $tr = $("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['url']+"</td><td>"+data[i]['type']+"</td></tr>");
      //   //把创建出来的$tr追加到tbody中去.
      //   $('#j_tbData').append($tr);
      // }
    });
  });
</script>

8.2、添加结点

append()

格式：父元素.append(子元素);
作为最后一个子元素添加进去（从父元素的末尾添加进去）
如果将自己的原来的元素取出来，在添加进去，那么就相当于剪切后作为最后一个子元素添加进去
如果将别人的元素添加进自己里面，也是剪切后作为最后一个子元素添加

//1.append()
//父元素.append(子元素); //作为最后一个子元素添加.
$('#btnAppend').click(function () {
  //1.1 新创建一个li标签,添加到ul1中的去.（添加到最后一个）
  // var $liNew = $("<li>我是新创建的li标签</li>");
  // $('#ul1').append($liNew);

  //1.2 把ul1中已经存在的li标签添加到ul中去. 剪切后作为最后一个子元素添加.
  var $li3 = $('#li3');
  $('#ul1').append($li3);

  //1.3 把ul2中已经存在的li标签添加到ul1中去.剪切后作为最后一个子元素添加.
  // var $li32 = $('#li32');
  // $('#ul1').append($li32);
});

prepend()

格式：父元素.prepend(子元素);
作为第一个子元素添加
如果要添加的元素，原本存在自己里还添加，就会剪切后作为第一个元素添加
添加存在的元素，剪切后作为第一个元素添加进去

//2.prepend();
//父元素.prepend(子元素); //作为第一个子元素添加.
$('#btnPrepend').click(function () {
  //2.1 新建一个li标签,添加到ul1中去.
  // var $liNew = $("<li>我是新创建的li标签</li>");
  // $('#ul1').prepend($liNew);

  //2.1 把ul1中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加.
  // var $li3 = $('#li3');
  // $('#ul1').prepend($li3);

  //2.2 把ul2中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加.
  var $li32 = $('#li32');
  $('#ul1').prepend($li32);
});

before()

格式：元素A.before(元素B);
把元素B插入到元素A的前面，作为兄弟元素添加
如果把自己的子元素在调用此方法，也会成为兄弟元素。这个子元素将成为这个元素的兄弟元素，且这个脱离子元素将排在调用者前面

//3.before()
//元素A.before(元素B); //把元素B插入到元素A的前面,作为兄弟元素添加
$('#btnBefore').click(function () {
  //新建一个div
  var $divNew = $('<div>我是新建的div</div>');
  $('#ul1').before($divNew);
  
  // var $li3 = $('#li3');
  // $('#ul1').before($li3);
});

after()

格式：元素A.after(元素B);
把元素B插入到元素A的后面，作为兄弟元素添加
如果把自己的子元素在调用此方法，也会成为兄弟元素。这个子元素将成为这个元素的兄弟元素，且这个脱离子元素将排在调用者后面

//4.after();
//元素A.after(元素B); //把元素B插入到元素A的后面,作为兄弟元素添加.
$('#btnAfter').click(function () {
  新建一个div
  var $divNew = $('<div>我是新建的div</div>');
  $('#ul1').after($divNew);

  // var $li3 = $('#li3');
  // $('#ul1').after($li3);
});

appendTo()

格式：子元素.appendTo(父元素);
把子元素作为父元素的最后一个子元素添加

//5.appendTo();
//子元素.appendTo(父元素); //把子元素作为父元素的最后一个子元素添加.
$('#btnAppendTo').click(function () {
  //5.1 新建一个li标签,添加到ul1中去.
  var $liNew = $("<li>我是新创建的li标签</li>");
  $liNew.appendTo($('#ul1'));

});

8.2.1、案例：城市选择

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 200px;
            background-color: teal;
            height: 200px;
            font-size: 20px;
        }

        .btn-box {
            width: 30px;
            display: inline-block;
            vertical-align: top;
        }
    </style>
<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">西红柿</option>
</select>
<div class="btn-box">
    <!--实体字符-->
    <button id="btn-sel-all"> &gt;&gt; </button>
    <button id="btn-sel-none"> &lt;&lt; </button>
    <button id="btn-sel"> &gt;</button>
    <button id="btn-back"> &lt; </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
    //1.全部到右边
    $('#btn-sel-all').click(function () {
      //找到左边select下拉菜单的所有option项,把这些option项都添加到右边的select下拉菜单中去.
      $('#src-city>option').appendTo($('#tar-city'));
    });

    //2.全部到左边
    $('#btn-sel-none').click(function () {
      //找到右边select下拉菜单中的所有option项,把这些option项都添加到左边的select下拉菜单中去.
      $('#tar-city>option').appendTo($('#src-city'));
    });

    //3.选中的到右边.
    $('#btn-sel').click(function () {
      //找到左边select下拉菜单中,被选中的option项, 把这些option项添加到右边的select下拉菜单中.
      $('#src-city>option:selected').appendTo($('#tar-city'));
    });

    //4.选中的到左边.
    $('#btn-back').click(function () {
      //找到右边select下拉菜单中,被选中的option项,把这些option项添加到左边的select下拉菜单中.
      $('#tar-city>option:selected').appendTo($('#src-city'));
    });

  });
</script>

8.3、删除结点

清空元素内容：empty();
移除元素（包括标签）：remove();

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<ul id="ul1">
  <li>我是第1个li标签</li>
  <li>我是第2个li标签</li>
  <li id="li3">我是第3个li标签</li>
  <li>我是第4个li标签</li>
  <li>我是第5个li标签</li>
</ul>
</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
  //清空元素: empty();
  //移除节点: remove();
  $(function () {
$("#btn").click(function () {
  //1.清空ul.
  // $("#ul1").html("");//不推荐使用,有可能会造成内存泄漏,不安全.
  $("#ul1").empty();//推荐使用

  //2.移除某个元素
  // $("#li3").remove();//自杀：自己点出来的


  //3.移除ul1
  // $("#ul1").remove();

  //4.移除ul1，但是只能拿到li3
  // $("#li3").parent().remove();
})


  });
</script>

8.3.1、案例：表格删除

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 410px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "Î¢ÈíÑÅºÚ";
            color: #fff;
        }

        td {
            font: 14px "Î¢ÈíÑÅºÚ";
        }

        td a.get {
            text-decoration: none;
        }

        a.del:hover {
            text-decoration: underline;
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }

        .btnAdd {
            width: 110px;
            height: 30px;
            font-size: 20px;
            font-weight: bold;
        }

        .form-item {
            height: 100%;
            position: relative;
            padding-left: 100px;
            padding-right: 20px;
            margin-bottom: 34px;
            line-height: 36px;
        }

        .form-item > .lb {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100px;
            text-align: right;
        }

        .form-item > .txt {
            width: 300px;
            height: 32px;
        }

        .mask {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.15;
            display: none;
        }

        .form-add {
            position: fixed;
            top: 30%;
            left: 50%;
            margin-left: -197px;
            padding-bottom: 20px;
            background: #fff;
            display: none;
        }

        .form-add-title {
            background-color: #f7f7f7;
            border-width: 1px 1px 0 1px;
            border-bottom: 0;
            margin-bottom: 15px;
            position: relative;
        }

        .form-add-title span {
            width: auto;
            height: 18px;
            font-size: 16px;
            font-family: ËÎÌå;
            font-weight: bold;
            color: rgb(102, 102, 102);
            text-indent: 12px;
            padding: 8px 0px 10px;
            margin-right: 10px;
            display: block;
            overflow: hidden;
            text-align: left;
        }

        .form-add-title div {
            width: 16px;
            height: 20px;
            position: absolute;
            right: 10px;
            top: 6px;
            font-size: 30px;
            line-height: 16px;
            cursor: pointer;
        }

        .form-submit {
            text-align: center;
        }

        .form-submit input {
            width: 170px;
            height: 32px;
        }
    </style>
</head>

<body>
<div class="wrap">
   <input type="button" value="清空内容" id="btn">
    <table>
        <thead>
        <tr>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <!-- <td><input type="checkbox"/></td> -->
            <td>JavaScript</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">DELETE</a></td>
        </tr>
        <tr>
            <!-- <td><input type="checkbox"/></td> -->
            <td>css</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">DELETE</a></td>
        </tr>
        <tr>
            <!-- <td><input type="checkbox"/></td> -->
            <td>html</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">DELETE</a></td>
        </tr>
        <tr>
            <!-- <td><input type="checkbox"/></td> -->
            <td>jQuery</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">DELETE</a></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //1.清空内容
        $("#btn").click(function () {
            // $("table").empty();
            //找到tbody,清空他的内容.
            $("#j_tb").empty();
        });

        //2.删除对应的行.
        $("#j_tb .get").click(function () {
            //点击a标签,删除a标签对应的那一行.
            $(this).parent().parent().remove();
        });
    });
</script>

8.4、克隆结点

克隆结点：clone()

只存在内存中，如果要在页面上显示，就应该追加在页面上
clone()方法参数不管是true还是false，都会克隆到后代结点的
参数true表示的时：把事件一起克隆，参数如果时false就不会克隆事件
不传参数则默认为false

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    #div1 {
      width: 400px;
      height: 200px;
      border: 1px solid red;
    }

    #div2 {
      width: 400px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <input type="button" value="克隆" id="clone"/>
  <div id="div1">
    <span>span1</span>
    <p>p1
      <b>b1</b>
    </p>
  </div>
  <br/><br/>
</body>
</html>

<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
    //给id为div1的这个元素添加一个点击事件.
    $('#div1').click(function () {
      alert('哈哈,我被点击了...');
    });
    //jQuery中克隆节点:clone()
    //只存在与内存中,如果要在页面上显示,就应该追加到页面上.
    //clone()方法参数不管是true还是false,都是会克隆到后代节点的.
    //clone()方法参数是true表示会把事件一起克隆到. 参数如果是false就不会克隆事件. 不给参数默认是false.
    //给按钮设置点击事件
    $('#clone').click(function () {
      var $cloneDiv = $('#div1').clone(true);
      //修改克隆节点的id
      $cloneDiv.attr('id','div2');
      //console.log($cloneDiv);
      //把克隆的节点追加到body中.
      $('body').append($cloneDiv);
    });
  });
</script>

9.jQuery特殊属性操作

9.1、val()设置与获取属性值

原生js是通过value属性来获取或者设置表单元素的值.

jQuery中如何设置或者获取表单元素的值的呢? val();

不给参数，便是获取属性值

//val()方法,不给参数就是获取
console.log($("#txt").val());

给参数就是设置属性值

//val()方法,给参数就是设置
$("#txt").val("空");

案例：数据表的动态添加与删除

注意：

在设置删除的时候，你直接写下去的时候，你这样只给原本的删除绑定了事件，可你新添加的数据却没有因此绑定事件，就如同以下运行代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 410px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        td a.get {
            text-decoration: none;
        }

        a.del:hover {
            text-decoration: underline;
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }

        .btnAdd {
            width: 110px;
            height: 30px;
            font-size: 20px;
            font-weight: bold;
        }

        .form-item {
            height: 100%;
            position: relative;
            padding-left: 100px;
            padding-right: 20px;
            margin-bottom: 34px;
            line-height: 36px;
        }

        .form-item > .lb {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100px;
            text-align: right;
        }

        .form-item > .txt {
            width: 300px;
            height: 32px;
        }

        .mask {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.6;
            display: none;
        }

        #j_hideFormAdd {
            width: 22px;
            height: 22px;
            cursor: pointer;
            text-align: center;
            line-height: 22px;
            font-size: 18px;
        }

        #j_hideFormAdd:hover {
            background-color: skyblue;
        }

        .form-add {
            position: fixed;
            top: 30%;
            left: 50%;
            margin-left: -197px;
            padding-bottom: 20px;
            background: #fff;
            display: none;
        }

        .form-add-title {
            background-color: #f7f7f7;
            border-width: 1px 1px 0 1px;
            border-bottom: 0;
            margin-bottom: 15px;
            position: relative;
        }

        .form-add-title span {
            width: auto;
            height: 18px;
            font-size: 16px;
            font-family: 宋体;
            font-weight: bold;
            color: rgb(102, 102, 102);
            text-indent: 12px;
            padding: 8px 0px 10px;
            margin-right: 10px;
            display: block;
            overflow: hidden;
            text-align: left;
        }

        .form-add-title div {
            width: 16px;
            height: 20px;
            position: absolute;
            right: 10px;
            top: 6px;
            font-size: 30px;
            line-height: 16px;
            cursor: pointer;
        }

        .form-submit {
            text-align: center;
        }

        .form-submit input {
            width: 170px;
            height: 32px;
        }
    </style>

</head>
<body>
<!--按钮和表单-->
<div class="wrap">
    <div>
        <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
    </div>
    <table>
        <thead>
        <tr>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>已学会</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>JavaScript</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">delete</a></td>
        </tr>
        <tr>
            <td>css</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">delete</a></td>
        </tr>
        <tr>
            <td>html</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">delete</a></td>
        </tr>
        <tr>
            <td>jQuery</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">delete</a></td>
        </tr>
        </tbody>
    </table>
</div>
<!--遮罩层-->
<div id="j_mask" class="mask"></div>
<!--添加数据的表单-->
<div id="j_formAdd" class="form-add">
    <div class="form-add-title">
        <span>添加数据</span>

        <div id="j_hideFormAdd">×</div>
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtLesson">课程名称：</label>
        <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtBelSch">所属学院：</label>
        <input class="txt" type="text" id="j_txtBelSch" value="传智播客-前端与移动开发学院">
    </div>
    <div class="form-submit">
        <input type="button" value="添加" id="j_btnAdd">
    </div>
</div>
</body>
</html>

<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //需求1:点击 添加数据 按钮,显示添加面板和遮罩层.
        //需求2:点击添加面板里的关闭按钮,隐藏添加面板和遮罩层.
        //需求3:点击添加面板里的添加按钮,会把输入的内容生成一个tr,这个tr添加到tbody中
        //需求4:点击delete这些a标签,删除对应的tr.

        //需求1
        $("#j_btnAddData").click(function () {
            $("#j_formAdd").show();
            $("#j_mask").show();
        });

        //需求2
        $("#j_hideFormAdd").click(function () {
            $("#j_formAdd").hide();
            $("#j_mask").hide();
        });

        //需求3
        $("#j_btnAdd").click(function () {
           var $lesson =$("#j_txtLesson").val();
           var $learn =$("#j_txtBelSch").val();
           var $trNew =$("<tr>" +
                           "<td>"+$lesson+"</td>"+
                           "<td>"+$learn+"</td>"+
                           "<td><a href='javascrip:;\' class='get'>delete</a></td>" +
                       "</tr>")

            $("#j_tb").append($trNew);

            $("#j_hideFormAdd").click();
        });

        //需求4
        $("#j_tb .get").click(function () {
           $(this).parent().parent().remove();
        });


    });
</script>

在这里，你按新添加的删除是没有效果的。这种情况要为新添加的数据绑定事件。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 410px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        td a.get {
            text-decoration: none;
        }

        a.del:hover {
            text-decoration: underline;
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }

        .btnAdd {
            width: 110px;
            height: 30px;
            font-size: 20px;
            font-weight: bold;
        }

        .form-item {
            height: 100%;
            position: relative;
            padding-left: 100px;
            padding-right: 20px;
            margin-bottom: 34px;
            line-height: 36px;
        }

        .form-item > .lb {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100px;
            text-align: right;
        }

        .form-item > .txt {
            width: 300px;
            height: 32px;
        }

        .mask {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.6;
            display: none;
        }

        #j_hideFormAdd {
            width: 22px;
            height: 22px;
            cursor: pointer;
            text-align: center;
            line-height: 22px;
            font-size: 18px;
        }

        #j_hideFormAdd:hover {
            background-color: skyblue;
        }

        .form-add {
            position: fixed;
            top: 30%;
            left: 50%;
            margin-left: -197px;
            padding-bottom: 20px;
            background: #fff;
            display: none;
        }

        .form-add-title {
            background-color: #f7f7f7;
            border-width: 1px 1px 0 1px;
            border-bottom: 0;
            margin-bottom: 15px;
            position: relative;
        }

        .form-add-title span {
            width: auto;
            height: 18px;
            font-size: 16px;
            font-family: 宋体;
            font-weight: bold;
            color: rgb(102, 102, 102);
            text-indent: 12px;
            padding: 8px 0px 10px;
            margin-right: 10px;
            display: block;
            overflow: hidden;
            text-align: left;
        }

        .form-add-title div {
            width: 16px;
            height: 20px;
            position: absolute;
            right: 10px;
            top: 6px;
            font-size: 30px;
            line-height: 16px;
            cursor: pointer;
        }

        .form-submit {
            text-align: center;
        }

        .form-submit input {
            width: 170px;
            height: 32px;
        }
    </style>

</head>
<body>
<!--按钮和表单-->
<div class="wrap">
    <div>
        <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
    </div>
    <table>
        <thead>
        <tr>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>已学会</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>JavaScript</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">delete</a></td>
        </tr>
        <tr>
            <td>css</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">delete</a></td>
        </tr>
        <tr>
            <td>html</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">delete</a></td>
        </tr>
        <tr>
            <td>jQuery</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">delete</a></td>
        </tr>
        </tbody>
    </table>
</div>
<!--遮罩层-->
<div id="j_mask" class="mask"></div>
<!--添加数据的表单-->
<div id="j_formAdd" class="form-add">
    <div class="form-add-title">
        <span>添加数据</span>

        <div id="j_hideFormAdd">×</div>
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtLesson">课程名称：</label>
        <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtBelSch">所属学院：</label>
        <input class="txt" type="text" id="j_txtBelSch" value="传智播客-前端与移动开发学院">
    </div>
    <div class="form-submit">
        <input type="button" value="添加" id="j_btnAdd">
    </div>
</div>
</body>
</html>

<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //需求1:点击 添加数据 按钮,显示添加面板和遮罩层.
        //需求2:点击添加面板里的关闭按钮,隐藏添加面板和遮罩层.
        //需求3:点击添加面板里的添加按钮,会把输入的内容生成一个tr,这个tr添加到tbody中
        //需求4:点击delete这些a标签,删除对应的tr.

        //需求1
        $("#j_btnAddData").click(function () {
            $("#j_formAdd").show();
            $("#j_mask").show();
        });

        //需求2
        $("#j_hideFormAdd").click(function () {
            $("#j_formAdd").hide();
            $("#j_mask").hide();
        });

        //需求3
        $("#j_btnAdd").click(function () {
            var $lesson = $("#j_txtLesson").val();//获取用户输入的课程名称
            var $learn = $("#j_txtBelSch").val();//获取用户输入的所属学院
            //3.2 把用户输入的课程名称和所属学院 ,创建出一个tr.
            var $trNew = $("<tr>" +
                "<td>" + $lesson + "</td>" +
                "<td>" + $learn + "</td>" +
                "<td><a href='javascrip:;\' class='get'>delete</a></td>" +
                "</tr>")
        //3.3 把新创建的tr标签添加到tbody中.
            $("#j_tb").append($trNew);
            //给新创建的这个$trNew里面的a标签添加一个事件.因为此时新添加的数据没有包括在需求四下
            $("#j_tb .get").click(function () {
                $(this).parent().parent().remove();
            });
        //3.4 把添加数据面板和遮罩层影藏起来.
            $("#j_hideFormAdd").click();
        });

        //需求4
        $("#j_tb .get").click(function () {
            $(this).parent().parent().remove();
        });
    });
</script>

9.2、attr()与removeAttr()

jQuery中操作属性:attr()、removeAttr()

attr()

获取属性
- 传要获取的属性名
  - 若传的属性名不存在，结果为undefined;
  - attr()自己设置的属性也可以获取，自定义属性也可以获取

//console.log($('img').attr('src'));//自带的属性可以获取
      //console.log($('img').attr('aaa'));//自定义的属性也可以获取
      console.log($('img').attr('bbb'));//如果没有这个属性,获取到的值就是undefined; attr()设置的属性也是可以获取的.

设置属性
- 传2个参数：
  - 参数1：要设置的属性名
  - 参数2：要设置的属性值
设置单属性

$('img').attr('src','992.gif');//以前有src属性,更改这个属性.
// $('img').attr('aaa','哈哈哈');//修改自定义属性.
// $('img').attr('bbb','bbb');//如果元素原来没有这个属性,那就是添加属性.

设置多属性

$('img').attr({
  src:'992.gif',
  aaa:"hahaha",
  bbb:'bbb'
});

removeAttr()

移除属性
- 移除单属性

$('img').removeAttr('alt');
      // $('img').removeAttr('aaa');
      // $('img').removeAttr('bbb');

设置多属性

$('img').removeAttr('alt aaa bbb'); //移除多属性.

9.2、案例：美女相册

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            font-family: "Helvetica", "Arial", serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }

        h1 {
            color: #333;
            background-color: transparent;
        }

        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }

        ul {
            padding: 0;
        }

        li {
            float: left;
            padding: 1em;
            list-style: none;
        }

        #imagegallery {

            list-style: none;
        }

        #imagegallery li {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }

        #imagegallery li a img {
            border: 0;
        }
    </style>
</head>
<body>
<h2>
    美女画廊
</h2>

<ul id="imagegallery">
    <li><a href="01.jpg" title="美女A">
        <img src="01.jpg" width="100" alt="美女1"/>
    </a></li>
    <li><a href="02.jpg" title="美女B">
        <img src="02.jpg" width="100" alt="美女2"/>
    </a></li>
    <li><a href="03.jpg" title="美女C">
        <img src="03.jpg" width="100" alt="美女3"/>
    </a></li>
    <li><a href="04.jpg" title="美女D">
        <img src="04.jpg" width="100" alt="美女4"/>
    </a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="images/meinv/placeholder.png" alt="" width="450px"/>
<p id="des">选择一个图片</p>
<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //1.需求
        //给小图片a标签设置一个单击事件.
        //让id为image的img标签修改src属性为当前点击的a标签的href属性的值
        //让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.
        //1.需求
        //给小图片a标签设置一个单击事件.
        //让id为image的img标签修改src属性为当前点击的a标签的href属性的值
        //让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.

        $('#imagegallery>li>a').click(function () {
            //获取当前点击的a标签的href属性的值和title属性的值。
            var srcValue = $(this).attr('href');
            var contentValue = $(this).attr('title');
            //给img标签的src属性赋值，以及给p标签的内容赋值。
            $('#image').attr('src',srcValue);
            $('#des').text(contentValue);
            //阻止a标签的跳转
            return false;
        });
        // $("#imagegallery>li>a").click(function () {
        //     var $href = $(this).attr("href");
        //     var $content =$(this).attr("title");
        //     $("#image").attr("src",$href);
        //     $("#des").text($content);
        //     return false;
        // });

    });
</script>
</body>
</html>

9.3、prop()布尔类型属性

在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr(),只能用prop().
如果坚持用attr()，那无论如何都给返回undefined

prop()

获取属性值（只穿一个参数）

onsole.log($('#ckb1').prop('checked'));
//如果多选框是选中状态返回一个true； 如果多选框是取消选中状态那返回就是一个false.

设置属性值
- 参数1：要设置的属性名
- 参数2：要设置的属性值

$('#ckb1').prop('checked',true)

9.3.1、案例：表格全选与反选

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<body>
<div class="wrap">
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll"/>
                </th>
                <th>课程名称</th>
                <th>所属学院</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>JavaScript</td>
                <td>前端与移动开发学院</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>css</td>
                <td>前端与移动开发学院</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>html</td>
                <td>前端与移动开发学院</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>jQuery</td>
                <td>前端与移动开发学院</td>
            </tr>
        </tbody>
    </table>
</div>
<div id="one"></div>
</body>
<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
      //需求1:上面的多选框选中,下面的多选框们跟着选中,上面的多选框没有选中,下面的多选框们跟着不选中.
      //需求2:下面的多选框们,都有单击事件:
      //如果下面的多选框们都选中了,那么上面的那个多选框跟着选中,如果下面多选框有一个没有选中,那么上面的多选框就不选中.

     //需求1
      $("#j_cbAll").click(function () {
          //获取这多选框的checked值。
         var $checkAll =$(this).prop("checked");
          //让下面的多选框们的checked跟随这个checkedValue
         $("#j_tb input").prop("checked",$checkAll);
      });

      //需求2：
      $("#j_tb input").click(function (){
          //判断下面的那四个多选框是否都被选中了。
          var checkedLen =$("#j_tb input").length;//获取到下面所有多选框的个数。

          var checkedNum =$("#j_tb input:checked").length;//获取到下面被选中的多选框的个数。

        // if(checkedLen ==checkedNum){
          //全部被选中。
        //     $('#j_cbAll').prop('checked',true);
        // }else {
          //没有全部被选中。
        //     $('#j_cbAll').prop('checked',false);
        // }

          //上面这个判断其实可以优化。
          $('#j_cbAll').prop('checked',checkedLen==checkedNum);

      });

  });
</script>
</html>

9.4、宽与高

width() height()

获取与设置宽高
- 不传参数为获取
- 传参数为设置
- 这个宽高是不包括padding、border、margin

//1.2 width() height()
//获取或者设置元素的宽高的,这个宽高不包括padding/border/margin.
//获取
console.log($('#one').width());
console.log($('#one').height());
//设置
$('#one').width(300);
$('#one').height(300);

innerWidth() innerHeight()

获取与设置宽高
- 不传参数为获取
- 传参数为设置
- 这个宽高是包括内边距的

 $('#one').innerWidth(500);
$('#one').innerHeight(500);
 console.log($('#one').innerWidth());
 console.log($('#one').innerHeight());

图示：

在这里插入图片描述

由于我设置了500，内边距上面的style又设置为20.，所以元素为460，

outerWidth() outerHeight()

获取与设置宽高
- 不传参数为获取
- 传参数为设置
- 这个宽高是包括内边距和边框

//1.4 outerWidth()/outerHeight()
//方法返回元素的宽度/高度（包括内边距和边框）。
$('#one').outerWidth(800);
$('#one').outerHeight(800);
console.log($('#one').outerWidth());
console.log($('#one').outerHeight());

outerWidth(true) outerHeight(true)

获取宽高
- 传入参数true
- 这个宽高是包括内边距、边框和外边距

//1.5 outerWidth(true)/outerHeight(true)
//方法返回元素的宽度/高度（包括内边距、边框和外边距）。
console.log($('#one').outerWidth(true));
console.log($('#one').outerHeight(true));

获取页面可视宽高

//1.5 获取页面可视区的宽高.
// 获取可视区宽度
console.log($(window).width());
// // 获取可视区高度
console.log($(window).height());

9.5、位置获取

offset()

获取会得到一个对象，对象里面包含了top和left的值
offset方法获取元素距离document的位置

console.log($('#son').offset());

position()

获取会得到一个对象，对象里面包含了top和left的值
position方法获取的是元素距离有定位的父元素(offsetParent)的位置

console.log($('#son').position());

scrollLeft()

表示元素内容被卷曲出去的宽度
不传参数为获取
传参数为设定（指定滚轮所滚动的位置）

$('div').scrollLeft(217);

scrollTop()

scrollTop() 表示元素内容被卷曲出去的高度
不传参数为获取
传参数为设定（设定滚轮滚动的位置）

$('div').scrollTop(217);

拓展

获取页面被卷曲的宽度

console.log($(window).scrollTop());

获取页面被卷曲的高度

console.log($(window).scrollLeft());

设置页面每卷曲的距离

$(window).scrollTop(1000);
$(window).scrollLeft(1000);

案例：固定导航栏

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>固定导航栏</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .top, .nav {
      width: 1423px;
      margin: 0 auto;
    }

    .main {
      width: 1000px;
      margin: 10px auto;
    }

    img {
      display: block;
      vertical-align: middle;
    }

  </style>
</head>
<body>
  <div class="top">
    <img src="imgs/top.png"/>
  </div>
  <div class="nav">
    <img src="imgs/nav.png"/>
  </div>
  <div class="main">
    <img src="imgs/main.png"/>
  </div>

<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
    //思路:给页面设置一个滚动事件,时刻监视页面的scrollTop的值,
    // 如果这个值大于第一部分的高度,就设置第二部分为固定定位.
    // 如果这个值小于第一部分的高度,就设置第二部分的定位还原.


    //计算第一部分的高度.
    var topHeight = $('.top').height();
    //计算第二部分的高度.
    var navHeight = $('.nav').height();

    //给页面设置一个滚动事件.
    $(window).scroll(function () {
      //1.获取页面滚出去的距离(被卷曲出去的距离);
      var scrollTopValue =  $(window).scrollTop();
      //2.判断,看scrollTopValue的值是不是大于第一部分的高度.
      if(scrollTopValue >= topHeight){
        //让第二部分固定定位.
        $('.nav').css({
          position:'fixed',
          top:0,
          left:0
        });
        //设置第三部分的margin-top的值为第二部分的高度.
        $('.main').css({
          marginTop:navHeight+10
        });
      }else {
        //让第二部分定位还原.
        $('.nav').css({
          position:'static',
          top:0,
          left:0
        });
        //设置第三部分的margin-top的值为原来的值.
        $('.main').css({
          marginTop:10
        });
      }
    });
  });
</script>
</body>
</html>

10、jQuery事件机制

JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

10.1、jQuery事件发展历程(了解)

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

简单事件注册

    click(handler)			//单击事件
    mouseenter(handler)		//鼠标进入事件
    mouseleave(handler)		//鼠标离开事件

缺点：不能同时注册多个事件

bind方式注册事件

    //第一个参数：事件类型
    //第二个参数：事件处理程序
    $("p").bind("click mouseenter", function(){
        //事件响应方法
    });

缺点：不支持动态事件绑定

delegate注册委托事件

    // 第一个参数：selector，要绑定事件的元素
    // 第二个参数：事件类型
    // 第三个参数：事件处理函数
    $(".parentBox").delegate("p", "click", function(){
        //为 .parentBox下面的所有的p标签绑定事件
    });

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

10.2、on注册事件(重点)

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

10.2.1、on注册简单事件

不支持动态注册
支持同时注册

//10.2.1 on简单注册事件.
//不支持动态注册的.
$('div').on('click', function () {
  console.log("我是单击事件...");
});
//支持同时支持
$('div').on('click mouseenter', function () {
      console.log("我是单击事件...");
    });

10.2.2、on委托注册

支持同时注册
支持动态注册

/10.2.2 on委托注册
//支持动态注册的.
//支持同时注册
三个参数：
   (1)事件名称
   (2)要触发这个事件的元素
   (3)事件处理程序
$('body').on('click mouseenter','div,span', function () {
  console.log("单击事件.");
});

10.2.3、on委托注册解决动态删除与添加表数据

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 410px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        td a.get {
            text-decoration: none;
        }

        a.del:hover {
            text-decoration: underline;
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }

        .btnAdd {
            width: 110px;
            height: 30px;
            font-size: 20px;
            font-weight: bold;
        }

        .form-item {
            height: 100%;
            position: relative;
            padding-left: 100px;
            padding-right: 20px;
            margin-bottom: 34px;
            line-height: 36px;
        }

        .form-item > .lb {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100px;
            text-align: right;
        }

        .form-item > .txt {
            width: 300px;
            height: 32px;
        }

        .mask {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.6;
            display: none;
        }

        #j_hideFormAdd {
            width: 22px;
            height: 22px;
            cursor: pointer;
            text-align: center;
            line-height: 22px;
            font-size: 18px;
        }
        #j_hideFormAdd:hover {
            background-color: skyblue;
        }
        .form-add {
            position: fixed;
            top: 30%;
            left: 50%;
            margin-left: -197px;
            padding-bottom: 20px;
            background: #fff;
            display: none;
        }

        .form-add-title {
            background-color: #f7f7f7;
            border-width: 1px 1px 0 1px;
            border-bottom: 0;
            margin-bottom: 15px;
            position: relative;
        }

        .form-add-title span {
            width: auto;
            height: 18px;
            font-size: 16px;
            font-family: 宋体;
            font-weight: bold;
            color: rgb(102, 102, 102);
            text-indent: 12px;
            padding: 8px 0px 10px;
            margin-right: 10px;
            display: block;
            overflow: hidden;
            text-align: left;
        }

        .form-add-title div {
            width: 16px;
            height: 20px;
            position: absolute;
            right: 10px;
            top: 6px;
            font-size: 30px;
            line-height: 16px;
            cursor: pointer;
        }

        .form-submit {
            text-align: center;
        }

        .form-submit input {
            width: 170px;
            height: 32px;
        }
    </style>

</head>
<body>
    <!--按钮和表单-->
    <div class="wrap">
        <div>
            <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
        </div>
        <table>
            <thead>
            <tr>
                <th>课程名称</th>
                <th>所属学院</th>
                <th>已学会</th>
            </tr>
            </thead>
            <tbody id="j_tb">
            <tr>
                <td>JavaScript</td>
                <td>传智播客-前端与移动开发学院</td>
                <td><a href="javascrip:;" class="get">delete</a></td>
            </tr>
            <tr>
                <td>css</td>
                <td>传智播客-前端与移动开发学院</td>
                <td><a href="javascrip:;" class="get">delete</a></td>
            </tr>
            <tr>
                <td>html</td>
                <td>传智播客-前端与移动开发学院</td>
                <td><a href="javascrip:;" class="get">delete</a></td>
            </tr>
            <tr>
                <td>jQuery</td>
                <td>传智播客-前端与移动开发学院</td>
                <td><a href="javascrip:;" class="get">delete</a></td>
            </tr>
            </tbody>
        </table>
    </div>
    <!--遮罩层-->
    <div id="j_mask" class="mask"></div>
    <!--添加数据的表单-->
    <div id="j_formAdd" class="form-add">
        <div class="form-add-title">
            <span>添加数据</span>

            <div id="j_hideFormAdd">×</div>
        </div>
        <div class="form-item">
            <label class="lb" for="j_txtLesson">课程名称：</label>
            <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
        </div>
        <div class="form-item">
            <label class="lb" for="j_txtBelSch">所属学院：</label>
            <input class="txt" type="text" id="j_txtBelSch" value="传智播客-前端与移动开发学院">
        </div>
        <div class="form-submit">
            <input type="button" value="添加" id="j_btnAdd">
        </div>
    </div>
</body>
</html>

<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //需求1:点击 添加数据 按钮,显示添加面板和遮罩层.
        //需求2:点击添加面板里的关闭按钮,隐藏添加面板和遮罩层.
        //需求3:点击添加面板里的添加按钮,会把输入的内容生成一个tr,这个tr添加到tbody中
        //需求4:点击delete这些a标签,删除对应的tr.


        //需求1:
        $('#j_btnAddData').click(function () {
            $('#j_formAdd').show();
            $('#j_mask').show();
        });

        //需求2:
        $('#j_hideFormAdd').click(function () {
            $('#j_formAdd').hide();
            $('#j_mask').hide();
        });

        //需求3:
        $('#j_btnAdd').click(function () {
            //3.1 获取到用户输入的所属学院和课程名称.
            var txtLesson = $('#j_txtLesson').val(); //获取用户输入的课程名称
            var txtBelSch = $('#j_txtBelSch').val(); //获取用户输入的所属学院
            //3.2 把用户输入的课程名称和所属学院 ,创建出一个tr.
            var $trNew =$( '<tr>' +
                            '<td>'+txtLesson+'</td>'+
                            '<td>'+txtBelSch+'</td>' +
                            '<td><a href="javascrip:;" class="get">delete</a></td>' +
                         '</tr>' );

            // //给新创建的这个$trNew里面的a标签添加一个事件.
            // $trNew.find('.get').click(function () {
            //     //$(this).parent().parent().remove();
            //     $trNew.remove();
            // });

            //3.3 把新创建的tr标签添加到tbody中.
            $('#j_tb').append($trNew);
            //3.4 把添加数据面板和遮罩层影藏起来.
            $('#j_hideFormAdd').click();
        });


        //4.需求
        // $('#j_tb .get').click(function () {
        //     $(this).parent().parent().remove();
        // });

        //使用on委托注册的方式来添加删除方法.
        //支持动态注册的.
        $("#j_tb").on("click",".get",function () {
            //jQuery为了使用方便,把this给修改了.
            $(this).parent().parent().remove();
        })



        //页面出现了哈哈二字,说明上面的代码,包括需求4这个注册事件,都已经完成了.
        //说明原来的那4个tr已经注册了事件了.
        console.log("哈哈");


    });
</script>

10.3、jQuery事件解绑

unbind方式（不用）

    $(selector).unbind(); //解绑所有的事件
    $(selector).unbind("click"); //解绑指定的事件

undelegate方式（不用）

    $( selector ).undelegate(); //解绑所有的delegate事件
    $( selector).undelegate( 'click' ); //解绑所有的click事件

10.3.1、off()方式解绑 (推荐)

jQuery用on注册事件，那就用off来解绑事件
off不给参数就是解绑所有的事件
off("click")解绑指定的事件

$('#one').off('click');//解绑click事件.

代码演示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        .one {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<input type="button" value="注册事件" id="btn1"/>
<input type="button" value="解绑事件" id="btn2"/> <br/><br/>
<div class="one" id="one"></div>
</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //jQuery用on来注册事件,那就用off来解绑事件.
        //off()不给参数就是解绑所有的事件.
        //off('click')解绑指定的事件.
        //1.注册事件.
        $("#btn1").on("click", function () {
            //给div注册事件
            $("#one").on({
                "click": function () {
                    console.log("点击了！");
                },
                "mouseenter": function () {
                    console.log("移入了")
                }
            });
        });

        //2.移除事件.
        $('#btn2').on('click', function () {
            //给div解绑事件.
            //$('#one').off();//解绑所有事件.
            $('#one').off('click');//解绑click事件.
        });

    });
</script>

10.4、事件的触发

trigger

代码的方式触发
可以使用触发自定义事件
代码演示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<input type="button" value="按钮" id="btn1"/>
<input type="button" value="按钮2" id="btn2"/>
<div id="one" class="one"></div>
</body>
</html>
<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //事件触发 trigger.
        //a.代码的方式来触发事件.
        //b.可以使用他来触发自定义事件.


//    //1.给div注册一个单击事件.
        $('#one').on('click', function () {
            console.log("单击事件....");
        });
//
//    //2.给按钮注册事件.
        var i = 0;
        $('#btn1').on('click', function () {
            i++;
            if (i == 3) {
                //条件满足,触发div的单击事件.
                //事件触发.感觉就是用代码的方式来触发事件.
                //$('#one').click();
                $('#one').trigger('click');
            }
        });


        //-------------------------------------------------------
        //给div注册一个自定义事件.
        //那我现在就是要触发他怎么办?就可以使用触发器trigger.
        $("#one").on("天下", function () {
            console.log("爷天下第一帅，天下第一强！")
        });
        //触发自定义事件.
        $("#btn2").on("click", function () {
            $("#one").trigger("天下");

        });


    });
</script>

10.5、事件对象

是事件对象？

注册一个事件,系统就会帮我们生成一个对象记录这个事件触发时候的一些信息
比如触发事件的时候有没有按住某个键,再比如触发这个事件的时候的一些坐标信息…
jQuery中用事件参数e（习惯上）来获取.
jQuery的事件对象是对原生js事件对象的一个封装,帮你处理好了兼容性.

事件对象中常用的三个坐标

screenX与screenY:触发事件那一点距离屏幕最左上角的值
clientX与clientY:触发事件那一点距离可视区左上角的值
pageX与pageY:触发事件那一点距离页面左上角的值

10.5.1、拓展

stopPropagation()

阻止事件冒泡

preventDefault()

阻止默认行为

return false

技能阻止事件事件冒泡，又能阻止默认行为

keyCode

能获取按的是哪个键

代码演示

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body {
      width: 2000px;
      height: 2000px;

    }
    .one {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      /*margin-top: 10px;*/
      position: relative;
      top: 100px;
      left: 100px;
    }
  </style>
</head>
<body>
  <div id="one" class="one">
    <input type="button" value="我是按钮" id="btn"/>
    <br/><br/>
    <a href="https://www.baidu.com">百度一下，你就知道</a>
  </div>
</body>
</html>

<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {
    //1.什么是事件对象.
    //注册一个事件,系统就会帮我们生成一个对象记录这个事件触发时候的一些信息
    //比如触发事件的时候有没有按住某个键,再比如触发这个事件的时候的一些坐标信息....
    //jQuery中用事件参数e来获取.
    //jQuery的事件对象是对原生js事件对象的一个封装,帮你处理好了兼容性.
    $('#one').on('click', function (e) {
      //console.log(e);


      //2.事件对象中有常用的三个坐标.
      // console.log("screenX"+ e.screenX +" : " + e.screenY);//触发事件那一点距离 屏幕最左上角的值
      // console.log("clientX"+ e.clientX +" : " + e.clientY);//触发事件那一点距离 可视区左上角的值
      // console.log("pageX"+ e.pageX +" : " + e.pageY);//触发事件那一点距离  页面左上角的值


      //3.
      alert("我是div的单击事件.");

    });


    //3.给按钮注册一个单击事件.
    // $('#btn').on('click', function (e) {
    //   alert('我是按钮的单击事件');
    //   e.stopPropagation();//阻止事件冒泡.
    // });

    //4.给a标签注册一个单击事件.
    // $('a').on('click', function (e) {
    //   alert('我是a标签的单击事件....');
    //   // //阻止事件冒泡
    //   // e.stopPropagation();
    //   // //阻止默认行为-阻止a标签的跳转.
    //   // e.preventDefault();
//
    //   //既能阻止事件冒泡,又能阻止默认行为.
    //   return false;
    // });


    //5.给页面注册键盘按下事件.
    $(document).on('keydown', function (e) {
      //e.keyCode能获取按的是那个键.
      console.log(e.keyCode);
    });

  });
</script>

10.5.2、案例：按键变色

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            width: 400px;
            height: 400px;
            margin: 100px auto 0;
        }

        .wrap h1 {
            text-align: center;
        }

        .wrap div {
            width: 400px;
            height: 300px;
            background: pink;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>

    <div class="wrap">
        <h1>按键改变颜色</h1>
        <div id="bgChange">
            keyCode为：
            <span id="keyCodeSpan"></span>
        </div>
    </div>

<script src="../js/jquery-3.6.0.js"></script>
<script>
  $(function () {

      //获取div
      var $div = $('#bgChange');
      //获取显示按键的span
      var $showCode = $('#keyCodeSpan');

      //给页面注册一个键盘按下事件.
      $(document).on('keydown', function (e) {
          //console.log(e.keyCode); //r 82   g 71   b 66   p 80   y 89
          switch (e.keyCode){
              case 82:
                  $div.css('backgroundColor','red');
                  $showCode.text(82);
                  break;
              case 71:
                  $div.css('backgroundColor','green');
                  $showCode.text(71);
                  break;
              case 66:
                  $div.css('backgroundColor','blue');
                  $showCode.text(66);
                  break;
              case 80:
                  $div.css('backgroundColor','purple');
                  $showCode.text(80);
                  break;
              case 89:
                  $div.css('backgroundColor','yellow');
                  $showCode.text(89);
                  break;
              default :
                  $div.css('backgroundColor','pink');
                  $showCode.text("查无此键");
                  break;
          }
      });

  });
</script>
</body>
</html>

10.5.3、案例：5星评分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: red;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>
</head>

<body>
<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>

<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //需求1:鼠标移入到li标签上,当前li标签和他之前的li标签显示实心五角心,后面的li显示空心五角心.
        //需求2:鼠标离开li,所有的li都变成空心.
        //需求3:点击li,鼠标离开后,刚才点击的那个li和之前的li都变成实心五角心,后面空心五角心.

        //prev();    上一个兄弟.
        //prevAll(); 之前所有的兄弟
        //next();    下一个兄弟.
        //nextAll(); 之后所有的兄弟

        //声明两个个变量,分别记录这个实心/空心五角心.
        var sx_wjx = '★';
        var kx_wjx = '☆';

        $(".comment li").on("mouseenter", function () {
            $(this).text(sx_wjx).prevAll().text(sx_wjx);
            $(this).nextAll().text(kx_wjx);

            //这样不行.
            //$(this).text(sx_wjx).prevAll().text(sx_wjx).nextAll().text(kx_wjx);
            //这样又可行, 加了一个end();
            // $(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);

        }).on("mouseleave", function () {
            //需求2:
            $(".comment li").text(kx_wjx);
            //获取刚才点击的那个li.
            $(".comment li[clickCurrent]").text(sx_wjx).prevAll().text(sx_wjx);
        }).on("click", function () {
            //需求3:
            //给鼠标当前点击的li做一个记号,为什么要做一个记号,是因为鼠标离开的时候,要知道你刚才点击的是哪一个li.
            //给当前鼠标点击的这个li添加一个独一无二的属性.
            $(this).attr("clickCurrent", "current").siblings("li").removeAttr("clickCurrent");
        });

    });
</script>
</body>
</html>

知识点：

pre():上一个兄弟结点
prevAll():之前所有兄弟结点
next():下一个兄弟结点
nextAll()：之后所有的兄弟

11、jQuery补充知识

11.1、链式编程

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

什么是链式编程
- 如果会给元素调用一个方法，这个方法有返回值，并且返回的是一个jQuery对象，那就可以继续再点出jQuery方法
- 必须是jQuery对象才能点出jQuery方法，否则就会报错
- 有时候我们的方法返回的确实是一个jquery对象，但是这个对象又不是我们想要的对象，按个时候就不要继续点下去了
end()方法
- 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。(返回上一个状态/对象）
- end()方法，也是jQuery方法，那它也需要jQuery对象才能点出

代码详情

$(function () {
  //链式编程
  //1.什么时候可以链式编程?
  //如果给元素调用一个方法,这个方法有返回值,并且返回的是一个jQuery对象,那就可以继续再点出jQuery方法.
  // $('div').width(100).height(100).css('backgroundColor','red');


  //2.必须是jQuery对象才能点出jQuery方法.
  //console.log($('div').width(100).width()); //100
  //$('div').width(100).width().height(100); //报错了,因为数值不能点出jQuery方法.


  //3.有些时候我们一个方法返回的确实是一个jQuery对象
  //但是这个对象又不是我们想要的对象,那这个时候就不要再继续点下去了..


  //4.end(); //回到上一个状态.
  //$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);


  //5.end()方法他也是jQuery方法,那他也需要一个jQuery对象才能点出了啊,
  //width()方法返回的是一个数值, 数值能点出end()方法来吗? 显然不行.
  //$('div').width(100).width().end().height(100); //不行


});

11.2、`each()`

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了.

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

11.2.1、案例：不同透明度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>复制</title>
    <style>
        ul {
            list-style: none;
        }

        li {
            float: left;
            width: 200px;
            height: 200px;
            background: pink;
            text-align: center;
            line-height: 200px;
            margin: 0 20px 20px 0;
        }
    </style>
</head>
<body>
<ul id="ulList">
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
</ul>

<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        //需求:找到所有的li标签,分别设置透明度,透明度是递增到1.
        //1.获取所有的li标签.
        var $lis = $('#ulList').children();
        //console.log($lis);

        //2.给$lis里面的每一个li标签设置透明度.
        //$lis.css('opacity',0.5);//如果这样设置的话,由于隐式迭代那每一个li标签的透明度都设置成了0.5,不符合需求.

        //给每一个对象设置不同的值的时候
        //作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
        $lis.each(function (index, element) {
            // console.log(index); //每一个li标签的索引
            // console.log(element);//每一个li标签,是一个dom对象.

            $(element).css('opacity', (index + 1) / 10);
        });
    });
</script>
</body>
</html>

11.3、jQuery多库共存

jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权.

jQuery版本
- 通过jQuery文件名来查看jQuery的版本是不靠谱的做法.
- 通过以下四种方式可以查看jQuery的版本.

console.log(jQuery.fn.jquery);
console.log(jQuery.prototype.jquery);
console.log($.fn.jquery);
console.log($.prototype.jquery);

多库引入
- 如果引入了多个jQuery文件. 那使用的$是哪一个jQuery文件中的呢?
- 那个文件后引入,使用的$就是谁的.

console.log($.fn.jquery);

多库共存

noConflict()

jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以调用此方法释放$符的控制权.

如果以前用第一个库，现在改用第二个，岂不是很麻烦

创建自执行函数

(function ($) {
  //在这个自执行函数中,就可以继续使用$了.
}(_$));

如果引入了多个库，现在不用前两个库，用第三个了

//4.多库共存2
//console.log($.fn.jquery);
var _$300 = $.noConflict(); //3.0.0版本的jQuery把$的控制权给释放了

var _$1124 = $.noConflict(); //1.12.4版本的jQuery把$的控制权给释放了

console.log($);
console.log(_$1124.fn.jquery);
console.log(_$300.fn.jquery);

不断调用noConflict()方法逐步把库的$控制权移交

代码演示

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>

</head>
<body>

<script src="heima.js"></script>
<script src="jquery-1.12.4.js"></script>
<script src="jquery-3.0.0.js"></script>


<script>
  //1.如何查看jQuery的版本?
  //通过jQuery文件名来查看jQuery的版本是不靠谱的做法.
  //通过以下四种方式可以查看jQuery的版本.
  console.log(jQuery.fn.jquery);
  console.log(jQuery.prototype.jquery);
  console.log($.fn.jquery);
  console.log($.prototype.jquery);


  //2.如果引入了多个jQuery文件. 那使用的$是哪一个jQuery文件中的呢?
  //那个文件后引入,使用的$就是谁的.
  console.log($.fn.jquery);


  //3.多库共存
  // var _$ =  $.noConflict(); //3.0.0版本jQuery文件把$符号的控制权给释放了.
  //
  (function ($) {
    //在这个自执行函数中,就可以继续使用$了.
  }(_$));
//
  console.log(_$.fn.jquery);//3.0.0
  console.log(jQuery.fn.jquery);//3.0.0
  console.log($.fn.jquery);//1.12.4



  //4.多库共存2
  //console.log($.fn.jquery);
  var _$300 = $.noConflict(); //3.0.0版本的jQuery把$的控制权给释放了

  var _$1124 = $.noConflict(); //1.12.4版本的jQuery把$的控制权给释放了

  console.log($);
  console.log(_$1124.fn.jquery);
  console.log(_$300.fn.jquery);


</script>
</body>
</html>

12、jQuery插件

12.1、常用插件

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。

jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

jquery.color.js
- animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
jquery.lazyload.js
- 懒加载插件
- jQuery懒加载插件jquery.lazyload.js使用说明实例
  很多网站都会用到‘图片懒加载’这种方式对网站进行优化，即延迟加载图片或符合某些条件才开始加载图片。
  懒加载原理：浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。
- Lazy Load 是一个用 JavaScript 编写的 jQuery 插件。
  它可以延迟加载长页面中的图片在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置。
  与图片预加载的处理方式相反，在包含很多大图片长页面中延迟加载图片可以加快页面加载速度，尤其是移动端。
  浏览器将会在加载可见图片之后即进入就绪状态，在淘宝商品详情页、漫画网站很多图片的情况下还可以帮助降低服务器负担。
jQuery.ui.js
- ui user interface 用户界面
- jQueryUI专指由jQuery官方维护的UI方向的插件。
- jqueryUI插件时jquery团队自己开发的一套用户界面插件
- 基本使用：

 	//1.	引入jQueryUI的样式文件
    //2.	引入jQuery
    //3.	引入jQueryUI的js文件
    //4.	使用jQueryUI功能

12.2、插件的使用

   //1. 引入jQuery文件
    //2. 引入插件（如果有用到css的话，需要引入css）
    //3. 使用插件

12.2.1、案例：省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
  <div id="one">
    <select name="" ></select>
    <select name="" ></select>
    <select name="" ></select>
  </div>

<script src="../js/jquery-3.6.0.js"></script>
<script src="../js/distpicker.data.js"></script>
<script src="../js/distpicker.js"></script>
<script>
  $(function () {
    //使用插件
    //1.引入jQuery文件.
    //2.引入插件文件.
    //3.调用插件方法.
    $('#one').distpicker({
      province: "广东省",
      city: "深圳市",
      district: "宝安区"
    });

  });
</script>
</body>
</html>

12.2.2、案例：ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../js/jquery-ui.css">
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#accordion").accordion();
            $("#tabs").tabs();
        });
    </script>
</head>

<body>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
  <h3>First</h3>
  <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
  <h3>Second</h3>
  <div>Phasellus mattis tincidunt nibh.</div>
  <h3>Third</h3>
  <div>Nam dui erat, auctor a, dignissim quis.</div>
  <h3>Four</h3>
  <div>李智铭Nam dui erat, auctor a, dignissim quis.</div>
</div>


<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
    <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>


</body>
</html>

12.3、封装插件

自己封装方法的2种做法

实例方法
- 给jQuery原型添加方法

(function ($) {
//需要给jQuery的原型添加方法.
    $.fn.baColor = function (color) {
        //console.log(this); //this是调用这个bgColor方法的jQuery对象
        this.css("backgroundColor", color);
        //返回调用这个方法的jQuery本身
        return this;
    }
}(jQuery));

静态方法
- 直接给jQuery添加方法

(function ($) {
    //直接给$添加方法.
    $.add =function (num1,num2) {
        return num1+num2;
    }
}(jQuery))

12.3.1、案例：自定义封装table插件

<!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>
    #c table {
      border: 1px solid hotpink;
      width: 500px;
      border-collapse: collapse;
    }
    #c table td, #c table th {
      border: 1px solid hotpink;
    }
  </style>
</head>
<body>
  <div id="c">
  </div>

  <script src="../js/jquery-3.6.0.js"></script>
<!--  <script src="jQuery-table.js"></script>-->
  <script src="table.js"></script>
  <script>
    $('#c').table(['序号', '姓名', '年龄', '工资'],[
      {n: 'xy', age: 20, s: 10},
      {n: 'wy', age: 10, s: 8},
      {n: 'pl', age: 11, s: 9}
    ]);

  </script>
</body>
</html>

对于的table插件

(function ($) {
    /**
     * 给$的原型添加table方法.
     * @param arrTableHead 生成表格表头的数组
     * @param arrTableBody 生成表格主体部分的数组
     */
    $.fn.table=function (arrTableHead,arrTableBody) {
        console.log(this);//这里的this是一个jQuery对象,是调用这个table方法的jQuery对象.
        var list =[];
        list.push("<table>");
        //生成表头
        list.push("<thead>");
        list.push("<tr>");

        for (var i = 0; i < arrTableHead.length; i++) {
            list.push("<th>");
            list.push(arrTableHead[i]);
            list.push("</th>");
        }
        list.push("</tr>");
        list.push("</thead>");
        //生成表格主体部分
        for (var i = 0; i < arrTableBody.length; i++) {
            list.push("<tr>");
        //     //生成一个序号td.
            list.push("<td>"+(i+1)+"</td>");
               list.push('<td>'+(i+1)+'</td>');
            //遍历arrTableBody这个数组的一个个的元素.
            for (var key in arrTableBody[i]) {
                list.push("<td>");
                list.push(arrTableBody[i][key]);
                list.push("</td>");
            }
            list.push('<tr>')
        }
        list.push("</table>");
        this.html(list.join(""));
    }
}(window.jQuery))

12.3.2、案例：商品切换table插件

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="tab.css">
</head>

<body>
  <div class="wrapper" id="wrapper">
    <ul class="tab" id="tab-menu">
      <li class="tab-item active">国际大牌<span>◆</span></li>
      <li class="tab-item">国妆名牌<span>◆</span></li>
      <li class="tab-item">清洁用品<span>◆</span></li>
      <li class="tab-item">男士精品</li>
    </ul>
    <div class="products" id="tab-main">
      <div class="main selected">
        <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
      </div>
    </div>
  </div>

  <script src="../js/jquery-3.6.0.js"></script>
  <script src="../js/tabs.js"></script>
  <script>
    $(function () {

      $('#wrapper').tabs({
        tabHeads:'#tab-menu>li',
        tabHeadsClass:'active',
        tabBodys:'#tab-main>div',
        tabBodysClass:'selected'
      });


    });
  </script>
</body>
</html>

对应的tabs插件

(function ($) {
  /**
   * 给$的原型添加tabs方法
   * @param option.tabHeads          需要注册事件的页签们选择器
   * @param option.tabHeadsClass     触发事件的页面要添加的类
   * @param option.tabBodys          要显示的页面们选择器
   * @param option.tabBodysClass     索引一致要显示的页面要添加的类.
   */
  $.fn.tabs = function (option) {
    var $bigDiv = this; //把this先存进$bigDiv变量中.

    //通过参数传递过来的页签选择器,获取到这些页签. 给这些页面注册点击事件.
    $bigDiv.find(option.tabHeads).on('click', function () {
      //给当前鼠标点击的这个页签添加option.tabHeadsClass类,其他的兄弟页签移除这个类.
      $(this).addClass(option.tabHeadsClass).siblings().removeClass(option.tabHeadsClass);

      //获取当前点击的页面的索引
      var idx = $(this).index();

      //获取索引一致的页面,给他添加option.tabBodysClass, 其他的兄弟页面移除这个类.
      $bigDiv.find(option.tabBodys).eq(idx).addClass(option.tabBodysClass).siblings().removeClass(option.tabBodysClass);

    });

    //返回值.
    return $bigDiv;

  }
}(window.jQuery));

12.3.3、案例：切换table插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .tab-head {
            width: 400px;
            height: 50px;
            background: #ccc;
        }

        .tab-head li {
            float: left;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }

        .tab-head li.active {
            background: hotpink;
        }

        .tab-body {
            width: 398px;
            height: 398px;
            border: 1px solid #ccc;
        }

        .tab-body .item {
            display: none;
            padding: 20px;
        }

        .tab-body .item.selected {
            display: block;
        }
    </style>
</head>
<body>
<div class="tab">
    <ul class="tab-head">
        <li class="active">页签1</li>
        <li>页签2</li>
        <li>页签3</li>
        <li>页签4</li>
    </ul>
    <div class="tab-body">
        <div class="item selected">
            <p>内容1</p>
            <p>内容1</p>
            <p>内容1</p>
            <p>内容1</p>
            <p>内容1</p>
        </div>
        <div class="item">
            <p>内容2</p>
            <p>内容2</p>
            <p>内容2</p>
            <p>内容2</p>
            <p>内容2</p>
        </div>
        <div class="item">
            <p>内容3</p>
            <p>内容3</p>
            <p>内容3</p>
            <p>内容3</p>
            <p>内容3</p>
        </div>
        <div class="item">
            <p>内容4</p>
            <p>内容4</p>
            <p>内容4</p>
            <p>内容4</p>
            <p>内容4</p>
        </div>
    </div>
</div>

<script src="../js/jquery-3.6.0.js"></script>
<script src="jQuery-tabs.js"></script>
<script>
  $(function () {
     //使用插件.
     $('.tab').tabs({
         tabHeads:".tab-head>li",
         tabHeadsClass:'active',
         tabBodys:".item",
         tabBodysClass:"selected"
     });

  });
</script>
</body>
</html>

所对应的tabs插件


(function ($) {
    /**
     *
     * @param option.tabHeads          需要注册事件的页签们选择器
     * @param option.tabHeadsClass     触发事件的页面要添加的类
     * @param option.tabBodys          要显示的页面们选择器
     * @param option.tabBodysClass     索引一致要显示的页面要添加的类.
     */
    $.fn.tabs = function (obj) {
        var $bigDIV = this;//把this先存进$bigDiv变量中.

        //通过参数传递过来的页签选择器,获取到这些页签. 给这些页面注册点击事件.
        $bigDIV.find(obj.tabHeads).on("click",function () {
            //给当前鼠标点击的这个页签添加option.tabHeadsClass类,其他的兄弟页签移除这个类.
            $(this).addClass(obj.tabHeadsClass).siblings().removeClass(obj.tabHeadsClass);

            //获取当前点击的页面的索引
            var idx =$(this).index();

            //获取索引一致的页面,给他添加option.tabBodysClass, 其他的兄弟页面移除这个类.
            $bigDIV.find(obj.tabBodys).eq(idx).addClass(obj.tabBodysClass).siblings().removeClass(obj.tabBodysClass);
        });
        //返回值.
        return $bigDIV;

    };
}(window.jQuery))