JQUERY01

Rouer_jia

已于 2023-05-06 13:42:28 修改

阅读量489

点赞数

分类专栏： JQUERY阶段文章标签：前端 jquery javascript

于 2022-02-14 15:15:22 首次发布

本文链接：https://blog.csdn.net/Rouer_jia/article/details/122921191

版权

JQUERY阶段专栏收录该内容

3 篇文章 0 订阅

订阅专栏

DOM: document object model 文档对象模型
浏览器中输入 window - document 对象
浏览器提供的API: window.document 对象

网页的HTML代码是如何运行到浏览器上的?

浏览器解析HTML文本代码, 转化成对象类型 – window.document
然后把这个 document对象类型, 渲染到页面上
所以: 页面真正显示的是 document 这个对象类型
利用 document 对象, 就可以直接操作浏览器的界面

一.初识DOM

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初识DOM</title>
  </head>
  <body>
    <!-- 
      原始状态: 只需要 DOM 和 浏览器就能展现网页
      但是DOM是JS的代码, 书写繁琐 且 不易读
      所以提供了HTML这种标签语言, 便于用户书写网页代码

      但是HTML只能完成简单的DOM操作, 更加复杂的浏览器操作还是需要原生DOM才能实现

      实际上运行: HTML -> DOM对象 -> 显示在浏览器
     -->
    <h1>Hello DOM</h1>

    <script>
      // 浏览器利用 检查->元素 中, 就是document对象 美化之后的样子
      // log: 会对打印的内容自动美化, 而非原本的模样
      console.log(document) //document 就是DOM对象
      // dir: direct 直接, 才能打印出真正样子
      console.dir(document) //cdi

      // DOM树: 一个形象的比喻, 讲述的是 HTML 如何转化成DOM对象
    </script>
  </body>
</html>

1. DOM树

// DOM树: 一个形象的比喻, 讲述的是 HTML 如何转化成DOM对象
在这里插入图片描述

2. DOM总结

在这里插入图片描述

3. DOM注意

DOM非常重要, 但是工作中很少书写原生的DOM代码
因为: 原生的方法名太长过于麻烦
例如:

querySelectorAll
getElementsByClassName
previousElementSibling
…

简化:
const qa = document.querySelector.bind(document)

二. 插件

有网络的同学: 插件栏搜索即可
在这里插入图片描述
没网的同学: 解压缩提供的 vendor.zip, 用vscode打开此目录, 然后再vscode中, 右键点击donjayamanne.jquerysnippets-0.0.1.vsix 安装即可

三. JQUERY概述

是一款JavaScript库, 前辈提前封装好代码
简化DOM操作, 简化代码
可以兼容多浏览器 : ios, ie, 谷歌, 火狐, 欧朋, Safari…

如何安装和选择版本

官网: https://jquery.com/
jQuery的理念:write less, do more - 写的少,做的多

脚本下载地址: https://jquery.com/download/

脚本分两类:

产品版: 经过代码压缩, 去掉了注释和空行, 达到减小体积的效果
开发版: 有注释和空行, 方便程序员阅读

如何使用

<script src="jquery-3.1.0.js"></script>

版本

V1.x
V2.x : 不兼容IE6-8
V3.x : 分为精简版和普通版

四.Jquery应用

<body>
<h1>jQuery/$工厂函数</h1>
<button id="btn1">click me(0)</button>
<script>
// 固定规则: 利用jQuery的 $()方式查找到的结果, 保存到变量中时, 要求此变量用 $ 开头 -- 这是一个非严格的规范
// 让其他程序员看到名字 就知道他是 JQ读取的

//DOM 4步:
//1. 查找触发事件的元素
//var btn1=document.getElementById("btn1");
var $btn1=$("#btn1");
console.log($btn1);
console.log($btn1[0]);
console.log($btn1.get(0));
//2. 绑定事件处理函数
//btn1.οnclick=function(){
//   自动↑翻译
$btn1.click(function(){
  //this->指代当前正在触发事件的元素
  //3. 查找要修改的元素
  //本例中就是改当前按钮自己，也就是this
  var $btn=$(this);
  //4. 修改元素
  //4.1 取出当前按钮中的数字
  var n=parseInt(
    //this.innerHTML//"click me(0)"
                    // 0123456789
                    //           -1
    $btn.html()
        .slice(9,-1) //0
  )
  //4.2 将数字+1
  n++;
  //4.3 将数字返回当前按钮内容中
  //this.innerHTML=`click me(${n})`;
  $btn.html(`click me(${n})`)
})
</script>
</body>

