Jquery入门详解

                                                                           JQuery 入门介绍
1JQuery概述: 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 即可。其宗旨是写更少的代码 , 做更多的事情。
2JQuery初步学习:
(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")

你可能感兴趣的:(Jquery入门详解)