文章目录
10. jQuery
JavaScript
jQuery库,里面存在大量的JavaScript函数
获取jQuery
CDN引入
<!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>
<!-- cdn引入 -->
<scrip src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></scrip>
</head>
<body>
</body>
</html>
下载后引入
<!-- 下载后引入 -->
<script src="lib/jquery-3.6.0.js"></script>
公式: $(selector).action()
<!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>
<!-- cdn引入 -->
<!-- <scrip src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></scrip> -->
<!-- 下载后引入 -->
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是css的选择器
$('#test-jquery').click(function () {
alert('hello jQuery');
});
</script>
</body>
</html>
选择器
//原生的js,选择器少,麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器全部都能用
//标签选择器
$('p').click();
//id选择器
$('#id').click();
//类选择器
$('.class').click();
文档工具站:https://jquery.cuishifeng.cn/
事件
鼠标事件,键盘事件,表单事件,文档/窗口事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
<!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 src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
#divMove {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 获取鼠标的坐标 -->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
// 当网页元素加载完毕之后,相应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x: ' + e.pageX + 'y:' + e.pageY)
})
});
</script>
</body>
</html>
操作Dom
节点文本操作
$('#test-ul li[name="python"]').text();//获得值
$('#test-ul li[name="python"]').text('设置值');//设置值
$('#test-ul').html(''); //获得值
$('#test-ul').html('<strong>123</strong>'); //设置值
css的操作
$('#test-ul li[name="python"]').css('color', 'red');//单个值操作
$('#test-ul li[name="python"]').css({ 'color': 'red', 'font-size': '100px' });//多个值操作
元素的显示与隐藏:本质 display:none
$('#test-ul li[name="python"]').hide();
$('#test-ul li[name="python"]').show();
$('#test-ul li[name="python"]').toggle();//切换:显示变隐藏,隐藏变显示
…
未来Ajax();
$('#from').ajax()
$ajax({url:"test.htm1",context:document.body,success:function (){
$(this).addclass("done");
}});