JQuery学习三(隐式迭代和节点遍历)
在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学习三(隐式迭代和节点遍历)的更多相关文章
- js的事件循环绑定和jQuery的隐式迭代
js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...
- jQuery关于隐式迭代的个人理解~
1.JQuery对象" 如: $('div').text("div展示的信息") 可以看成"是一个包含一个dom数组 和 包含所有Jquery方法的容器 2.每 ...
- JQuery的链式编程，隐式迭代是啥意思？
链式编程 1.好处 "一句话,链式编程可以省去很多重复的代码." 这话什么意思呢?举个例子. /*设置obj对象的两个属性*/ //普通做法是这样的 obj.name = '小明' ...
- jQuery——链式编程与隐式迭代
链式编程 1.原理:return this; 2.通常情况下,只有设置操作才能把链式编程延续下去.因为获取操作的时候,会返回获取到的相应的值,无法返回 this. 3.end():结束当前链最近的一次 ...
- JQuery的链式编程与隐式迭代
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery 点谁谁哭-隐式迭代
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- jQ的隐式迭代和设置样式属性
jQ中的隐式迭代 意义:不需要原生迭代了,在jQ内部自动帮你实现了循环 代码实现: let arr = document.querySelectorAll('li') for(let i = 0;i ...
- jQ的显式迭代和隐式迭代
jQ的显示迭代 隐式迭代 let lis = document.querySelector('li') lis.forEach(function (value, index) { value.styl ...
- JQuery的隐式迭代和each函数和map函数
1.JQuery选择器选择出来的是一个数组对象,可是给这些每一个元素都要设置内容时,就会隐式迭代,JQuery自己实现内部循环给每个元素绑定上设置. 2.如果是获取的话,那就是默认获取第一个元素的值. ...
随机推荐
- 57[LeetCode] Insert Interval
Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...
- visionpro9.0破解
visionpro9.0软件下载 提供一个visionpro9.0视频教程学习网站:点击下面链接进入. ------------------------Halcon,Visionpro高清视频教程,点 ...
- 嵌入式码农的10年Bug调试经验，值得一看
下面这些都是我经历过的会导致难点bug的问题: 1.事件顺序.在处理事件时,提出下列问题会很有成效:事件可以以不同的顺序到达吗?如果我们没有接收到此事件会怎么样?如果此事件接连发生两次会怎么样?哪怕通 ...
- Java实验二实验报告：java面向对象程序设计
java实验二实验报告 实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L.I.D原则 5. 了解设计模式 实验 ...
- Spark GraphX 2
顶点:VertexRDD 边:EdgeRDD.Edge.EdgeDirection Triplet:EdgeTriplet 存储:PartitionStrategy 通常的存储方式有两种: ...
- C#及时释放代码
using语句,定义一个范围,在范围结束时释放对象. 场景: 当在某个代码段中使用了类的实例,而希望无论因为什么原因,只要离开了这个代码段就自动调用这个类实例的Dispose. 要达到这样的目的,用t ...
- iOS- UIPickerView餐厅点餐系统
在餐厅里的点餐系统的核心控件就是UIPickerView 今天晚上在整理以前的项目笔记时,特意把UIPickerView单独拿出来,做了一个简陋的点餐道具. 因为没有素材图片,所有大家将就看看吧 0. ...
- C#添加本地打印机
class Program { static void Main(string[] args) { const string printerName = "Print to file&quo ...
- 在intelllij中debug的时候使用log4j输出
一般在本地调试的时候,在控制台打印输出都会使用system.out.print,但是在线上运行的时候一般都是使用log4j进行日志输出. 那么在编写代码的时候,又不想写两份,直接写LOG是常规动作. ...
- Redis集群分布（Windows版）
Redis系列 作者Mr.Chen,转载请注明博客出处:http://www.cnblogs.com/cjh-notes/ 第一步:下载安装redis windows版的下载地址:https://gi ...