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")