JavaScript—day04
1.初始jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = "lib/jquery-3.6.0.js"></script> </head> <body> <!-- 公式：$(selector).action() --> <a href="" id="test-jquery">点我</a> <script> //选择器就是css的选择器 $('#test-jquery').click(function () { alert('hello,jQuery'); }) </script> </body> </html>
结果展示
2.选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //原生js，选择器少，麻烦不好记 //标签 document.getElementsByTagName(); //id document.getElementById(); //类 document.getElementsByClassName(); //jQuery css中的选择器都能用 $('p').click()//标签选择器 $('#id1').click()//id选择器 $('.class1').click()//class选择器 </script> </body> </html>
3.事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = "lib/jquery-3.6.0.js"></script> <style> #divMove{ width: 500px; height: 500px; border: 3px 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>
结果展示
4.操作Dom对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = "lib/jquery-3.6.0.js"></script> </head> <body> <ul id="test-ul"> <li class="js">javascript</li> <li class="python">python</li> <li class="java">java</li> </ul> <script> //节点文本操作 $('#test-ul li[class=python]').text();//获得值 $('#test-ul li[class=python]').text('123');//设置值 $('#test-ul').html();//获得值 $('#test-ul').html('<strong>456</strong>>');//设置值 //css操作 $('#test-ul li[class=python]').css("color","red") //元素的显示和隐藏 $('#test-ul li[class=python]').show(); $('#test-ul li[class=python]').hide(); </script> </body> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律