jQuery中的常用方法:empty()、each()、$.each()、$.trim()、focus()(二)
<!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()(二)的更多相关文章
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- 【JQuery】jQuery中的常用方法小结
1.层级选择器 后代选择器 "父元素 后代元素" 比如:$("div p") 选取div元素下所有的p元素 子元素选择器 "父元 ...
- jQuery中删除方法empty(),remove()和detach()的区别
empty():清空匹配的元素集合中所有的子节点,自身节点和事件都未被删除. remove():这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.但除了这个元素本身 ...
- jQuery中清空元素.empty()和.html(''),两种方法的对比
jQuery 中有 .empty() 和 .html() 两种方式,都能够清空所选父元素中的所有子元素.但是这两者清空元素的方式上,有着很大的区别: 1.empty() jQuery对象.empty( ...
- jquery中ajax常用方法
index.html: <h3>$.get(url, [data], [callback], [type])<br/> $.post(url, [data], [callbac ...
- JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用
html方法,给元素添加html代码或者清空html代码(参数为空字符串): append向元素的末尾添加html代码: appendTo这个方法跟append方法的很像,只是要添加的html代码的目 ...
- JQuery中trim函数的具体实现代码
由于Javascript 1.8.1 之前的版本,没有内置 trim 函数,所以 JQuery 对它有自己的实现.不同的JQuery版本,trim函数的实现也不尽相同. 阅读本文需要掌握正则表达式用法 ...
- jquery中通过trim() length 判断数据是否有值
在jquery中可以通过如下方式判断某一个字符串是否有值,结合if else if 语句进行业务逻辑的处理 <!DOCTYPE html> <html lang="en&q ...
- jQuery中删除节点方法remove()、detach()、empty()分析
jQuery中提供了三种删除节点的方法:remove().detach().empty(),本文详细分析这三种方法. 最容易区分的是empty(),该方法严格上属于“清空节点”,即删除其子节点,自身并 ...
随机推荐
- 【学习笔记】Github的使用
在github上上传项目代码 在github官网上新建自己的仓库,需要写好标题和说明文件,然后复制自己的仓库地址 在要上传到的本地project中右键, Git bash here,接着输入 git ...
- Spring RestTemplate 之post请求
●post请求:在RestTemplate中,POST请求可以通过如下三个方法来发起,但post提交方式又有两种 formData 和 payLoad,而且接口设计与传统的浏览器使用的提交方式又有差异 ...
- Oracle19c 如何用rman duplicate 克隆一个数据库。(Active方式)
Oracle19c 如何用rman duplicate 克隆一个数据库. 首先克隆有两种方法,一种是Backup-Based,一种是Active方式.官网文档链接https://docs.oracle ...
- 旧VC项目dpiAware支持
起因 工作原因,需要维护一款VS2008 SP1开发的MFC项目, 发现WIN10高分辨率下显示模糊,不考虑升级VC版本情况下尝试解决 尝试 新版本VC中Manifest Tool>Input ...
- Python 爬取页面内容
import urllib.request import requests from bs4 import BeautifulSoup url = "http://www.stats.gov ...
- HTML5 socket
client: <!DOCTYPE html> <html> <head> <title></title> <meta http-eq ...
- QT经验(一)——按钮长按事件分析
引言 最近在做qt项目,需要对button按钮添加一个长按事件(比如点击按钮,开始运动.松开按钮,运动停止).查了些许资料,(差点误把QPushButton的press信号和长按事件混淆)在此记录一下 ...
- spingsecurity 前后端分离跨域,ajax无用户信息
1.自测时用的postman没有任何问题 2.和前端对接时发现登录不上,ajax Error 出错:{"readyState":0,"responseText" ...
- Cancer Cell | 肿瘤微环境渐进式调控AML治疗抵抗的分子机制
急性髓系白血病 ( acute myeloid leukemia, AML ) 是成年人常见的血液系统恶性肿瘤之一,主要表现为髓系原始细胞克隆性恶性增殖及正常造血细胞功能抑制.在AML基因突变图谱中, ...
- Mol Cell | 张令强/贺福初/魏文毅/刘翠华揭示线性泛素化调控血管生成新机制
景杰学术 | 报道 泛素化修饰作为主要的蛋白质翻译后修饰之一,与细胞周期.应激反应.信号传导和DNA损伤修复等几乎所有的生命活动密切相关[1].泛素分子通常含有7个赖氨酸残基,通过这些残基可以和其他泛 ...