js进阶  11-14  jquery如何实现元素的替换和遍历

一、总结

一句话总结：替换：replaceAll() 与 replaceWith()。遍历：each()。

1、replaceAll() 与 replaceWith() 的异同是什么？

replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。

31             $('#btn1').click(function(){

32                 //$('li:last').replaceWith($('li:first'))

33                 // $('li:last').replaceWith('<li class="orange"></li>')

34                 $('li:last').replaceWith(function(){

35                     return '<li class="orange"></li>'

36                 })

37             })

38             $('#btn2').click(function(){

39             //$($('li:first')).replaceAll($('li:last'))

40              $('<li class="orange"></li>').replaceAll($('li:last'))

41             })

2、jquery中怎么实现元素的遍历？

each()方法

42             $('#btn3').click(function(){

43                 // $('li').each(function(){

44                 //     alert($(this).text())

45                 // })

46                 $('li').each(function(index){

47                     var arr=["HTML5","JavaScript", "jQuery"]

48                     $(this).text(arr[index])

49                 })

50             })

3、jquery的替换的参数中可以放哪些东西？

jquery选择器（jquery对象），标签（dom的elememt对象），匿名函数（返回dom的element对象）

31             $('#btn1').click(function(){

32                 //$('li:last').replaceWith($('li:first'))

33                 // $('li:last').replaceWith('<li class="orange"></li>')

34                 $('li:last').replaceWith(function(){

35                     return '<li class="orange"></li>'

36                 })

37             })

二、jquery如何实现元素的替换和遍历

1、相关知识

  1. 替换节点

    • replaceWith():用指定的 HTML 内容或元素替换被选元素。
    • replaceAll():用指定的 HTML 内容或元素替换被选元素。

      replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。

  2. 遍历节点:each()

    在jQuery中，我们可以使用each()方法来轻松实现元素的遍历操作。

    语法：$(selector).each(function(index))

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

         li{

             background: #ccc;margin-top: 25px;width: 150px;

         }

         .orange{background: orange}

         .red{background: red}

         .green{background: green}

         .ccc{background: #ccc;}

     </style>

 </style>

 </head>

 <body>

     <ol>

         <li class="orange">1</li>

         <li class="red"><i>2</i></li>

         <li class="green">3</li>

     </ol>

     <input id="btn1" type="button" value='replaceWith'>

     <input id="btn2" type="button" value='replaceAll'>

     <input id="btn3" type="button" value='each'>

     <script type="text/javascript">

         $(function(){

             $('#btn1').click(function(){

                 //$('li:last').replaceWith($('li:first'))

                 // $('li:last').replaceWith('<li class="orange"></li>')

                 $('li:last').replaceWith(function(){

                     return '<li class="orange"></li>'

                 })

             })

             $('#btn2').click(function(){

             //$($('li:first')).replaceAll($('li:last'))

              $('<li class="orange"></li>').replaceAll($('li:last'))

             })

             $('#btn3').click(function(){

                 // $('li').each(function(){

                 //     alert($(this).text())

                 // })

                 $('li').each(function(index){

                     var arr=["HTML5","JavaScript", "jQuery"]

                     $(this).text(arr[index])

                 })

             })

         })

     </script>

 </body>

 </html>
 

js进阶 11-14 jquery如何实现元素的替换和遍历的更多相关文章

  1. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  2. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  3. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶 11-17 juqery如何查找一个元素的同级元素

    js进阶 11-17 juqery如何查找一个元素的同级元素 一.总结 一句话总结:三个方法,向前(prev()),向后(next())和兄弟(siblings()),而前面两个每个都对应三个,pre ...

  8. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  9. js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）

    js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...

随机推荐

  1. Spring源码分析专题 —— IOC容器启动过程（上篇）

    声明 1.建议先阅读<Spring源码分析专题 -- 阅读指引> 2.强烈建议阅读过程中要参照调用过程图,每篇都有其对应的调用过程图 3.写文不易,转载请标明出处 前言 关于 IOC 容器 ...

  2. 2018/8/15 qbxt 测试

    2018/8/15 qbxt 测试 期望得分:100:实际得分:50   不知道为什么写挂了,明明是个水题 T^T 思路:模拟 注意:如果用 char 类型存储的话,如果有'z' + 9 会爆char ...

  3. 《从零開始学Swift》学习笔记（Day 59）——代码排版

    原创文章,欢迎转载.转载请注明:关东升的博客 代码排版包括: 空行.空格.断行和缩进等内容.代码排版内容比較多工作量非常多.可是非常重要. 空行 空行将逻辑相关的代码段分隔开.以提高可读性. 下列情况 ...

  4. 使用Invoke解决多线程间的控件访问出错

    // 按钮点击事件处理程序private void button1_Click(object sender, EventArgs e){    //创建新线程    Thread processorT ...

  5. 00091_字符输入流Reader

    1.字符输入流Reader (1)字符输入流Reader我们读取拥有中文的文件时,使用的字节流在读取,那么我们读取到的都是一个一个字节: (2)只要把这些字节去查阅对应的编码表,就能够得到与之对应的字 ...

  6. Java Web学习总结（5）——HttpServletResponse对象详解

    一.HttpServletResponse常见应用--生成验证码 1.1.生成随机图片用作验证码 生成图片主要用到了一个BufferedImage类, 生成随机图片范例: package gacl.r ...

  7. Stable Matching (Gale Sharpley Algorithm)

    稳定婚配问题:n个男生n个女生.当中每一个人都有自己心仪的列表. 问怎样达成稳定的匹配(比方, b想B求婚,可是B已有的对象的优先级高于b,此时b的魅力不足以拆散B所处的那一对,即达到稳定状态.) ( ...

  8. Testin云測与ARM 战略合作：推动全球移动应用加速进入中国市场

    Testin云測与ARM 战略合作:推动全球移动应用加速进入中国市场 2014/10/14 · Testin · 业界资讯 (中国北京–2014年10月14日 )全球最大的移动游戏.应用真机和用户云測 ...

  9. 关于C++中用两个迭代器方式初始化string的知识

    string(iter1, iter2); 第一点:两个迭代器必须指向同一个容器. 第二点:iter2必须>=iter1. 第三点:假设iter1等于iter2,那么结果为空[] 另外一个比較特 ...

  10. 启动Tomcat，startup.bat一闪而过的解决办法

    1.打开命令行:win+R --> cmd2.将解压后的tomcat\bin\startup.bat文件拖到控制台窗口中,回车. 这样就可以看到错误信息的提示,根据提示修改即可.