JQuery（六）

太过爱你忘了你带给我的痛 2022-05-25 14:23 120阅读 0赞

**(学习留存，如有侵权，请告知，立刻删除！)**

**jQuery 文档操作方法：**

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>addClass()</td> 
   <td>向匹配的元素添加指定的类名。</td> 
  </tr> 
  <tr> 
   <td>after()</td> 
   <td>在匹配的元素之后插入内容。</td> 
  </tr> 
  <tr> 
   <td>append()</td> 
   <td>向匹配元素集合中的每个元素结尾插入由参数指定的内容。</td> 
  </tr> 
  <tr> 
   <td>appendTo()</td> 
   <td>向目标结尾插入匹配元素集合中的每个元素。</td> 
  </tr> 
  <tr> 
   <td>attr()</td> 
   <td>设置或返回匹配元素的属性和值。</td> 
  </tr> 
  <tr> 
   <td>before()</td> 
   <td>在每个匹配的元素之前插入内容。</td> 
  </tr> 
  <tr> 
   <td>clone()</td> 
   <td>创建匹配元素集合的副本。</td> 
  </tr> 
  <tr> 
   <td>detach()</td> 
   <td>从 DOM 中移除匹配元素集合。</td> 
  </tr> 
  <tr> 
   <td>empty()</td> 
   <td>删除匹配的元素集合中所有的子节点。</td> 
  </tr> 
  <tr> 
   <td>hasClass()</td> 
   <td>检查匹配的元素是否拥有指定的类。</td> 
  </tr> 
  <tr> 
   <td>html()</td> 
   <td>设置或返回匹配的元素集合中的 HTML 内容。</td> 
  </tr> 
  <tr> 
   <td>insertAfter()</td> 
   <td>把匹配的元素插入到另一个指定的元素集合的后面。</td> 
  </tr> 
  <tr> 
   <td>insertBefore()</td> 
   <td>把匹配的元素插入到另一个指定的元素集合的前面。</td> 
  </tr> 
  <tr> 
   <td>prepend()</td> 
   <td>向匹配元素集合中的每个元素开头插入由参数指定的内容。</td> 
  </tr> 
  <tr> 
   <td>prependTo()</td> 
   <td>向目标开头插入匹配元素集合中的每个元素。</td> 
  </tr> 
  <tr> 
   <td>remove()</td> 
   <td>移除所有匹配的元素。</td> 
  </tr> 
  <tr> 
   <td>removeAttr()</td> 
   <td>从所有匹配的元素中移除指定的属性。</td> 
  </tr> 
  <tr> 
   <td>removeClass()</td> 
   <td>从所有匹配的元素中删除全部或者指定的类。</td> 
  </tr> 
  <tr> 
   <td>replaceAll()</td> 
   <td>用匹配的元素替换所有匹配到的元素。</td> 
  </tr> 
  <tr> 
   <td>replaceWith()</td> 
   <td>用新内容替换匹配的元素。</td> 
  </tr> 
  <tr> 
   <td>text()</td> 
   <td>设置或返回匹配元素的内容。</td> 
  </tr> 
  <tr> 
   <td>toggleClass()</td> 
   <td>从匹配的元素中添加或删除一个类。</td> 
  </tr> 
  <tr> 
   <td>unwrap()</td> 
   <td>移除并替换指定元素的父元素。</td> 
  </tr> 
  <tr> 
   <td>val()</td> 
   <td>设置或返回匹配元素的值。</td> 
  </tr> 
  <tr> 
   <td>wrap()</td> 
   <td>把匹配的元素用指定的内容或元素包裹起来。</td> 
  </tr> 
  <tr> 
   <td>wrapAll()</td> 
   <td>把所有匹配的元素用指定的内容或元素包裹起来。</td> 
  </tr> 
  <tr> 
   <td>wrapinner()</td> 
   <td>将每一个匹配的元素的子内容用指定的内容或元素包裹起来。</td> 
  </tr> 
 </tbody> 
</table>

