• 当前标签:jQuery对象

程序开发 jQuery对象转换成其它对象

CSS .red-text{     color:red; } .bold-text{     font-weight: bold;     font-size: 2rem; } HTML <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> JavaScript // 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')

2017-08-16 19:30:23 33 0 0
阅读详情

程序开发 jQuery对象找出同级

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>jQuery对象-同级标签</title>     <style>        /* article{            position: relative;        }        section{             position: relative;        } */    </style> </head> <body>     <!-- <ul>         <li>第1项</li>         <li>第2项</li>         <li><a href="">第3项</a></li>         <li><span>第<strong>4</strong>项</span></li>         <li>第5项</li>         <li>第6项</li>         <li><strong>第7项</strong></li>     </ul> -->     <!-- <article>         <h1>这是标签</h1>         <section>             123             <p>这是段落<strong>这是段落</strong>这是段落</p>         </section>     </article> -->   <!-- jquery对象回到前一个jQuery对象 -->     <ul>         <li>第1项</li>         <li>第2项</li>         <li>第3项</li>         <li>第4项</li>         <li>第5项</li>         <li>第6项</li>         <li>第7项</li>     </ul>     <script src="jquery.js"></script>     <script src="index.js"></script> </body> </html>  JavaScript // $('li:nth-child(4)').prev().css('color','red') // $('li:nth-child(4)').prevAll().css('color','red') // $('li:nth-child(5)').prevAll(':gt(1)').css('color','red') // prevAll时  jQuery对象中的元素是从后向前排的 // $('li:nth-child(4)').siblings().css('color','blue') // $('li:nth-child(4)').next().css('color','blue') // $('li:nth-child(4)').nextAll().css('color','blue') // $('li:nth-child(3)').nextAll(':lt(3)').css('color','blue') // 找出下级 // $('li').find('strong').css('color','red') // $('li').children().css('font-size','1.5rem') // console.log($('li').contents()) // 查找匹配元素内部所有的子节点 // 找出上级 // $('strong').parent().css('color','red') // $('strong').parent().parent().parent().css('color','red') // $('article').find('strong').parent().css('color','red') // parentsUntil查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。 // $('strong').parentsUntil('article').css('border','1px solid blue') // $('strong').closest('strong').css('border','1px solid blue') // $('strong').closest('*').css('border','1px solid blue') // $('strong').closest('section').css('border','1px solid blue') // 返回第一个匹配元素用于定位的父节点。 // $('strong').offsetParent().css({ //     'background-color':'red', //     'color':'white' // }) // jquery对象回到前一个jQuery对象 var chain = $('li:nth-child(4)').prev().prev().nextAll().last() // chain.css('color','red') // chain.end().css('color','red') // chain.end().end().css('color','red') // chain.end().end().end().css('color','red') chain.end().end().end().end().css('color','red')

2017-08-16 19:27:59 23 0 0
阅读详情
  • 1
前往