<!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. Day12 抽象类、接口、内部类-面向对象编程（3）

    抽象类 abstract修饰符可以用来修饰方法也可以用来修饰类,如果修饰方法,那么该方法就是抽象方法;如果修饰类,那么该类就是抽象类: 抽象类中可以没有抽象方法,但是有抽象方法的类一定要声明为抽象类. ...

  2. Java8 DateTime API

    Java 8的日期/时间API,有篇不错的文章,直接转载 原文链接: journaldev 翻译: ImportNew.com- Justin Wu译文链接: http://www.importnew ...

  3. PAT甲级：1064 Complete Binary Search Tree (30分)

    PAT甲级:1064 Complete Binary Search Tree (30分) 题干 A Binary Search Tree (BST) is recursively defined as ...

  4. 更改Nginx网站根目录以及导致的403 forbidden问题

    Nginx采用默认配置,只修改了root的网站根目录位置,再访问网站的时候提示403Forbidden的错误. 仔细检查了新文件夹的权限,也对比了心就网站根目录的权限,都是一样的. 最后尝试关闭了SE ...

  5. PostgreSQL-WITH AS短语

    WITH提供了一种方式来书写在一个大型查询中使用的辅助语句.这些语句通常被称为公共表表达式或CTE,它们可以被看成是定义只在一个查询中存在的临时表.在WITH子句中的每一个辅助语句可以是一个SELEC ...

  6. 七个对我最重要的职业建议）--转载来自ruanyifeng博客

    原文:http://www.ruanyifeng.com/blog/2015/09/career-advice.html 一.不要别人点什么,就做什么 我的第一份工作,只干了8个月,那家公司就倒闭了. ...

  7. JS 实现一个 LRU 算法

    LRU 是 Least Recently Used 的缩写,即最近最少使用,是一种常用的页面置换算法,选择内存中最近最久未使用的页面予以淘汰. 可用的 NodeJS 库见node-lru-cache ...

  8. videojs文档翻译-SeekBar

    SeekBar 拖动条和进度条的容器. 使用PlayProgressBar作为其栏. 构造函数 new SeekBar(player, optionsopt) 创造此类的实例 Parameters: ...

  9. leetcode最短无序连续子数组

    平民解法: 既然是找最小数组,那就得到一个排序好的数组,然后直接和初试数组比对,用一个left,right分别记录从最初开始不同,到最后不同的小标,最后左右做差再加一,就能得到长度. 其他解法: 双指 ...

  10. 快速上手 Rook，入门云原生存储编排

    Rook 是一个开源 cloud-native storage orchestrator(云原生存储编排器),为各种存储解决方案提供平台.框架和支持,以与云原生环境进行原生集成. Rook 将存储软件 ...