[前端 2]常用的JQuery和Dom页面取值与赋值
2016-04-09 23:47
615 查看
导读:书到用时方恨少,需要基础知识的时候,才悔恨自己没有总结学习好。前段时间调了好长时间的页面,突然发现自己之前不怎么在意的取值和赋值,真的是自己一个很薄弱的地方,有时候查半天都找不到一个对的,现在用自己的博客总结总结。以后直接查自己的博客,本篇博客纯属笔记性的文章。
$("#OneLevelOptions option:selected").attr("value");取到的是id:1
$("#OneLevelOptions option:selected").attr("text");取到的是文本:测试
注意,在select 中,一般在使用append属性前,会首先应用empty()。而html()则不必,前者为追加,后者直接替换。
$("#goodFields").html(“赋值”)
测试
<span id="span">我们</span>
</div>
$("#id").empty();移除所有的内容,包括节点和文本,只剩下<div id="id"></div>
$("#id").html("");清空所有的内容,剩下<div id="id"><span id="span"></span></div>
这个东西其实也是常用到的,就是一个按钮来回的换不同的执行效果。我以前都觉得我用不上,结果真就用上了。
说起来,调了好几天的前台输入规范性问题,感觉给我更多的倒不是写了几个验证,而是一种对输入的规范、正确,以及对用户的一种引导思想。其实,写代码还是很好玩的。
一、基本取值和赋值
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,其实效率真的非常低,接下来也要总结一下传值。说起来,调了好几天的前台输入规范性问题,感觉给我更多的倒不是写了几个验证,而是一种对输入的规范、正确,以及对用户的一种引导思想。其实,写代码还是很好玩的。
相关文章推荐
- 22、(转载)jQueryMobile 知识点总结
- jQuery旋转插件jqueryrotate 图片旋转
- jquery图片3D旋绕效果 rotate3Di的操作
- 懒得加载jquery
- 跨域解决方案之一---->JQuery.Ajax JSONP解决跨域访问
- jQuery中添加自定义或函数方法
- jQuery事件
- jQuery学习(一)
- jQuery选择器
- 使用jquery.qrcode生成二维码
- Myeclipse里导入jQuery.js 时出现错误打红叉的解决方法
- JQuery解析XML数据的几个例子
- 15 个最佳 jQuery 翻书效果插件
- jQuery属性操作
- jQuery不起作用,八成是jQuery语句出错了
- jQuery validate 插件详解 转载
- <jQuery>首页图片切换/轮播
- jquery 验证插件简单原理
- <jQuery>导航的滚动锚点
- JQuery ajax请求一直返回Error(parsererror)