document

最新推荐文章于 2024-10-02 05:39:15 发布

一只理智的龙

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量95

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/m0_64923277/article/details/127043807

版权

一、运算符

<body>
		请输入第一个数：<input type="text"  id="one"  /><br>
		请输入第二个数：<input type="text"  id="two"  /><br>
		运算符：<input style="background-color: green;" type="button" name="" id="jia" value="+" onclick="cal_l('+')"/>
		<input style="background-color: green;" type="button" name="" id="jian" value="-" onclick="cal_l('-')"/>
		<input style="background-color: green;" type="button" name="" id="cheng" value="*" onclick="cal_l('*')"/>
		<input style="background-color: green;" type="button" name="" id="chu" value="/" onclick="cal_l('/')"/><br>
		运算结果是：<input type="text" name="" id="result" value="" />
		
		<script type="text/javascript">
			// 创建一个函数cal_l
			function cal_l (a){
				// 获取第一个输入框内输入的数据
				var first = parseInt(document.getElementById("one").value)
				// 获取第二个输入框的数据
				var secend = parseInt(document.getElementById("two").value)
				// 声明一个变量存放运算后的结果
				var result
				if(a=="+"){
					result=parseInt(first)+parseInt(secend)
				} else if(a=="-"){
					result=parseInt(first)-parseInt(secend)
				} else if(a=="*"){
					result=parseInt(first)*parseInt(secend)
				}else{
					result=parseInt(first)/parseInt(secend)
				}
				 document.getElementById("result").value = result
			}
		</script>
		
	</body>

2.使用docunment获取标签的几种方式

<input type="button" id="btn" value="点击" />
		<div id="div1">
			这是div1
		</div>
		<div id="div2">
			这是div2
		</div>
		<div >
			这是div3
		</div>
		<ul>
			<li>列表项1</li>
			<li>列表项1</li>
			<li>列表项1</li>
			<li>列表项1</li>
		</ul>
		<span class="sp">
			这是一个span标签
		</span>
		<p class="sp"></p>
		性别:<input type="radio" name="sex" id="" value="男" />男
		<input type="radio" name="sex" id="" value="女" />女
		<input type="text" name="uname" value="value">
		<script type="text/javascript">
			//使用docunment获取标签的几种方式
			var div1=document.getElementById("div1")
			var div2=document.getElementById("div2")
			console.log(div1)
			console.log(div2)
			//如果这个标签有id属性，那么可以直接使用id的值赋值可以获得该标签
			console.log(btn)
			console.log(div1)
			btn.onclick=function(){
				alert("aa")
				//通过标签名来获取标签
				var divs=document.getElementsByName("div")
				console.log(divs)
				for(var i=0;i<divs.length;i++){
					console.log(divs[i])
				}
				//要获取到页面中所有应用了.sp的标签
				var sps=document.getElementsByClassName("sp")
				console.log(sps)
				sps[0].innerHTML="更改后的span"
				
				var sexs=document.getElementsByName("sex")
				console.log(sexs[0],value)
				
				console.log(document.querySelector("#div1"))
				console.log(document.querySelector("div"))
				console.log(document.querySelectorAll("div"))
			}
		</script>

3.格式约束

<input type="text" id="pwd">
		<input type="button" value="验证" id="btn">
		<script>
			document.getElementById("btn").onclick=function(){
				var pwd=document.getElementById("pwd").value
				var reg=/^[0-9a-zA-Z]{6}$/
				var isPwd=reg.test(pwd)
				console.log(isPwd)
				}
		</script>
	</body>

4.search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。

<script>
function myFunction() {
    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);
    document.getElementById("demo").innerHTML = n;
}
</script>

<button onclick="myFunction()">点我</button>
<p id="demo">Visit Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"Runoob");
    document.getElementById("demo").innerHTML = txt;
}
</script>

正则表达式模式

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以 \| 分隔的选项。

6.使用正则表达式的方式来判断。

function isValid(str) { return /^\w+$/.test(str); }
str = "1234abd__"
document.write(isValid(str));
document.write("<br>");

str2 = "$32343#"
document.write(isValid(str2));
document.write("<br>");