jQuery实质上是一个库,里面存放了大量的JS函数
10.1、获取jQuery
官网:jQuery官网
jQuery中文文档:jQuery中文文档
导入方式
本地jquery导入
<script src="JS/jquery-3.6.0.js"></script>
在线cdn导入
cdn jQuery:cdn
点击复制script标签,粘贴后下载即可
10.2、使用
公式:$(selector).action()
-
selector:css选择器
-
action:事件
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<body>
<a href="" id="test">点击</a>
</body>
<script>
$('#test').click(function (){
alert('111')
})
</script>
10.3、选择器
对比:
JS获取网页元素:选择器类型较少
//标签选择器
document.getElementsByTagName();
//类选择器
document.getElementsByClassName();
//id选择器
document.getElementById();
jQuery获取:css中的选择器都可以使用
$('p').click();//p标签选择器
$('#id1').click();//id选择器
$('.class').click();//类选器
10.3、事件
鼠标事件
<body>
<div id="div1" style="width: 600px; height: 400px; background-color: green; border: 2px solid black" ></div>
当前鼠标位置:<p id="location"></p>
</body>
<script>
//当网页元素加载完后,执行事件
// $(document).ready(function (){
// ...
// })
//简化:
//网页元素加载完毕时执行function
$(function (){
//获取到div1对象,当鼠标移动时执行function
$('#div1').mousemove(function (e){
//将坐标显示在location对象内
$('#location').text('x:'+e.pageX+'y:'+e.pageY);
})
})
</script>
<body>
<div id="div1" style="width: 600px; height: 400px; background-color: green; border: 2px solid black" ></div>
当前鼠标位置:<p id="location"></p>
</body>
<script>
//当网页元素加载完后,执行事件
// $(document).ready(function (){
// ...
// })
//简化:
//网页元素加载完毕时执行function
$(function (){
//获取到div1对象,当鼠标移动时执行function
$('#div1').mousemove(function (e){
//将坐标显示在location对象内
$('#location').text('x:'+e.pageX+'y:'+e.pageY);
})
})
</script>
10.4、操作DOM对象
文本操作
<body>
<ll id="ll">
<li id="java" name="java">java</li>
<li id="python" name="python">python</li>
</ll>
</body>
<script>
//可以用[]来指定同一标签下的某个元素
$('#ll li[id=java]').text();//获取元素的取值
$('#ll li[name=java]').text('123');//更改元素的取值
$('#ll li[id=java]').html();//获取元素的超文本值
</script>
css操作
style样式修改
$('#ll li[name=java]').css("color","red")
$('#ll li[name=java]').css({"color":"red","font-size":"20px"})
显示与隐藏
$('#ll li[name=java]').show();//显示
$('#ll li[name=java]').hide()//隐藏