<!DOCTYPE html>

<html>

  <head>

    <title>02_commonMethod.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">

    <meta name="description" content="this is my page">

    <meta name="content-type" content="text/html; charset=UTF-8">

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

	<script type="text/javascript">

    	$(document).ready(function() {

    		$("#btn1").click(function() {

    			// $("#select").empty();

    			// 尝试清空，输入框：input1，input2

    			// 只能remove一次，多次怎么办？用户再次填写！

    			// $("#input1").removeAttr("value");

    			// $("#input1").attr("value", "");

    		});

    		$("#btn2").click(function() {

    			// 也可以用id选择器或者class选择器等去取。

    			// 这里通过一种特殊的方式去取值。          index不可省略，是循环的计数器

    			$("input[type='text']").each(function (index, input) {

					// jQuery中，遍历每次获得的结果是DOM对象，并不是jQuery对象。

    				alert($(input).val());

					alert($(this).val());

				});

    			// 以上便是局部的each方法。

    		});

    		$("#btn3").click(function() {

    			var array = [1, 2, true, "hi"]; // 建立一个数组

    			// 此方法是全局的each方法，需要传入值。

    			// 同样得到的应该是DOM对象，只不过我们这里传入的数组是js的基础类型数组

    			// 所以这里直接输出了，不用转成jQuery对象！

    			// 这里的i等同上面的index，obj就是实际的对象。

    			$.each(array, function(i, obj) {

    				// alert(obj);

    				// 同样可以使用this来代替

    				alert(this);

    			});

    			$.each($("input[type='text']"), function(i, obj) {

    				// alert(obj);

    				// 同样可以使用this来代替

    				// alert(this);

    				alert($(this).val());

    			});

    		});

    		$("#btn4").click(function() {

    			$("#input2").focus();

    		});

    		$("#btn5").click(function() {

    			var str = $("#input1").val();

    			alert(str.length);

    			alert($.trim(str).length);

    		});

    	});

    </script>

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<style>

		.divClass{

			text-align: center;

			width: 100%;

		}

	</style>

  </head>

  <body>

    <!-- 一些常用的jQuery的方法 -->

	<!--

	empty()：

	删除匹配的元素集合中所有的子节点  

	each()：

	以每一个匹配的元素作为上下文来执行一个函数；

	每次执行传递进来的函数时，函数中的this关键字都会

	指向一个不同的DOM元素。

	$.each()：

	通用遍历方法，可用于遍历对象和数组。

	$.trim()：

	去掉字符串起始和结尾的空格。

	$.trim("   hello jQuery!   ");去掉字符串起始和结尾的空格。

	focus()：

	定焦或当前元素获得焦点时，把光标定位到某一个位置，就不用点击鼠标了；

	增强了用户体验。

	 -->

	 <div class="divClass">

    <br>

    <input type="text" id="input1" value="输入框1"><br>

    <input type="text" id="input2" value="输入框2"><br><br>

    <select id="select">

    	<option>Java</option>

    	<option>IOS</option>

    	<option>UI</option>

    </select>

    <input type="button" value="empty()清空select" id="btn1">

    <br><br>

    <input type="button" value="each()遍历所有输入框的值" id="btn2">

    <br><br>

    <input type="button" value="$.each()遍历数组" id="btn3">

    <br><br>

    <input type="button" value="focus()定焦到输入框2" id="btn4">

    <br><br>

    <input type="button" value="$.trim()输入框中是否空字符串" id="btn5">

    </div>

  </body>

</html>

