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

最新推荐文章于 2022-09-08 15:30:22 发布

既过不念，未来不继

最新推荐文章于 2022-09-08 15:30:22 发布

阅读量2k

点赞数

分类专栏： ------【前端】 ◆知识探究

本文链接：https://blog.csdn.net/hhx0626/article/details/51108066

版权

◆知识探究同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

------【前端】

9 篇文章 0 订阅

订阅专栏

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

一、基本取值和赋值

1.1，比较通用的方法：

$("#id").val();和document.getElementById("id").value、$("#id").text();

1.2，select 标签

$("#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").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，其实效率真的非常低，接下来也要总结一下传值。

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

既过不念，未来不继

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
17
评论
[前端 2]常用的JQuery和Dom页面取值与赋值

导读：书到用时方恨少，需要基础知识的时候，才悔恨自己没有总结学习好。前段时间调了好长时间的页面，突然发现自己之前不怎么在意的取值和赋值，真的是自己一个很薄弱的地方，有时候查半天都找不到一个对的，现在用自己的博客总结总结。以后直接查自己的博客，本篇博客纯属笔记性的文章。一、基本取值和赋值1.1，比较通用的方法：$("#id").val();和document.getElement
复制链接

扫一扫