（1）addClass() 方法：  
addClass() 方法向被选元素添加一个或多个类。  
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。  
提示：如需添加多个类，请使用空格分隔类名。  
  
语法：$(selector).addClass(class)  
class     必需。规定一个或多个 class 名称。  
  
使用函数向被选元素添加类。  
语法:$(selector).addClass(function(index,oldclass))  
function(index,oldclass)：必需。规定返回一个或多个待添加类名的函数。  
    index - 可选。选择器的 index 位置。  
    class - 可选。选择器的旧的类名。  
  
向元素添加两个类  
如何向被选元素添加两个 class。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p:first").addClass("intro note");  
  \});  
\});  
</script>  
<style type="text/css">  
.intro\{  
font-size:120%;  
color:blue;  
\}  
.note\{  
background-color:yellow;  
\}  
</style>  
<body>  
<h1>This is a heading</h1>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>向第一个 p 元素添加两个类</button>  
</body>  
  
改变元素的类  
如任何使用 addClass() 和 removeClass() 来移除 class，并添加新的 class。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p:first").removeClass("intro").addClass('main');  
  \});  
\});  
</script>  
<style type="text/css">  
.intro\{  
font-size:120%;  
color:red;  
\}  
.main\{  
font-size:90%;  
color:blue;  
\}  
</style>  
<body>  
<h1>This is a heading</h1>  
<p class="intro">This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>改变第一个段落的类</button>  
</body>  
  
（2）after() 方法：  
after() 方法在被选元素后插入指定的内容。  
  
语法：$(selector).after(content)  
content：必需。规定要插入的内容（可包含 HTML 标签）。  
  
使用函数在被选元素之后插入指定的内容。  
语法：$(selector).after(function(index))  
function(index)：必需。规定返回待插入内容的函数。  
    index - 可选。接收选择器的 index 位置。  
      
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").after(function(n)\{  
      return "<p>The p element above has index " + n + "</p>";  
    \});  
  \});  
\});  
</script>  
</head>  
  
<body>  
<h1>This is a heading</h1>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>在每个 p 元素后插入内容</button>  
</body>  
  
（3）append() 方法：  
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。  
提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器。  
  
语法：$(selector).append(content)  
content：必需。规定要插入的内容（可包含 HTML 标签）。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").append(" <b>Hello world!</b>");  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>在每个 p 元素的结尾添加内容</button>  
</body>  
  
使用函数在指定元素的结尾插入内容。  
语法：$(selector).append(function(index,html))  
function(index,html)：必需。规定返回待插入内容的函数。  
    index - 可选。接收选择器的 index 位置。  
    html - 可选。接收选择器的当前 HTML。  
      
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").append(function(n)\{  
      return "<b>This p element has index " + n + "</b>";  
    \});  
  \});  
\});  
</script>  
<body>  
<h1>This is a heading</h1>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>在每个 p 元素的结尾添加内容</button>  
</body>  
  
（4）appendTo() 方法：  
appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。  
提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。  
  
语法：$(content).appendTo(selector)  
content：必需。规定要插入的内容（可包含 HTML 标签）。  
selector：必需。规定把内容追加到哪个元素上。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("<b> Hello World!</b>").appendTo("p");  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>在每个 p 元素的结尾添加内容</button>  
</body>  
  
（5）attr() 方法：  
attr() 方法设置或返回被选元素的属性值。根据该方法不同的参数，其工作方式也有所差异。  
  
返回被选元素的属性值。  
语法：$(selector).attr(attribute)  
attribute：规定要获取其值的属性。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    alert("Image width " + $("img").attr("width"));  
  \});  
\});  
</script>  
<body>  
<img src="/i/eg\_smile.gif" width="128" height="128" />  
<br />  
<button>返回图像的宽度</button>  
</body>  
  
设置被选元素的属性和值。  
语法：$(selector).attr(attribute,value)  
attribute：规定属性的名称。  
value：规定属性的值。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("img").attr("width","180");  
  \});  
