1.jQuery
jQuery是前端开发中非常著名的开源框架
- 下载的话 我们下载压缩版本即可 体积较小 节省流量
- JavaScript作为脚本语言 他是一句一句自上而下运行渲染的 一旦某一条语句中出现了之前未出现过的标识符 那么就执行失败 从而停止继续执行 所以一般定义js代码的script标签都是放置在body元素的最后(导入js文件的script标签也建议如此) 但是css并非如此 他不会因为语句中出现不认识的标识符而使得样式失效 即使不认识 他依然会为指定元素设置样式
- 利用jQuery可以提高开发效率
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.7.1.min.js"></script><script>function remove(){$('ul li')[0].remove()}</script>
</head>
<body>
<ul><li>111</li><li>222</li><li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
- 以下案例中 运行到script内容时 由于事先未声明ul、li 导致结果删除按钮失效
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.7.1.min.js"></script><script>$('ul li').remove()</script>
</head>
<body>
<ul><li>111</li><li>222</li><li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
- 解决方法除了说将script标签移至body结尾以外 还可以让script标签延迟执行 待到浏览器窗口加载完毕(即浏览器的内容展示完毕)之后再行执行
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.7.1.min.js"></script><script>window.onload = function(){$('ul li').remove()}</script>
</head>
<body>
<ul><li>111</li><li>222</li><li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
- $()可以达到和window.onload类似的效果 在窗口加载完毕以后执行js代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.7.1.min.js"></script><script>$(function(){$('ul li').remove()})</script>
</head>
<body>
<ul><li>111</li><li>222</li><li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
- $()是一个函数 他的返回值是一个DOM节点封装以后的结果 和js中原生的DOM节点不一样 如此的目的在于兼容不同的浏览器 避免他们的DOM操作不一致引发问题(不同的浏览器对于同一个DOM操作可能会有自己的理解 比如同样的删除操作 chrome可能为remove1 而firefox可能为remove2)
- 绑定点击事件
- 方式一(其中 fadeOut方法是jQuery框架提供的)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <ul><li>111</li><li>222</li><li>333</li> </ul> <button onclick="remove()">删除</button> <script src="js/jquery-3.7.1.min.js"></script> <script>function remove(){$('ul li').fadeOut()} </script> </body> </html>- 方式二
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <ul><li>111</li><li>222</li><li>333</li> </ul> <button>删除</button> <script src="js/jquery-3.7.1.min.js"></script> <script>document.querySelector('button').onclick = function(){document.querySelector('ul li').remove()} </script> </body> </html>- 方式三
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <ul><li>111</li><li>222</li><li>333</li> </ul> <button>删除</button> <script src="js/jquery-3.7.1.min.js"></script> <script>$('button').on('click', function(){$('ul li').fadeOut()}) </script> </body> </html>- 方式四
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <ul><li>111</li><li>222</li><li>333</li> </ul> <button>删除</button> <script src="js/jquery-3.7.1.min.js"></script> <script>$('button').click(function(){$('ul li').fadeOut()}) </script> </body> </html>- 当然 上述四种方式中的匿名函数也可以通过箭头函数代替
- $函数源自于jquery 因此先导入文件 在编辑js代码
2.基于jQuery的各种插件
- jQuery UI
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/jquery-ui.min.css"><style>div {border: 1px red solid;width: 100px;height: 100px;}</style> </head> <body> <div>我是一个div</div> <script src="js/jquery-3.7.1.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script>$('div').draggable() </script> </body> </html> - jQuery Validation Plugin
- 我们可以利用该框架完成表单验证
- 使用时 请导入该框架目录中dist目录的min文件 如果你想要提示信息为中文或者其他非英文语言的话 那么你就需要导入和dist目录下的localization目录
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <form action="/crm/list" method="get" id="loginForm"><div>用户名 <input type="text" required></div><div>密码 <input type="text" requied></div><div><button type="submit">登录</button></div> </form> <script src="js/jquery-3.7.1.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/localization/messages_zh.min.js"></script> <script>$('#loginForm').valid() </script> </body> </html>