五. 选择器

1. JavaScript如何选择元素

document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
document.getElementsByClassName()
document.querySelector()
document.querySelectorAll()

2.CSS选择器

基本选择器
属性选择器
伪类选择器
伪元素选择器

4. jQuery中基本选择器

1.ID选择器,类选择器,元素选择器,后代选择器, 属性选择器
2.位置筛选器
:first,:last,:even,:odd,eq(n), gt(n),:lt(n)
3.子元素筛选器
:first-child,last-child,first-of-type,:last-of-type,:nth-child(),:nth-last-child(),:nth-of-type(),:nth-last-of-type,:only-child,:only-of-type,
4.表单筛选器
:checked,:disabled,:enabled,:focus,:button,:checkbox,:file,:image,:input,:password,:radio
5.内容筛选器
empty,contains(text),:has(selector),:parent
6.其他筛选器
:lang(language),:not(),:root,:target,:hidden,:visible,:header,:animated
自定义筛选器

案例1 : 选择器 - id选择器

<body>
<button id="btn1" class="btn-success">click me1</button>
<button id="btn1" class="btn-success">click me2</button>
<h1>Welcome</h1>
<script src="js/jquery-1.11.3.js"></script>
<script>
var $btn1=$("#btn1"); //相当于document.getElementById()
console.log($btn1);
$(".btn-success").css('background-color',"lightGreen")
               //.style.backgroundColor="lightGreen"
$("button").css("box-shadow","0 0 5px red");
$(".btn-success,h1").css("color","red");
</script>
</body>

案例2: 选择器 - 子元素过滤选择器

<body>
  <h3>子元素过滤选择器.</h3>
  <ul>
    <li>child1-basic0</li>
    <li>child2-basic1</li>
    <li>child3-basic2</li>
  </ul>
  <ul>
    <li>child1-basic3</li>
    <li>child2-basic4</li>
    <li>child3-basic5</li>
  </ul>
  <ul>
    <li>child1-basic6</li>
  </ul>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //查找每个ul中第一个li
    $("ul>li:first-child")
    .css("background-color","red")
    //查找每个ul中最后一个li
    $("ul>li:last-child")
    .css("box-shadow","0 0 5px green")
    //查找每个ul中处于偶数位置的
    $("ul>li:nth-child(2n)")
    .css("color","orange")
    //查找每个ul中第2个li
    $("ul>li:nth-child(2)")
    .css("border","2px solid navy")
    //查找作为ul下唯一子元素的li
    $("ul>li:only-child")
    .css("padding","20px")
  </script>
</body>

案例3: 选择器-基本过滤选择器

<body>
  <h3>基本过滤选择器.</h3>
  <ul>
    <li>child1-basic0</li>
    <li>child2-basic1</li>
    <li>child3-basic2</li>
  </ul>
  <ul>
    <li>child1-basic3</li>
    <li>child2-basic4</li>
    <li>child3-basic5</li>
  </ul>
  <ul>
    <li>child1-basic6</li>
  </ul>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //查找第一个li
    $("li:first").css("background-color","red")
    //查找最后一个li
    $("li:last").css("background-color","green")
    //查找处于偶数位置的li
    $("li:odd").css("color","yellow");
    //查找第2个li
    $("li:eq(1)").css("box-shadow","0 0 5px orange")
  </script>
</body>

选择器4 - 属性选择器

<body>
<ul>
  <li data-name="parent">
    <ul>
      <li data-name="child1"></li>
      <li data-name="child2"></li>
      <li data-name="child3"></li>
    </ul>
  </li>
  <li data-name="parent">
    <ul>
      <li data-name="child1"></li>
      <li data-name="child2"></li>
      <li data-name="child3"></li>
    </ul>
  </li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
  $("[data-name]").css("box-shadow","0 0 5px green");
  $("[data-name*=child]").css("border","1px solid red")
</script>
</body>

选择器5 - 内容过滤选择器

