<!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. Java 获取Word批注所标记的文本和图片

    [环境配置] 本文将通过Java程序代码来展示如何来获取Word批注所标注的文本和图片.这里使用的Word Jar包工具是Free Spire.Doc for Java,在pom.xml中按如下步骤配 ...

  2. Requests方法 -- 参数关联

    一.删除草稿箱1.参数这篇https://www.cnblogs.com/Teachertao/p/11144726.html 2.删除刚才保存的草稿 3.用 fiddler 抓包,抓到删除帖子的请求 ...

  3. 解决 Github 打不开或打开很慢的问题

    解决 Github 打不开或打开很慢的问题 方法一 一.确定 github 网站的 ip 打开网址:http://github.com.ipaddress.com/ 192.30.253.112 gi ...

  4. TheadLocal与synchronized

    深入比较TheadLocal模式与synchronized关键字 ThreadLocal模式synchronized关键字都用于处理多线程并发访问变量的问题,只是二者处理问题的角度和思路不同. 1)T ...

  5. 记一次Hvv中遇到的API接口泄露而引起的一系列漏洞

    引言 最近朋友跟我一起把之前废弃的公众号做起来了,更名为鹿鸣安全团队,后面陆续会更新个人笔记,有趣的渗透经历,内网渗透相关话题等,欢迎大家关注 前言 Hvv中的一个很有趣的漏洞挖掘过程,从一个简单的A ...

  6. 基于BIT数组实现全局功能开关

    前提 某一天巧合打开了sofa-bolt项目,查找部分源码,看到了项目中使用bit数组实现功能开关的特性,感觉这种方式可以借鉴,于是写下这篇文章. 原理 bit数组的布局如下: 由于每个bit都可以表 ...

  7. python2 与 python3 依赖包冲突问题

    原文链接   https://www.2cto.com/database/201805/749294.html 执行pip的时候取的是/usr/bin这里的pip,查看这里是否存在pip3,没有的话需 ...

  8. 解决iOS上网页滑动不流畅问题

    body { overflow:auto; /* 用于 android4+,或其他设备 */ -webkit-overflow-scrolling:touch; /* 用于 ios5+ */ }说明: ...

  9. jQuery 两个日期时间相减

    var sDate='2016-10-31';var eDate='2016-10-10'var sArr = sDate.split("-");var eArr = eDate. ...

  10. 白话JavaScript原型链和继承

    原型基础 每个函数都有一个prototype属性,指向函数的原型对象 每个对象都一个私有属性 __proto__, 默认指向其构造函数的prototype 在JS中所有函数都是Function构造出来 ...