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