在JQuery中根据id获取控件，如果输入id错误是不报错的。

必要时可以通过写判断语句进行判断是否id写错

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <title>JQuery</title>
  5.      <style type="text/css">
  6.          .warning {
  7.              background-color:yellow;
  8.          }
  9.      </style>
  10.          <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
  11.          <script type="text/javascript">
  12.             // $(function(){$('#btn').mouseover(function () { alert("鼠标在我上面！"); })})
  13.              //这里的id如果错误就不会报错。可以自己写出控制是否报错
  14.              $(function () {
  15.                  var elements = $('#btn');
  16.                  if (elements.length <= 0) {
  17.                      alert("报错");
  18.                      return;
  19.                  }
  20.                  elements.mouseover(function () { alert('鼠标在我上面');});
  21.              })
  22.          </script>
  23.  </head>
  24.  <body bgcolor="blue">
  25.      <input value="点击"type="button" id="btn"/>
  26.  </body>
  27.  </html>

.next方法用于获取本节点后面第一个同辈的节点。

意思是与本节点在同一层次级别中的下一个节点对应的值

所以说next就是指向下一个。（这里面用到的this是一个dom对象，需要转换成jquery对象）

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <title>JQuery</title>
  5.          <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
  6.          <script type="text/javascript">
  7.              $(function () {
  8.                  $('p').click(function () { alert($(this).next().text()); });
  9.                  //注意这里this是dom对象，要强制转换成jquery对象
  10.              })
  11.          </script>
  12.  </head>
  13.  <body bgcolor="blue">
  14.      <p>aa</p>
  15.      <p>bb</p>
  16.      <div>div</div>
  17.      <p>cc</p>
  18.      <p>dd</p>
  19.  </body>
  20.  </html>

nextAll()是指本节点后面所有的，方法中还可以加入参数，用来查找哦后面所有相应参数对应的

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <title>JQuery</title>
  5.          <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
  6.          <script type="text/javascript">
  7.              $(function () {
  8.                  $('p').click(function () { alert($(this).nextAll().text()); });
  9.                  //nextAll('div')
  10.                  //注意这里this是dom对象，要强制转换成jquery对象
  11.              })
  12.          </script>
  13.  </head>
  14.  <body bgcolor="blue">
  15.      <p>aa</p>
  16.      <p>bb</p>
  17.      <div>div</div>
  18.      <p>cc</p>
  19.      <p>dd</p>
  20.  </body>
  21.  </html>

《注意是隐式迭代》

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <title>JQuery</title>
  5.          <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
  6.          <script type="text/javascript">
  7.              $(function () {
  8.                  $('p').click(function () { $(this).nextAll('p').css("background","yellow"); });
  9.                  //nextAll('div')
  10.                  //注意这里this是dom对象，要强制转换成jquery对象
  11.              })
  12.              $(function () { $('table  td').css("font-size", "60px"); })
  13.              $(function () {
  14.                  $('table td').mouseover(function () {
  15.                      $('table td').css("color", "red");
  16.                      $(this).nextAll('td').css("color", "black");
  17.  
  18.                  })
  19.              })
  20.          </script>
  21.  </head>
  22.  <body bgcolor="blue">
  23.      <p>aa</p>
  24.      <p>bb</p>
  25.      <div>div</div>
  26.      <p>cc</p>
  27.      <p>dd</p>
  28.      <table>
  29.          <tr>
  30.              <td>★</td>
  31.              <td>★</td>
  32.              <td>★</td>
  33.              <td>★</td>
  34.              <td>★</td>
  35.          </tr>
  36.      </table>
  37.  </body>
  38.  </html>

siblings()获取所有同辈元素

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <title>JQuery</title>
  5.          <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
  6.          <script type="text/javascript">
  7.              $(function () { $('table  td').css("font-size", "60px"); })
  8.              $(function () {
  9.                  $('td').click(function () {
  10.                      $(this).css("background", "red");
  11.                      $(this).siblings("td").css("background","blue");
  12.                  })
  13.              })
  14.          </script>
  15.  </head>
  16.  <body bgcolor="blue">
  17.      <table>
  18.          <tr>
  19.              <td>★</td>
  20.              <td>★</td>
  21.              <td>★</td>
  22.              <td>★</td>
  23.              <td>★</td>
  24.          </tr>
  25.      </table>
  26.  </body>
  27.  </html>

