jQuery简单使用

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()        //隐藏