jQuery
目录
1. JavaScript和jQuery的关系
jQuery是一个库,里面存在大量的JavaScript函数
2. 获取jQuery
搜索cdn 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.5.1/jquery.js"></script> </head> <body> </body> </html>
@H_403_49@3. jQuery基本公式介绍
公式:$(selector).action()
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> <!--cdn引入--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <!--lib导入--> <script src="lib/jquery-3.5.1.js"></script> </head> <body> <!-- 公式:$(selector).action() --> <a href="" id="test-jquery">点我</a> <script> //选择器就是CSS的选择器 $('#test-jquery').click(function () { alert('Hello jQuery!') }) </script> </body> </html>
@H_403_49@4. 选择器
//原生的JS,选择器少,麻烦不好记 //标签 document.getElementsByTagName(); //id document.getElementById(); //类 document.getElementsByClassName(); //jQuery css中的选择器它全部都能用 $('p').click(); //标签选择器 $('#id1').click(); //id选择器 $('.class1').click(); //类选择器
@H_403_49@文档工具站:https://css.cuishifeng.cn/index.html
3. 事件
鼠标事件,键盘事件,其他事件
mousedown() 鼠标按下
mousemove() 鼠标移动
mouSEOver() 点击结束
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> <script src="lib/jquery-3.5.1.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>
@H_403_49@4. 操作DOM
1. 节点文本操作
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> <script src="lib/jquery-3.5.1.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('some values'); //HTML //获得值 $('#test-ul').html(); //设置值 $('#test-ul').html('<strong> 123 </strong>'); </script> </body> </html>
@H_403_49@2. CSS的操作
$('#test-ul li[name=python]').css({'color': 'red','background': 'blue','width': '60px'});
@H_403_49@3. 元素的显示和隐藏
本质:display : none;(CSS)
$('#test-ul[name=python]').show(); $('#test-ul[name=python]').hide();
@H_403_49@4. 娱乐(测试用)
$(window).width(); $(window).height()
@H_403_49@更多函数见上面提到的文档