当前位置: 代码迷 >> 综合 >> JQuery基础内容
  详细解决方案

JQuery基础内容

热度:9   发布时间:2023-09-20 22:57:11.0
* 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">//DOMvar username = document.getElementById("username");//jQueryvar $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">//jQueryvar $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);
//	}//jQueryvar $username = $("#username111");alert($username.val());//jQuery相对于DOM来讲,具有比较完善的事情处理机制</script>
</html>





  相关解决方案