【前端】JavaScript学习笔记(六)——jQuery

  • A+
所属分类:Web前端
摘要

【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili本文作者:双份浓缩馥芮白


✨课程链接

【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili

✨学习笔记

初识jQuery

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

选择器

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <script src="lib/jquery-3.6.0.min.js"></script>  </head> <body>  <a href="https://jquery.cuishifeng.cn/index.html">jQuery API 中文文档</a>  <script>     // 原生JS     // 标签选择器     document.getElementsByTagName();     // id选择器     document.getElementById();     // 类选择器     document.getElementsByClassName();      // jQuery     // 标签选择器     $('p').click();     // id选择器     $('#id1').click();     // 类选择器     $('.class1').click(); </script>   </body> </html> 

事件

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <script src="lib/jquery-3.6.0.min.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>     // 当网页元素加载完毕后 响应事件     // $(document).ready(function () {     //         // });     $(function () {         $('#divMove').mousemove(function (e) {             $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY)         })     }) </script> </body> </html> 

操作DOM对象

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <script src="lib/jquery-3.6.0.min.js"></script>  </head> <body>  <ul id="test-ul">     <li class="js">JavaScript</li>     <li name="python">Python</li> </ul>  <script>     // 节点文本操作     $('#test-ul li[name=python]').text();     $('#test-ul li[name=python]').text("Java");     $('#test-ul').html();      // CSS操作     $('#test-ul li[name=python]').css('color','red');      // 元素的显示和隐藏     $('#test-ul li[name=python]').show();     $('#test-ul li[name=python]').hide(); // display:none      // 其他     $(window).width();     $(window).height();     $(document).height();     $('#test-ul li[name=python]').toggle();      // ajax();  </script>  </body> </html> 

⭐转载请注明出处

本文作者:双份浓缩馥芮白

原文链接:https://www.cnblogs.com/Flat-White/p/15039231.html

版权所有,如需转载请注明出处。