\});  
</script>  
<body>  
<img src="/i/eg\_smile.gif" />  
<br />  
<button>设置图像的 width 属性</button>  
</body>  
  
使用函数来设置属性/值，设置被选元素的属性和值。  
语法：$(selector).attr(attribute,function(index,oldvalue))  
attribute：规定属性的名称。  
function(index,oldvalue)：规定返回属性值的函数。该函数可接收并使用选择器的 index 值和当前属性值。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("img").attr("width",function(n,v)\{  
      return v-50;  
    \});  
  \});  
\});  
</script>  
<body>  
<img src="/i/eg\_smile.gif" width="128" height="128" />  
<br />  
<button>减少图像的宽度 50 像素</button>  
</body>  
  
设置多个属性/值对，为被选元素设置一个以上的属性和值。  
语法：$(selector).attr(\{attribute:value, attribute:value ...\})  
（attribute:value）：规定一个或多个属性/值对。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("img").attr(\{width:"50",height:"80"\});  
  \});  
\});  
</script>  
<body>  
<img src="/i/eg\_smile.gif" />  
<br />  
<button>设置图像的 width 和 height 属性</button>  
</body>  
  
（6）before() 方法：  
before() 方法在被选元素前插入指定的内容。  
语法：$(selector).before(content)  
content：必需。规定要插入的内容（可包含 HTML 标签）。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").before("<p>Hello world!</p>");  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button class="btn1">在每个段落前面插入新的段落</button>  
</body>  
  
使用函数来插入内容  
使用函数在指定的元素前面插入内容。  
语法：$(selector).before(function(index))  
function(index)：必需。规定返回待插入内容的函数。  
    index - 可选。接收选择器的 index 位置。  
      
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").before(function(n)\{  
      return "<p>The p element below has index " + n + "</p>";  
    \});  
  \});  
\});  
</script>  
<body>  
<h1>This is a heading</h1>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">在每个段落前面插入新的段落</button>  
</body>  
  
（7）clone() 方法：  
clone() 方法生成被选元素的副本，包含子节点、文本和属性。  
语法：$(selector).clone(includeEvents)  
includeEvents：可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("body").append($("p").clone());  
  \});  
\});  
</script>  
</head>  
<body>  
<p>This is a paragraph.</p>  
<button>复制每个 p 元素，然后追加到 body 元素</button>  
</body>  
  
  
复制一个元素，包括事件处理器  
使用 clone() 方法来复制元素，包括其事件处理器。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("body").append($("p:first").clone(true));  
  \});  
  $("p").click(function()\{  
    $(this).animate(\{fontSize:"+=1px"\});  
  \});  
\});  
</script>  
<body>  
<p>点击本段落可以增加文本的大小。事件处理器同样被复制到新的段落。</p>  
<button>复制每个 p 元素，然后追加到 body 元素</button>  
</body>  
  
（8）detach() 方法：  
detach() 方法移除被选元素，包括所有文本和子节点。  
这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。  
detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。  
语法：$(selector).detach()  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").detach();  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button>删除 p 元素</button>  
</body>  
  
移动元素  
使用 detach() 方法来移动元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("body").append($("p").detach());  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button>移动 p 元素</button>  
</body>  
  
删除并恢复一个元素  
使用 detach() 方法来删除并恢复一个元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  var x;  
  $("\#btn1").click(function()\{  
    x=$("p").detach();  
  \});  
  $("\#btn2").click(function()\{  
    $("body").prepend(x);  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<button id="btn1">删除 p 元素</button>  
<button id="btn2">恢复 p 元素</button>  
</body>  
  
移动元素并保留其 click 事件  
使用 detach() 方法来移动元素，并保留元素的 jQuery 数据。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("body").append($("p").detach());  
  \});  
 $("p").click(function()\{  
    $(this).animate(\{fontSize:"+=1px"\})  
  \});  
\});  
</script>  
<body>  
<p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>  
<button>移动 p 元素</button>  
</body>  
  
