jQuery（v_1_4_1 ）DOM基本操作说明

一、jQuery 介绍
jQuery对象，是对HTML  DOM元素的封装，它对应一个DOM元素集合，可以使用jQu ery()
函数或$()，来匹配获取或者创建。
 
jQuery 在Web 页面中的作用：
1、操作页面DOM元素，包括：获取已有的DOM元素的相关信息，创建新的DOM元素。
2、生成符合W3C规范的Java Script 操作脚本，兼容不同类型的浏览器。
3、创建动画效果。
4、实现AJA X 操作的封装。
二、jQuery 的基本DOM操作
（一）获取页面DOM元素
假设页面上存在如下的HTML 标签：
<div  id=”test1” class=”s ty le1”><sp an> Text1</span></div>
<div  id=”test2” class=”s ty le1”><sp an> Text2</span></div>
1、元素id 获取法
返回的是一个包含了一个DOM元素的jQuery 对象，如果要获取其中的DOM元素，则可
以使用数组索引（[0]），或者get 函数（get()[0]或get(0) ）。
$(“#test1”);     //id为te st1 的DOM元素对应的jQuer y 对象
$(“#test2”);     // id 为test2 的DOM元素对应的jQuer y 对象
$(“#test1”)[0] ;   //id 为te st1 的DOM元素
$(“#test2”)[0] ;   //  id 为test2 的DOM元素
$(“#test1”).get()[0]; //id 为te st1 的DOM元素
$(“#test2”).get()[0]; //  id 为test2 的DOM元素
$(“#test1”).get(0);   //id 为te st1 的DOM元素
$(“#test2”).get(0);   //  id 为test2 的DOM元素
2、元素样式类获取法
返回的是一个包含了一组DOM元素的jQuery 对象，这组DOM元素有一个共同的特性，
就是都使用了特定的样式类。由于jQuery 对象中含有多个DOM元素，那么要使用其中指
定的DOM元素，就要通过数组索引（[0]或[1]），或者get 函数（get()[0]、get()[1]或get(0) 、
  1
get(1) ）。
$(“.style1”);   // 匹配了两个DOM元素
$(“.style1”)[0 ] ; // 第0 个匹配的DOM元素
$(“.style1”)[1 ]  ;  // 第1 个匹配的DOM元素
 
3、元素标签名获取法
返回的是一个包含了一组DOM元素的jQuery 对象，这组DOM元素有一个共同的特性，
就是都使用了特定的标签。由于jQ uery 对象中含有多个DOM元素，那么要使用其中指定
的DOM元素，就要通过数组索引（[0]或[1]），或者get 函数（get()[0]、g et()[1]或get(0) 、
get(1) ）。
$(“di v”);     //匹配所有DIV 标签对应的DOM元素
$(“div”)[0];   // 第0 个匹配的DOM元素
$(“div”)[1];   // 第1 个匹配的DOM元素
 
（二）生成页面DOM元素
使用jQuery 生成的DOM元素都是经过封装的jQu ery 对象。所有生成的DOM元素，需要
使用它们对应的jQuery 对象的方法，才能添加到页面上。
1、HTML 标签生成法
根据HTML 标签内容来生成DOM元素对应的jQu ery 对象。
$(“<in put type=\”button\” value=\” 按钮\” />”);   // 创建包装一个按钮DOM元素为jQ uery 对象
$("<input />", { type: "button", value: " 文本", click: function() { a l ert("click  文
本!"); } }).app endTo("form" );
2、HTML 标签属性生成法
使用这种方法生成DOM元素对应的jQuery 对象的时候，HTML标签中不能含有任何属性，
所有属性都使用JSON 表达式，在该初始化函数的第二个参数处指定。
$("<input />", {type: "button", value: " 按钮"});// 创建包装一个按钮DOM元素为jQuery 对象
（三）封转DOM元素为jQuer y 对象
1、$(<DOM Element Object>)
直接使用该方法，即可实现封装，封装后的jQ uery 对象则只包含指定的DOM元素，且封
装以后就可以使用jQuer y 对象的方法来进行相关的处理操作了。
  2
（四）jQuer y 对象常用方法
1、each(callback)
用于对每一个匹配的DOM元素进行遍历，在遍历的过程中，可以对每一个匹配的DOM元
素进行必要的操作。
$("div").each (function  (ind ex, domEle) { 
  $(domEle).css("backgroundColor",  "yellow");
  if  ($(this).is("#stop"))  { 
      $("span").text("St opped at div index #"  + index); 
     return  false; 
  } 
});
2、attr(nam e)
用于获取一个属性名对应的属性值。如果匹配了多个DOM元素，则获取第一个DOM元素
对应属性名的属性值。
$("img").attr("src");
3、attr(nam e, value)
设定指定属性名的值。
$("#testBtn").attr("value", " 按钮");
4、attr(properties)
使用JSON 表达式来设置属性值。
$("#testBtn").attr({ value: " 按钮1" });
5、removeAttr(name)
删除指定属性名对应的属性。
$("#testBtn").removeAttr(“value”);
6、addClass(class)
为每个匹配的元素指定样式类。
$("p").addClass("selecte d");
  3
7、removeClass([cla ss]) 
删除每个元素上指定样式类名的样式类。
$("p").removeClass("selected");
8、html()
获取innerHT ML。
9、html(val)
设置innerHT ML。
10、tex t()
获取innerT e xt 。
11、te xt(v al)
设置innerT e xt 。
12、val()
获取value。
13、val(val)
设置value。
14、css (na m e)
获取指定CSS属性名对应的属性值。
$("p").css("color");
15、css (na m e, value)
设定指定CSS属性名对应的属性值。
$("p").css("color","red");
  4
16、css (properties)
使用JSON 表达式来设置CSS属性值。
$("p").css({  c olor: "#f f 001 1" , background: "blue" } );
17、文档处理所有函数
用于对页面DOM元素进行系统地添加、删除、替换、包裹、复制等处理。
append() 系列
appendT o()
prep end( )系列
prep endTo( ) 
af ter() 系列
insertAf ter() 
before()系列
insertBefore( )
wrap() 系列
wrapAll() 系列
wrapIn ner( ) 系列
replaceWith( )
replaceAll()
empty()
remove()
detach()
clone()
clone(true)
18、jQuer y 筛选类函数
eq(ind ex)
first()
last()
hasCl ass(class)
filter(expr)
filter(fn)
is(expr)
has(expr)
not(expr)
children()
closest()
find()
next()系列
parent()
  5
parent s()系列
prev() 系列
siblings()
19、事件处理函数
$("p").click(function(){ alert(“Click Me!” ) });