属性是= 方法里面是可以写参数的
window:
open() 打开窗口 p1：要打开的新窗口地址 p2：窗口名称 p3:窗口特征
open("newwindow.html","","width=400px,height=400px");
close() 关闭窗口
alert() 在浏览器弹出带有一个确定按钮的提示框 var name=window.prompt("请输入姓名","heise");
promot() 在浏览器弹出一个带有提示和输入框的窗口
confirm() 在浏览器弹出一个带有确定和取消按钮的提示框[确认框] var flag=confirm("您确定要删除吗");
setTimeout() 延迟性的时间函数
setTimeout("location.href='A.html'", 5000); //使用setTimeout延迟5秒后自动跳转 5000毫秒 1秒=1000毫秒
setTimeout(p1,2000); // 单位是毫秒 表示多长时间之后执行指定的函数 p1函数名 不带括号 一般结合日期使用
clearTimeout() 清除延迟性的时间函数
setInterval() 周期性的时间函数
var intervalId = setInterval(getCurrentDate,1000); getCurrentDate同上settimeout用法
clearInterval(intervalId); 清除周期性的时间函数
onload() 页面加载函数
---------------------------------------------------------------------
history:（使用的时候必须先产生历史）
back(); 向后退
forward();向前
go(); 更好用 正数为向前 负数为向后
location:
href属性
reload();刷新
replace();替换
location.href可以设置或者获取当前的URL地址(/A 页面跳转到B页面)
location属性刷新本页面
使用location属性将A页面替换为B页面
------------------------------------------------------------
document
属性： referrer 获取载入当前页的地址 document.referrer
方法： write() 向页面输出内容 也可以清空内容
或者下面的也可以清空内容
onclick="document.getElementsByTagName('body')[0].innerHTML=''
onclick="document.forms[0].submit(); 提交表单
getElementById("xx")获取id为xxx的对象 一个
getElementsByTagName("input") 获取input标签的对象 多个 可以遍历
getElementsByTagName("body")[0].style.backgroundColor ="yellow"
获取表格table里面的行 先获取table对象 table对象再获取tr
var tableObj=document.getElementById("table的id名");
var trObj=tableObj.getElementsByTagName("tr");
对象.innerHTML 获取内部的HTML标签
对象.innerText 获取内部的文本
对象.innerHTML=
也可以进行内容的添加
对象.onclick=function(){} 绑定点击事件
或者
inputBtn.onclick = getInputValue; // 不要写括号 写了括号表示调用方法 方法会将返回值赋值给前面的
function getInputValue(){
}
<input name="season" type="text" value="秋" /> 获取对象 对象.value获取的就是他的值
js中的空格需要加双引号 此时需要用innerHTML
对象.innerHTML+=对象[i].value+" ";
内置对象
Math方法
abs() max() min() ceil() floor() random()
Date
document.getElementsByTagName("body")[0].style.backgroundColor = ""
onclick="document.forms[0].submit();"
节点：
parentNode childNodes firstChild lastChild nextSibling previousSibling
firstElementChild lastElementChild nextElementSibling previousElementSibling
节点属性
getAttribute("属性名") getAttribute("属性名","属性值") setAttribute("属性名","属性值")
创建节点：
createElement ()
创建完还需要指定位置A.appendChild(B) cloneNode()
cloneNode(true)如果为true表示同时复制此节点的子元素 如果为false表示只复制当前节点
删除节点 都需要获取他的父节点
removeChild(node)删除节点 使用父节点进行删除
replaceChild(newNode,oldNode) 用其他的节点代替指定的节点 使用父节点
例：oldNode.parentNode.replaceChild(newNode,oldNode)
节点样式
1、style
有px需要带双引号
x.style.display=""
x.style.borderBottom=""
x.style.backgroundColor =""
x.style.position = "";
x.style.zIndex = ;
x.style.top = "";
2、className
x.className="样式名称"
---------------------------------------------------------------------
onchange()内容发生变化 离开文本框时触发
<body>
<input type="button" value="打开窗口" οnclick="openwindow()" />
<input type="button" value="关闭窗口" οnclick="closewindow()" />
<script>
function openwindow(){
// p1：要打开的新窗口地址 p2：窗口名称 p3:窗口特征
open("newwindow.html","新窗口","width=400px,height=400px");
}
function closewindow(){
var flag=confirm("您是否要关闭窗口");
if(flag){
close();
}
}
</script>
</body>
history使用的时候必须先产生历史
如：A页面为当前页面
A页面跳转到B页面
<a href="javascript:location.href='B.html'">查看鲜花详情</a>
刷新页面
<a href="javascript:location.reload();">刷新本页</a>
替换页面
<a href="javascript:location.replace('B.html');">替换为B页面</a>
A页面跳转到B页面，B页面返回A页面
<a href="javascript:history.go(-1);">返回A页面</a>
B页面跳转到C页面
<a href="javascript:window.location.href='C.html';">跳转C页面</a>
C页面返回到A页面
<a href="javascript:history.go(-2);">返回A页面</a>
<body>
<!--
input type button onclick绑定js
此外a标签也可以绑定
button等按钮可以不加javascript前缀 a标签必须加
-->
<a href="javascript:openBaidu();">点我打开百度</a>
<!--刷新窗口 -->
<input type="button" value="点我刷新页面" onclick="location.reload();" />
<script type="text/javascript">
function openBaidu(){
//切换地址栏
//window.location.href=""; href是属性 可以赋值 用等于
location.href="http://www.baidu.com";
}
</script>
</body>
document.referrer
index.html页面
<body>
<a href="index1.html">点我跳转到index1</a>
</body>
index1.html
<body>
<script>
//输出的是index的url地址
alert(document.referrer);
</script>
</body>
if(document.referrer == "")
对象.innerHTML="";清空操作
对象.innerHTML="<font color='red'>用户名不能为空</font>";添加内容
<body>
用户名：
<input type="text" name="username" value="" onblur="m1(this.value)">
<span id="tip"></span>
<script type="text/javascript">
var tipObj=document.getElementById("tip");
function m1(username){
//每一次在检验内容的时候，进行清空操作
tipObj.innerHTML="";
if(username==null || username.trim()==""){
tipObj.innerHTML="<font color='red'>用户名不能为空</font>";
}
}
</script>
</body>
<input type="button" name="" onclick="document.write('');" id="" value="瞎写" />
点击“瞎写” 页面就为空
<body>
<script type="text/javascript">
//获取绝对值
alert(Math.abs(-5));
// Math.max();
// Math.min();
// [0.0,1.0)
// alert(Math.random());
// 10-30
// alert(parseInt(Math.random()*20)+10);
//向上取整
alert(Math.ceil(3.1));
// 向下取整
// Math.floor();
</script>
</body>
<body>
<div id="currentDate">
</div>
<input type="button" name="" id="" onclick="stopTime();" value="点我停下时间" />
<script type="text/javascript">
function getCurrentDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var hour = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
document.getElementById("currentDate").innerHTML = "现在是："+year+"年"+(month+1)+"月"+day+"日"+" "+hour+":"+minutes+":"+seconds;
}
// setTimeout(getCurrentDate,2000); // 单位是毫秒 表示多长时间之后执行指定的函数
//周期性函数是有返回值的 返回值是个id 如果你想清除周期性函数 用下面的那个
var intervalId = setInterval(getCurrentDate,1000);
function stopTime(){
clearInterval(intervalId);
// clearTimeout();
}
</script>
</body>
<body>
<input type="button" name="" onclick="changeColor();" value="点我换色" />
<script type="text/javascript">
function changeColor(){
var colorArr = ["red","green","blue"];
// [0,3)
var index = parseInt(Math.random()*3);
document.getElementsByTagName("body")[0].style.backgroundColor = colorArr[index];
}
</script>
</body>
<body>
<form action="index3.html" method="post">
<input type="text" id="" value="" />
<input type="button" onclick="document.forms[0].submit();" value="提交"/>
</form>
<script type="text/javascript">
</script>
</body>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>访问节点</title>
<link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<!--
需求： 1.获取id为news元素的父节点对象
2.获取id为news元素的子节点集合 并获取第一个子节点的内容
3.获取id为news元素下的<ul>节点对象
-->
<section id="news">
<header>京东快报
<a href="#">更多 >> </a>
</header>
<ul>
<li>
<a href="#">志玲姐姐：墨镜300减30</a>
</li>
<li>
<a href="#">京东无锡馆正式启动</a>
</li>
<li>
<a href="#">99元抢平板！品牌配件199-100</a>
</li>
<li>
<a href="#">节能领跑京东先行</a>
</li>
<li>
<a href="#">高洁丝实力撩货，领券五折</a>
</li>
</ul>
</section>
<script type="text/javascript">
var news = document.getElementById("news");
//获取id为news的父节点
// alert(news.parentNode);
// var childs = news.childNodes;
// for(var i=0;i<childs.length;i++){
//当我们吧id=news和后面的header挨着的时候 就是输出元素
// alert(childs[i]); // 空格换行也是文本text节点
// }
// 获取最后的子节点 输出文本 当我们吧最后一个ul和/section挨着的时候 输出HTMLUListElement
// alert(news.lastChild);
// 获取第一个
// alert(news.firstChild);
// 获取最后一个子节点的上一个节点 输出HTMLUListElement
// alert(news.lastChild.previousSibling);
//输出element header元素
// alert(news.firstChild.nextSibling);
// 如果只想获取元素节点
// alert(news.firstElementChild);
// alert(news.lastElementChild);
alert(news.lastElementChild.previousElementSibling);
alert(news.firstElementChild.nextElementSibling);
</script>
</body>
</html>
节点：文本节点text，注释节点comment，元素节点：标签名
节点值：文本节点值为其内容 注释节点值为其内容 元素节点值为null(innerHTML,innerText)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<section id="news"><header>京东快报
<a href="#">更多 >> </a>
</header>
<ul>
<li>
<a href="#">志玲姐姐：墨镜300减30</a>
</li>
<li>
<a href="#">京东无锡馆正式启动</a>
</li>
<li>
<a href="#">99元抢平板！品牌配件199-100</a>
</li>
<li>
<a href="#">节能领跑京东先行</a>
</li>
<li>
<a href="#">高洁丝实力撩货，领券五折</a>
</li>
</ul>
</section>
<script type="text/javascript">
var news = document.getElementById("news");
// 文本节点#text 注释节点#comment 元素节点：标签名
//输出header
// alert(news.firstChild.nodeName);
//输出1
// alert(news.firstChild.nodeType);
//输出9
alert(document.nodeType);
// 文本节点值为其内容 注释节点值为其内容 元素节点值为null(innerHTML,innerText)
alert(news.firstChild.nodeValue);
</script>
</body>
</html>
操作节点的属性：
getAttribute(“属性名”)
getAttribute(“属性名”,“属性值”)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择你喜欢的书</title>
<style>
* {
font-size: 12px;
font-family: "Arial", "微软雅黑";
line-height: 25px;
}
div {
padding: 5px;
text-align: center;
}
div span {
display: block;
}
</style>
</head>
<body>
<!--
需求： 1.点击单选按钮，选择“我和狗狗一起活下来”则将图片元素节点src设置为images/dog.jpg
并给图片添加title属性值，在其下一个元素节点<span>中添加文字[我和狗狗一起活下来]
如果选择了“灰霾来了怎么办”则将图片元素节点src设置为images/mai.jpg
并给图片添加title属性值，在其下一个元素节点<span>中添加文字[灰霾来了怎么办]
2.点击图片，获取title属性值
-->
<p>选择你喜欢的书：
<input type="radio" name="book" onclick="book(this.value)" value="1">我和狗狗一起活下来
<input type="radio" name="book" onclick="book(this.value)" value="2">灰霾来了怎么办
</p>
<div>
<img src="" alt="" id="image" onclick="showTitle()">
<span></span>
</div>
<script type="text/javascript">
var img = document.getElementById("image");
function showTitle(){
alert(img.getAttribute("title"));
}
function book(val){
// alert(val);
if(val == "1"){
img.setAttribute("src","images/dog.jpg");
img.setAttribute("title","我和狗狗一起活下来");
img.nextElementSibling.innerHTML = "我和狗狗一起活下来";
}else if(val == "2"){
img.setAttribute("src","images/mai.jpg");
img.setAttribute("title","灰霾来了怎么办");
img.nextElementSibling.innerHTML = "灰霾来了怎么办";
}
}
</script>
</body>
</html>
createElement ()
创建完还需要指定位置A.appendChild(B) cloneNode()
cloneNode(true)如果为true表示同时复制此节点的子元素 如果为false表示只复制当前节点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择你喜欢的书</title>
<style>
* {
font-size: 12px;
font-family: "Arial", "微软雅黑";
line-height: 25px;
}
div {
padding: 5px;
text-align: center;
}
div span {
display: block;
}
</style>
</head>
<body>
<!--
需求： 1.点击单选按钮，实现能够在第一个<div>标签下
利用document添加一个子元素图片标签，并设置title属性值，点击一次添加一张...
（图片选择同示例04）
2.点击按钮[克隆图片到前面] 实现在第一个<div>标签下，复制最后一个子元素图片节点到最前面
-->
<p>选择你喜欢的书：
<input type="radio" name="book" onclick="book(this.value)" value="1">我和狗狗一起活下来
<input type="radio" name="book" onclick="book(this.value)" value="2">灰霾来了怎么办
<input type="button" value="克隆图片到前面" onclick="copyNode()" />
</p>
<div>
</div>
<script type="text/javascript">
var divObj = document.getElementsByTagName("div")[0];
function copyNode(){
var img = divObj.lastElementChild;
var cloneImg = img.cloneNode(true); // （假如有个子节点的话 在这里也可以不写true）如果为true表示同时复制此节点的子元素 如果为false表示只复制当前节点 在这里没有
divObj.insertBefore(cloneImg,divObj.firstElementChild);
}
function book(val){
// 创建图片元素 如果你放在函数外面 实现不了点一次就加一次图片的效果
var img = document.createElement("img");
// 设置信息
if(val == "1"){
img.setAttribute("src","images/dog.jpg");
img.setAttribute("title","我和狗狗一起活下来");
}else if(val == "2"){
img.setAttribute("src","images/mai.jpg");
img.setAttribute("title","灰霾来了怎么办");
}
// 分配位置
divObj.appendChild(img);
}
</script>
</body>
</html>
进行删除和替换的时候需要用他的父节点来删除
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>删除和替换节点</title>
<style>
* {
padding: 0;
margin: 0;
font-size: 12px;
}
ul,
li {
list-style: none;
}
li {
float: left;
text-align: center;
width: 140px;
}
</style>
</head>
<body>
<!--
需求： 1.点击[删除我吧]按钮，删除第一张图片
2.点击[换换我吧]按钮，替换其上方图片为images/f03.jpg
-->
<ul>
<li>
<img src="images/f01.jpg" id="first">
<p>
<input type="button" value="删除我吧" onclick="del()">
</p>
</li>
<li>
<img src="images/f02.jpg" id="second">
<p>
<input type="button" value="换换我吧" onclick="rep()">
</p>
</li>
</ul>
<script type="text/javascript">
function rep(){
var second = document.getElementById("second");
// second.setAttribute("src","images/f03.jpg");
var first = document.getElementById("first");
second.parentNode.replaceChild(first,second);
}
function del(){
var first = document.getElementById("first");
first.parentNode.removeChild(first);
}
</script>
</body>
</html>
cartList.style.top = “2px”;
cartList.style.position = “relative”;
cart.style.zIndex = 0;
cartList.style.display = “none”;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我的购物车</title>
<link rel="stylesheet" href="css/shopping.css">
<style type="text/css">
/*控制显示和隐藏的CSS代码*/
#shopping .cartOver {
background-color: #ffffff;
z-index: 100;
border-bottom: none;
}
#shopping .cartListOver {
display: block;
position: relative;
top: -1px;
}
#shopping .cartOut {
background-color: #f9f9f9;
border-bottom: solid 1px #dcdcdc;
}
#shopping .cartListOut {
display: none;
}
#cart:hover{
width:100px;
}
</style>
</head>
<body>
<!--
需求：使用style属性：
1.当鼠标移入我的购物车范围，触发事件，显示id为cartList的div内容以block。
要求将id为cart的<div>背景颜色调整为#fff，隐藏下边框并要求z-index为1
将id为cartList的<div>设置相对定位，然后设置向上偏移-1px 在我的购物车下方被遮盖上边框
2.当鼠标移出我的购物车范围，触发事件，将id为cartList的div内容隐藏，并恢复之前的效果
背景颜色#f9f9f9
使用className重复操作一次上述步骤。
3.获取id为cart的display样式值
-->
<section id="shopping">
<div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div>
<div id="cartList">
<h2>最新加入的商品</h2>
<ul>
<li><img src="images/makeup.jpg"></li>
<li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
<li>¥558.00×1<br/>删除</li>
</ul>
<div class="footer">共1件商品<span>共计¥558.00</span><span>去购物车</span></div>
</div>
</section>
<script type="text/javascript">
var cartList = document.getElementById("cartList");
var cart = document.getElementById("cart");
// 它只能获取行内样式 因为就是通过style属性操作的 div id="cartList" style="display:none;"这样才能获取到
// alert(cartList.style.display);
alert(document.defaultView.getComputedStyle(cartList,null).display);
/*function over(){
// 显示
cartList.style.display = "block";
// 下边框去除
cart.style.borderBottom = "none";
// 将cart层级提高
cart.style.zIndex = 999;
cart.style.backgroundColor = "#fff";
// 将下方的购物列表网上移动一下
cartList.style.position = "relative";
cartList.style.top = "-2px";
}
function out(){
// 隐藏
cartList.style.display = "none";
cart.style.borderBottom = "1px solid #dcdcdc";
cart.style.zIndex = 0;
cart.style.backgroundColor = "#f9f9f9";
cartList.style.position = "relative";
cartList.style.top = "2px";
}*/
/*function over(){
cart.className = "cartOver";
cartList.className = "cartListOver";
}
function out(){
cart.className = "cartOut";
cartList.className = "cartListOut";
}*/
</script>
</body>
</html>