[前端 2]常用的JQuery和Dom页面取值与赋值

时间:2022-03-18 20:08:34

导读:书到用时方恨少,需要基础知识的时候,才悔恨自己没有总结学习好。前段时间调了好长时间的页面,突然发现自己之前不怎么在意的取值和赋值,真的是自己一个很薄弱的地方,有时候查半天都找不到一个对的,现在用自己的博客总结总结。以后直接查自己的博客,本篇博客纯属笔记性的文章。


一、基本取值和赋值

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,其实效率真的非常低,接下来也要总结一下传值。

说起来,调了好几天的前台输入规范性问题,感觉给我更多的倒不是写了几个验证,而是一种对输入的规范、正确,以及对用户的一种引导思想。其实,写代码还是很好玩的。