第二章：jQuery基本操作

​ 我们在第一章的时候，主要讲了jQuery的选择器，今天我们来讲一下操作函数。

一，jQuery操作CSS

1. 设置和获取样式值

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

语法：

• css(“name”,“value”) ;//两个加引号
• css({“name”:“value”, “name”:“value”,“name”:“value”…}) ;//加引号，别忘了大括号。

示例：

$(this).css("border","5px solid #f5f5f5");
或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});
1
2
3

2. 追加和移除样式

追加样式

语法：

• $(selector).addClass(class);
• $(selector).addClass(class 1 class 2 … class N);

示例：

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

1
2
3
4

$("h2").mouseover(function() {
     $("p").addClass("content border");
});//添加多个用空格隔开，只写class名不加‘.’
1
2
3

移除样式

语法：

• $(selector).removeClass(“class”) ;
• $(selector).removeClass("class1 class 2 … class N ") ;

示例：

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

切换样式

语法：

• toggleClass(class)：有该class则移除，没有则添加。

示例：

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

判断是否含指定的样式

语法：

$(selector). hasClass(class);//判断是否包含指定的样式

示例：

$("h2").mouseover(function() {
    if(!$("p").hasClass("content ")){
	$("p").addClass("content ");
	}
});
//-------------------------华丽的分割线
$("h2").mouseout(function() {
      if($("p").hasClass("content ")) {
	$("p").removeClass("content ");
    }
});
1
2
3
4
5
6
7
8
9
10
11

二，jQuery内容操作

1. HTML代码操作

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

语法：

• $(“div. left”).html(); //获取元素中的html代码

• $(“div. left”).html(“

  …
  ”); //设置元素中的html代码

2. 标签内容操作

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

语法：

• $(“div. left”).text(); //获取元素中的文本内容
• $(“div. left”).text(“
  …
  ”); //设置元素中的文本内容

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

4. 属性值操作

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

语法：

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

三，节点操作

Query中节点操作：

• 查找节点（前面章节已讲）
• 创建节点
• 插入节点
• 删除节点
• 替换节点
• 复制节点

创建节点元素

工厂函数$()用于获取或创建节点

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

示例：

var $newNode=$("
");
var $newNode1=$("
你喜欢哪些冬季运动项目？
");
var $newNode2=$("
北京申办冬奥会是再合适不过了！
");
//创建含文本与属性
元素节点
1
2
3
4

插入节点

​ 1.元素内部插入子节点:

​ 2.元素外部插入同辈节点

删除节点

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

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

​ 最常用的是empty();

替换节点

• replaceWith()
• replaceAll()

​ 两者的关系类似于append()和appendTo()

示例：

var $newNode1=$("
你喜欢哪些冬季运动项目？
");
$(".gameList li:eq(2)").replaceWith($newNode1);
//-------------------华丽的分割线
$($newNode1).replaceAll(".gameList li:eq(2)");
1
2
3
4

复制节点

​ clone()用于复制某个节点。

语法：

$(selector).clone([includeEvents]) ;

示例：

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

四，属性操作

1.获取与设置元素属性

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

语法：

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

示例：

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

2.删除元素属性

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

语法：

$(selector).removeAttr(name) ;

示例：

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

五，节点遍历

1.遍历子元素

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

语法：

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

示例：

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

2.遍历同辈元素

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

3.遍历前辈元素

jQuery中可以遍历前辈元素

• parent()：获取元素的父级元素
• parents()：元素元素的祖先元素

示例：

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

jQuery中提供了find()、filter()等节点操作方法，请查阅相关手册进行学习

4.其他遍历方法

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

语法：

$(selector).each(function(index,element)) ;

示例：

$("img").click(function(){
       $("li").each(function(){
           var str=$(this).text()+"
";
           $("section").append(str);
       })
   });
1
2
3
4
5
6

​ 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");
1
2
3

六，总结

​