jQuery学习笔记1——操作属性 - Joanna Qian

一、获得和设置内容

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容, 得到匹配元素集合中每个元素的文本内容结合,包括他们的后代, 即由所有匹配元素包含的文本内容组合起来的文本
html() - 设置或返回所选元素的内容（包括 HTML 标记），从匹配的第一个元素中获取HTML内容
val() - 设置或返回表单字段的值，获取匹配的元素集合中第一个元素的当前值，主要用于获取表单元素的值, 至于 <select multiple="multiple"> 元素, .val()方法返回一个包含每个选中的 option 的数组
prop()-获取在匹配的元素集中的第一个元素的属性值, 如果没有匹配的元素。它返回undefined值
attr()-获取第一个匹配元素的属性值, 要获取每个单独的元素的属性值，我们需要依靠jQuery的 .each()或者.map()方法做一个循环

attr()不应该用在普通的对象，数组，窗口（window）或文件（document）上。若要检索和更改DOM属性请使用.prop()方法

回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){
      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 
    });
  });

  $("#btn2").click(function(){
    $("#test2").html(function(i,origText){
      return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; 
    });
  });

});
</script>
</head>
<body>
<p id="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
</body>
</html>

attr() 方法也用于设置/改变属性值。

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

attr()回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("button").click(function(){
    $("#w3s").attr("href", function(i,origValue){
      return origValue + "/jquery"; 
    });
  });

<p><a href="http://www.w3school.com.cn" id="w3s">w3school.com.cn</a></p>
<button>改变 href 值</button>

.val() 方法主要用于获取表单元素的值。至于 <select multiple="multiple"> 元素, .val()方法返回一个包含每个选中的 option 的数组。

对于下拉框（select）和复选框（checkbox）, 你也可以使用:selected 和 :checked选择器来获取值，举个例子：

$('select.foo option:selected').val();    // 从下拉框中获取值
$('select.foo').val();                    // 从一个或更多的下拉框中获取值
$('input:checkbox:checked').val();        // 从选中的复选框中获取值
$('input:radio[name=bar]:checked').val(); // 从单选选框中获取值

二、添加

添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
appendTo()-将匹配的元素插入到目标元素的最后面（里面的后面）
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

The .append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同。对于.append(), 选择表达式在函数的前面，参数是将要插入的内容。对于.appendTo()刚好相反，内容在方法前面，它将被放在参数里元素的末尾

三、删除和替换

删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）， remove() 方法也可接受一个参数，允许您对被删元素进行过滤
removeAttr()- 用提供的内容替换所有匹配的元素
empty() - 从被选元素中删除子元素
removeProp()-方法用来删除由.prop()方法设置的属性集
replaceWith()-用提供的内容替换所有匹配的元素
wrap()-在每个匹配的元素外层包上一个html元素
wrapAll()-在所有匹配元素外面包一层HTML结构
wrapInner()-在匹配元素里的内容外包一层结构

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});
</script>
</head>
<body>
<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>删除 class="italic" 的所有 p 元素</button>
</body>
</html>

变相节点的替换

$("#d1").before("<div>hello</div>").remove().css("color","#f00");

四、操作 CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回被选元素的一个或多个样式属性
hasClass()-检查匹配的元素是否含有某个特定的类
toggleClass()-切换添加、删除一个或多个类

下面列出的这些方法设置或返回元素的 CSS 相关属性。

CSS 属性	描述
css()	设置或返回匹配元素的样式属性。
height()	设置或返回匹配元素的高度。
offset()	返回第一个匹配元素相对于文档的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一个匹配元素相对于父元素的位置。
scrollLeft()	设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()	设置或返回匹配元素相对滚动条顶部的偏移。
width()	设置或返回匹配元素的宽度。

jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法：

width()：设置或返回元素的宽度（不包括内边距、边框或外边距）
height()：设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()：返回元素的宽度（包括内边距）
innerHeight()：返回元素的高度（包括内边距）
outerWidth()：返回元素的宽度（包括内边距和边框）
outerHeight()：返回元素的高度（包括内边距和边框）

一、获得和设置内容

三、删除和替换

四、操作 CSS

jQuery 尺寸 方法

更多的 width() 和 height()

jQuery 尺寸方法