JS正则表达式、全选功能、json介绍

正则表达式

概述

又称为规则表达式

作用

按照某种规则匹配符合条件的字符串

主要模块

1.正则匹配:可以测试字符串的内容是否与正则相匹配。
2.替换文本:根据模式匹配字符串的特定内容进行替换和删除。

创建正则表达式

1.通过字面量定义 eg:var reg = /abc/i;(包含abc的)
注意一般情况下正则表达式不要出现空格,除非匹配空格
2.通过new的方式 eg:var reg = new RegExp(“a”,”i”);

正则方法test()

检索字符串指定的值,返回true或false

	<script>
			function test1(){
				var sname = document.getElementById("sname");
				var username = document.getElementsByName("username")[0].value;
				// 编写正则表达式
				var reg = /abc/;
				// 验证规则
				var flag = reg.test(username);
				if(flag){
					sname.innerHTML = "<strong style='color:green'>验证通过</strong>";
				} else{
					sname.innerHTML = "<strong style='color:red'>验证失败</strong>";
				}
			}
		</script>
	</head>
	<body>
		<input type="text" name="username" value="" /><span id="sname"></span>
		<input  type="button" value="提交" onclick="test1();"/>
	</body>

注意onsubmit只有等于true的时候才提交表单

全选

    <script>
    	// 网页加载事件
      	window.onload = function(){
      		// 得到全部复选框
      		var items = document.getElementsByName("items")	;
      		// 全选和全不选
      		document.getElementById("all").onchange = function(){
      			//var all = document.getElementById("all");
      			/*for (var i = 0; i < items.length; i++) {
      				items[i].checked = this.checked;
      			}*/
      			items.forEach(function(element){
      				element.checked = !element.checked;
      			});
      		}
      		// 全选
      		document.getElementById("checkedAll").onclick = function(){
      			for (var i = 0; i < items.length; i++) {
      				items[i].checked = true;
      				//items[i].setAttribute("checked","checked");
      			}
      		}
      		// 全不选
      		document.getElementById("checkedNo").onclick = function(){
      			for (var i = 0; i < items.length; i++) {
      				items[i].checked = false;
      			}
      		}
      		// 反选
      		document.getElementById("checkRev").onclick = function(){
      			for (var i = 0; i < items.length; i++) {
      				/*if(items[i].checked){
      					items[i].checked = false;
      				} else{
      					items[i].checked = true;
      				}*/
      				items[i].checked = !items[i].checked;
      			}
      		}
      		// 提交
      		document.getElementById("submit").onclick = function(){
      			// 用来存储选中的信息
      			var result = "";
      			for (var i = 0; i < items.length; i++) {
      				if(items[i].checked){
      					result += items[i].value + "\n";
      				}
      			}
      			alert(result);
      		}
      	}
    </script>
</head>
<body>
    <form action="/" method="post">
        <div class="container">
            <label>你爱好的运动是?</label><input type="checkbox" name="name"  id="all" />全选/反选
            <p>
                <input type="checkbox" name="items" value="足球" />足球
                <input type="checkbox" name="items" value="篮球" />篮球
                <input type="checkbox" name="items" value="排球" />排球
                <input type="checkbox" name="items" value="台球" />台球
            </p>
            <p>
                <input type="button" id="checkedAll" value="全选"/>
                <input type="button" id="checkedNo" value="全不选" />
                <input type="button" id="checkRev" value="反选" />
                <input type="button" id="submit" value="提交" />
            </p>
        </div>
    </form>
</body>

Json

简介
  1. JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
  2. JSON 是轻量级的文本数据交换格式
  3. JSON 是存储和交换文本信息的语法。类似 XML。
  4. JSON 比 XML 更小、更快,更易解析。
  5. JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。
  6. JSON 具有自我描述性,更易理解。

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 JavaScript 对象。

JSON 语法规则
  1. 数据在名称/值对中
  2. 数据由逗号分隔
  3. 大括号保存对象
  4. 中括号保存数组
  5. JSON 名称/值对
    JSON 数据的书写格式是:名称/值对。例:“name”:“tom” 等价于 name=“tom”
  6. JSON 值
    JSON 值可以是:数字、字符串、逻辑值、数组、对象、null
Json对象

注意对象不能用for循环遍历

