溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
text()、html()是相對粗獷的方法，直接讀取或設置元素的內容；
另外一些較為細致的操作是對某一個jQuery對象的增加、刪除。
后面講到的替換節點、包裹節點用到的比較少。
1、text(), html()
（1）使用html()方法讀取或者設置元素的innerHTML
（2）使用text()方法讀取或設置元素的innerText
2、動態創建和添加、刪除DOM節點
2.1、創建DOM節點
使用$(html字符串)來創建DOM節點，并且返回一個jQuery對象，然后調用append等方法將新創建的節點添加到DOM中。$()創建的就是一個jQuery對象，可以完全進行操作
創建radio，使用$('<input name=""/>');，而不要在創建好后通過attr('name','gender')//通過attr()設置name，在IE6下面有問題
2.2、添加和刪除DOM節點
append 方法用來在元素的末尾追加元素（最后一個子節點）
prepend，在元素的開始添加元素（第一個子節點）
after 在元素之后添加元素
before 在元素之前添加元素
其他追加方法（將自己追加到某元素）
子元素.appendTo(父元素);
主動追加到最后一個
子元素.prependTo(父元素)
主動追加到第一個
A.insertBefore(B)
將A加到B前面，等同于B.before(A)
X.insertAfter(Y)
將X追加到Y的后面，等同于Y.after(X)
刪除節點
empty() 清空某元素下的所有子節點
內部實現：while(ele.firstChild){ele.removeChild(ele.firstChild);}
remove(selector) 刪除當前元素，返回值為被刪除的元素。還可以繼續使用被刪除的節點。比如重新添加到其他節點下。
2.3、案例
示例：創建一個層
<!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>jQuery測試</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//創建一個層，并把該層添加到body中
var divObj = $('<div id="dv"></div>').appendTo($('body'));
//divObj.css('width','300px').css('height','50px').css('border','solid 1px red').css('margin','5px');
divObj.css({"width":"300px","height":"50px","border":"solid 1px red","margin":"5px"});
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="創建一個層"/>
</body>
</html>效果圖
示例：從json中取數據,動態創建表格
<!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>jQuery測試</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
var data = {"百度":"http://www.baidu.com","新浪":"http://www.sina.com","谷歌":"http://www.google.com"};
$(function(){
$('#btn').click(function () {
//創建table
var tableObj = $('<table border="1"></table>');
for(var key in data)
{
var value=data[key];
//創建tr
var trObj = $('<tr><td>'+key+'</td><td><a href="'+value+'">'+key+'</a></td></tr>');
//將tr添加到table內
tableObj.append(trObj);
}
//將table添加到body當中
$('body').append(tableObj);
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="按鈕"/>
</body>
</html>效果圖
示例：無刷新評論
<!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>jQuery測試</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
var uname = $('#txt').val();
var umsg = $('#msg').val();
var trObj = $('<tr><td>'+uname+'</td><td>'+umsg+'</td></tr>');
//$('#tb').append(trObj);//append
trObj.appendTo($('#tb'));//appendTo
});
});
</script>
</head>
<body>
<table id="tb" border="1" >
<tr><td>小明</td><td>你好啊</td></tr>
</table>
<br/>
<input type="text" id="txt"/><br/>
<textarea id="msg" rows="5" cols="50"></textarea><br/>
<input type="button" id="btn" value="發表"/><br/>
</body>
</html>效果圖
示例：刪除元素
<!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>jQuery測試</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<style type="text/css">
.cls{
width:300px;
height:200px;
border:solid 1px red;
}
</style>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
// $('#dv').empty();//清空層中的元素
// $('#dv').remove();//層沒了，相當于自殺
$('input').remove('.mycls');//移除應用了cls樣式的層
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="刪除"/>
<div id="dv" class="cls">
<input type="text" class="mycls" value="mycls"/>
<input type="text" value="沒有樣式"/>
</div>
</body>
</html>效果圖
示例：權限選擇案例：一個下拉框中的選項放置另一個下拉列表框選項中
<!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>jQuery測試</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
$(function () {
$('#toRight').click(function () {
$('#se1 :selected').appendTo($('#se2'));
$('select option').attr('selected',false);
});
$('#toLeft').click(function () {
$('#se2 :selected').appendTo($('#se1'));
$('select option').attr('selected',false);
});
$('#toAllRight').click(function () {
$('#se1 option').appendTo($('#se2'));
$('select option').attr('selected',false);
});
$('#toAllLeft').click(function () {
$('#se2 option').appendTo($('#se1'));
$('select option').attr('selected',false);
});
});
</script>
</head>
<body>
<div >
<select multiple="multiple" id="se1">
<option>添加</option>
<option>刪除</option>
<option>修改</option>
<option>查詢</option>
<option>打印</option>
</select>
<div >
<input type="button" value=">" id="toRight"/>
<input type="button" value="<" id="toLeft"/>
<input type="button" value=">>" id="toAllRight"/>
<input type="button" value="<<" id="toAllLeft"/>
</div>
<select multiple="multiple" id="se2"></select>
</div>
</body>
</html>效果圖
3、替換節點和包裹節點
3.1、替換節點
$("br").replaceWith("<hr/>");
用<hr/>替換br
$('<br/>').replaceAll('hr');
用<br/>元素替換所有的hr
調用者也得是選擇器選擇到的元素
3.2、包裹節點
wrap()方法用來將所有元素逐個用指定標簽包裹
wrapAll()
wrapInner()//在內部圍繞
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
