JQuery基础内容

最新推荐文章于 2023-04-03 23:18:39 发布

原创最新推荐文章于 2023-04-03 23:18:39 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #DOM

JQuery 专栏收录该内容

8 篇文章

订阅专栏

* DOM对象和jQuery对象
* 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>