jQuery对象转换成其它对象

.red-text{
color:red;
}
.bold-text{
font-weight: bold;
font-size: 2rem;
}

<ul></ul>
<ul>
<li>第1项</li>
<li>第2项</li>
<li class="bold-text">第3项</li>
<li>第4项</li>
<li>CSS</li>
<li>第6项</li>
<li>第7项</li>
</ul>
<iframe></iframe>
<script src="jquery.js"></script>
<script src="index.js"></script>

// map是把每个元素通过函数传递到当前匹配集合中生成包含返回值的新jQuery对象
// var ts = $('li').map(function(){
// return $(this).text()
// // this表示当前索引位置的标签元素
// })
// console.dir(ts)
// 将jQuery对象转换成类似字符串数组
// map(第一个参数当前元素的索引第二个参数为当前某个元素)
// var ts = $('li').map(
// (i,ele)=>{return $(ele).text()}
// (i,ele)=>$(ele).text()
// 如果=>右侧只有一个return语句可以省略return
// 如果=>左侧只有一个参数可以省略括号
// (ele) => {}
// ele=>{}
// 如果=>左侧没有参数则必须写()=>{}
// 使用箭头函数时要注意this的指向
// 如果没有明确的function作用域包围this
// this将指向全局作用域window
// )
// console.log(ts)
// 将类似数组转换为数组的方法
// join把数组中的所有元素放入一个字符串
// alert(Array.from(ts).join(', '))
// Array.from可以把类似数组的对象装换为数组
// console.log(Array.prototype.slice.call(ts))
// slice()方法会浅复制数组的一部分到一个新的数组并返回这个数组
// Array.prototype.slice.call(arguments)能将具有length属性的对象转换成数组
// is判断jQuery对象中的标签元素是否符合某个条件
// alert($('li:even').is('.red-text'))
// 判断内容中是否包含指定字符串
// function hasCSS(i,ele){
// return $(ele).text().indexOf('CSS') > -1
// }
// alert($('li:eq(4)').is(hasCSS))
// toArray()把jQuery集合中所有DOM元素恢复成一个数组。
// console.log($('li').toArray().reverse().map(ele=>ele.innerText).join(', '))
// **************************************************************************
// 将ul全部改掉
// $('ul').text('1234567')
// 改变列表项
// $('ul').html('<li>HTML<li>CSS<li>JS<li>NodeJs')
// 使用原生代码创建节点
// createTextNode
var comment = document.createTextNode('通过代码创建的文本')
document.body.appendChild(comment)
// HTML注释节点
// var comment = document.createComment('通过代码创建注释')
// document.body.appendChild(comment)
// 用代码创建出来的内容通过查看页面源代码看不到只能使用查看器查看查看器是实时的
// 创建很多节点时使用DocumentFragment文档片段缓冲一下可以减少对页面的冲击
// 节点创建好之后再一次性添加到页面上
// var ul = document.querySelector('ul')
// var fragment = document.createDocumentFragment()
// for(var i = 0;i<10000;i++){
// var li = document.createElement('li')
// // '新建第' + i + '项' = `新建第${i}项`
// li.innerHTML = `新建第${i}项`
// fragment.appendChild(li)
// }
// ul.appendChild(fragment)
// console.log($('<li>HTML<li>CSS<li>JS<li>NodeJs'))
// 创建标签对象并添加到页面上
// $('<li>HTML<li>CSS<li>JS<li>NodeJs</li>').appendTo('ul')
var iframe = document.querySelector('iframe')
var idoc =iframe.contentWindow.document
// contentWindow是得到iframe的内部window
// iframe.contentWindow.document得到iframe内部的document
// var div = document.createElement('div')
// div.innerHTML = '<h1>标题标题</h1>'
// idoc.body.appendChild(div)
// $('<h1>标题标题</h1><p>段落段落</p>').appendTo(idoc.body)
// 创建标签元素的同时添加监听事件
// 标签中不能写内容
$('<li></li>',{
'class':'bold-text red-text',
// 'onclick':'alert("点击了")'
on:{
click:function(){
alert('点击了')
}
}
}).text('这个条目好').appendTo('ul')

发送评论 编辑评论

推荐文章

发送评论编辑评论