9.jQuery

Javascript

jQuery库，里面存在大量的JavaScript函数

获取jQuery

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     //CDN引入
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
 </head>
 <body>
 ​
 </body>
 </html>
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
 </head>
 <body>
 <!--
 公式：$(selector).action()
 -->
 <a href=""id="test-jquery">点我</a>
 <script>
     //选择器就是CSS的选择器
     $('#test-jquery').click(function () {
         alert('hello')
     })
 </script>
 </body>
 </html>

选择器

 <script>
     //标签
     document.getElementsByName()
     //id
     document.getElementById()
     //类
     document.getElementsByClassName()
     //jquery  CSS中的所有选择器都能用 
     $('p').click()//标签选择器
     $('#id1').click()//id选择器
     $('class1').click()//class选择器
 </script>

事件

鼠标事件，键盘事件，其他事件 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/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")

元素的显示和隐藏本质：display=none

 $('#test-ul li[name=python]').show()//显示
 $('#test-ul li[name=python]').hide()//隐藏
 
版权声明：本文为cyh822blogs原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/cyh822blogs/p/16671474.html