（9）empty() 方法：  
empty() 方法从被选元素移除所有内容，包括所有文本和子节点。  
语法：$(selector).empty()  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").detach();  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button>删除 p 元素</button>  
</body>  
  
  
移除元素的内容  
使用 empty() 方法从元素移除内容。  
<script type="text/javascript">  
$(document).ready(function()\{  
$(".btn1").click(function()\{  
  $("p").empty();  
  \});  
\});  
</script>  
<body>  
<p style="width:200px;height:200px;background-color:yellow">This is a paragraph. <b>Bold</b> and <i>italic</i> text.</p>  
<button class="btn1">删除 p 元素的内容</button>  
</body>  
  
（10）hasClass() 方法：  
hasClass() 方法检查被选元素是否包含指定的 class。  
语法：$(selector).hasClass(class)  
class：必需。规定需要在指定元素中查找的类。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    alert($("p:first").hasClass("intro"));  
  \});  
\});  
</script>  
<style type="text/css">  
.intro\{  
font-size:120%;  
color:red;  
\}  
</style>  
<body>  
<h1 id="h1">This is a heading</h1>  
<p class="intro">This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>检查第一个段落是否拥有类 "intro"</button>  
</body>  
  
（11）html() 方法：  
html() 方法返回或设置被选元素的内容 (inner HTML)。  
如果该方法未设置参数，则返回被选元素的当前内容。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").html("Hello <b>world!</b>");  
  \});  
\});  
</script>  
</head>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">改变 p 元素的内容</button>  
</body>  
  
返回元素内容  
当使用该方法返回一个值时，它会返回第一个匹配元素的内容。  
语法：$(selector).html()  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    alert($("p").html());  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button class="btn1">改变 p 元素的内容</button>  
</body>  
  
设置元素内容  
当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。  
语法：$(selector).html(content)  
content：可选。规定被选元素的新内容。该参数可包含 HTML 标签  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").html("Hello <b>world!</b>");  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">改变 p 元素的内容</button>  
</body>  
  
使用函数来设置元素内容  
使用函数来设置所有匹配元素的内容。  
语法：$(selector).html(function(index,oldcontent))  
function(index,oldcontent)：规定一个返回被选元素的新内容的函数。  
    index - 可选。接收选择器的 index 位置。  
    oldcontent - 可选。接收选择器的当前内容  
      
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").html(function(n)\{  
    return "这个 p 元素的 index 是：" + n;  
    \});  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<button>改变 p 元素的内容</button>  
</body>  
  
（12）insertAfter() 方法：  
insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。  
注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。  
语法：$(content).insertAfter(selector)  
content：必需。规定要插入的内容。可能的值：  
    选择器表达式  
    HTML 标记  
selector：必需。规定在何处插入被选元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("<span>你好！</span>").insertAfter("p");  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<button>在每个 p 元素之后插入 span 元素</button>  
</body>  
  
  
插入已有的元素  
如何使用 insertAfter() 方法在每个被选元素之后插入已存在的元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("h1").insertAfter("p");  
  \});  
\});  
</script>  
<body>  
<h1>这是一个标题</h1>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<button>在每个 p 元素之后插入 h1 元素</button>  
</body>  
  
（13）insertBefore() 方法：  
insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。  
注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。  
  
语法：$(content).insertBefore(selector)  
  
content：必需。规定要插入的内容。可能的值：  
    选择器表达式  
    HTML 标记  
  
selector：必需。规定在何处插入被选元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("<span>你好！</span>").insertBefore("p");  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<button>在每个 p 元素之前插入 span 元素</button>  
</body>  
  
  
插入已有的元素  
如何使用 insertAfter() 方法在每个被选元素之前插入已存在的元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("h1").insertBefore("p");  
  \});  
\});  
</script>  
<body>  
<h1>这是一个标题</h1>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<button>在每个 p 元素之前插入 h1 元素</button>  
</body>  
  
