一,jQuery
1,jQuery相关介绍
jQuery 是一个 JavaScript 的脚本库，提供了很多便捷的操作 DOM 的方法。
jQuery 中提供的操作如下：
选择器、属性操作、样式操作、节点操作、动画、注册事件
2,下载和部署
jQuery官网
下载地址:https://jquery.com/download/
下载js文件
使用方式
1,在HTML文档的</body>前引入
2,在使用一些js插件时，依赖jQuery的，必须先引入jquery，再引入js的插件。
<script src="./jquery-3.5.1.js"> </scchript>
3,使用jQuery
#1.jquery入门.html
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery入门</title>
</head>
<body>
<!-- 引用jQuery -->
<script src="./jquery-3.5.1.js"> </script>
<script>
// 遍历数组
var arr = [‘linux‘,‘windows‘,‘macos‘]
// js传统写法
for (var index=0;index<arr.length;index++){
console.log(arr[index])
}
// linux
// windows
// macos
// jQuery的写法
$.each(arr, function (index, item) {
console.log(item)
})
// 和上面输出一致
</script>
</body>
</html>
页面输出
解析:index为当前索引 为0 1 2 item为当前值分别为 linux windows macos
4,jquery选择器
#jq选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引用jQuery -->
<script src="./jquery-3.4.1.js"> </script>
<script>
// js选择器
console.log(document.querySelector(‘title‘));
// jq选择器
console.log($(‘title‘))
</script>
</body>
</html>
页面显示
进一步获取title的值
#2.jq选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引用jQuery -->
<script src="./jquery-3.4.1.js"> </script>
<script>
// js选择器
console.log(document.querySelector(‘title‘));
// <title>Document</title>
console.log(document.querySelector(‘title‘).innerHTML)
// Document
// jq选择器
console.log($(‘title‘))
// k.fn.init [title, prevObject: k.fn.init(1)]0: titlelength: 1prevObject: k.fn.init [document]__proto__: Object(0)
console.log($(‘title‘).html())
// Document
</script>
</body>
</html>
页面显示
jQuery类选择器
#2jqery选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="myh1">1</h1>
<h1 class="myh1">2</h1>
<!-- 引用jQuery -->
<script src="./jquery-3.4.1.js"> </script>
<script>
// js选择器
console.log(document.querySelector(‘title‘));
// <title>Document</title>
console.log(document.querySelector(‘title‘).innerHTML)
// Document
// jq选择器
console.log($(‘title‘))
// k.fn.init [title, prevObject: k.fn.init(1)]0: titlelength: 1prevObject: k.fn.init [document]__proto__: Object(0)
console.log($(‘title‘).html())
// Document
// jq类选择器
$(".myh1").each(function(index,item){
console.log(item);
});
// <h1 class="myh1">1</h1>
// <h1 class="myh1">2</h1>
</script>
</body>
</html>
页面输出
jQuery选择器修改颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="myh1">1</h1>
<h1 class="myh1">2</h1>
<!-- 引用jQuery -->
<script src="./jquery-3.4.1.js"> </script>
<script>
// js选择器
console.log(document.querySelector(‘title‘));
// <title>Document</title>
console.log(document.querySelector(‘title‘).innerHTML)
// Document
// jq选择器
console.log($(‘title‘))
// k.fn.init [title, prevObject: k.fn.init(1)]0: titlelength: 1prevObject: k.fn.init [document]__proto__: Object(0)
console.log($(‘title‘).html())
// Document
// js类选择器
myh1s = document.querySelectorAll(‘.myh1‘)
for (var index=0;index<myh1s.length;index++){
console.log(myh1s[index])
}
// <h1 class="myh1">1</h1>
// <h1 class="myh1">2</h1>
// jq类选择器
$(".myh1").each(function(index,item){
console.log(item);
});
// <h1 class="myh1">1</h1>
// <h1 class="myh1">2</h1>
// 选择器之eq 选择第二个
console.log($(‘.myh1‘).eq(1))
console.log($(‘.myh1:eq(1)‘))
// js修改颜色
myh1s = document.querySelectorAll(‘.myh1‘)
for (var index=0;index<myh1s.length;index++){
myh1s[index].style.color=‘red‘;
}
// jq选择器修改颜色
$(‘.myh1‘).each(function(index,item){
$(item).css(‘color‘,‘green‘)
})
</script>
使用js把颜色修改为红色后又使用jquery选择器修改为绿色了