跟我学jQuery教程目录:
- 跟我学jQuery(一) 前言
- 跟我学jQuery(二) 初识jQuery
- 跟我学jQuery(三) 无所不能的选择器1
- 跟我学jQuery(四) 无所不能的选择器2
- 跟我学jQuery(五) 给页面添砖加瓦1
一.区分DOM和jQuery包装集
在jQuery中要想获取一个对象,都要从一个美元符号和一段圆括号开始:$(),有这样一个函数我们就可以通过(css,XPath,id)来获取对象.
以往我们通过javascript来获取对象有如下几种取法,但取出来的是一些DOM对象
var obj1 = document.getElementById("txtName"); //获取一个指定id为txtName的DOM对象
var obj2 = document.getElementsByName("chkItem"); //获取name为chkItem的一组元素
var obj3 = document.getElementsByTagName("a");//获取标签元素为a的一组元素
获取的对象多是DOM对象,而DOM对象大家也知道其方法和属性是非常有限的.
而在jQuery中我们要获取上述的对象是非常简单的
var obj1 = $("#txtName"); //获取ID为txtName的对象
var obj2 = $("input:checkbox[@name='chkItem]"); //获取name为chkitem的一组复选框
var obj3 = $(".bgRed"); //获取class为bgReg的元素
var obj4 = $("a");//获取所有的a元素
当然在jQuery里获取对象不止是这些,还有更多,我们下面就会讲到,现在问题来了?有人会问,用普通的JavaScript和jQuery获取的对象是一样的吗?
答案:不是,JavaScript返回的是DOM对象,jQuery返回的是jQuery包装集,封装了更多的属性和方法
有人说我能不能用DOM对象去使用jQuery的方法呢?可以但必须要把这个DOM对象封装成jQuery包装集
var obj1 = document.getElementById("txtName"); //这里是一个DOM对象
var obj2 = $(obj1);//把DOM对象通过$()工厂函数转换成jQuery包装集了
有人会说我怎么区分这2个对象呀,如果你是VS2008的使用者,通过智能感应就可以检测出来
一看obj1提示出来的信息就知道是DOM的属性,我们在测试一下obj2 发现方法明显多出了很多,而且是DOM里面没有的
接下来我们要进行的是如何把一个jQuery的包装集转换成DOM对象呢?
由于jQuery包装集是一个集合,要访问单个元素就需要用到索引
var obj4 = $("a")[0];//获取所有的a元素一个元素
这里要注意的是通过索引返回来的对象就变成DOM对象了.区分了两者的概念对我们学习就会起到一个突进的作用,俗点说用jQuery就不要再去想JavaScript了.
二.jQuery选择器
在DOM里面我们要选择元素用getElementById,getElementByName进行选择,在jQuery中用一个$()工厂函数进行选择元素,取值的方式有几十种,而且灵活多变,有人会问$这个符号代表的是啥意思呀!$就是jQuery的简写
var obj1 = $("a");
var onj2 = jQuery("a");//两者的含义是一模一样的,简写形式而已
三.彻底掌握jQuery选择器
既然标题叫无所不能的选择器,我就彻底的来演示一遍.在讲解各种选择器的各种表达式之前,我要先引入2个jQuery方法,也就是上一讲很多人不明白的2个函数
addClass(样式表名) 说明:给指定的jQuery包装集添加一个指定的样式
removeClass(样式表名) 说明:删除指定的jQuery包装集的样式,例子可以看上一讲的例子
现在我要模仿<
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<style type="text/css">
.myDiv
{
font-size:14px;
color:Black;
border-color:Black;
border-width:1px;
border-style:solid;
}
.changeDiv
{
font-size:18px;
color:Blue;
border-color:Red;
border-width:1px;
border-style:solid;
}
style>
<script language="javascript" type="text/javascript" src="jquery-1[1].3.2-vsdoc2.js">script>