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>
浙公网安备 33010602011771号