<body>
<div class="container">
<h1>jQuery中的选择器——内容过滤选择器</h1>

  <button>提交订单</button>
  <button>Submit注册信息</button>
  <button>马上提交</button>
  <button>清空重填</button>

  <hr/>
  <div class="alert" id="alert1"></div>
  <div class="alert" id="alert2">
    <span class="close">×</span>
    第一个警告框
  </div>

</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
  //选择包含"提交"二字的按钮，变为绿色按钮
  $("button:contains(提交)")
  .css("background-color","green");
  //选中包含.close按钮的.alert元素，让它们变为红色的警告框
  $(".alert:has(.close)")
  .css('background-color',"pink");
  //选中不包含.close按钮的.alert元素，让它们变为绿色的警告框
  $(".alert:not(:has(.close))")
  .css("background-color","lightGreen");
  //选择内容为空的警告框
  $(".alert:empty")
  .css("box-shadow","0 0 5px red");
  //选择内容非空的警告框
  $(".alert:parent")
  .css("box-shadow","0 0 5px green");
</script>
</body>

选择器6- 可见性选择器

<body>
<div class="container">
  <h1>可见性选择器</h1>

  <div id="d1" style="display: none">lorem</div>
  <div id="d2" style="visibility: hidden">lorem</div>
  <div id="d3" style="opacity: 0">lorem</div>
  <input id="d4" type="hidden" name="aa" value="bb"/>

</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
  console.log($("div.container>:hidden"));
</script>
</body>

<案例0 : 按照选择器查找元素 - 元素选择器>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">
      <span>1111</span>
      <p>222</p>
      <b>3333</b>
      <div>44444</div>
    </div>

    <!-- 使用第三方, 需要先引入脚本 -->
    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      // 选择器:
      // 原生DOM中提供了大量选择器: 例如 固定元素, 按照特征, 按照关系查找, 按照css选择器查找的
      // jQuery封装了最万能的 css选择器 查找方式
      // 即: querySelectorAll
      // 原生: document.querySelectorAll('div')
      //
      // 固定规则: 利用jQuery的 $()方式查找到的结果, 保存到变量中时, 要求此变量用 $ 开头 -- 这是一个非严格的规范
      // 让其他程序员看到名字 就知道他是 JQ读取的
      const $divs = $('div')
      // $(): 这是一个函数调用, $是函数名, 具体原理详见 01
      console.log($divs)
      // jQuery对象的原型中 封装了大量的方法, 可以对查询出来的元素进行各种操作
    </script>
  </body>
</html>

5. 元素内容

案例1: 获取元素的内容

<body>
<p>来自<a href="javascript:;">&lt;&lt;新华社&gt;&gt;</a>的消息</p>
<h3 id="msg1"></h3>
<h3 id="msg2"></h3>
<script src="js/jquery-1.11.3.js"></script>
<script>
//获取p元素的内容
console.log($("p").html())
console.log($("p").text())
//获取p元素的html内容，分别放入两个h3中
var html=$("p").html();
$("#msg1").html(html);
$("#msg2").text(html);
</script>
</body>

案例二: 操作元素的内容和值

<body>
<h1>操作元素的内容和值</h1>
<form action="">
用户名:<input name="uname">
			<span></span><br>
密码:<input type="password" name="upwd">
			<span></span><br>
<input type="submit" value="提交注册信息">
</form>
<script src="js/jquery-1.11.3.js"></script>
<script>
//正确时，使用图片:"<img src='img/ok.png'>"
//姓名错误时: "<img src='img/err.png'>用户名必须介于3~9位之间!"
//密码错误时: "<img src='img/err.png'>密码必须介于6~8位之间!"
//DOM 4步
//1. 查找触发事件的元素
//本例中查找type=text的元素
$(":text")
//2. 绑定事件处理函数
.blur(function(){
	vali(this,3,9,"用户名必须介于3~9位之间!")
});
function vali(txt,minLen,maxLen,errMsg){
	var $txt=$(txt);
	//3. 查找要修改的元素
	//本例中查找当前文本框旁边的span
	var $span=$txt.next();//nextElementSibling
	//4. 修改元素
	//获得当前文本框的值
	var val=$txt.val().trim();
	//如果文本框的值的长度在3~9位之间
	if(val.length>=minLen&&val.length<=maxLen){
		//就把span的内容设置为正确的内容
		$span.html("<img src='img/ok.png'>");
	}else{//否则
		//就把span的内容设置为错误的内容
		$span.html(`<img src='img/err.png'>${errMsg}`);
	}
}
//DOM 4步
//1. 查找触发事件的元素
//本例中查找type=password的元素
$(":password")
//2. 绑定事件处理函数
.blur(function(){
	vali(this,6,8,"密码必须介于6~8位之间!")
})
</script>
 </body>

