- A+
所属分类：Web前端
✨课程链接
【狂神说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
版权所有，如需转载请注明出处。
