JQuery基础内容

来源：互联网发布：数据分析前途编辑：程序博客网时间：2024/05/29 19:32

* 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>

0 0