jQuery
1.初识jQuery
<!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>
<script>
window.onload = function () {
var btn1 = document.getElementById("btn1")
btn1.onclick = function () {
var username = document.getElementById("username").value
alert(username)
}
}
</script>
<!-- 使用jQuery实现 -->
<script src="./JS/jquery-3.6.0.js"></script>
<script>
$(function () {
$("#btn2").click(function () {
var username = $("#username").val()
alert(username)
})
})
</script>
</head>
<body>
<!--
What?
http://jquery.com/
一个优秀的JS函数库
使用了jQuery的网站超过90%
中大型WEB项目开发首选
Write Less,Do More
Why?
HTML元素读取(选择器)
HTML元素操作
CSS操作
HTML事件处理
JS动画效果
链式调用
读写合一
浏览器兼容
易扩展插件
ajax封装
......
How?
1.引入jQuery库
2.使用jQuery
jQuery核心函数:$/jQuery
jQuery核心对象:执行$()返回的对象
区别两种js库文件
开发版(测试版)
生产版(压缩版)
区别两种引入JS库的方式
服务器本地库
CDN远程库
项目上线时,一般使用比较靠谱的CDN资源库
减轻服务器负担
-->
<!-- 需求:点击"确定按钮,提示输入的值" -->
用户名:<input type="text" name="" id="username">
<button id="btn1">确定(原生版)</button>
<button id="btn2">确定(jQuery版)</button>
</body>
</html>
2.jQuery的两把利器
<!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>
<!--
1.jQuery核心函数
简称:jQuery函数($/jQuery)
jQuert库向外直接暴露的就是$/jQuery
引入jQuery后,直接调用$即可
当函数用:$(xxx)
当对象用:$.xxx()
2.jQuery核心对象
简称:jQuery对象
得到jQuery对象:执行jQuery函数返回的就是jQuery对象
使用jQuery对象:$obj.xxx()
-->
<script src="./JS/jquery-3.6.0.js"></script>
<script>
console.log($, typeof $);
console.log(jQuery === $);
console.log($() instanceof Object);
</script>
</body>
</html>
3.jQuery函数的使用
<!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>
<button id="btn">测试</button>
<br>
<input type="text" name="msg1"><br>
<input type="text" name="msg2"><br>
</div>
<!--
1.作为一般函数调用:$(prarm)
1).参数为函数:当DOM加载完成后,执行此回调函数
2).参数为选择器字符串:查找所有匹配的标签,并将它们封装成jQuery对象
3).参数为DOM对象,将dom对象封装成jQuery对象
4).参数为html标签字符串(用的少):创建标签对象并封装成jQuery对象
2.作为对象使用:$.xxx()
1).$.each():隐式遍历数组
2).$.trim():去除两端的空格
-->
<script src="./JS/jquery-3.6.0.js"></script>
<script>
$(function () {
$("#btn").click(function () {
alert($(this).html())
$('<input type="text" name="msg3"><br>').appendTo("div")
})
})
var arr = [2,4,7]
$.each(arr,function (index,item) {
console.log(index,item);
})
var str = ' my atguigu '
console.log('---'+$.trim(str)+'---');
</script>
</body>
</html>
4.jQuery对象的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=