对象语法
  1. 实例:{ “name”:“zhangsan”, “age”:20, “sex”:“男” }
  2. JSON 对象使用在大括号({})中书写。
  3. 对象可以包含多个 key/value(键/值)对。
  4. key 必须是字符串,value 可以是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。
  5. key 和 value 中使用冒号(:)分割。
  6. 每个 key/value 对使用逗号(,)分割。
访问对象值

可以使用点号(.)来访问对象的值;也可以使用中括号([])来访问对象的值

循环对象

可以使用 for-in 来循环对象的属性

嵌套 JSON 对象

JSON 对象中可以包含另外一个 JSON 对象

json 对象和 json 字符串的区别:
  1. json 对象:var str1 = { “name”: “zhangsan”, “sex”: “man” };
  2. json字符串:var str2 = ‘{ “name”: “wangwu”, “sex”: “man” }’;
		<script>
			//访问对象值
			var obj = {"name":"张三","age":20};
			document.write(obj.name + "<br/>");
			document.write(obj["age"] + "<br/>");
			//循环遍历对象
			var car = {"name":"audi","color":"red","speed":300};
			// c-->key
			// car[c]-->value
			for(c in car){
				document.write(c + "<br/>");	
			}
			//嵌套JSON对象
			var user = {
				"name":"eric",
				"age":20,
				"marry":true,
				"account":{
					"taobao":"tb1",
					"baidu":"bd1",
					"jingdong":"jd1"
				},
				"city":"beijing"
			};
			document.write(user.account.taobao + "<br/>");
			for(u in user){
				document.write(user[u] + "<br/>");
			}
			for(u in user.account){
				document.write(user.account[u] + "<br/>");
			}
		</script>
json数组
  1. JSON 数组在中括号中书写。
  2. JSON 中数组值必须是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。
数组作为 JSON 对象

实例:[ “Google”, “Tengxun”, “Taobao” ]

JSON 对象中的数组

{
“name”:“zhangsan”,
“age”:20,
“hobby”:[ “swimming”, “running”, “playgame” ]
}
我们可以使用索引值来访问数组:x = myObj.hobby[0];可以使用for循环或者 for-in 来访问数组。

		<script>
			//数组作为json对象
			var site = ["baidu","tengxun","alibaba","jingdong"];
			document.write(site[0] + "<br/>");
			//json对象中的数组
			var user = {
				"name":"tom",
				"age":20,
				"hobby":["swim","running","sing"]
			};
			document.write(user.hobby[0] + "<br/>");
			//使用for遍历循环数组
			for (var i = 0; i < user.hobby.length; i++) {
				document.write(user.hobby[i]+"<br/>");
			}
			//修改数组值
			user.hobby[2] = "playgame";
			//删除数组元素
			delete user.hobby[0];
			//使用for in 遍历循环数组
			for (i in user.hobby) {
				document.write(user.hobby[i]+"<br/>");
			}
		</script>
将数据转化为js对象
  1. JSON 通常用于与服务端交换数据。
  2. 在接收服务器数据时一般是字符串。
  3. 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
  4. 语法:JSON.parse(text[, reviver])

参数说明:text:必需, 一个有效的 JSON 字符串。reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。

  <script>
  	//JSON解析实例
  	var str = '{"name":"zhangsan","age":20}';
  	var obj = JSON.parse(str);
  	document.write(obj.name);
  </script>
eval
  1. 作用:JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
  2. eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中
    例:var obj = eval ("(" + txt + “)”);
    var txt=’{“user”:[’+
    ‘{“account”:“admin”,“pwd”:“admin”},’+
    ‘{“account”:“user”,“pwd”:“user”}]}’;
<script>
	var txt='{"user":['+
			'{"account":"admin","pwd":"admin"},'+
			'{"account":"user","pwd":"user"}]}';
	var obj = eval("("+txt+")");
	document.write(obj.user[0].account);
</script>
json实例
<script>
	// 从服务器接受的数据
	var json = {
		"name":"搜狐",
		"url":"http://www.sohu.com"
	};
	function reload(){
		// 实现数据绑定
		document.getElementById("name").innerText = json.name;
		document.getElementById("url").innerText = json.url;
	}
</script>
</head>
<body onload="reload();">
<p>
	网站名称: <span id="name"></span><br /> 
	网站地址: <span id="url"></span><br />  
</p>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值