1、安装jQuery:下载jQuery.js文件引入到自己的项目中 <script src="../js/jquery-3.6.0.js"></script>
jQuery使公式:$(selector).action() //$(选择器).事件()
click:通过jQuery实现点击事件: 注:选择器与CSS选择一样
<a href="#"id="a">a</a>
<script>
$('#a').click(function () {
alert(11)
})
</script>
2、鼠标事件:
$('#a').mousedown();//鼠标按下
$('#a').mouseenter();
$('#a').mouseleave();//鼠标移开
$('#a').mouseup();
$('#a').mousemove(); //鼠标移动事件
$('#a').mouseout();
$('#a').mouseover();//点击结束
移动鼠标获取坐标:
div{
height:400px ;
width: 400px;
border: 2px solid red;
}
<p>坐标:<span id="mousemove"></span></p>
<div id="yidong"></div>
$(function (){ //加载完上面程序再执行
$('#yidong').mousemove(function (e) { //获取鼠标移动的坐标赋值给e
$('#mousemove').text('x: '+e.pageX+' y: '+e.pageY); //把获取到的坐标赋值给span标签显示
})
})
3、jQuery操作DOM
节点文本操作
<ul id="text">
<li class="js">javasrcipt</li>
<li name="java">java</li>
<li id="c">C++</li>
</ul>
$('#text li[name=java]').text(); //获得值
$('#text li[name=java]').text("c语言"); //设置值
$('.js').html(); //获得值
$('.js').html('<h1>123</h1>'); //设置值
CSS操作:
$('.js').css("background","red");
元素显示和隐藏:本质还是display:none;
('.js').show(); //显示
$('.js').hide() //隐藏