jQuery是继Prototype之后有一个优秀的javascript库
jQuery理念:写的少,做的多,优势如下:
轻量级
强大的选择器
出色的dom操作的封装
可靠的事件处理机制
完善的Ajax
出色的浏览器兼容性
链式操作方式
jQuery对象就是通过jQuery($())包装dom对象后产生的对象
jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:$("#persontab".Html());
jQuery对象无法使用dom对象的任何方法,同样dom对象也不能使用jQuery里面的任何方法
约定:如果回去的是jQuery对象,那么要在变量前面前面加$
Var $variable= jQuery对象
Var variable=dom对象
Dom对象的转换成jQuery:
对于一个dom对象,只需要用$()把dom对象昂包装起来(jQuery对象昂就是通过jQuery包装dom对象后长生的对象),就可以获得一个jQuer对象
Var cr = document.getElmentById("cr");
Var $cr=$(cr);
转换后就可以使用jQuery中的方法了
jQuery对象昂转化成dom对象
jQuery对象不能使用dom中的方法,但是如果jQuery没有封装想要的方法,不得不使用dom对象的时候,有两种方法:
(1)jQuery对象昂是一个数组对象,可以通过[index]的方法得到对应的dom对象
Var $cr=$("#cr");
Var cr=$cr[0];
(2)s使用jQuery中的get(index)方法得到相应的dom对象
Var $cr=$("#cr");
Var cr= $cr.get(0);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>e2.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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入类库文件 -->
<script type="text/javascript" src="./js/jquery-1.7.1.js"></script>
</head>
<body>
用户名:<input type="text" id="name">
<br>
</body>
</html>
<script type="text/javascript">
<!--
$(document).ready(function(){
//根据id获取dom对象
var DomInput = document.getElementById("name");
DomInput.value = "文本框中的值";
//根据id获取jquery对象
var $jInput = $("#name")
$jInput.val("根据id获取jquery对象");
//把dom对象转换成jquery对象
var $Dinput = $(DomInput);
$Dinput.val("把dom对象转换成jquery对象");
//把jquery对象转化成dom对象
dinput = $jInput.get(0);
dinput.value="军哥 Hi!";
var dinput=$jInput.get(0);
dinput.value("jquery对象那转化成dom对象2");
});
//-->
</script>