<!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. 在 Intenseye，为什么我们选择 Linkerd2 作为 Service Mesh 工具(Part.2)

    在我们 service mesh 之旅的第一部分中,我们讨论了"什么是服务网格以及我们为什么选择 Linkerd2?".在第二部分,我们将讨论我们面临的问题以及我们如何解决这些问题 ...

  2. 手把手教你用java实现二分查找树及其相关操作

    二分查找树(Binary Search Tree)的基本操作有搜索.求最大值.求最小值.求前继.求后继.插入及删除. 对二分查找树的进行基本操作所花费的时间与树的高度成比例.例如有n个节点的完全二叉树 ...

  3. odoo前后端交互详解

    为了简单叙述,暂时不考虑多个db的情况(主要是懒得说没有db或者多个db实例的情况)当odoo指定数据库开启服务时(也就是odoo-bin -d <some_db_name> ),我们使用 ...

  4. LS-DYNA SMP R11.1.0 for Win64安装破解教程

    LS-DYNA SMP R11.1.0是一款极其强大的有限元仿真分析工具,可以模拟现实世界的问题.主要用于分析结构的非线性响应等操作,其全自动接触分析和广泛的材料模型使全球用户能够解决复杂的现实问题. ...

  5. element UI+vue关于日期范围选择的操作，picker-options属性的使用

    一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...

  6. 适合普通大学生的 Java 后端开发学习路线

    大家好,我是帅地. 接下来的一段时间,帅地会总结各种技术栈的学习路线,例如 Java 开发,C++ 开发,python 开发,前端开发等等,假如你没有明确的目标,或许可以按照我说的学习路线来学习一波, ...

  7. java时间工具类型,格式化时间,最近7天 月初 月末 季度 月度 时间格式化 等等

    package com.tz.util; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util. ...

  8. QML用同一模版多开主窗口

    如何动态地创建多个长的一样的主窗口哪(数据当然不一样), 用QML也是可以实现的. 简单的地说, 就是调用多次load即可. QCoreApplication::setAttribute(Qt::AA ...

  9. python代码下载m3u8视频

    代码如下: # -*- coding: utf-8 -*- import requests import re import os import base64 from Crypto.Cipher i ...

  10. 小马哥的 Java 项目实战营学习笔记（1）

    小马哥的 Java 项目实战营 小马哥的 Java 项目实战营 第二节:数据存储之 JDBC JDBC 核心 API 数据源 接口 - javax.sql.DataSource获取方式 1.普通对象初 ...