第二章 jQuery基本操作

第二章 jQuery基本操作

DOM操作分类

• DOM操作分为三类：
  • DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
  • HTML-DOM：用于处理HTML文档，如document.forms
  • CSS-DOM：用于操作CSS，如element.style.color=“green”
• JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

jQuery中的DOM操作

• jQuery对JavaScript中的DOM操作进行了封装
  • jQuery中的DOM操作
  • 样式操作
  • 内容及Value值操作
  • 节点及节点属性操作
  • 节点遍历

设置和获取样式值

• 使用css()为指定的元素设置样式值或获取样式值

css(name,value) ;	//设置单个属性
或
css({name:value, name:value,name:value…}) ;	//同时设置多个属性

css(name)	//获取属性值

$(this).css("border","5px solid #f5f5f5");
或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});	//opacity:设置透明度

追加和移除样式

• 追加样式

$(selector).addClass(class);
或   
$(selector).addClass(class1 class2 … classN);

示例：

//css
.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }

//js
$("h2").mouseover(function() {
     $("p").addClass("content border");
});

• 移除样式

$(selector).removeClass("class") ;
或   
$(selector).removeClass("class1 class2 … classN ") ;

示例：

$("h2").mouseout(function() {
	$("p").removeClass("text content");
});

切换样式

• toggleClass()
  • 模拟了addClass()与removeClass()实现样式切换的过程

$(selector).toggleClass(class);

示例：

$("h2").click(function() {
    $("p").toggleClass("content border");
});

判断是否含指定的样式

• hasClass( )方法来判断是否包含指定的样式

$(selector). hasClass(class);

示例

$("h2").mouseover(function() {
    if(!$("p").hasClass("content")){
	$("p").addClass("content");
	}
});

$("h2").mouseout(function() {
      if($("p").hasClass("content")) {
	$("p").removeClass("content");
    }
});

内容操作

• HTML代码操作
• 标签内容操作
• 属性值操作

HTML代码操作

• html()可以对HTML代码进行操作，类似于JS中的innerHTML

$("div.left").html();	//获取元素中的html代码
或
$("div.left").html("<div class='content'>…</div>");	  //设置元素中的html代码

标签内容操作

• text()可以获取或设置元素的文本内容

$("div.left").text();	//获取元素中的文本内容
或
$("div.left").text("<div class='content'>…</div>");	//设置元素中的文本内容

html( ) 和text( )方法的区别

语法格式	参数说明	功能描述
html( )	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html (content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text( )	无参数	用于获取所有匹配元素的文本内容
text (content)	content为元素的文本内容	用于设置所有匹配元素的文本内容

属性值操作

• val()可以获取或设置元素的value属性值

$(this).val();	//获取元素的value属性值
或     
$(this).val(value);	 //设置元素的value属性值

节点操作

• jQuery中节点操作
  • 查找节点
  • 创建节点
  • 插入节点
  • 删除节点
  • 替换节点
  • 复制节点

创建节点元素

• 工厂函数$()用于获取或创建节点
  • $(selector)：通过选择器获取节点
  • $(element)：把DOM节点转化成jQuery节点
  • $(html)：使用HTML字符串创建jQuery节点

var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

插入节点

• 元素内部插入子节点

语法	功能
after(content)	$(A).after(B)表示将B插入到A之后如：$(“ul”).after($newNode1);
insertAfter(content)	$(A).insertAfter(B)表示将A插入到B之后如：$newNode1.insertAfter(“ul”);
before(content)	$(A).before(B)表示将B插入至A之前如：$(“ul”).before($newNode1);
insertBefore(content)	$(A).insertBefore(B)表示将A插入到B之前如：$newNode1.insertBefore(“ul”);

删除节点

• jQuery提供了三种删除节点的方法

  • remove()：删除整个节点

    • $(selector).remove([expr]);
      

  • empty()：清空节点内容

    • $(selector).empty();
      

  • detach()：删除整个节点，保留元素的绑定事件、附加的数据

替换节点

• replaceWith()和replaceAll()用于替换某个节点

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);

$($newNode1).replaceAll(".gameList li:eq(2)");
//两者的关系类似于append()和appendTo()

复制节点

• clone()用于复制某个节点

$(selector).clone([includeEvents]);	  //参数ture或flase, true复制事件处理，flase时反之

示例：

$(".gameList li:eq(1)").click(function(){
     $(this).clone(true).appendTo(".gameList");
})
$(".gameList li:eq(2)").click(function(){
     $(this).clone(false).appendTo(".gameList");
})

属性操作

• 获取与设置元素属性
• 删除元素属性

获取与设置元素属性

• attr()用来获取与设置元素属性

$(selector).attr([name]);	//获取属性值
或
$(selector).attr({[name1:value1]…[nameN:valueN]});	//设置多个属性的值

示例：

$(".contain img").attr({width:"200",height:"80"});

删除元素属性

• removeAttr()用来删除元素的属性

$(selector).removeAttr(name);

示例：

$(".contain img").removeAttr("alt");	//删除元素的alt属性

节点遍历

• 遍历子元素
• 遍历同辈元素
• 遍历前辈元素
• 其他遍历方法

遍历子元素

• children()方法可以用来获取元素的所有子元素

$(selector).children([expr]);

示例：

var $section =$("section").children();	//获取<section>的子元素，但不包含子元素的子元素
alert($section.length);

遍历同辈元素

• jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

语法	功能
next([expr])	用于获取紧邻匹配元素之后的元素 $(“li:eq(1)”).next().addClass(“orange”);
prev([expr])	用于获取紧邻匹配元素之前的元素 $(“li:eq(1)”).prev().addClass(“orange”);
slibings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素 $(“li:eq(1)”).siblings().addClass(“orange”);

遍历同辈元素

• jQuery中可以遍历前辈元素
  • parent()：获取元素的父级元素
  • parents()：元素元素的祖先元素
• jQuery中还提供了find()、filter()等节点操作方法
• 示例：

$("li:eq(1)").parent().addClass("orange");
$("li:eq(1)").parents().addClass("orange");

其他遍历方法

• each( ) ：规定为每个匹配元素规定运行的函数

$(selector).each(function(index,element));	//选择器的位置，当前的元素

示例：

$("img").click(function(){
    $("li").each(function(){
        var str=$(this).text()+"<br>";
        $("section").append(str);
    })
});

• end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

$(".contain:header").css({"background":"#2a65ba","color":"#ffffff"});
$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");
$(".gameList li:last").css("border","none");

CSS-DOM操作

• 除css()外，还有获取和设置元素高度、宽度等的样式操作方法

语法	功能
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent( )	返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position( )	返回第一个匹配元素相对于父元素的位置
scrollLeft([position])	参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])	参数可选。设置或返回匹配元素相对滚动条顶