Java Web_JS

最新推荐文章于 2021-10-28 11:08:01 发布

Anjouc

最新推荐文章于 2021-10-28 11:08:01 发布

阅读量98

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_36847808/article/details/90417027

版权

前端学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

JS与HTML结合
（1）使用script标签

<script type="text/javascript">
	alert("helloworld");
</script>

（2）引用JS文件

<script type="text/javascript"  src=“hello.js”>
	
</script>

hello.js
	alert("helloworld");

注意：引入外部代码，在标签内不要写代码（不会执行）。
JS的原始类型（五种）
string 字符串 var str = "ab"
number 数字 var num= 1
boolean 布尔值 var flag= true
null
undefined 定义一个变量，没有赋值 var a

typeof()//查看当前变量的数据类型

（3）js输出九九乘法表

document.write("<table border = '1'>");
for(var i=1;i<=9;i++){
	document.write("<tr>");
	for(var j=1;j<=i;j++){
		document.write("<td>");
		document.write(i+"*"+j+"="+i*j);
		document.write("</td>");
	}
	document.write("</tr>");
}
document.write("</table>");

（4）JS数组

   var arr = [1,"arr",true];
    var arr1 = new Array(5);//5为数组的长度
    var arr2 = new Array(3,4,5);//3,4,5为数组的元素
    length()获得数组的长度

（5）JS的函数

关键字：function
function 方法名（参数列表）{
	方法体；
}
匿名函数：
var name = 
function（参数列表）{
	方法体；
}
动态函数：
使用到JS的一个的内置对象，Function
var name = new Function("参数列表","方法体");

（6）script放的位置
建议放在后面

（7）Data对象

var  date = new Date();
var date1 = date.toLocaleString()//转换时间格式

（8）JS的全局函数
eval()：执行js代码（如果字符串是一个js代码，使用该方法可以直接执行）

var str = "alert('abcd')";
eval(str);

encodeURI()：对字符进行编码
decodeURI()：对字符进行解码
encodeURIComponent()：
decodeURIComponent()：
isNaN()：判断是否不是数字

NaN ：Not a Number

parseInt()：将字符串转换为数字

（9）JS的重载
重载：方法名相同，参数不相同
JS不存在方法重载
但是可以通过其它的方法来模拟重载：

//把传递的参数存在arguments(参数)里面
function add1(){
	var sum=0;
	for(var i=0;i<arguments.length;i++){
		sum+=arguments[i];
	}
	alert(sum);
}

（10）JS的bom对象
navigator：获取客户机的信息
比如可以得到浏览器的名字

document.write(navigator.appName);

screen：获取屏幕的信息
得到屏幕的宽高：

document.write(screen.height+"、"+screen.width);

location：
属性：href
获取请求url地址

document.write(location.href);

设置url地址

<body>
	<<input type="button" onclick="href1()"/>
</body>
<script type="text/javascript">

	function href1(){
		location.href = "https://www.baidu.com";
	}
</script>

history：请求的url的历史记录

<input type="button" value="button2" onclick="history.back();"/>//history.go(-1)
<input type="button" value="button3" onclick="history.next();"/>//history.go(1)

(11)windos对象

alert():页面弹出框,显示内容
confirm():确认框
prompt():输入对话框
```
prompt("提示内容","0");
```
open():打开一个新的窗口
close():关闭窗口
做定时器:setInterval()指定的周期内调用函数
setTimeout()在指定的毫秒数后调用函数或计算表达式。

(12) js的dom对象

dom: document object model:文档对象模型

（13）document对象

创建标签document.createElement("标签的名称")
创建文本document.createTextNode("文本内容")
在标签下添加appendChild()

(14)element对象

获取element对象document.getElementById("idname")
获取属性里面的值getAttribute("属性名称")
设置属性的值setAttribute("属性名称","属性值")
删除属性removeAttribute("name")
获取标签下的子标签getElementsByTagName()//可靠的方法,childNodes兼容性很差

