* DOM对象和jQuery对象
* DOM对象:通过DOM解析HTML页面元素,所得到的DOM元素
* jQuery对象(底层还是DOM对象):通过jQuery包装DOM对象后产生的对象
* DOM对象转换成jQuery对象:$(DOM对象)
* jQuery对象转换成DOM对象:
* jQuery对象是数组对象:jQuery对象[索引值]
* jQuery提供了get(index)方法
* DOM对象:通过DOM解析HTML页面元素,所得到的DOM元素
* jQuery对象(底层还是DOM对象):通过jQuery包装DOM对象后产生的对象
* DOM对象转换成jQuery对象:$(DOM对象)
* jQuery对象转换成DOM对象:
* jQuery对象是数组对象:jQuery对象[索引值]
* jQuery提供了get(index)方法
* DOM对象与jQuery对象互操作?不可以
***********************************************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>01_编写简单的jQuery.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">
<!-- 引入外部独立的jquery.js文件 -->
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="text" value="zhang" id="username" name="username" />
</body>
<script type="text/javascript">
//DOM
// var username = document.getElementById("username");
//
// alert(username.value);
/*
* jQuery
* * 定义变量时,是否需要加上"$":
* * (建议)加上"$",表示返回jQuery内容
* * 不加"$",可以表示返回jQuery内容
*/
var $username = $("#username"); //$("#id")
alert($username.val()); //value属性
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>02_DOM转换成jQuery对象.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.4.2.js"></script>
</head>
<body>
<input type="text" value="zhang" id="username" name="username" />
</body>
<script type="text/javascript">
//DOM
var username = document.getElementById("username");
//jQuery
var $username = $(username);
alert($username.val());
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03_jQuery对象转换成DOM对象.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.4.2.js"></script>
</head>
<body>
<input type="text" value="zhangxx" id="username" name="username" />
</body>
<script type="text/javascript">
//jQuery
var $username = $("#username");
//1 jQuery对象是数组对象
// var username = $username[0];
//
// alert(username.value);
//2 jQuery提供了get(index)方法
var username = $username.get(0);
alert(username.value);
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>04_对比事件处理机制.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.4.2.js"></script>
</head>
<body>
<input type="text" value="zhang" id="username" name="username" />
<input type="text" value="88888" id="psw" name="psw" />
</body>
<script type="text/javascript">
//DOM
// var username = document.getElementById("username111");
//
// if(!username){
// alert("id不存在");
// }else{
// alert(username.value);
// }
//jQuery
var $username = $("#username111");
alert($username.val());
//jQuery相对于DOM来讲,具有比较完善的事情处理机制
</script>
</html>