1、流行的JavaScript库
- 为了简化JavaScript的开发,一些JavaScript库诞生了。JavaScript库封装了很多预定义的对象和使用函数。能帮助使用者建立有高难度交互的WEB2.0特性的富客户端页面,并且兼容各大浏览器
- 当前流行的JavaScript库有:
JQuery、MooTools、Prototype、Dojo、YUI、EXT_JS(很多大公司使用)、 DWR(使用方法类似于Java)
查询流行框架和技术网站:www.open-open.com
2、jQuery由美国人John Resig创建
- jQuery是继prototype之后又一个优秀的JavaScript框架。其宗旨是--WRITE LESS DO MORE,写更少的代码,做更多的事
- 它是轻量级的js库(解压后只有21k),这是其他js库所不及的,它兼容CSS3,还兼容各种浏览器
- jQuery是一个快速的,简洁的JavaScript库,用户用能更方便的处理HTML document、events、实现动画效果,并且方便的为网站提供AJAX交互
- jQuery还有一个比较大的优势是,他的说明文档很全,而且各种应用也说的很详细,同时有许多成熟的插件可供选择
- jQuery能够使用户的HTML页面保持代码和HTML内容分离,也就是说,不用再在HTML页面里插入一堆js来调用命令了,秩序定义id即可。
3、简单程序
<!DOCTYPE html>
<html>
<head>
<title>jquery1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<input type="text" name="ztp" id="ztp" value="zhutianpeng"/>
<script type="text/javascript">
//使用js
alert(document.getElementById("ztp").value);
//使用jquery
alert($("#ztp").val());
</script>
</body>
</html>
运行效果:
4、jQuery对象
- jQuery对象就是通过jQuery包装DOM对象后产生的对象
- jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:$("#test").html();比如$("#test").html() 意思是获取ID为test的元素的HTML代码。其中html()是jQuery里的方法。这段代码等同于用DOM实现代码:
- document.getElementById("test").innerHTML;
- 虽然jQuery对象包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法,乱使用会报错。
- 约定:如果获取的是jQuery对象,那么要在变量前面加上$,
- var $variable = jQuery对象
- var variable = DOM对象
5、DOM对象转换成jQuery对象
- 对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)
<!DOCTYPE html>
<html>
<head>
<title>jquery1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<input type="text" name="ztp" id="ztp" value="zhutianpeng"/>
<script type="text/javascript">
//将DOM对象转换成jQuery对象 $(DOM对象)
var usernameElement = document.getElementById("ztp");
var $use = $(usernameElement);
alert($use.val());
</script>
</body>
</html>
6、jQuery对象转换成DOM对象
- 两种转换方式将一个jQuery对象转换成DOM对象:[index]和 .get(index);
- (1)jQuery对象是一个数组对象,可以通过[index]的方法,来得到相应的DOM对象
<!DOCTYPE html>
<html>
<head>
<title>jquery1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<input type="text" name="ztp" id="ztp" value="zhutianpeng"/>
<script type="text/javascript">
var $user = $("#ztp");
var username = $user[0];
alert(username.value);
</script>
</body>
</html>
- (2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
<!DOCTYPE html>
<html>
<head>
<title>jquery1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<input type="text" name="ztp" id="ztp" value="zhutianpeng"/>
<script type="text/javascript">
var username = $("#ztp").get(0);
alert(username.value);
</script>
</body>
</html>
7、jQuery选择器
- 选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都以来选择器
- jQuery选择器的优点:
- ①简单的写法
- ②完善的事件处理机制
8、基本选择器
基本选择器是jQuery中最常用的选择器,也是最简单的选择器,他通过元素的id,Class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用)
- 1、#id 用法:$("#myDiv"); 返回值 单个元素的组成集合
- --说明:这个就是直接选择html中的id=“myDiv”
- 2、Element 用法:$("div") 返回值 集合元素
- --说明:element的英文翻译过来就是“元素”,所以element其实就是html已经定义好的标签元素,例如div,input,a等等
- 3、class 用法:$(".myClass") 返回值 集合元素
- --说明:这个标签是直接选择html代码中class=“myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的)
- 4、* 用法:$("*") 返回值 集合元素
- --说明:匹配所有元素,多用于结合上下文来搜索
- 5、selector1,selector2,selectorN 用法:$("div.span.p.myClass") 返回值 几何元素
- --说明:将每一个选择器匹配到的元素合并后一起返回,你可以指定任意多个选择器,并将匹配 p class = "myClass"