Jquery入门详解

RedArmyChen

浏览: 376454 次
性别:
来自: 北京

最近访客更多访客>>

dongguangming88

lijun0349

繁星水

liangzhiyi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

jQuery QQ 浏览器 IE Ajax

JQuery入门介绍
1、JQuery概述：Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。其宗旨是写更少的代码,做更多的事情。
2．JQuery初步学习：

(1) Jquery对象的引入方式：
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
(2) 加载页面（有两种方式加载）：
Jquery的页面载入事件处理方式
$(document).ready(function(){
      });//  加载html 立即加载
 或
 $(function(){
      });  
(3)  DOM对象与JQuery对象之间进行相互转化
DOM对象 是不能使用Jquery中的方法的. JQuery中的对象也不能使用DOM对象的方法，但两者之间是可以转换的。其转换方式如下：
   1．DOM对象转换成Jquery对象的方式
     对于一个DOM对象只需要使用$(DOM对象)即可转换成一个Jquery对象
     例：var $document=$(document);
   2．Jquery对象转换成DOM对象的方式
第一种：可以采用Jquery中get(index)方法获取
get(index)----取得其中一个匹配的元素。 index表示取得第几个匹配的元素。它返回的是一个DOM对象
例：var domObject = $(".rdc").get(0);
     第二种：Jquery对象返回的是一个数组对象可以采用如下方式转换，
var domObject = $("#thed")[index]; index是数组对象的下标
例：var domObject = $("#hed")[0];
(4) 关于jquery对象的主要方法
get(index)方法, Jquery对象转换成DOM对象  
size()方法,获取query对象的长度 例：alert(($("tr")[$("tr").size()-1]).innerHTML);
length属性   例： alert(($("tr")[$("tr").length-1]).innerHTML);
注： 使用size()方法与length属性最后得到的结果是一样的。
3、Jquery中的基本选择器
id选择器     ID匹配的选择器Jquery对象   例：$("#thed")
class选择器  class匹配选择器Jquery对象  例：$(".thed")
元素选择器    根据给定的元素名称获取Jquery对象  例：$("tr")
*             匹配所有的元素的Jquery对象  例：$("*")
并列选择器    匹配所有选择器的Jquery组合对象，用英文的逗号区分                
例：$("tr,tr.rdc")
<!--引入js类库文件-->
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>

  <script type="text/javascript">
  $(document).ready(function(){
  //ID匹配的选择器Jquery对象
       //alert($("#thed"));
     /**转换成DOM对象的方式
       1、Jquery对象返回的是一个数组对象可以采用如下方式转换
         var domObject = $("#thed")[0];
       */
   alert(($("#thed")[0]).innerHTML);
   //class匹配选择器Jquery对象
   alert($(".rdc"));
   /**
        2、Jquery对象转换成DOM对象可以采用Jquery中get(index)方法获取
  
        get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象
      */
   var domObject=$(".rdc").get(0);
   alert(domObject.innerHTML);

    //匹配所有的元素的Jquery对象
   alert($("*"));
   alert($("*").get(0).innerHTML);
   
    //根据给定的元素名称获取Jquery对象
   alert($("tr"));
   /**采用第一种方式把$("tr")转换成DOM对象*/
   alert(($("tr")[$("tr").size()-1]).innerHTML);
   alert(($("tr")[$("tr").length-1]).innerHTML);
   //匹配所有选择器的Jquery组合对象
   alert($("tr,tr.rdc"));
   alert(($("tr,tr.rdc")[$("tr,tr.rdc").length-1]).innerHTML);
   
  })
  </script>

案例解析：此javacript中介绍了将jquery对象与dom对象之间的转换；
使用了get(index)  size()方法以及length属性
附带body代码： 
<body>
  <div>
       <div>
           <h1>  选择器的使用方式</h1>
       </div>
       <div>
				<table border="1px" cellpadding="0" cellspacing="0">
					<thead>
						<tr id="thed">
							<th>
								序号
							</th>
							<th>
								名称
							</th>
							<th>
								邮箱
							</th>
						</tr>
					</thead>

					<tbody id="tbdy">
						<tr class="rdc">
							<td>
								1001
							</td>
							<td>
								redarmy_chen
							</td>
							<td>
								redarmy_chen@qq.com
							</td>
						</tr>
							<td>
								1002
							</td>
							<td>
								x_j
							</td>
							<td>
								redarmy_chen@qq.com
							</td>
						</tr>
					</tbody>
				</table>
			</div>
  </div>  
</body>


上内容归redarmy_chen总结创建,如需转载请添加出处，如有疑问请发送到redarmy_chen@qq.com

4
顶

2
踩

分享到：