jQuery笔记2

1. DOM操作之 属性与样式
   在上一篇jQuery笔记1中把DOM元素节点的常用操作都介绍了一遍, 这一篇笔记仍是有关jQuery DOM的操作, 主要是DOM节点中属性与样式的添加, 更改删除等操作
   属性操作
   jQuery 使用attr和removeAttr这两个方法来对节点的属性进行操作, 其中attr方法可以用来获取和设置属性, removeAttr可以用来删除节点的属性.为方便说明,下面所有的例子都基于以下的html代码:
   

   
   

   围棋国手

   
   

   
   
   • 柯洁
   
   
   • 唐韦星
   
   
   • 李世石
   
   同性交友
   

   
   test
   
   
   属性的获取与设置
   jQuery中节点属性的获取与设置可以通过同一个方法来实现, 当传入的参数为一个时, attr方法可以获取节点的属性, 当传入的参数为两个时, attr方法可以设置节点的属性.
   var title = $("ul li").attr("title")
   console.log(title)
   打开控制台, 你可以看到输出了 柯洁 , 从这里可以看出attr方法一个重要的特性, 如果有多个匹配的元素, 那么只会获取第一个元素的属性, 这点要牢记.
   $("li").attr("class", "player")
   上面的代码给li 标签添加class属性, 打开浏览器查看源码, 可以看到源码变成了这样子:
   
   
   

   围棋国手

   
   

   
   
   • 柯洁
   
   
   • 唐韦星
   
   
   • 李世石
   
   同性交友
   

   
   test
   
   
   也就是说, 每一个li标签都添加了class为player的属性, 这与获取的时候不太一样, 大家千万牢记在心.
   如果要一次性给元素加点添加多个属性, jQuery还提供了一种便利的写法:
   $("ul li").attr({"class": "player", "name": "go"})

   属性的删除
   节点属性的删除可以使用removeAttr方法来实现, 例如要删除li标签中的title属性, 可以这么写
   $("li").removeAttr("title")
   这样就可以把所有匹配的元素节点中的title属性删除了.

   样式操作

在前端开发中,我们通常会把样式写在class中, 然后在节点中引入. 因此对样式的操作大致可以分为两类, 一种是对class的操作, 另一种是直接对css进行处理, 下面将详细讲述jQuery的样式操作.
样式的获取与设置
样式的获取和设置可以使用css方法. 例如我们要获取h2标签的样式
$("h2").css("font-size")
与attr方法一样,css方法带一个参数时是获取css样式, 带两个参数是设置节点属性的样式.
$("h2").css("color","#444")
上面的代码会给h2标签添加颜色为#444的样式.同样的, 我们还可以同时设置多个属性, 用法也是和attr方法相同.
$("h2").css({
"color": "#333",
"font-size": "40px"
})
使用class进行样式的处理
上面的方法是直接使用css方法对节点进行样式的获取与设置, 但在实际的前端开发中, 绝大多数的样式属性是卸载class中, 因此,jQuery也提供了一系列的方法供我们对class进行操作, 包括添加class的方法addClass, 删除class的方法removeClass, 切换class的方法toggleClass等等, 下面详细介绍这些方法进行样式的处理.
追加样式
为方便理解, 我们先写两个样式文件
.highlight{
color: #ff0000;
}
.blue{
color: #6FBFD7;
}
给h2标签添加类名可以这么写
$("h2").addClass("highlight")
这样代码会给h2标签追加一个highlight的类名.如果要同时追加多个类名的话也是可以的, 只要用空格空开就行了.
$("h2").addClass("highlight blue")

移除样式
用法和addClass一样, 只是作用是把类名从标签中移出去.
$("h2").removeClass("highlight")
同样的,我们也可以同事移除多个类名.
切换样式
当前端开发中有时候我们会遇到这样一种情况, 那就是样式会反复切换, 取个简单的例子就是, 一个标题栏点击之后高亮, 再次点击又变回原样, 我们可以用addClass和removeClass来实现.
$("h2").click(function(){
if ($(this).hasClass("highlight")){
$(this).removeClass("highlight")
}
else{
$(this).addClass("highlight")
}
})
但对于一个常用的功能, 这种实现显然还是比较繁琐, 因此,jQuery提供了一种非常简洁的方法来实现这一功能, 那就是toggleClass, 上面的代码可以用下面这一行代码来代替:
$("h2").click(function(){
$("h2").toggleClass("highlight")
})
** 判断样式是否存在**
hasClass方法可以用来判断元素中是否包含某个class.
$("h2").hasClass("highlight")
用法非常简单.
关于jQuery 对样式的操作大致就这么多了, 下一篇我会介绍jQuery中Dom操作中的其他内容.