（14）prepend() 方法：  
prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。  
提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。  
语法：$(selector).prepend(content)  
content：必需。规定要插入的内容（可包含 HTML 标签）。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").prepend("<b>Hello world!</b> ");  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>在每个 p 元素的开头插入内容</button>  
</body>  
  
使用函数来附加内容  
  
使用函数在被选元素的开头插入指定的内容。  
语法：$(selector).prepend(function(index,html))  
function(index,html)：必需。规定返回待插入内容的函数。  
    index - 可选。接受选择器的 index 位置。  
    html - 可选。接受选择器的当前 HTML。  
      
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").prepend(function(n)\{  
      return "<b>这个 p 元素的 index 是：" + n + "</b> ";  
    \});  
  \});  
\});  
</script>  
<body>  
<h1>这是一个标题</h1>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<button>在每个 p 元素的开头插入内容</button>  
</body>  
  
（15）prependTo() 方法：  
prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容。  
提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。  
语法：$(content).prependTo(selector)  
content：必需。规定要插入的内容（可包含 HTML 标签）。  
selector：必需。规定在何处插入内容。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("<b>Hello World!</b>").prependTo("p");  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">在每个 p 元素的开头插入文本</button>  
</body>  
  
（16）remove() 方法：  
remove() 方法移除被选元素，包括所有文本和子节点。  
该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。  
但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。  
其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。  
  
语法：$(selector).remove()  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").remove();  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<button>删除所有 p 元素</button>  
</body>  
  
移动元素  
使用 remove() 方法来移动元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("body").append($("p").remove());  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button>移动 p 元素</button>  
</body>  
  
（17）removeAttr() 方法：  
removeAttr() 方法从被选元素中移除属性。  
语法：$(selector).removeAttr(attribute)  
attribute：必需。规定从指定元素中移除的属性。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").removeAttr("style");  
  \});  
\});  
</script>  
<body>  
<h1>这是一个标题</h1>  
<p style="font-size:120%;color:red">这是一个段落。</p>  
<p>这是另一个段落。</p>  
<button>删除所有 p 元素的 style 属性</button>  
</body>  
  
（18）removeClass() 方法：  
removeClass() 方法从被选元素移除一个或多个类。  
注释：如果没有规定参数，则该方法将从被选元素中删除所有类。  
语法：$(selector).removeClass(class)  
  
class：可选。规定要移除的 class 的名称。  
如需移除若干类，请使用空格来分隔类名。  
如果不设置该参数，则会移除所有类。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").removeClass("intro");  
  \});  
\});  
</script>  
<style type="text/css">  
.intro\{  
font-size:120%;  
color:red;  
\}  
</style>  
<body>  
<h1 id="h1">This is a heading</h1>  
<p class="intro">This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>从第一个段落中删除类</button>  
</body>  
  
使用函数来移除类  
使用函数来删除被选元素中的类。  
语法：$(selector).removeClass(function(index,oldclass))  
function(index,oldclass)：必需。通过运行函数来移除指定的类。  
    index - 可选。接受选择器的 index 位置。  
    html - 可选。接受选择器的旧的类值。  
      
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
      $('ul li').removeClass(function() \{  
      return 'listitem\_' + $(this).index();  
    \});  
  \});  
\});  
</script>  
<style type="text/css">  
.listitem\_1, .listitem\_3\{  
color:red;  
\}  
.listitem\_0, .listitem\_2\{  
color:blue;  
\}  
</style>  
<body>  
<h1 id="h1">This is a heading</h1>  
<ul>  
<li class="listitem\_0">Apple</li>  
<li class="listitem\_1">IBM</li>  
<li class="listitem\_2">Microsoft</li>  
<li class="listitem\_3">Google</li>  
</ul>  
<button>删除列表项中的类</button>  
</body>  
  
  
改变元素的类  
如何使用 addClass() 和 removeClass() 来移除一个类，并添加一个新的类。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p:first").removeClass("intro").addClass('main');  
  \});  