jQuery中的常用方法：empty()、each()、$.each()、$.trim()、focus()（二）的更多相关文章

  1. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  2. 【JQuery】jQuery中的常用方法小结

    1.层级选择器     后代选择器     "父元素  后代元素" 比如:$("div p") 选取div元素下所有的p元素 子元素选择器   "父元 ...

  3. jQuery中删除方法empty(),remove()和detach()的区别

    empty():清空匹配的元素集合中所有的子节点,自身节点和事件都未被删除. remove():这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.但除了这个元素本身 ...

  4. jQuery中清空元素.empty()和.html('')，两种方法的对比

    jQuery 中有 .empty() 和 .html() 两种方式,都能够清空所选父元素中的所有子元素.但是这两者清空元素的方式上,有着很大的区别: 1.empty() jQuery对象.empty( ...

  5. jquery中ajax常用方法

    index.html: <h3>$.get(url, [data], [callback], [type])<br/> $.post(url, [data], [callbac ...

  6. JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用

    html方法,给元素添加html代码或者清空html代码(参数为空字符串): append向元素的末尾添加html代码: appendTo这个方法跟append方法的很像,只是要添加的html代码的目 ...

  7. JQuery中trim函数的具体实现代码

    由于Javascript 1.8.1 之前的版本,没有内置 trim 函数,所以 JQuery 对它有自己的实现.不同的JQuery版本,trim函数的实现也不尽相同. 阅读本文需要掌握正则表达式用法 ...

  8. jquery中通过trim() length 判断数据是否有值

    在jquery中可以通过如下方式判断某一个字符串是否有值,结合if else if 语句进行业务逻辑的处理 <!DOCTYPE html> <html lang="en&q ...

  9. jQuery中删除节点方法remove()、detach()、empty()分析

    jQuery中提供了三种删除节点的方法:remove().detach().empty(),本文详细分析这三种方法. 最容易区分的是empty(),该方法严格上属于“清空节点”,即删除其子节点,自身并 ...

随机推荐

  1. 在 .NET 中创建对象的几种方式的对比

    在 .net 中,创建一个对象最简单的方法是直接使用 new (), 在实际的项目中,我们可能还会用到反射的方法来创建对象,如果你看过 Microsoft.Extensions.DependencyI ...

  2. 【LeetCode】974. 和可被 K 整除的子数组

    974. 和可被 K 整除的子数组 知识点:数组:前缀和: 题目描述 给定一个整数数组 A,返回其中元素之和可被 K 整除的(连续.非空)子数组的数目. 示例 输入:A = [4,5,0,-2,-3, ...

  3. js实现0ms延时定时器的几种方式

    这两天看到一篇介绍<如何实现准时的 setTimeout?>的文章,文章起源于一道面试题:有什么办法让setTimeout准时呀?具体文章内容可查看附录[1],看完之后,引起了我对setT ...

  4. 简单快速安装Apache+PHP+MySql服务环境（三）—— 下载安装phpmyadmin

    为了方便在Linux上操作mysql数据库,打算安装一个phpmyadmin,不过在下载安装的过程中出现了一些坑,特此记录. 1. 在官网上下载phpmyadmin https://files.php ...

  5. 【贪心+排序】凌乱的yyy / 线段覆盖 luogu-1803

    题目描述 现在各大oj上有n个比赛,每个比赛的开始.结束的时间点是知道的. yyy认为,参加越多的比赛,noip就能考的越好(假的) 所以,他想知道他最多能参加几个比赛. 由于yyy是蒟蒻,如果要参加 ...

  6. fiddler抓取手机模拟器数据

    引自:https://blog.csdn.net/lengdaochuqiao/article/details/88170522 1.下载最新版fiddler ,强烈建议在官网下载:https://w ...

  7. CreateWindow() -- 创建普通的窗口

    (1)函数原型 1 HWND CreateWindow( 2 LPCTSTR lpClassName, //pointer to register class name 3 LPCTSTR lpWin ...

  8. python中的生成器，迭代器及列表生成式

    列表生成器:  即List Comprehensions. 在python中,可通过内置的强大有简单的生成式来创建列表.例如创建一个1到10的列表list [1, 2, 3, 4, 5, 6, 7, ...

  9. SickOs1.2靶机

    仅供个人娱乐 靶机信息 靶机下载地址:https://www.vulnhub.com/entry/sickos-12,144/一.主机发现  arp-scan -l 二.端口扫描 1. masscan ...

  10. YsoSerial 工具常用Payload分析之Common-Collections7（四）

    前言 YsoSerial Common-Collection3.2.1 反序列化利用链终于来到最后一个,回顾一下: 以InvokerTranformer为基础通过动态代理触发AnnotationInv ...