jQuery操作标签元素

黄良钵

分类: 程序开发 686 0

html

  1.  <ul>
  2.     <li>HTML</li>
  3.     <li>CSS</li>
  4.     <li>JS</li>
  5.  </ul>
  6. <ol>
  7.     <li>第1项</li>
  8.     <li>第2项</li>
  9.     <li>第3项</li>
  10.     <li>第4项</li>
  11.     <li>第5项</li>
  12.     <li>第6项</li>
  13.     <li>第7项</li>
  14. </ol>
  15. <hr>
  16. <b>Hello</b>
  17. <p>, how are you?</p>
  18. <script src="jquery.js"></script>
  19. <script src="index.js"></script>

JavaScript

  1. // 使用jquery创建标签并添加到页面上
  2. // $('ul').append('<li>Node.js</li>')
  3. // $('ul').append(document.querySelectorAll('ol li'))
  4. // $('ol').append($('ul li'))
  5. // $('ul>li').append(function(index,html){
  6. //     console.log(html)
  7. //     return '<-><i>' + (index +1) + '</i>'
  8. // })
  9. // $('<span>-------------</span>').appendTo('li')
  10. // $('li').append('<span>-------------</span>')
  11. // $('ol,ul,body').prepend('<li>我有分身术</li>')
  12. // $('li').after('<li>我是保镖1</>')
  13. // $('li').before('<li>我是保镖2</>')
  14. // $('<hr>').insertAfter('li:nth-child(1)')
  15. // $('<hr>').insertBefore('li:first')
  16. // jQuery提供的包裹功能
  17. // wrap()方法把每个被选元素放置在指定的HTML内容或元素中
  18. // $('li').wrap('<a href="http://www.baidu.com"></a>')
  19. // $('li').wrap(function(){
  20. //     // console.log($(this).text())
  21. //     var url = 'https://www.baidu.com/s?wd=' + $(this).text()
  22. //     return '<a href="' + url + '"></a>'
  23. // })
  24. // wrapAll在指定的html内容或元素中放置所有的被选元素
  25. // $('li').wrapAll('<div></div>')
  26. // $('li').wrapAll('<strong></strong>')
  27. // $('li:nth-child(1)')
  28. //    .wrapAll('<ul></ul>')
  29. //    .first()
  30. //    .css('color','red')
  31. //    .end()
  32. //    .last()
  33. //    .css('color','blue')
  34. //    .end()
  35. //    .wrapInner(function(){
  36. //        var url = 'https://www.baidu.com/s?wd=' + $(this).text()
  37. //        return  '<a href="' + url + '"></a>'
  38. //    })
  39. // unwrap方法删除被选元素的父元素
  40. // $('li:first').unwrap()
  41. // jQuery提供的替换功能
  42. // $('li').replaceWith('<li>123</li>')
  43. // $('<li>123</li>').replaceAll('li:odd')
  44. // jQuery提供的清空标签和删除标签自身的功能
  45. // $('html').empty()
  46. // $('html').remove()
  47. // detach()方法移除被选元素 包裹所有文本和子节点
  48. // var hr = $('hr').detach()
  49. // setTimeout(function(){
  50. //     $('ul').after(hr)
  51. // },1000*10)
  52. // $('hr').click(function () {  
  53. //     console.log('ffffffff')
  54. //     alert('哎呦')
  55. // })
  56. // $('ul').after($('hr')).clone(true,true)
  57. // $("b").clone().prependTo("p");
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
jQuery、标签元素

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “jQuery操作标签元素”

Loading...