溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dom</title>
<script type="text/javascript" src="/TestJquery/jq/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/TestJquery/js/dom.js"></script>
</head>
<body>
<p title="選擇你最喜歡的水果">選擇你最喜歡的水果？</p>
<p title="選擇你最喜歡的水果">選擇你最喜歡的水果？</p>
<ul>
<li title="蘋果">蘋果</li>
<li title="橘子">橘子</li>
<li title="菠蘿">菠蘿</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
//獲取標簽的文本內容
//var $li = $('ul li:eq(1)');//獲取<ul>里的第二個<li>節點
//var li_txt = $li.text();//獲取第二個<li>元素節點的文本內容
//alert(li_txt);
//獲取標簽的屬性
//var $p = $('p');//獲得<p>節點
//var p = $p.attr('title');//獲得<p>元素節點屬性title
//alert(p);
//創建標簽
var $li_1 = $('<li title="香蕉">香蕉</li>');
var $li_2 = $('<li title="葡萄">葡萄</li>');
//$('ul').append($li_1).append($li_2);
/*
* append()向每個匹配的元素內部追加內容
* appendTo()將所有匹配的元素追加到制定的元素中。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是講B追加到A中，而是將A追加到B中。
* prepend()向每個匹配的原色內部前置內容（填到匹配內容的前面，這個事最前面和before有區別）
* prependTo()將所有匹配的元素前置到制定的元素中。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是講B追加到A中，而是將A追加到B中。
* after()在每個匹配的元素之后插入內容
* insertAfter()將所有匹配的元素插入到指定元素的后面。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是講B追加到A中，而是將A追加到B中。
* before()在每個匹配的元素之前插入內容(不一定是最前面，沒有制定的效果)
* insertBefore()將書喲有匹配的元素插入到指定元素的前面。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是講B追加到A中，而是將A追加到B中。
* */
var $parent = $('ul');//獲得<ul>節點，即<li>的父節點
var $two_li = $('ul li:eq(1)');//
$parent.append($li_1);
$parent.prepend($li_2);
var $li_3 = $('<li title="其他">其他</li>');
$li_3.insertAfter($two_li);
//刪除節點
//第一種
$('ul li:eq(1)').remove();//獲取第二個<li>
$('ul li').remove("li[title='香蕉']");//remove()方法可以通過傳遞參數來實現刪除效果
//第二種
$('ul li:eq(2)').empty();//清空而不是刪除
//復制節點
$('ul li').click(function(){
$(this).clone().appendTo('ul');//復制當前單擊的節點，并將它追加到<ul>元素中
//復制節點后，被復制的新元素并不具備任何行為。如果需要新元素也具有復制功能(本例中是單擊事件)，可以使用如下jquery
$(this).clone(true).appendTo("body");//注意參數是true，它的含義就是復制元素的同時復制元素中所綁定的時間
});
//替換節點
//第一種
//$('p').replaceWith('<strong>你最不喜歡的水果是什么呢？</strong>');//replaceWith()方法的作用是將所有匹配的元素都替換成指定的HTML或者DOM元素
//第二種
$('<strong>顛倒順序</strong>').replaceAll('p');//與replaceWith()的作用相同，只不過是顛倒了替換順序
//包裹節點
//$('strong').wrap("<b></b>");//用<b>標簽把<strong>元素包裹起來 效果：<b><strong></strong</b> <b><strong></strong</b>
//$('strong').wrapAll("<b></b>");//改方法是把所有匹配的元素都用一個元素來包裹，wrap()方法是將所有的元素進行單獨的包裹。<b><strong></strong <strong></strong </b>
$('strong').wrapInner('<b></b>');//改方法是將每個匹配的元素的子內容(包括文本節點)用其他結構化的標記包裹起來。 效果 <strong><b>把里面的內容包裹起來了</b></strong>
});
</script>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
