jQuery对象转换成其它对象

黄良钵

分类: 程序开发 959 0

CSS

  1. .red-text{
  2.     color:red;
  3. }
  4. .bold-text{
  5.     font-weightbold;
  6.     font-size: 2rem;
  7. }

HTML

  1. <ul></ul>
  2. <ul>
  3.     <li>第1项</li>
  4.     <li>第2项</li>
  5.     <li class="bold-text">第3项</li>
  6.     <li>第4项</li>
  7.     <li>CSS</li>
  8.     <li>第6项</li>
  9.     <li>第7项</li>
  10. </ul>
  11. <iframe></iframe>
  12. <script src="jquery.js"></script>
  13. <script src="index.js"></script>

JavaScript

  1. // map是把每个元素通过函数传递到当前匹配集合中 生成包含返回值的新jQuery对象
  2. // var ts = $('li').map(function(){
  3. //     return $(this).text()
  4. //     // this表示当前索引位置的标签元素
  5. // })
  6. // console.dir(ts)
  7. // 将jQuery对象转换成类似字符串数组
  8. // map(第一个参数当前元素的索引  第二个参数为当前某个元素)
  9. // var ts = $('li').map(
  10.     // (i,ele)=>{return $(ele).text()}
  11.     // (i,ele)=>$(ele).text()
  12.     // 如果=>右侧只有一个return语句 可以省略return
  13.     // 如果=>左侧只有一个参数可以省略括号
  14.     // (ele) => {}
  15.     // ele=>{}
  16.     // 如果=>左侧没有参数 则必须写()=>{}
  17.     // 使用箭头函数时要注意this的指向
  18.     // 如果没有明确的function作用域包围this
  19.     // this将指向全局作用域window
  20. // )
  21. // console.log(ts)
  22. // 将类似数组转换为数组的方法
  23. // join把数组中的所有元素放入一个字符串 
  24. // alert(Array.from(ts).join(', '))
  25. // Array.from可以把类似数组的对象装换为数组
  26. // console.log(Array.prototype.slice.call(ts))
  27. // slice()方法会浅复制数组的一部分到一个新的数组 并返回这个数组
  28. // Array.prototype.slice.call(arguments)能将具有length属性的对象转换成数组
  29. // is判断jQuery对象中的标签元素是否符合某个条件
  30. // alert($('li:even').is('.red-text'))
  31. // 判断内容中是否包含指定字符串
  32. // function hasCSS(i,ele){
  33. //     return $(ele).text().indexOf('CSS') > -1
  34. // }
  35. // alert($('li:eq(4)').is(hasCSS))
  36. // toArray()把jQuery集合中所有DOM元素恢复成一个数组。
  37. // console.log($('li').toArray().reverse().map(ele=>ele.innerText).join(', '))
  38. // **************************************************************************
  39. // 将ul全部改掉
  40. // $('ul').text('1234567')
  41. // 改变列表项
  42. // $('ul').html('<li>HTML<li>CSS<li>JS<li>NodeJs')
  43. // 使用原生代码创建节点
  44. // createTextNode
  45. var comment = document.createTextNode('通过代码创建的文本')
  46. document.body.appendChild(comment)
  47. // HTML注释节点
  48. // var comment = document.createComment('通过代码创建注释')
  49. // document.body.appendChild(comment)
  50. // 用代码创建出来的内容通过查看页面源代码看不到 只能使用查看器查看 查看器是实时的
  51. // 创建很多节点时 使用DocumentFragment文档片段缓冲一下 可以减少对页面的冲击
  52. // 节点创建好之后再一次性添加到页面上
  53. // var ul = document.querySelector('ul')
  54. // var fragment = document.createDocumentFragment()
  55. // for(var i = 0;i<10000;i++){
  56. //     var li = document.createElement('li')
  57. //     // '新建第' + i + '项' = `新建第${i}项`
  58. //     li.innerHTML = `新建第${i}项`
  59. //     fragment.appendChild(li)
  60. // }
  61. // ul.appendChild(fragment)
  62. // console.log($('<li>HTML<li>CSS<li>JS<li>NodeJs'))
  63. // 创建标签对象并添加到页面上
  64. // $('<li>HTML<li>CSS<li>JS<li>NodeJs</li>').appendTo('ul')
  65. var iframe = document.querySelector('iframe')
  66. var idoc =iframe.contentWindow.document
  67. // contentWindow是得到iframe的内部window 
  68. // iframe.contentWindow.document得到iframe内部的document
  69. // var div = document.createElement('div')
  70. // div.innerHTML = '<h1>标题标题</h1>'
  71. // idoc.body.appendChild(div)
  72. // $('<h1>标题标题</h1><p>段落段落</p>').appendTo(idoc.body)
  73. // 创建标签元素的同时添加监听事件
  74. // 标签中不能写内容
  75. $('<li></li>',{
  76.     'class':'bold-text red-text',
  77.     // 'onclick':'alert("点击了")'
  78.     on:{
  79.         click:function(){
  80.             alert('点击了')
  81.         }
  82.     }
  83. }).text('这个条目好').appendTo('ul')
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
jQuery、jQuery对象

作者简介: 黄良钵

打赏

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

共 0 条评论关于 “jQuery对象转换成其它对象”

Loading...