前言: 2006年出品的 一个 JS脚本, 其中封装了大量的方法, 可以更加快捷的操作DOM;
官网地址: https://jquery.com/
理念: write less, do more -- 写得少, 做的多
CSS
<!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>css</title>
</head>
<body>
<ul>
<li>小明</li>
<li>小红</li>
<li>小亮</li>
</ul>
<script src="/jquery-3.6.1.js"></script>
<script>
// $ : 由jQuery脚本注入到 全局中的变量
console.dir($);
console.log($('li'));
$('li').css('color','red')
$('li').css({
padding: '10px',
margin: 20,
'font-size':50
})
</script>
</body>
</html>上方代码通过去官网下载一个 jQuery 的脚本, 然后引入一下即可使用, 这里的 $ 符号就是由jQuery脚本注入到 全局中的变量, 可以自行输出到控制台看一下, 上方代码就是用 JS 来实现 CSS 的样式变化, 通过 $('li') 来找到所有的li元素, 然后通过 全局中的变量 css 来改变该样式, 可以传多个样式, 但是需要 对象的形式, 代码一看了之
事件
jQuery中的点击事件就是 click 没有了原生DOM中的 on 关键词, 事件中的其它的 onmouseover啊等等都不用写 on 关键词的, 下方来看这样的一个代码
<!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>
<ul>
<li>小明</li>
<li>小红</li>
<li>小亮</li>
</ul>
<script src="/jquery-3.6.1.js"></script>
<script>
// 同css的原理, 内部会自动遍历, 绑定给每个li
$('li').click(function(){
console.log(this);
// this: 原生的DOM元素
// $(this) : 把 元素 封装成 jQuery 对象. 可以使用jQuery提供的方法
// 细节: $this -> 一种习惯, 把jq类型的变量 用 $ 开头 -- 见名知意
var $this = $(this)
console.log($this);
$this.css('color', 'blue')
})
</script>
</body>
</html>上方代码就是点击谁, 谁就变蓝色, 其中的this指的就是其本身
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>class操作</title>
<style>
.ok{
margin: 3px;
padding: 10px;
border-radius: 5px;
background-color: green;
color: white;
}
</style>
</head>
<body>
<ul>
<li>小明</li>
<li>小红</li>
<li>小亮</li>
</ul>
<script src="./jquery-3.6.1.js"></script>
<script>
$('li').click(function(){
const $this = $(this)
$this.addClass('ok')
})
</script>
</body>
</html>上方代码就是点击谁, 把 ok 这个样式传递给谁身上, 原生DOM中通过用 className.add('ok') 的方法这样传递, 而在jQuery中, 用this调用一下通过 addClass 一步就搞定, 是不是很简单
点击谁, 谁就变样式
兄弟元素们
siblings(): 获取当前元素 的 所有兄弟元素
我们来做这样的一个小例子
点击谁, 谁就高亮, 当然需要做一个唯一性
下面来看代码片段
<!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>
ul{
display: flex;
background-color: cadetblue;
margin: 0;
padding: 0;
list-style: none;
color: white;
}
li{
padding: 10px 25px;
cursor:pointer;
}
li.active{
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li class="active">红烧牛肉</li>
<li>小鸡炖蘑菇</li>
<li>鲜虾鱼板</li>
<li>葱烧排骨</li>
<li>老坛酸菜</li>
</ul>
<script src="/jquery-3.6.1.js"></script>
<script>
$('ul>li').click(function(){
const $this = $(this)
$this.addClass('active').siblings().removeClass('active')
})
</script>
</body>
</html>在 JS 的脚本中, 先找到需要的标签元素, 然后在通过点击事件来做相应的逻辑, 这里呢 siblings(): 就是获取当前元素 的 所有兄弟元素, 而 removeClass代表的就是 移除样式(删除样式都可以), 然后就会形成这样的一段代码
$this.addClass('active').siblings().removeClass('active')可以理解为: 当前元素.添加样式().兄弟元素们().移除样式()
当前元素: $this
添加样式: addClass('需要添加的样式')
兄弟元素们(): siblings()
移除样式: removeClass('需要移除的样式')
这样是不是就很好理解了
今天就先到这里啦!