jQuery操作标签元素 - 会coding的HAM

html

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<ol>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
<li>第5项</li>
<li>第6项</li>
<li>第7项</li>
</ol>
<hr>
<b>Hello</b>
<p>, how are you?</p>
<script src="jquery.js"></script>
<script src="index.js"></script>

JavaScript

// 使用jquery创建标签并添加到页面上
// $('ul').append('<li>Node.js</li>')
// $('ul').append(document.querySelectorAll('ol li'))
// $('ol').append($('ul li'))
// $('ul>li').append(function(index,html){
// console.log(html)
// return '<-><i>' + (index +1) + '</i>'
// })
// $('<span>-------------</span>').appendTo('li')
// $('li').append('<span>-------------</span>')
// $('ol,ul,body').prepend('<li>我有分身术</li>')
// $('li').after('<li>我是保镖1</>')
// $('li').before('<li>我是保镖2</>')
// $('<hr>').insertAfter('li:nth-child(1)')
// $('<hr>').insertBefore('li:first')
// jQuery提供的包裹功能
// wrap()方法把每个被选元素放置在指定的HTML内容或元素中
// $('li').wrap('<a href="http://www.baidu.com"></a>')
// $('li').wrap(function(){
// // console.log($(this).text())
// var url = 'https://www.baidu.com/s?wd=' + $(this).text()
// return '<a href="' + url + '"></a>'
// })
// wrapAll在指定的html内容或元素中放置所有的被选元素
// $('li').wrapAll('<div></div>')
// $('li').wrapAll('<strong></strong>')
// $('li:nth-child(1)')
// .wrapAll('<ul></ul>')
// .first()
// .css('color','red')
// .end()
// .last()
// .css('color','blue')
// .end()
// .wrapInner(function(){
// var url = 'https://www.baidu.com/s?wd=' + $(this).text()
// return '<a href="' + url + '"></a>'
// })
// unwrap方法删除被选元素的父元素
// $('li:first').unwrap()
// jQuery提供的替换功能
// $('li').replaceWith('<li>123</li>')
// $('<li>123</li>').replaceAll('li:odd')
// jQuery提供的清空标签和删除标签自身的功能
// $('html').empty()
// $('html').remove()
// detach()方法移除被选元素包裹所有文本和子节点
// var hr = $('hr').detach()
// setTimeout(function(){
// $('ul').after(hr)
// },1000*10)
// $('hr').click(function () {
// console.log('ffffffff')
// alert('哎呦')
// })
// $('ul').after($('hr')).clone(true,true)
// $("b").clone().prependTo("p");

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论