JQuery学习三(隐式迭代和节点遍历)的更多相关文章

  1. js的事件循环绑定和jQuery的隐式迭代

    js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...

  2. jQuery关于隐式迭代的个人理解~

    1.JQuery对象" 如: $('div').text("div展示的信息") 可以看成"是一个包含一个dom数组 和 包含所有Jquery方法的容器 2.每 ...

  3. JQuery的链式编程，隐式迭代是啥意思？

    链式编程 1.好处 "一句话,链式编程可以省去很多重复的代码." 这话什么意思呢?举个例子. /*设置obj对象的两个属性*/ //普通做法是这样的 obj.name = '小明' ...

  4. jQuery——链式编程与隐式迭代

    链式编程 1.原理:return this; 2.通常情况下,只有设置操作才能把链式编程延续下去.因为获取操作的时候,会返回获取到的相应的值,无法返回 this. 3.end():结束当前链最近的一次 ...

  5. JQuery的链式编程与隐式迭代

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jquery 点谁谁哭-隐式迭代

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  7. jQ的隐式迭代和设置样式属性

    jQ中的隐式迭代 意义:不需要原生迭代了,在jQ内部自动帮你实现了循环 代码实现: let arr = document.querySelectorAll('li') for(let i = 0;i ...

  8. jQ的显式迭代和隐式迭代

    jQ的显示迭代 隐式迭代 let lis = document.querySelector('li') lis.forEach(function (value, index) { value.styl ...

  9. JQuery的隐式迭代和each函数和map函数

    1.JQuery选择器选择出来的是一个数组对象,可是给这些每一个元素都要设置内容时,就会隐式迭代,JQuery自己实现内部循环给每个元素绑定上设置. 2.如果是获取的话,那就是默认获取第一个元素的值. ...

随机推荐

  1. kubernetes相关

    1.获取client , api-server 加token 或in-cluster方式 2.所有对象均有list update get 等方法 3.对象属性源码追踪,yaml与源码一一对应 4.一些 ...

  2. 从零开始的Python学习Episode 4——列表

    一.列表 列表与数组相似,定义一个列表 a=[1,2,3,4,5] 1.基本操作 a=[1,2,3,4] #切片 范围取值时,包括第一项但不包括最后一项,顾头不顾尾 print(a[0:]) #从头到 ...

  3. 浪在ACM新春大作战

    题目链接: # Name 补题状态 A Memory and Crow 已补 B Memory and Trident 已补 C Memory and De-Evolution 已补 D Memory ...

  4. 78[LeetCode] Subsets

    Given a set of distinct integers, nums, return all possible subsets (the power set). Note: The solut ...

  5. vue 与jq 的对比

    vue.react和angular,众所周知,他们是前端框架的3个大佬.这篇主要想对比一下用vue和用jq的区别,至于和其他框架的对比,我想vue的官网说的更为详细. 我算是独自用vue写过一个小型项 ...

  6. Entity Framework 基本概念

    概念 LINQ to Entities 一种 LINQ 技术,使开发人员可以使用 LINQ 表达式和 LINQ 标准查询运算符,针对实体数据模型 (EDM) 对象上下文创建灵活的强类型化查询. ESQ ...

  7. 20145214 《Java程序设计》第9周学习总结

    20145214 <Java程序设计>第9周学习总结 教材学习内容总结 JDBC简介 JDBC全名Java DataBase Connectivity,是java联机数据库的标准规范.它定 ...

  8. LintCode-376.二叉树的路径和

    二叉树的路径和 给定一个二叉树,找出所有路径中各节点相加总和等于给定 目标值 的路径. 一个有效的路径,指的是从根节点到叶节点的路径. 样例 给定一个二叉树,和 目标值 = 5: 返回: [      ...

  9. 访问方式由http改为https curl:(51)

    系统访问由http变为https,先申请了CA证书,然后win下浏览器访问时没问题的,但是linux下通过curl的方式访问就报错: curl:(51) SSLcertificate subject ...

  10. 【.NET】- async await 异步编程

    为什么需要异步,异步对可能起阻止作用的活动(例如,应用程序访问 Web 时)至关重要. 对 Web 资源的访问有时很慢或会延迟. 如果此类活动在同步过程中受阻,则整个应用程序必须等待. 在异步过程中, ...