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

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

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

     <style type="text/css">

         .warning {

             background-color:yellow;

         }

     </style>

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

         <script type="text/javascript">

            // $(function(){$('#btn').mouseover(function () { alert("鼠标在我上面！"); })})

             //这里的id如果错误就不会报错。可以自己写出控制是否报错

             $(function () {

                 var elements = $('#btn');

                 if (elements.length <= 0) {

                     alert("报错");

                     return;

                 }

                 elements.mouseover(function () { alert('鼠标在我上面');});

             })

         </script>

 </head>

 <body bgcolor="blue">

     <input value="点击"type="button" id="btn"/>

 </body>

 </html>

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

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

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

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

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

         <script type="text/javascript">

             $(function () {

                 $('p').click(function () { alert($(this).next().text()); });

                 //注意这里this是dom对象，要强制转换成jquery对象

             })

         </script>

 </head>

 <body bgcolor="blue">

     <p>aa</p>

     <p>bb</p>

     <div>div</div>

     <p>cc</p>

     <p>dd</p>

 </body>

 </html>

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

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

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

         <script type="text/javascript">

             $(function () {

                 $('p').click(function () { alert($(this).nextAll().text()); });

                 //nextAll('div')

                 //注意这里this是dom对象，要强制转换成jquery对象

             })

         </script>

 </head>

 <body bgcolor="blue">

     <p>aa</p>

     <p>bb</p>

     <div>div</div>

     <p>cc</p>

     <p>dd</p>

 </body>

 </html>

《注意是隐式迭代》

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

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

         <script type="text/javascript">

             $(function () {

                 $('p').click(function () { $(this).nextAll('p').css("background","yellow"); });

                 //nextAll('div')

                 //注意这里this是dom对象，要强制转换成jquery对象

             })

             $(function () { $('table  td').css("font-size", "60px"); })

             $(function () {

                 $('table td').mouseover(function () {

                     $('table td').css("color", "red");

                     $(this).nextAll('td').css("color", "black");

                 })

             })

         </script>

 </head>

 <body bgcolor="blue">

     <p>aa</p>

     <p>bb</p>

     <div>div</div>

     <p>cc</p>

     <p>dd</p>

     <table>

         <tr>

             <td>★</td>

             <td>★</td>

             <td>★</td>

             <td>★</td>

             <td>★</td>

         </tr>

     </table>

 </body>

 </html>

siblings()获取所有同辈元素

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

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

         <script type="text/javascript">

             $(function () { $('table  td').css("font-size", "60px"); })

             $(function () {

                 $('td').click(function () {

                     $(this).css("background", "red");

                     $(this).siblings("td").css("background","blue");

                 })

             })

         </script>

 </head>

 <body bgcolor="blue">

     <table>

         <tr>

             <td>★</td>

             <td>★</td>

             <td>★</td>

             <td>★</td>

             <td>★</td>

         </tr>

     </table>

 </body>

 </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. JDK源码分析：Short.java

    Short是基本数据类型short的包装类. 1)声明部: public final class Short extends Number implements Comparable<Short ...

  2. Android开发-API指南-<permission>

    <permission> 英文原文:http://developer.android.com/guide/topics/manifest/permission-element.html 采 ...

  3. [Clr via C#读书笔记]Cp18 定制Attribute

    Cp18 定制Attribute 意义 利用Attribute,可以声明性的给自己的代码结构创建注解,从而实现一些特殊的功能:最终在元数据中生成,这种可扩展的元数据信息可以在运行时的时候查询,从而动态 ...

  4. selenium实现文件上传方法汇总（AutoIt、win32GUI、sengkeys）---基于python

    在使用selenium进行UI自动化测试时,经常会遇到一个关于本地文件上传的问题,解决此问题一般分两种情况: 1. 元素标签为input 2.非input型上传 下面我们分别对着两种情况进行实例分析 ...

  5. DFS中的奇偶剪枝（技巧）

    剪枝是什么,简单的说就是把不可行的一些情况剪掉,例如走迷宫时运用回溯法,遇到死胡同时回溯,造成程序运行时间长.剪枝的概念,其实就跟走迷宫避开死胡同差不多.若我们把搜索的过程看成是对一棵树的遍历,那么剪 ...

  6. c# load xml 中文报错

    <?xml version="1.0" encoding="GB2312"?>

  7. Android开发随笔5

    昨天: 对界面的进一步设计补充 可以在界面之间的跳转 研究了对图标等的操作 今天: 实现对库的相关操作 学习视视频内容‘ 复习java的一些知识.

  8. LintCode-211.字符串置换

    字符串置换 给定两个字符串,请设计一个方法来判定其中一个字符串是否为另一个字符串的置换. 置换的意思是,通过改变顺序可以使得两个字符串相等. 样例 "abc" 为 "cb ...

  9. Spring Boot（六）自定义事件及监听

    事件及监听并不是SpringBoot的新功能,Spring框架早已提供了完善的事件监听机制,在Spring框架中实现事件监听的流程如下: 自定义事件,继承org.springframework.con ...

  10. ejabberd学习1

    ejabberd是XMPP协议的一个实现,对大家的另一个意义就是,可以通过ejabberd来学习erlang. 1.从源码安装ejabberd. 可以参考ejabberd 简明配置.这个博文包括了安装 ...