\});  
</script>  
<style type="text/css">  
.intro\{  
font-size:120%;  
color:red;  
\}  
.main\{  
font-size:90%;  
color:blue;  
\}  
</style>  
<body>  
<h1>This is a heading</h1>  
<p class="intro">This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>改变第一个段落的类</button>  
</body>  
  
（19）replaceAll() 方法：  
replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。  
提示：replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。  
  
语法：$(content).replaceAll(selector)  
content：必需。规定替换被选元素的内容。  
可能的值:  
    HTML 代码 - 比如 ("<div></div>")  
    新元素 - 比如 (document.createElement("div"))  
    已存在的元素 - 比如 ($(".div1"))  
已存在的元素不会被移动，只会被复制，并包裹被选元素。  
selector：必需。规定要替换的元素。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").replaceWith("<b>Hello world!</b>");  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">用粗体文本替换所有段落</button>  
</body>  
  
  
使用新元素来替换元素  
使用 document.createElement() 来创建一个新的 DOM 元素，然后用它替换被选元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $(document.createElement("div")).replaceAll("p");  
  \});  
\});  
</script>  
<style>  
div\{height:20px;background-color:yellow;margin:10px;\}  
</style>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">用新的 div 替换所有段落</button>  
</body>  
  
（20）replaceWith() 方法：  
replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。  
提示：replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。  
  
语法：$(selector).replaceWith(content)  
content：必需。规定替换被选元素的内容。  
可能的值:  
    HTML 代码 - 比如 ("<div></div>")  
    新元素 - 比如 (document.createElement("div"))  
    已存在的元素 - 比如 ($(".div1"))  
已存在的元素不会被移动，只会被复制，并包裹被选元素。  
  
selector：必需。规定要替换的元素。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").replaceWith("<b>Hello world!</b>");  
  \});  
\});  
</script>  
 <body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">用粗体文本替换所有段落</button>  
</body>  
  
使用函数来替换元素  
使用函数把被选元素替换为新内容。  
语法:$(selector).replaceWith(function())  
function():必需。返回待替换被选元素的新内容的函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").replaceWith(function()\{  
    return "<p>Hello World!</p>";  
    \});  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<button class="btn1">用新的 p 元素替换所有段落</button>  
</body>  
  
  
使用新元素来替换元素  
使用 document.createElement() 来创建一个新的 DOM 元素，然后用它替换被选元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").replaceWith(document.createElement("div"));  
  \});  
\});  
</script>  
<style>  
div\{height:20px;background-color:yellow\}  
</style>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">用新的 div 替换所有段落</button>  
</body>  
  
（21）text() 方法：  
text() 方法方法设置或返回被选元素的文本内容。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").text("Hello world!");  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">改变所有 p 元素的文本内容</button>  
</body>  
  
返回文本内容  
当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。  
语法：$(selector).text()  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    alert($("p").text());  
  \});  
\});  
</script>  
</head>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">获得 p 元素的文本内容</button>  
</body>  
  
设置文本内容  
当该方法用于设置值时，它会覆盖被选元素的所有内容。  
语法：$(selector).text(content)  
content：规定被选元素的新文本内容。注释：特殊字符会被编码。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").text("Hello world!");  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">改变所有 p 元素的文本内容</button>  
</body>  
  
使用函数设置文本内容  
使用函数设置所有被选元素的文本内容。  
语法：$(selector).text(function(index,oldcontent))  
function(index,oldcontent)       
必需。规定返回被选元素的新文本内容的函数。  
    index - 可选。接受选择器的 index 位置。  
    html - 可选。接受选择器的当前内容。  
      
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").text(function(n)\{  
    return "这个 p 元素的 index 是：" + n;  
    \});  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">改变所有 p 元素的文本内容</button>  
</body>  
  
（22）toggleClass() 方法  
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。  
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。  
不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。  
  
语法：$(selector).toggleClass(class,switch)  
class：必需。规定添加或移除 class 的指定元素。  
如需规定若干 class，请使用空格来分隔类名。  
switch：可选。布尔值。规定是否添加或移除 class。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").toggleClass("main");  
  \});  
