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>