javaScript18-jQuery
jQuery库：里面存了大量的javaScript函数
引入jQuery
法一：去官网jquery.com 下载 jQuery 库
-
Production version：用于实际的网站中，已被精简和压缩。
-
Development version：用于测试和开发（未压缩，是可读的代码）。
法二：从公网引用jQuery
百度jQuery cdn【CDN的全称是Content Delivery Network,即内容分发网络】
复制该链接到head标签里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="lib/jQuery-3.6.0.js"></script>
</head>
<body>
<!--公式： $(selector).action()-->
<a href="" id="test_jquery">点我</a>
<script>
//选择器就是css的选择器
$('#test_jquery').click(function(){
alert('hello,world!');
})
</script>
</body>
</html>
jQuery选择器
<script>
//原生js选择器少
document.getElementById();//id
document.getElementsByClassName();//类
document.getElementsByTagName();//标签
//jQuery css中的选择器它全部都能用
$('p').click();//标签
$('#id1').click();//id
$('.class1').click();//class
</script>
文档工具站 jQuery速查：https://jquery.cuishifeng.cn/index.html
jQuery事件
鼠标事件，键盘事件，触屏事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="lib/jQuery-3.6.0.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 3px solid darkred;
}
</style>
</head>
<body>
<!--获取鼠标当前的一个坐标-->
mouse坐标：<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕后，响应事件
$(document).ready(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX+'Y:'+e.pageY);
});
});
//可以简写为$(function(){...});
</script>
</body>
</html>
操作DOM元素
- 文本的操作
$('#ul_test').text();//获得值
$('#ul_test').text('kaka');//设置值，有点类似于Java中方法的重写？
$('#ul_test').html();//获得值
$('#ul_test').html('<strong>kaka</strong>');//设置值
- css的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="lib/jQuery-3.6.0.js"></script>
</head>
<body>
<div id="d">
</div>
<ul id="ul_test">
<li class="js">javaScript</li>
<li name="book">python</li>
</ul>
<script>
$('#ul_test li[name=book]').css("color","red");
</script>
</body>
</html>
- 元素的显示和隐藏
$('#ul_test li[name=book]').hide();//隐藏，本质即为属性dispaly:none
$('#ul_test li[name=book]').show();//显示
cdn引入什么意思
另外，关于jQuery位置顺序问题
在单独的js文件里使用Jquery，直接使用就可以了，你不需要任何的引入操作,因为引入操作在前端页面已经执行了，你在单独的js文件里所需要的东西等于前面已经有了，当然可以直接使用了.当然前端页面的引入顺序当然也需要jquery库文件在前面，而你的js文件放在后面，顺序不能错了，因为js是解释型 语言，从前往后执行，你不能在没有的时候 就使用.
参考链接：https://blog.csdn.net/u011442439/article/details/80907805
浙公网安备 33010602011771号