jquery的二种引入方式和$(document).read()使用方式与简写:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #list { margin: 0; padding: 0; margin-left:550px; } .hover { text-align: center; list-style-type: none; background-color: lightblue; float: left; } </style> </head> <body> <h2>清明放假安排</h2> <ul id="list"> <li>星期四<ul><li>爬山</li></ul></li> <li>星期五<ul><li>跑步</li></ul></li> <li>星期六<ul><li>打球</li></ul></li> </ul> </body> </html> <!-- 两种引入方式 --> <!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> --> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $('h2').css('text-align','center') $('#list').css('d','auto') $(document).ready(function () { $('#list>li').addClass('hover') }) </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图:
总结:
jQuery的基本编程思想是:查询 + 操作,基本语法: $(选择器).方法()。