(15)Node对象

nodeName结点名称
nodeType结点类型
nodeValue结点内容
parentNode父节点
firstChild第一个子节点
lastChild最后一个子节点
nextSibling:返回下一个兄弟结点
previousSibling:返回上一个兄弟结点

(16)操作dom树

appendChild():添加到子节点的末尾
类似剪切的效果
insertBefore(newNode,oldNode):在某个结点之前,插入一个结点
removeChild():删除结点
replaceChild(newNode,oldNode):替换结点
cloneChild(boolean):复制结点

(17)innerHTML属性

可以获取文本的内容
向标签里面设置内容

var span1 = document.getElemnetById("idname");
document.write(span1.innerHTML);
span1.innerHTML = "span1.innerHTML";

获取当前时间

	function getdate(){
		var date = new Date();
		date = date.toLocaleString();
		var div11 = document.getElementById("div1");
		div11.innerHTML = date;
		//document.write(date);
	}
	window.setInterval("getdate()",1000);

(18)select联动

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<select id = "ABCid" onChange="add1(this.value)">
	<option value="0">请选择</option>
	<option value="A"> A </option>
	<option value="B"> B </option>
	<option value="C"> C </option>
</select>
<select id="abcid">
	
</select>
</body>
<script type="text/javascript">
	
	var arr0 = Array(3);
	arr0[0] = ["A","a1","a2","a3"];
	arr0[1] = ["B","b1","b2"];
	arr0[2] = ["C","c1","c2","c3","c4"];
	
	function add1(value0){
		var abc = document.getElementById("abcid");
		op2 = abc.getElementsByTagName("option");
		for(var i=0;i<op2.length;){
			abc.removeChild(op2[i]);
		}
		
		for(var i=0;i<arr0.length;i++){
			if(arr0[i][0] == value0){
				for(var j=1;j<arr0[i].length;j++){
					var option1 = document.createElement("option");
					var text1 = document.createTextNode(arr0[i][j]);
					option1.appendChild(text1);
					
					abc.appendChild(option1);
				}
			}
		}
	}
	
	</script>
</html>

(19)多选框:全选
在这里插入图片描述
代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<input type="checkbox" name = "allorno" value="" onclick="allorno()"/>全选/全不选
<br/>
<input type="checkbox" name = "select0"/>A
<input type="checkbox" name = "select0"/>B
<input type="checkbox" name = "select0"/>C
<input type="checkbox" name = "select0"/>D
<br/>

<input type="button" value = "全选" onclick = "allsel()"/>
<input type="button" value = "全不选" onclick = "allno()"/>
<input type="button" value = "反选" onclick = "allother()"/>

</body>
<script type="text/javascript">
	function allorno(){
		ip1 = document.getElementsByName("allorno");
		if(ip1[0].checked == true)
			allsel();
		else
			allno();
	}
	function allsel(){
		ips = document.getElementsByName("select0");
		ip0 = document.getElementsByName("allorno");
		ip0[0].checked = true;
		for(var i=0;i<ips.length;i++){
			ips[i].checked = true;
		}
	}
	function allno(){
		ips = document.getElementsByName("select0");
		ip0 = document.getElementsByName("allorno");
		ip0[0].checked = false;
		for(var i=0;i<ips.length;i++){
			ips[i].checked = false;
		}
	}
	function allother(){
		ips = document.getElementsByName("select0");
		ip0 = document.getElementsByName("allorno");
		ip0[0].checked = false;
		for(var i=0;i<ips.length;i++){
			if(ips[i].checked == false)
				ips[i].checked = true;
			else if(ips[i].checked == true)
				ips[i].checked = false;
		}
	}
	</script>
</html>

Anjouc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java Web_JS

JS与HTML结合（1）使用script标签<script type="text/javascript"> alert("helloworld");</script>（2）引用JS文件<script type="text/javascript" src=“hello.js”> </script>hello.js alert(...
复制链接

扫一扫