<!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学习笔记

    转载:博主主页 博主的其他笔记汇总 : 学习数据结构与算法,学习笔记会持续更新: <恋上数据结构与算法> 学习Java虚拟机,学习笔记会持续更新: <Java虚拟机> 学习Ja ...

  2. height设置100%不起作用

    详细讲解了原因:http://www.webhek.com/post/css-100-percent-height.html

  3. artTemplate学习

    参考:https://www.2cto.com/kf/201711/699818.html 参考:https://blog.csdn.net/ruisenLi/article/details/8841 ...

  4. Android系统编程入门系列之界面Activity响应丝滑的传统动画

    上篇文章介绍了应用程序内对用户操作响应的相关方法位置,简单的响应逻辑可以是从一个界面Activity跳转到另一个界面Activity,也可以是某些视图View的相对变化.然而不管是启动一个界面执行新界 ...

  5. springMVC-5-视图解析器

    视图和视图解析器工作流程 第一步:获取到ModelAndView对象 请求处理方法执行完成后,无论返回是String,View 还是 ModeMap 类型,Spring MVC 也会在内部将它们装配成 ...

  6. js实现0ms延时定时器的几种方式

    这两天看到一篇介绍<如何实现准时的 setTimeout?>的文章,文章起源于一道面试题:有什么办法让setTimeout准时呀?具体文章内容可查看附录[1],看完之后,引起了我对setT ...

  7. P5042 丢失的题面

    P5042 丢失的题面 顺序:10 - 1 - 7 - 8 - 9 - 4 - 5 - 6 - 2 - 3 Point 10 读入,特判,输出. 读入的英文意思是让选手输出自己的程序本身,这个题的确存 ...

  8. 自动化测试(1)selenium+python+chrome 连接测试

    环境准备: python版本:3.8.4 开发工具:pycharm 使用chrome和对应的webdriver http://npm.taobao.org/mirrors/chromedriver/ ...

  9. Html模板引擎Handlerbars使用demo

    1.自定义demo <html> <head> <script src="./handlebars-v4.0.12.js"></scrip ...

  10. python里的StringIO

    Python2中StringIO调用方法如下: import StringIO iost = StringIO.StringIO() Python3中已将StringIO归入io,调用方法如下: im ...