jQuery
javaScript
jQuery库，里面存在大量的javascript函数
jQuery的导入并使用
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/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>选择器
//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getE1 ementById();
//类
document.getE1 ementsByClassName 0);
//jQueryCss中的选择器它全部都能用!
$('p').click(); //标签选择器
$('#id1').click(); //id选择 器
$('.class1').click() //class选择 器文档工具站：jQuery文档工具站
事件
鼠标事件，键盘事件，其他事件
鼠标事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.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>
//当网页元素加载完毕之后，响应事件
/* $(document).ready(function () {
})*/
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
})
})
</script>
</body>操作DOM
节点文本操作
$(' #test-u11i [name=python] '). text(); //获得值
$(' #test-u11i [name=python] '). text('设置值'); //设置值
$(' #test-u1').htm1(); //获得值
$(' #test-u1'). htm1('<strong>123</strong>'); //设置值css操作
$('#test-ul li[name=python]').css({"color","red"})元素的显示和隐藏
本质：display : none
$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();未来ajax()
$('#from').ajax()
$.ajax({url:"test.html",context:document.body,success:function(){
$(this).addClass("done");
}})
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
