jquery文件處理(增、刪、改、查))
1. 插入
append(content) ：將content內容插入到匹配元素內容的最後
prepend(content) ：將content內容插入到匹配元素內容的最前
<body>
<span>內容</span>
<button id="append">插入最後</button>
<button id="prepend">插入最前</button>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#append').bind('click',function(){
$('span').append('jquery');
});
$('#prepend').bind('click',function(){
$('span').prepend('jquery');
});
});
</script>
2. 刪除
empty() 將內容清空 標籤還在
remove() 指定的標籤和內容都移除
<body><div style="width:100px;height:100px;border:1px solid red;">內容</div>
<button id="empty">清空</button>
<button id="remove">移除</button>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#empty').bind('click',function(){
$('div').empty();
});
$('#remove').bind('click',function(){
$('div').remove();
});
});
</script>
3.複製
clone( [true] )
引數說明：
有true：克隆元素和元素繫結的事件
沒有true：只克隆元素
<body><h2>貂蟬誰屬</h2>
<ul>
<li>劉備</li>
<li>關羽</li>
<li>張飛</li>
<li>呂布</li>
</ul>
<button id="clone">複製呂布</button>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('li:last').bind('click',function(){
alert('貂蟬註定是我的');
});
$('#clone').bind('click',function(){
var lvbu2=$('li:last').clone(true);
$('ul').append(lvbu2);
});
});
</script>
4.替換
replaceWith()
<body><h2>四大名著</h2>
<ul>
<li>三國</li>
<li>水滸</li>
<li>西遊</li>
<li>紅樓</li>
</ul>
<button id="btn">替換</button>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').bind('click',function(){
$('li:first').replaceWith('<li>三國演義</li>');
});
});
</script>
5.查詢
• eq(index)：查詢指定下標的元素下標從0開始
• filter(expr)：過濾匹配的class選擇器，其實就是縮小範圍查詢
• not(expr)：排除 匹配指定選擇器之外的元素
• next([expr])：查詢指定元素下一個元素
• prev([expr])：查詢指定元素的上一個元素
• parent([expr])：查詢當前元素的父元素
<body><ul>
<li>html</li>
<li class='cls'>css</li>
<li>php</li>
<li><a href="#">mysql</a></li>
</ul>
<hr />
<button id="btn">查詢</button>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').bind('click',function(){
//查詢0號元素替換成html5
$('li').eq(0).html('html5');
//過濾
alert($('li').filter('.cls').html());
//查詢上一個
$('li').eq(2).next().html('下一個');
//查詢下一個
$('li').eq(2).prev().html('上一個');
});
});
</script>