\});  
</script>  
<style type="text/css">  
.main\{  
font-size:120%;  
color:red;  
\}  
</style>  
<body>  
<h1 id="h1">This is a heading</h1>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">切换段落的 "main" 类</button>  
</body>  
  
使用函数来切换类  
$(selector).toggleClass(function(index,class),switch)  
function(index,class):必需。规定返回需要添加或删除的一个或多个类名的函数。  
    index - 可选。接受选择器的 index 位置。  
    class - 可选。接受选择器的当前的类。  
switch     可选。布尔值。规定是否添加(true)或移除(false)类。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $('ul li').toggleClass(function()\{  
      return 'listitem\_' + $(this).index();  
    \});  
  \});  
\});  
</script>  
<style type="text/css">  
.listitem\_1, .listitem\_3\{  
color:red;  
\}  
.listitem\_0, .listitem\_2\{  
color:blue;  
\}  
</style>  
<body>  
<h1 id="h1">This is a heading</h1>  
<ul>  
<li>Apple</li>  
<li>IBM</li>  
<li>Microsoft</li>  
<li>Google</li>  
</ul>  
<button class="btn1">添加或移除列表项的类</button>  
</body>  
  
（23）unwrap() 方法：  
unwrap() 方法删除被选元素的父元素。  
语法：$(selector).unwrap()  
<script>  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").unwrap();  
  \});  
\});  
</script>  
<style type="text/css">  
div\{background-color:yellow;\}  
article\{background-color:pink;\}  
</style>  
<body>  
<div>  
<p>这是 div 元素中的段落。</p>  
</div>  
<article>  
<p>这是 article 元素中的段落。</p>  
</article>  
<button>删除每个 p 元素的父元素</button>  
</body>  
  
  
包裹或解开元素  
对包裹和解开元素的任务进行切换。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").toggle(function()\{  
    $("p").wrap("<div></div>");  
    \}, function()\{  
    $("p").unwrap();  
  \});  
\});  
</script>  
<style type="text/css">  
div\{background-color:yellow;padding:10px;\}  
</style>  
<body>  
<p>This is a paragraph.</p>  
<button>包裹或解开 p 元素</button>  
</body>  
  
（24）val() 方法：  
val() 方法返回或设置被选元素的值。  
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。  
如果该方法未设置参数，则返回被选元素的当前值。  
  
语法：$(selector).val(value)  
value：可选。规定被选元素的新内容。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $(":text").val("Hello Kitty");  
  \});  
\});  
</script>  
<body>  
<p>Name: <input type="text" name="user" value="Hello World" /></p>  
<button>改变文本域的值</button>  
</body>  
  
返回 Value 属性  
返回第一个匹配元素的 value 属性的值。  
语法：$(selector).val()  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    alert($("input:text").val());  
  \});  
\});  
</script>  
<body>  
Firstname: <input type="text" name="fname" value="Bill" /><br />  
Lastname: <input type="text" name="lname" value="Gates" /><br /><br />  
<button>获得第一个文本域的值</button>  
</body>  
  
设置 Value 属性的值  
语法：$(selector).val(value)  
value：设置 Value 属性的值。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("input:text").val("Bill Gates");  
  \});  
\});  
</script>  
<body>  
<p>Name: <input type="text" name="user" /></p>  
<button>设置文本域的值</button>  
</body>  
  
使用函数设置 Value 属性的值  
语法：$(selector).val(function(index,oldvalue))  
function(index,oldvalue)：规定返回要设置的值的函数。  
    index - 可选。接受选择器的 index 位置。  
    oldvalue - 可选。接受选择器的当前 Value 属性。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("input:text").val(function(n,c)\{  
      return c + " Gates";  
    \});  
  \});  
\});  
</script>  
<body>  
<p>Name: <input type="text" name="user" value="Bill" /></p>  
<button>设置文本域的值</button>  
</body>  
  
