讲给后台程序员看的前端系列教程(61)——jQuery遍历元素

Mybatis研习录
笨鸟向东飞
谷哥的小弟

C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

概述

在此,介绍jQuery中常用的遍历元素的方式:

jQuery对象.each(function( ){ })
在each( )中this表示遍历过程中的当前对象,该当前对象为JavaScript对象。

jQuery对象.each(function(index,element){ })
在each( )中element表示遍历过程中的当前对象,该当前对象为JavaScript对象。
在each( )中index表示遍历过程中的当前对象在集合中的索引
在each( )中如果function返回为false表示结束整个循环,其作用类似于break;如果function返回为true表示结束本次循环继续下次循环,其作用类似于continue。

jQuery.each(object, [function( ){ }])
该方式可简写为$.each(object, [function( ){ }]),其作用类似于jQuery对象.each(function( ){ };故,不再赘述。

jQuery.each(object, [function(index,element){ }])
该方式可简写为$.each(object, [function(index,element){ }]),其作用类似于jQuery对象.each(function(index,element){ });故,不再赘述。

for(元素对象 of 集合对象)
该方式为jquery 3.0 版本之后提供的方式,其非常类似于java中的增强for循环;故,不再赘述。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery遍历元素</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			$(function() {
				//以JavaScript遍历元素
				$("#firstButton").click(function() {
					var cityArray = document.getElementsByTagName("li");
					for (var i = 0; i < cityArray.length; i++) {
						var cityElement = cityArray[i];
						var city = cityElement.innerHTML;
						if (city == "上海") {
							//continue;
							break;
						}
						console.log(city);
					}
				});

				//以jQuery对象.each(function( ){ })遍历元素
				$("#secondButton").click(function() {
					var cityArray = $("#city li");
					cityArray.each(function() {
						var city = this.innerHTML;
						console.log(city);
						var jQueryCity = $(this);
						city = jQueryCity.html();
						console.log(city);
						if (city == "上海") {
							return false;
						}
					});
				});

				//以jQuery对象.each(function(index,element){ })遍历元素
				$("#thirdButton").click(function() {
					var cityArray = $("#city li");
					cityArray.each(function(index, element) {
						var city = element.innerHTML;
						console.log(index + " " + city);
						var jQueryCity = $(element);
						city = jQueryCity.html();
						console.log(index + " " + city);
						if (city == "上海") {
							return false;
						}
					});
				});

				//以jQuery.each(object, [function( ){ }])遍历元素
				$("#fourthButton").click(function() {
					var cityArray = $("#city li");
					$.each(cityArray, function() {
						var city = this.innerHTML;
						console.log(city);
						var jQueryCity = $(this);
						city = jQueryCity.html();
						console.log(city);
						if (city == "上海") {
							return false;
						}
					});
				});

				//以jQuery.each(object, [function(index,element){ }])遍历元素
				$("#fifthButton").click(function() {
					var cityArray = $("#city li");
					$.each(cityArray, function(index, element) {
						var city = element.innerHTML;
						console.log(index + " " + city);
						var jQueryCity = $(element);
						city = jQueryCity.html();
						console.log(index + " " + city);
						if (city == "上海") {
							return false;
						}
					});
				});

				//以for(元素对象 of 集合对象)遍历元素
				$("#sixthButton").click(function() {
					console.log("请引入jQuery3.0及其以上版本");
					// var cityArray = $("#city li");
					// for (li of cityArray) {
					// 	console.log($(li).html());
					// }
				});

			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者:谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>

		<input type="button" value="以JavaScript遍历元素" id="firstButton" />
		<br /><br />
		<input type="button" value="以jQuery对象.each(function( ){ })遍历元素" id="secondButton" />
		<input type="button" value="以jQuery对象.each(function(index,element){ })遍历元素" id="thirdButton" />
		<br /><br />
		<input type="button" value="以jQuery.each(object, [function( ){ }])遍历元素" id="fourthButton" />
		<input type="button" value="以jQuery.each(object, [function(index,element){ }])遍历元素" id="fifthButton" />
		<br /><br />
		<input type="button" value="以for(元素对象 of 集合对象)遍历元素" id="sixthButton" />
		<br /><br />

		<ul id="city">
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
			<li>重庆</li>
		</ul>

	</body>
</html>

在这里插入图片描述

展开阅读全文

150讲轻松搞定Python网络爬虫

05-16
【为什么学爬虫?】        1、爬虫入手容易,但是深入较难,如何写出高效率的爬虫,如何写出灵活性高可扩展的爬虫都是一项技术活。另外在爬虫过程中,经常容易遇到被反爬虫,比如字体反爬、IP识别、验证码等,如何层层攻克难点拿到想要的数据,这门课程,你都能学到!        2、如果是作为一个其他行业的开发者,比如app开发,web开发,学习爬虫能让你加强对技术的认知,能够开发出更加安全的软件和网站 【课程设计】 一个完整的爬虫程序,无论大小,总体来说可以分成三个步骤,分别是: 网络请求:模拟浏览器的行为从网上抓取数据。 数据解析:将请求下来的数据进行过滤,提取我们想要的数据。 数据存储:将提取到的数据存储到硬盘或者内存中。比如用mysql数据库或者redis等。 那么本课程也是按照这几个步骤循序渐进的进行讲解,带领学生完整的掌握每个步骤的技术。另外,因为爬虫的多样性,在爬取的过程中可能会发生被反爬、效率低下等。因此我们又增加了两个章节用来提高爬虫程序的灵活性,分别是: 爬虫进阶:包括IP代理,多线程爬虫,图形验证码识别、JS加密解密、动态网页爬虫、字体反爬识别等。 Scrapy和分布式爬虫:Scrapy框架、Scrapy-redis组件、分布式爬虫等。 通过爬虫进阶的知识点我们能应付大量的反爬网站,而Scrapy框架作为一个专业的爬虫框架,使用他可以快速提高我们编写爬虫程序的效率和速度。另外如果一台机器不能满足你的需求,我们可以用分布式爬虫让多台机器帮助你快速爬取数据。   从基础爬虫到商业化应用爬虫,本套课程满足您的所有需求! 【课程服务】 专属付费社群+每周三讨论会+1v1答疑
©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值