JQUERY01
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:;"><<新华社>></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>