<!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. 【LeetCode】54. 螺旋矩阵

    54. 螺旋矩阵 知识点:数组: 题目描述 给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素. 示例 输入:matrix = [[1,2,3],[4,5, ...

  2. 网络损伤仪WANsim--不同的部署方式

    网络损伤仪WANsim的业务口在逻辑上是不存在IP地址与MAC地址的,所以,WANsim可以串接在测试拓扑中的任意位置,只需要确保有流量通过WANsim即可. 不同的拓扑结构会对测试的结果造成影响.在 ...

  3. 每天五分钟Go - 条件语句

    if语句 if 布尔表达式 { /* 在布尔表达式为 true 时执行 */ } else { /* 在布尔表达式为 false 时执行 */ } 如下代码 if a>10{ fmt.Print ...

  4. 一台电脑安装两个不同版本的MySQL

    背景: 本人电脑上已有mysql-8.0.12-winx64,并且可以使用.但由于工作需要,得使用mysql-5.5.59-winx64,已有mysql-5.5.59-winx64的解压好的安装包 参 ...

  5. [WinError 10013]以一种访问权限不允许的方式做了一个访问套接字的尝试

    Django报错截图如下: 原因分析:出现这种情况在Windows中很常见,就是端口被占用 解决步骤: 1:进入windows中的命令行窗口(win+R之后输入cmd就可以进去)   2:输入 net ...

  6. 插入排序（insertion_sort）——Python实现

      # 插入排序 # 作用:对给出的n个顺序不定的数进行排序 # 输入:任意数组A # 输出:按顺序排列的数组A # 时间复杂度 n(n-1) 至 (n(n-1))/2   # 插入排序过程 # 第一 ...

  7. 深入刨析tomcat 之---第21篇 tomcat 对jsp页面支持的实现原理

    writedby 张艳涛 web技术,以前的动态网页技术多是jsp页面,比如点击一个菜单目录,直接访问了一个LRJSDetailInput.jsp页面,这个页面 有<html><bo ...

  8. 10分钟物联网设备接入阿里云IoT平台

    前言最近尝试了一下阿里云IoT物联网平台,还是蛮强大的.在此记录一下学习过程.本教程不需要任何外围硬件,一台电脑和一根能上网的网线即可.算是一篇Hello World了.先上效果图 第一章 准备工作1 ...

  9. jquery 判断单/复选框是否被选中

    1 <div> 2 <span>高亮:</span><input type="checkbox" name="light&quo ...

  10. SAS启动时自动执行代码

    有时候我们希望SAS启动时自动执行已经编写好的程序,可以按照以下方法实现: 首先正常打开SAS,编写我们想要让SAS启动时自动执行的代码,例如获取桌面文件夹路径,以便在其他程序中引用这个路径. pro ...