（25）wrap() 方法：  
wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。  
语法：$(selector).wrap(wrapper)  
wrapper：必需。规定包裹被选元素的内容。  
可能的值:  
    HTML 代码 - 比如 ("<div></div>")  
    新元素 - 比如 (document.createElement("div"))  
    已存在的元素 - 比如 ($(".div1"))  
已存在的元素不会被移动，只会被复制，并包裹被选元素。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").wrap("<div></div>");  
  \});  
\});  
</script>  
<style type="text/css">  
div\{background-color:yellow;\}  
</style>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">用 div 包裹每个段落</button>  
</body>  
  
使用函数来包裹元素  
使用函数来规定在每个被选元素周围包裹的内容。  
语法：$(selector).wrap(function())  
function()：必需。规定返回包裹元素的函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").wrap(function()\{  
      return "<div></div>"  
    \});  
  \});  
\});  
</script>  
<style type="text/css">  
div\{background-color:yellow;padding:10px;\}  
</style>  
<body>  
<p>这是一个段落。</p>  
<button>用 div 元素来包围 p 元素</button>  
</body>  
  
使用新元素来包裹  
创建一个新的 DOM 元素来包裹每个被选元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").wrap(document.createElement("div"));  
  \});  
\});  
</script>  
<style type="text/css">  
div\{background-color:yellow;\}  
</style>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">创建新的 div 来包裹每个段落</button>  
</body>  
  
包裹或解开元素  
对包裹和解开元素的任务进行切换。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").toggle(function()\{  
    $("p").wrap("<div></div>");  
    \}, function()\{  
    $("p").unwrap();  
  \});  
\});  
</script>  
<style type="text/css">  
div\{background-color:yellow;padding:10px;\}  
</style>  
<body>  
<p>This is a paragraph.</p>  
<button>包裹或解开 p 元素</button>  
</body>  
  
（26）wrapAll() 方法：  
wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。  
语法：$(selector).wrapAll(wrapper)  
wrapper：必需。规定包裹被选元素的内容。  
可能的值:  
    HTML 代码 - 比如 ("<div></div>")  
    新的 DOM 元素 - 比如 (document.createElement("div"))  
    已存在的元素 - 比如 ($(".div1"))  
已存在的元素不会被移动，只会被复制，并包裹被选元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").wrapAll("<div></div>");  
  \});  
\});  
</script>  
<style type="text/css">  
div\{background-color:yellow;\}  
</style>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">用一个 div 包裹所有段落</button>  
</body>  
  
  
使用新元素来包裹  
创建一个新的 DOM 元素来包裹每个被选元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").wrapAll(document.createElement("div"));  
  \});  
\});  
</script>  
<style type="text/css">  
div\{background-color:yellow;\}  
</style>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">创建新的 div 来包裹每个段落</button>  
</body>  
  
（27）wrapInner() 方法：  
wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。  
语法：$(selector).wrapInner(wrapper)  
wrapper：必需。规定包围在被选元素的内容周围的内容。  
可能的值:  
    HTML 代码 - 比如 ("<div></div>")  
    新的 DOM 元素 - 比如 (document.createElement("div"))  
    已存在的元素 - 比如 ($(".div1"))  
已存在的元素不会被移动，只会被复制，并包裹被选元素。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").wrapInner("<b></b>");  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">加粗段落中的文本</button>  
</body>  
  
使用函数包裹内容  
使用函数来规定包围在每个被选元素周围的内容。  
语法：$(selector).wrapInner(function())  
function()：必需。规定返回包围元素的函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").wrapInner(function()\{  
      return "<b></b>"  
    \});  
  \});  
\});  
</script>  
<style type="text/css">  
div\{background-color:yellow;padding:10px;\}  
</style>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<button>用 b 元素包围每个 p 元素</button>  
</body>  
  
使用新元素来包裹  
创建一个新的 DOM 元素来包裹每个被选元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").wrapInner(document.createElement("b"));  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button class="btn1">加粗段落中的所有内容</button>  
</body>