9.jQuery

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()//隐藏
 
posted @   l希尔瓦娜斯l  阅读(171)  评论(0)  编辑  收藏  举报
相关博文：
·  7.js操作DOM对象
·  23.4.24前学习笔记
·  jQuery
·  jQuery
·  Day05
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手