1.js类库
JavaScript封装了很多的预定义的对象和实用函数,能帮助使用者建立有高难度交互
客户端页面,并且兼容各大浏览器。跑在浏览器,请求服务器
当前比较流行的js库:
- jquery
- EXT_JS 2.0开始收费
- Dojo需要引入很多js单独文件
- Prototype 对js扩展,框架开发
- YUI
- 淘宝UI
jquery介绍:
- 轻量级:依赖程序少,占用资源少
- 兼容CSS3
- 文档说明很全
- js代码和html代码分离
- 免费开源
分类:
- WEB版本
- UI版本
- mobile版本
- qunit版本:用于js测试
2.jQuery基本语法
案例:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <script src="../js/jquery-1.8.3.js"></script> 8 <body> 9 ????<input type="text" id="username" value="jack"/>10 </body>11 </html>12 <script type="text/javascript">13 ????//jquer执行时有加载顺序14 ????//jquery基本语法15 ????var value = $("#username").val();16 ????alert(value);17 ????//1.使用javascript获取DOM对象18 ????var value1 = document.getElementById("username");19 ????alert(value1.value);20 21 ????//2.将DOM对象转换为jquery对象22 ????var $value1 = $(value1);23 ????alert($value1.val());24 25 ????//3.将jquery对象转换为DOM对象26 ????//jquery对象内部使用数组存放所有数据,可以用数组下标获取DOM对象27 ????var value2 = $value1.get(0);28 ????alert(value2.value);29 </script>
注意js是有执行顺序的,它是在页面加载完成之后才会执行,因此我们应该讲script代码,放在body之后,同时需要注意引入外部js的写法:
<script src="../js/jquery-1.8.3.js"></script>
不要写成这种的:
<script src="../js/jquery-1.8.3.js"/>
jQuery对象的创建
原文地址:https://www.cnblogs.com/jxxblogs/p/9537726.html