在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. 【C#】ArcFace2 视频人脸比对教程

    请允许我大言不惭,叫做教程,特希望各位能指正.哦,我用的是vs2017.了解更多详情可以访问虹软人工智能开放平台 一.准备工作 1.创建项目 2.添加EMGU.CV包 ,并设属性“复制到输出目录”为“ ...

  2. Caused by: java.lang.NoClassDefFoundError: javax/el/ELManager

    出现问题的原因: 在将springboot项目部署到Linux下的Tomcat中,项目无法正常启动(本地能正常运行),Tomcat启动日志中出现: Caused by: java.lang.NoCla ...

  3. [leetcode-748-Largest Number At Least Twice of Others]

    In a given integer array nums, there is always exactly one largest element. Find whether the largest ...

  4. 3ds Max学习日记(七)

      第7章讲的是多边形建模,实例略多,有十六个,再加上周日的怠惰感,只做了几个实例. 附上今日的劳动成果:   布料(创建一个平面,转换为可编辑多边形,然后调整顶点,连接一些边,添加网格平滑,转换为可 ...

  5. python 爬虫 伪装

    #coding=utf-8 import requests def requests_view(response): import webbrowser requests_url = response ...

  6. phpcms免登录cookies设置方案

    PHPCMS的SESSION时间长一些的解决办法修改两个文件: phpsso_server/caches/configs/system.php里的 'session_ttl' => 999999 ...

  7. ResultSet 可滚动性和可更新性

    JDBC 2.0 API 为结果集增加了两个新的基本能力:可滚动性和可更新性,我想肯定满足了你的要求.在滚动结果集中可用的方法有: rs.previous();//向前滚动 rs.next();//向 ...

  8. 【刷题】BZOJ 2038 [2009国家集训队]小Z的袜子(hose)

    Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命-- 具体来说,小Z把这N只 ...

  9. 参考《Java疯狂讲义》

    参考<Java疯狂讲义>Lambda表达式支持将代码块作为方法参数,Lambda表达式允许使用更简洁的代码来创建只有一个抽象方法的接口(这种接口被称为函数式接口)的实例 1. Lambda ...

  10. BZOJ3040:最短路——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3040 题意rt,使用pb_ds的堆解决本问题. 所以其实就是mark一下的. 不过有人确认过官方不 ...