jQuery.简介
一、jQuery简介
- 流行的JavaScript类库
为了简化 JavaScript 的开发,一些 JavsScript 库诞生了。JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面,并且兼容各大浏览器 - 当前流行的 JavaScript 库有::
jQuery,,MooTools, Prototype, Dojo, YUI, EXT_JS,DWR,www.open-open.com
二、jQuery是什么
- jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
- 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
- jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
- jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
- jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
三、jQuery语法
jQuery:简单例子
<!--引入jquery的js库-->
<script type="text/javascript" src="script/jquery-1.4.2.js"></script>
<script language="JavaScript">
$(document).ready(function(){
//等待dom元素加载完毕,类似window.onload;
alert("您好,我是张三丰");
});
</script>
四、什么是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 对象
五、jQuery和dom对象转化
1、DOM对象转成jQuery对象
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。转换后就可以使用 jQuery 中的方法了
2、jQuery对象转成DOM对象
(1) jQuery对象是一个数组对象,可以通过[index]的方法,来得到相应的DOM对象
(2) jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
代码实例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery和dom对象转化</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
alert("nice to meet you!")
});
//这个是dom对象
var name = document.getElementById("name");
alert(name.value);
//转换为jQuery对象
var $name=$(name);
alert($name.val());
//jQuery对象转化为dom
var name1=$(name).get(0);
alert(name1.value);
</script>
<form action="#">
姓名<input type="text" id="name">
</form>
</body>
</html>