[前端 2]常用的JQuery和Dom页面取值与赋值
导读:书到用时方恨少,需要基础知识的时候,才悔恨自己没有总结学习好。前段时间调了好长时间的页面,突然发现自己之前不怎么在意的取值和赋值,真的是自己一个很薄弱的地方,有时候查半天都找不到一个对的,现在用自己的博客总结总结。以后直接查自己的博客,本篇博客纯属笔记性的文章。
一、基本取值和赋值
1.1,比较通用的方法:
$("#id").val();和document.getElementById("id").value、$("#id").text();
1.2,select 标签
<option value="1">测试</option>
$("#OneLevelOptions option:selected").attr("value");取到的是id:1
$("#OneLevelOptions option:selected").attr("text");取到的是文本:测试
注意,在select 中,一般在使用append属性前,会首先应用empty()。而html()则不必,前者为追加,后者直接替换。
1.3,span标签
$("#goodFields").html()
$("#goodFields").html(“赋值”)
1.4,清空
<div id="id">
测试
<span id="span">我们</span>
</div>
$("#id").empty();移除所有的内容,包括节点和文本,只剩下<div id="id"></div>
$("#id").html("");清空所有的内容,剩下<div id="id"><span id="span"></span></div>
二、其他常用属性
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!doctype html>
<html>
<head>
<script>
function changetext(){
var test=document.getElementById("btn").value;
if(test=="编辑"){
alert("haven't changed");
document.getElementById("btn").value="保存";
return;
}else{
document.getElementById("btn").value="编辑";
alert("have changed");
}
}
</script>
</head>
<body>
<input id="btn" type="button" value="编辑" onclick="changetext()"></input>
</body>
</html> </span>
这个东西其实也是常用到的,就是一个按钮来回的换不同的执行效果。我以前都觉得我用不上,结果真就用上了。
三、常用的验证
3.1,邮箱验证
<span style="font-family:KaiTi_GB2312;font-size:18px;">function checkEmail(){
var email = $.trim($("#email").val());
if(email != "" && email != null){
var reemail = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if(reemail.test(email)){
return true;
}else{
$("#checkEmail").text("邮箱格式不正确");
return false;
}
}else{
$("#checkEmail").text("请输入邮箱");
}
}</span>
3.2,手机号验证
<span style="font-family:KaiTi_GB2312;font-size:18px;">var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test($("#phone").val()))
{
alert('请输入有效的手机号码!');
return false;
} </span>
四、总结
都是些很简单的东西,但开始写的时候,是真的不会。还有就是,抄人家的代码抄多了,一遇到传值,就上Ajax,其实效率真的非常低,接下来也要总结一下传值。
说起来,调了好几天的前台输入规范性问题,感觉给我更多的倒不是写了几个验证,而是一种对输入的规范、正确,以及对用户的一种引导思想。其实,写代码还是很好玩的。
[前端 2]常用的JQuery和Dom页面取值与赋值的更多相关文章
- jQuery 表单元素取值与赋值方法总结
一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" clas ...
- jQuery对html元素取值与赋值
以下总结了常用的jQuery选择器对html元素取值与赋值 Textbox: var str = $('#txt').val(); $('#txt').val("Set Lbl Value ...
- jQuery设计思想之取值和赋值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery radio|checkbox的取值与赋值
文章简单即是美[我说的是技术博客] |--radio |--checkbox 参考: http://blog.csdn.net/gd2008/article/details/6951208 h ...
- jQuery对html元素的取值与赋值实例详解
jQuery对html元素的取值与赋值实例详解 转载 2015-12-18 作者:欢欢 我要评论 这篇文章主要介绍了jQuery对html元素的取值与赋值,较为详细的分析了jQuery针对常 ...
- jQuery对表单元素的取值和赋值操作代码
使用常规的思路:$(“#keyword”).value 取值是取不到的,因为此时$(‘#keydord’)已经不是个element,而是个jquery对象,所以应该使用:$(“#keyword”).v ...
- jQuery对表单元素的取值和赋值操作代码(转)
使用常规的思路:$("#keyword").value 取值是取不到的,因为此时$('#keydord')已经不是个element,而是个jquery对象,所以应该使用:$(&qu ...
- Jquery常用操作:checkbox、select取值,radio、checkbox、select选中及其相关
常用Jquery操作:checkbox取值.select取值.radio选中.checkbox选中.select选中及其相关: 1.影藏页面元素 使用jquery真的很方便,比如要控制div的显示与隐 ...
- html常用标签的取值和赋值操作
我们在html页面当中,面对各种各样的标签,经常需要处理取值和赋值的问题,下面,就把常见的一些html标签元素的取值和赋值操作进行总结整理,以后备用. 1.button:改变button按钮上面的值, ...
随机推荐
- 黄聪:Dsicuz x2.5、X3、X3.2如何去掉域名后面的/forum.php
Dsicuz x2.5去掉域名后面的/forum.php 1, 后台--全局--域名设置--应用域名--设置默认域名为访问域名就可以,如:www.xxxxx.com 上面2种方法都可以去掉域名后面的/ ...
- Scala第一章学习笔记
面向对象编程是一种自顶向下的程序设计方法.用面向对象方法构造软件时,我们将代码以名词(对象)做切割,每个对象有某种形式的表示服(self/this).行为(方法).和状态(成员变量).识别出名词并且定 ...
- PLSQL_批量压缩表Table Compress(案例)
2015-04-01 Created By BaoXinjian
- OAF_VO系列3 - Binding Style绑定方式
在OAF VO开发中,Binding Style主要用于对VO的where clause做动态传值,总共有三种方式 1. Oracle Named 2. Oracle Posi ...
- gridView--GridView关于间距的属性值介绍
android:columnWidth 设置列的宽度.关联的方法为:setColumnWidth(int) android:gravity 设置此组件中的内容在组件中的位置.可选的值有:top.b ...
- Java多线程之银行出纳员仿真
package concurrent; import java.util.LinkedList; import java.util.PriorityQueue; import java.util.Qu ...
- 打造高性能Java应用需掌握的5大知识
这篇文章节选自<java performance>,对java性能比较关心的同学大概都知道这本书,性能这个东西可能是很多同学在日常写java code的时候很少去关心的,但是在我们写cod ...
- C#导出带有格式的Excel(列宽,合并单元格,显示边框线,加背景颜色等)
源地址:http://blog.sina.com.cn/s/blog_74f702e60101au55.html 导出excel相关设置:http://blog.csdn.net/wanmingtom ...
- nginx 均衡负载配置
nginx详细配置介绍: 参考资料:http://blog.csdn.net/xmtblog/article/details/42295181 配置实例: // nginx服务器虚拟为代理服务器和we ...
- android github
Action Bars ActionBarSherlock Extended ActionBar FadingActionBar GlassActionBar v7 appcompat library ...