案例3: 操作元素的属性

<h1>操作元素的属性</h1>
<img src="img/1.jpg" alt="1">
<script src="js/jquery-1.11.3.js"></script>
<script>
//单击图片，切换下一张
//DOM 4步
//1. 查找触发事件的元素
//本例中要找img元素
$("img")
//2. 绑定事件处理函数
.click(function(){
	//3. 查找要修改的元素
	//本例中就是要改自己
	var $img=$(this)
	//4. 修改元素
	//获得当前img的alt属性值，转为整数
	var i=parseInt($img.attr("alt"));
	//如果alt值<4，才+1
	//否则alt值就恢复1
	i<4?(i++):(i=1);
	//将i的值分别放回$img的src属性和alt属性中
	$img.attr("src",`img/${i}.jpg`);
	$img.attr("alt",i);
})
</script>
</body>

案例4: 操作元素的class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ② 添加样式 */
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid gray;
            margin-top:10px;
            transition: 0.3s;
        }
        .danger{
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <!-- 在实际项目中, css内联样式用的比较少,用class设置样式比较多 -->
    <!-- ① 添加按钮 -->
    <button>添加</button>
    <button>删除</button>
    <button>切换</button>
    <div class="box danger"></div>

    <script src="jquery/jquery-3.6.0.min.js"></script>
    <script>
        var $btns = $('button');
        console.log($btns);
        // 给元素添加不一样的操作,找到单独的元素
        // 官方提供 eq ()
        // eq: equal等于
        // eq(0): 获取 $btns[0] 的元素, 再次封装成JQ对象
        console.log($btns.eq(0));

        //了解 : $btns[0]: 获取的是序号0的原生DOM元素, 没有JQ方法
         console.log('$btns[0]:', $btns[0])
        
         //添加样式
        $btns.eq(0).click(function(){
            $('.box').addClass('danger');
        })
        // 删除
       $btns.eq(1).click(function () {
         $('.box').removeClass('danger');
       })
       // 切换: 有则删,无则加
       $btns.eq(2).click(function () {
         $('.box').toggleClass('danger')
       })
    </script>
</body>
</html>

练习: 双态按钮

<style>
.btn {
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid #aaa;
  outline: none;
}
.up {
  background: #fff;
  color: #333;
}
.down {
  background: #ddd;
  color: #fff;
}
</style>
</head>
<body>
<button class="btn up">双态按钮</button>
<script src="js/jquery-1.11.3.js"></script>
<script>
//双态按钮: 让按钮的class在up和down之间切换
$("button")
.click(function(){
  // var $btn=$(this);
  // if($btn.hasClass("down")){
  //   $btn.removeClass("down")
  // }else{
  //   $btn.addClass("down")
  // }
  $(this).toggleClass("down");
})
</script>
</body>

案例5: 使用属性选择器实现标签页头的切换

<body>
<h1>使用属性选择器实现标签页头的切换</h1>
<ul class="tabs">
  <li class="active"><a data-toggle="tab" href="#">十元套餐</a></li>
  <li><a data-toggle="tab" href="#">二十元套餐</a></li>
  <li><a data-toggle="tab" href="#">三十元套餐</a></li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
//DOM 4步
//1. 查找触发事件的元素
//本例中查找所有data-toggle属性为tab的元素
$("[data-toggle=tab]")
//2. 绑定事件处理函数
.click(function(){
  //3. 查找要修改的元素
  //4. 修改元素
  //给自己的爹li加active class
  $(this).parent().addClass("active")
  // a      li     return li
  //给爹的其余所有兄弟去掉active class
                  .siblings().removeClass("active")
})
</script>
</body>

六. 事件绑定

<案例 : 为按钮添加点击事件>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点我1</button>
    <button>点我2</button>

    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      // 为按钮添加点击事件
      // click(回调函数): 点击时触发 回调函数
      $('button').click(function () {
        console.log('点击了:', this)
      })
      // 注意事项: click 会遍历查找到的每个元素, 为其添加事件 -- 原理参考 01 的 css 方法

      // 原理 - 可讲 可 不讲                callback 函数
      // jQuery.prototype.click = function (callback) {
      //   // els: 查询到的元素们
      //   // 遍历每个元素, 添加onclick 事件
      //   this.els.forEach(el => { (循环)
      //     el.onclick = callback
      //   })
      // }
    </script>
  </body>
</html>

内联样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 案例: 把 文字颜色变为红色 -->
    <div>11</div>
    <div>22</div>
    <div>33</div>
    <!--快速复制一行: shift+alt+↓ -->
    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      // css(属性名, 值): 用来给 style.属性名=值
      // 自动对查询出来的元素, 进行遍历修改: 原理见01
      $('div').css('color', 'red')
      // 得益于函数重载机制: 如果仅有1参数,认为是读操作
      console.log($('div').css('color'))
      // 参数可以是对象类型, 同时设置多个属性
      $('div').css({
        border: '1px solid gray',
        padding: '10px',
        marginTop: '3px',
      })
    </script>
  </body>
</html>

class

页数指示点 - 轮播图使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面指示点</title>
    <!-- ② 添加样式 -->
    <style>
        .indicator{
            padding: 10px;
            width: 200px;
            background-color: lightskyblue;
            text-align: center;
            /* 默认双击用户选中,取消掉选中效果 */
            user-select: none; 
        }
        .indicator>span{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: white;
            display: inline-block;
        }
        .indicator > .cur{
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <!-- ① 基本结构 -->
    <div class="indicator">
        <span class="cur"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <script src="jquery/jquery-3.6.0.min.js"></script>
    <script>
        // 鼠标悬停时修改样式
        // 前提: 安装了JQ插件, 则使用 jq 会出现提示
        $('.indicator>span').mouseover(function () { 
            //JQ底层会自动遍历,为每个选择到的元素添加事件
            console.log(this);
            // this是原生的DOM元素, 必须封装成 JQ 对象, 才能用JQ的原型方法
            // $(DOM元素): 就可以把DOM元素封装成JQ对象
            // 函数重载机制: 参数是字符串,则认为是css选择器; 参数是DOM元素类型, 则认为是做封装操作
           console.log($(this))
           // siblings: 兄弟姐妹们
           // siblings(): 可以读取当前元素的 所有兄弟元素
           $(this).addClass('cur').siblings().removeClass('cur')
        });
    </script>
</body>
</html>

页数 - 练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .pages {
        width: 230px;
        padding: 10px;
        background-color: lightgray;
        user-select: none;
      }
      .pages > span {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 1px solid gray;
        background-color: white;
        color: gray;
        display: inline-block;
      }
      .pages > span.cur {
        background-color: deepskyblue;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="pages">
      <span class="cur">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      $('.pages>span').click(function () {
      	e.preventDefault(); // 阻止默认事件
        $(this).addClass('cur').siblings().removeClass('cur')
      })
    </script>
  </body>
</html>

属性操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="http://tmooc.cn" id="a1" title="慕课" data-color="red">TMOOC</a>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      // 原生DOM 属性操作分 新旧两种方式
      // 新方式: 元素.属性名   旧方式: 元素.setAttribute()

      // prop: 对应的是新语法的读取方式
      console.log($('a').prop('href'))
      console.log($('a').prop('id'))
      console.log($('a').prop('title'))
      console.log($('a').prop('dataset').color)
      // attr: 旧语法
      console.log($('a').attr('title'))
      console.log($('a').attr('data-color'))
    </script>
  </body>
</html>

属性练习 - 大小图切换

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
         /*② 调整样式 */
      #box > img {
        width: 400px;
      }
      #box > div > img {
        width: 95px;
      }
    </style>
  </head>
  <body>
      <!-- ① 先写结构 -->
    <div id="box">
      <img src="./images/1-l.jpg" alt="" />
      <div>
         <!--③添加自定义属性-->
        <img data-big="1-l.jpg" src="./images/1.jpg" alt="" />
        <img data-big="2-l.jpg" src="./images/2.jpg" alt="" />
        <img data-big="3-l.jpg" src="./images/3.jpg" alt="" />
        <img data-big="4-l.jpg" src="./images/4.jpg" alt="" />
      </div>
    </div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
       
      $('#box>div>img').click(function () {
        // 自定义属性 data-big
        console.log(this.dataset.big) //原生DOM 方式
        console.log($(this).prop('dataset').big) //JQ读法1
        console.log($(this).attr('data-big')) //JQ读法2
        const big = './images/' + this.dataset.big //需要拼接images前缀
        //设置给大图的src属性
        $('#box>img').prop('src', big)
        // 函数重载机制: 如果prop有两个参数, 则进行修改操作, 参数1: 属性名  参数2: 属性值
      })
    </script>
  </body>
</html>

属性练习 - 评分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="score">
      <img src="./images/ok.png" alt="" />
      <img src="./images/ok.png" alt="" />
      <img src="./images/ok.png" alt="" />
      <img src="./images/err.png" alt="" />
      <img src="./images/err.png" alt="" />
    </div>
      <!-- ④ 移动时 给一个分数 -->
    <div id="msg">3</div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      $('#score>img').mouseover(function () {
        // 先认识几个单词
        // nextAll(): 下方所有兄弟
        // prevAll(): 上方所有兄弟
        const ok = './images/ok.png'
        const err = './images/err.png'
        // 鼠标当前悬浮项-> ok
           // 三件事 : ①自己变ok ②上方所有变ok ③下方所有变err
        //修改图片元素的src属性
        $(this).prop('src', ok)
        // 悬浮项 上方的兄弟们 -> ok
        $(this).prevAll().prop('src', ok)
        // 悬浮项 下方的兄弟们 -> err
        $(this).nextAll().prop('src', err)
         
        //④ 移动时 给一个分数 
            // 鼠标移动过程中,知道序号是多少就可以 - index() 方法
        // index:方法, 可以查询出某个元素 在查询到的元素数组中的序号
        const i = $('#score>img').index(this)
        console.log('i:', i)
        // html: 就是 innerHTML 的封装方法
        $('#msg').html(i + 1)
      })
    </script>
  </body>
</html>

准备就绪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>准备就绪</title>
</head>
<body>
    <!--① 给元素添加内容-->
    <div id="box"></div>
    <script src="jquery/jquery-3.6.0.min.js"></script>
    <script>
        $('#box').html('<h1>Hello World</h1>');
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- ③ 将脚本放入head中 ,不显示任何内容 -->
    <script src="jquery/jquery-3.6.0.min.js"></script>
    <!-- ② 改为外部引入操作 -->
    <script src="11.js"></script>
      <!--原因-->
    <!-- HTML代码从上向下执行, 在执行head代码时, body中的代码还没有运行呢, 所以修改的 #box 元素不存在 -->
    <!-- 理论上说: 脚本代码应该放在 body 的最后书写, 效率最高, 不需要提前加载 -->
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

js文件 - 做准备就绪

// 防御性编程:
// 角色: 开发脚本代码给其他人使用
// 使用脚本的人分:
// 1. 明白人: 知道要在body最后加载脚本
// 2. 不明白: 可能会在不应该出现的 头部进行引入
// 所以应该做一个判断: 页面加载完毕时 再执行
// onload: 加载完毕时触发
// window.onload = function () {
//   $('#box').html('<h1>Hello World!</h1>')
// }
//
// jQuery提供了简化语法
// $(函数): 函数重载机制, 当检测到 参数是函数类型, 则自动在页面加载完毕后执行此函数
$(function () {
  $('#box').html('<h1>Hello World!</h1>')
})

包含选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">
      <div>亮亮今天不回家</div>
      <div>小绿今天不回家</div>
      <div>全普今天回家</div>
      <div>高达今天不回家</div>
    </div>
    <!-- 特点: 空的 -->
    <div></div>
    <div>
      <a href="">Tmooc</a>
    </div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      // 高亮 不回家的 人
      // 标签内容中, 含有关键词: 不回家  的元素
      // contains: 包含, 是JQ提供的选择器, CSS没有
      $('#box>div:contains(不回家)').css('color', 'green')

      // empty: 空的
      $('div:empty').css({
        border: '1px solid purple',
      })
      // 非空: parent -- 父母;  元素是其他元素的父母,说明非空
      $('div:parent').css({
        border: '1px dashed orange',
        margin: '5px',
      })
      // 子元素中含所有指定 选择器的
      // has: 有
      $('div:has(a)').css({
        backgroundColor: 'green',
      })
    </script>
  </body>
</html>