【jquery入门】学习01_H5之家 - 中国HTML5教程资源分享第一站

一:什么是jQuery？为什么要使用jQuery？

1.jQuery是一个优秀的实用JavaScript库，内部封装了很多实现的函数和对象.

2.jQuery是目标是：写少代码，做多事情，是相对于原始javascript+dom的方式而言.
3.jQuery是开源的js实用库.
4.jQuery分为min版和非min版，min版适合真正发布Web应用，非min版适合学习使用.
5.jQuery在主流的浏览器中可以使用.
6.jQuery能够做dom能做的一切事情.
7.jQuery文档齐全，便用学习.
8.提倡对每个元素节点设置一个id属性.

9. jQuery没有将所有的javascript进行封闭，jQuery只争对它所关注的领域进行封装.

二:jQuery的开发步骤？
1.$username.val() vs value属性

2.$username.html() vs innerHTML属性
3.个人代码约束
dom对象 inputElement inputText

jquery对象 $inputinputText

4.开发步骤
1)在需要使用jquery技术的页面中（html/jsp)，通过<script>标签引用jquery库
2)使用jquery常用API（重点）

代码实现（jQuery体验入门）

jquery.jsp:

<head> <title></title>  <script type="text/javascript" src="js/jquery-1.8.2.js"></script> </head> <body> <input type="button" value="dom的属性"> <input type="button" value="jquery的属性"> <div>哈哈</div> </body> <script type="text/javascript"> //dom方式获取value的属性值 var inputElement = document.getElementById("domID"); var inputText = inputElement.value; alert(inputText); //jquery方式获取value的属性值 var $input = $("#jqueryID"); var inputText = $input.val(); alert(inputText); //获取div的内容 var $div = $("#divID"); var divText = $div.html(); alert(divText); </script>

三:DOM对象和jQuery对象相互转换

1）按照dom规则，通过javascript语法创建出来的对象，叫dom对象
2）用jquery语法创建出来的对象，叫jquery对象。
3）jquery对象是对dom对象的封装，dom中大部份属性，在jquery封装后，都变化了方法，更加符合OO的设计规则
4）dom对象转成jquery对象$(dom对象) 返回值：jquery对象
5）jquery对象可以看作是一个封装dom对象的数组，如果只有一个dom对象的话，下标位于0处
方式一:jquery对象[0] 返回值：dom对象

方式二:jquery对象.get(0) 返回值：dom对象

Dom对象转换成jquery对象：

dom2jquery.jsp

<head> <title></title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> </head> <body> <input type="button" value="dom转成jQuery对象"> </body> <script type="text/javascript"> //dom转成jQuery对象 //创建dom对象 var inputElement = document.getElementById("inputID"); //把dom对象转成jquery对象 var $input = $(inputElement); //操作jQuery对象的API var inputText = $input.val(); alert(inputText); //jQuery转成dom对象 var inputElement = document.getElementById("inputID"); var $input = $(inputElement); var inputText = $input.val(); alert(inputText); </script>

jquery对象转成dom对象的二种方式：

<body> <div>hello jquery</div> </body> <script type="text/javascript"> //创建jquery对象 var div1 = $("#divID"); //jquery对象转成dom对象方法一 var divElement = div1[0]; var divText = divElement.innerHTML; alert(divText); </script> <body> <div>hello jquery</div> </body> <script type="text/javascript"> //jquery对象转成dom对象方法二 var div2 = $("#divID"); var divElement = div2.get(0); var divText = divElement.innerHTML; alert(divText); </script>

四:DOM操作与jQuery操作对错误的处理方式的比较

jquery定位元素节点有三种方式：

方式一：通过id，例如：$("#divID") --------- > getElementById("divID")

方式二：通过标签名，例如：$("div")------------> getElementsByTagName("div")
方式三：通过样式名，例如：$(".oneClass")

代码体现如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DOM操作与jQuery操作对错误的处理方式的比较</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .oneClass { font-size: 44px; color: red } </style> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> </head> <body> <input type="text" value="[这就是jQuery]" /> <div>这是div中的内容</div> <script type="text/javascript"> //通过"#id"定位<input> //var $input=$("#usernameID"); //var inputText=$input.val(); //alert(inputText); //通过"标签名"定位<input> //var $input=$("input"); //var inputText=$input.val(); //alert(inputText); //通过"样式名"定位<div> //var $div=$(".oneClass"); //var divText=$div.html(); //alert(divText); <span> </span> <body> <input type="text" value="这是jQuery"/> <div>这是div中的内容</div> </body> <script type="text/javascript"> //dom错误处理和jquery错误处理 //dom错误处理 var inputID = document.getElementById("inputID"); if(inputID != null){ var inText = inputID.value; alert(inText); }else{ alert("查无此元素节点!"); } //jquery错误处理 var inputElement = $("#inputID"); var inputText = inputElement.val(); //alert(inputText); </script>