文章目录
- 自定义js文件
- 杂谈
- 案例 冒泡排序实现sort()排序方法原理
- 案例 去除超链接默认跳转
- 案例 JS querySelect 选择器API模拟JQ的$()原理
- 案例 对属性textContent做兼容性处理
- 节点 元素 操作
- 案例 --- 点击按钮设置div中P标签改变背景颜色
- 案例 --- 节点操作隔行变色
- 案例 节点使用兼容代码
- 案例 checkbox全选和全不选的实现
- 元素创建的不同方式
- 第一种元素的创建方式
- 第二种元素的创建方式
- 案例 点击按钮创建列表
- 拓展的页面中嵌入广告
- 第三种元素创建方式
- 案例 动态创建列表
- 案例 点击按钮创建一个表格
- 元素相关的方法
- 只创建一个元素
- 为元素绑定多个事件
- 为元素绑定事件 编写兼容性代码
- 复习
- 绑定事件的区别
- 为元素解绑事件
- 为元素绑定事件和解绑事件的兼容代码
- 事件冒泡
- 事件的三个阶段
- 为同一个元素绑定多个不同事件指向同一个事件处理函数
- 案例 百度搜索智能提示
- BOM
- 系统弹窗
- 加载事件
- location 对象
- history对象
- navigator 对象
- 定时器
- 案例 一起摇起来
- 案例 定时器控制图片src切换
- setTimeout()
- 按钮禁用
- div渐变
- 设置div的宽度
- 案例 移动元素
- 封装动画函数
- 动画函数封装
- 轮播图轮播
- offset 系列
- offset系列具体的值
- 通过document获取元素
- 案例 鼠标移动挂件
自定义js文件
common.js
/**
* Created by Administrator on 2017-08-18.
*/
//格式化日期的代码
//根据id获取元素的代码
//innerText和textContent的兼容
//获取第一个子元素的兼容
//获取最后一个子元素的兼容
/**
* Created by Administrator on 2017/3/24.
*/
/**
* 格式化日期
* @param dt 日期对象
* @returns {string} 返回值是格式化的字符串日期
*/
function getDates(dt) {
var str = "";//存储时间的字符串
//获取年
var year = dt.getFullYear();
//获取月
var month = dt.getMonth() + 1;
//获取日
var day = dt.getDate();
//获取小时
var hour = dt.getHours();
//获取分钟
var min = dt.getMinutes();
//获取秒
var sec = dt.getSeconds();
month = month < 10 ? "0" + month : month;
day = day < 10 ? "0" + day : day;
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
str = year + "年" + month + "月" + day + "日 " + hour + ":" + min + ":" + sec;
return str;
}
/**
* 获取指定标签对象
* @param id 标签的id属性值
* @returns {Element}根据id属性值返回指定标签对象
*/
function my$(id) {
return document.getElementById(id);
}
function setInnerText(element, text) {
if (typeof element.textContent == "undefined") {
element.innerText = text;
} else {
element.textContent = text;
}
}
/**
* 获取元素的文本内容
* @param element 任意元素
* @returns {*} 任意元素中的文本内容
*/
function getInnerText(element) {
if (typeof(element.textContent) == "undefined") {
return element.innerText;
} else {
return element.textContent;
}
}
/**
* 获取父级元素中的第一个子元素
* @param element 父级元素
* @returns {*} 父级元素中的子级元素
*/
function getFirstElement(element) {
if (element.firstElementChild) {
return element.firstElementChild;
} else {
var node = element.firstChild;
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
/**
* 获取父级元素中的最后一个子元素
* @param element 父级元素
* @returns {*} 最后一个子元素
*/
function getLastElement(element) {
if (element.lastElementChild) {
return element.lastElementChild;
} else {
var node = element.lastChild;
while (node && node.nodeType != 1) {
node = node.previousSibling;
}
return node;
}
}
/**
* 获取某个元素的前一个兄弟元素
* @param element 某个元素
* @returns {*} 前一个兄弟元素
*/
function getPreviousElement(element) {
if (element.previousElementSibling) {
return element.previousElementSibling
} else {
var node = element.previousSibling;
while (node && node.nodeType != 1) {
node = node.previousSibling;
}
return node;
}
}
/**
* 获取某个元素的后一个兄弟元素
* @param element 某个元素
* @returns {*} 后一个兄弟元素
*/
function getNextElement(element) {
if (element.nextElementSibling) {
return element.nextElementSibling
} else {
var node = element.nextSibling;
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
/**
* 获取某个元素的所有兄弟元素
* @param element 某个元素
* @returns {Array} 兄弟元素
*/
function getSiblings(element) {
if (!element)return;
var elements = [];
var ele = element.previousSibling;
while (ele) {
if (ele.nodeType === 1) {
elements.push(ele);
}
ele = ele.previousSibling;
}
ele = element.nextSibling;
while (ele) {
if (ele.nodeType === 1) {
elements.push(ele);
}
ele = ele.nextSibling;
}
return elements;
}
/**
* 返回当前浏览器是什么类型的浏览器
*/
function userBrowser(){
var browserName=navigator.userAgent.toLowerCase();
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
console.log("IE");
}else if(/firefox/i.test(browserName)){
console.log("Firefox");
}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
console.log("Chrome");
}else if(/opera/i.test(browserName)){
console.log("Opera");
}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
console.log("Safari");
}else{
console.log("不知道什么鬼!");
}
}
//为任意一个元素绑定事件:元素,事件类型,事件处理函数
function addEventListener(element,type,fn) {
if(element.addEventListener){
//支持
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
//为任意的一个元素解绑某个事件:元素,事件类型,事件处理函数
function removeEventListener(element,type,fn) {
if(element.removeEventListener){
element.removeEventListener(type,fn,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fn);
}else{
element["on"+type]=null;
}
}
杂谈
标签自定义的属性需要用getAttribute()方法获取
案例 冒泡排序实现sort()排序方法原理
var arr = [12,15,30,45,84,99,100,1,5,74,999];
/*冒泡排序实现sort()排序方法原理*/
function MyArray(){
// 实例方法:通过实例对象调用的方法 ---> 排序
this.mySort = function(arr){
for(var i=0;i<arr.length-1;i++){
for(var j=0;j<arr.length-1-i;j++){
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}// end if
}// end for
}// end for
}// end function
}
var myArray = new MyArray();
myArray.mySort(arr)
console.log(arr)
案例 去除超链接默认跳转
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
// 阻止超链接默认跳转 return false
// 此处return false 需写在onclick方法内,调用方法内return false无效
document.getElementById("ak").onclick = function(){
alert('gaga');
return false;
}
</script>
<a href="http://www.baidu.com" onclick="return f1()">百度</a>
<script type="text/javascript">
function f1(){
alert('gaga')
// 这里被调用函数f1返回false
return false;
}
</script>
案例 JS querySelect 选择器API模拟JQ的$()原理
JS 的发展时代决定JQ终究被抛弃
<div id="box">我是box</div>
<div class="demo">
我是demo
<div class="demosss">gaga</div>
<div id="ch">llll</div>
</div>
<script type="text/javascript">
function my$(element){
return document.querySelector(element)
}
console.log(my$('#box').innerText)
console.log(my$('.demo').innerText)
console.log(my$('.demo .demosss').innerText)
console.log(my$('.demo #ch').innerText)
</script>
案例 对属性textContent做兼容性处理
common.js
//设置任意的标签中间的任意文本内容
function setInnerText(element,text){
//判断浏览器是否支持这个属性
if(typeof element.textContent == 'undefined'){
// 对textContent 做兼容性处理
element.innerText = text;
}else{
// 支持这个属性
element.textContent = text;
}
}
// 获取任意标签中间的文本内容
function getInnerText(element) {
if(typeof element.textContent == 'undefined'){
return element.innerText;
}else{
return element.textContent;
}
}
节点 元素 操作
节点&元素的概念
文档:document
元素:页面中所有的标签,元素—element, 标签----元素—对象
节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
根元素:html标签
* 节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)
* nodeType:节点的类型:1----标签,2---属性,3---文本
* nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
* nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容
获取相关的节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<div id="dv">
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>乔峰</li>
<li>鹿茸</li>
<li id="three">段誉</li>
<li>卡卡西</li>
<li>雏田</li>
</ul>
</div>
<script src="common.js"></script>
<script>
var ulObj=my$("uu");
console.log(ulObj.parentNode);//div
console.log(ulObj.parentNode.parentNode);//body
console.log(ulObj.parentNode.parentNode.parentNode);//html
console.log(ulObj.parentNode.parentNode.parentNode.parentNode);//document
console.log(ulObj.parentNode.parentNode.parentNode.parentNode.parentNode);//null
// //ul标签的父级节点
// console.log(ulObj.parentNode);
// //ul标签的父级元素
// console.log(ulObj.parentElement);
//
// console.log(ulObj.parentNode.nodeType);//标签的---1
// console.log(ulObj.parentNode.nodeName);//标签---大写的标签名字
// console.log(ulObj.parentNode.nodeValue);//标签---null
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<div id="dv">哦哦
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>乔峰</li>
<li>鹿茸</li>
<li id="three">段誉</li>
<li>卡卡西</li>
<li>雏田</li>
</ul>
</div>
<script src="common.js"></script>
<script>
//div
// var dvObj=document.getElementById("dv");
// //获取里面的每个子节点
// for(var i=0;i<dvObj.childNodes.length;i++){
// var node=dvObj.childNodes[i];
// //nodeType--->节点的类型:1---标签,2---属性,3---文本
// //nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本
// //nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容
// console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue);
// }
//div
// var dvObj=document.getElementById("dv");
// //获取的是属性的节点
// var node=dvObj.getAttributeNode("id");
// console.log(node.nodeType+"----"+node.nodeName+"===="+node.nodeValue);
//div
// var dvObj=document.getElementById("dv");
// //子节点
// console.log(dvObj.childNodes);//7个子节点
// //子元素
// console.log(dvObj.children);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<div id="dv">哦哦
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>乔峰</li>
<li>鹿茸</li>
<li id="three">段誉</li>
<li>卡卡西</li>
<li>雏田</li>
</ul>
</div>
<script src="common.js"></script>
<script>
//12行代码:都是获取节点和元素的
//ul
var ulObj=document.getElementById("uu");
//父级节点
console.log(ulObj.parentNode);
//父级元素
console.log(ulObj.parentElement);
//子节点
console.log(ulObj.childNodes);
//子元素
console.log(ulObj.children);
console.log("==============================================");
//第一个子节点
console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素
//第一个子元素
console.log(ulObj.firstElementChild);//-----------------IE8中不支持
//最后一个子节点
console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
//最后一个子元素
console.log(ulObj.lastElementChild);//-----------------IE8中不支持
//某个元素的前一个兄弟节点
console.log(my$("three").previousSibling);
//某个元素的前一个兄弟元素
console.log(my$("three").previousElementSibling);
//某个元素的后一个兄弟节点
console.log(my$("three").nextSibling);
//某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);
//总结:凡是获取节点的代码在谷歌和火狐得到的都是 相关的节点
//凡是获取元素的代码在谷歌和火狐得到的都是 相关的元素
//从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持
// var ulObj=document.getElementById("uu");
//
//
// console.log("==============================================");
// //第一个子节点
// console.log(ulObj.firstChild.innerText);//------------------------IE8中是第一个子元素
// //第一个子元素
// console.log(ulObj.firstElementChild);//-----------------IE8中不支持
// //最后一个子节点
// console.log(ulObj.lastChild.innerText);//------------------------IE8中是第一个子元素
// //最后一个子元素
// console.log(ulObj.lastElementChild);//-----------------IE8中不支持
// //某个元素的前一个兄弟节点
// console.log(my$("three").previousSibling.innerText);
// //某个元素的前一个兄弟元素
// console.log(my$("three").previousElementSibling);
// //某个元素的后一个兄弟节点
// console.log(my$("three").nextSibling.innerText);
// //某个元素的后一个兄弟元素
// console.log(my$("three").nextElementSibling);
//
</script>
</body>
</html>
案例 — 点击按钮设置div中P标签改变背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 300px;
height: 450px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="变色" id="btn"/>
<div id="dv">
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<a href="http://www.baidu.com">百度</a>
</div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
//先获取div
var dvObj = my$("dv");
//获取里面所有的子节点
var nodes = dvObj.childNodes;
//循环遍历所有的子节点
for (var i = 0; i < nodes.length; i++) {
//判断这个子节点是不是p标签
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
nodes[i].style.backgroundColor = "red";
}
}
};
//点击按钮,设置p变色---节点的方式做
</script>
</body>
</html>
案例 — 节点操作隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="变色" id="btn"/>
<ul id="uu">
<li>爆炒助教</li>
<li>油炸班主任</li>
<li>清蒸小苏</li>
<li>红烧班长</li>
<li>红烧肉</li>
<li>糖醋排骨</li>
<li>凉拌秋葵</li>
<li>鱼香胡萝卜丝</li>
</ul>
<script src="common.js"></script>
<script>
//隔行变色--li
my$("btn").onclick = function () {
var count=0;//记录有多少个li
//获取ul中所有的子节点
var nodes = my$("uu").childNodes;
for (var i = 0; i < nodes.length; i++) {
//判断这个节点是不是li标签
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
count++;//8个
//nodes[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
}
}
};
</script>
</body>
</html>
案例 节点使用兼容代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<ul id="uu">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
<script src="common.js"></script>
<script>
//第一个节点和第一个元素的获取的代码在IE8中可能不支持
//element.firstChild--->谷歌和火狐获取的是第一个子几点
//element.firstChile--->IE8获取的是第一个子元素
//element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
if(element.firstElementChild){//true--->支持
return element.firstElementChild;
}else{
var node=element.firstChild;//第一个节点
while (node&&node.nodeType!=1){
node=node.nextSibling;
}
return node;
}
}
//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
if(element.lastElementChild){//true--->支持
return element.lastElementChild;
}else{
var node=element.lastChild;//第一个节点
while (node&&node.nodeType!=1){
node=node.previousSibling;
}
return node;
}
}
console.log(getFirstElementChild(my$("uu")).innerText);
console.log(getLastElementChild(my$("uu")).innerText);
//最后一个节点和最后一个元素的获取的代码在IE8中可能不支持
//前一个节点和前一个元素的获取的代码在IE8中可能不支持
//后一个节点和后一个元素的获取的代码在IE8中可能不支持
//学习节点操作还是为了操作元素
</script>
</body>
</html>
案例 checkbox全选和全不选的实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>油炸榴莲</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>清蒸助教</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div>
<script src="common.js"></script>
<script>
//获取全选的这个复选框
var ckAll = my$("j_cbAll");
//获取tbody中所有的小复选框
var cks = my$("j_tb").getElementsByTagName("input");
//点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态
ckAll.onclick = function () {
//console.log(this.checked);
for (var i = 0; i < cks.length; i++) {
cks[i].checked = this.checked;
}
};
//获取tbody中所有的复选框,分别注册点击事件
for(var i=0;i<cks.length;i++){
cks[i].onclick=function () {
var flag=true;//默认都被选中了
//判断是否所有的复选框都选中
for(var j=0;j<cks.length;j++){
if(!cks[j].checked){
//没选中就进来了
flag=false;
break;
}
}
//全选的这个复选框的状态就是flag这个变量的值
ckAll.checked=flag;
};
}
</script>
</body>
</html>
元素创建的不同方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
/*
*
* 元素创建-----为了提高用户的体验
* 元素创建的三种方式:
* 1. document.write("标签的代码及内容");
* 2. 对象.innerHTML="标签及代码";
* 3. document.createElement("标签的名字");
*
*
*
*
*
* */
</script>
</head>
<body>
京东
<script src="common.js"></script>
<script></script>
</body>
</html>
第一种元素的创建方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="创建一个p" id="btn"/>
小苏是一个快乐的小男孩,人家今年才38岁.好帅哦
<script src="common.js"></script>
<script>
//document.write("标签代码及内容");
my$("btn").onclick=function () {
document.write("<p>这是一个p</p>");
};
// document.write("<p>这是一个p</p>");
//document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
</script>
</body>
</html>
第二种元素的创建方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
border:2px solid pink;
}
</style>
</head>
<body>
<input type="button" value="创建一个p" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
//点击按钮,在div中创建一个p标签
//第二种方式创建元素: 对象.innerHTML="标签代码及内容";
my$("btn").onclick=function () {
my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
};
</script>
</body>
</html>
案例 点击按钮创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 300px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
// my$("btn").onclick=function () {
// my$("dv").innerHTML="<ul><li>杨过</li><li>小龙女</li><li>张无忌</li> <li>张三丰</li></ul>";
// };
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
my$("btn").onclick = function () {
var str = "<ul style='list-style-type: none;cursor: pointer'>";
//根据循环创建对应对数的li
for (var i = 0; i < names.length; i++) {
str += "<li>" + names[i] + "</li>";
}
str += "</ul>";
my$("dv").innerHTML = str;
//代码执行到这里,li已经有了
//获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
var list = my$("dv").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
//鼠标进入
list[i].onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//鼠标离开
list[i].onmouseout = function () {
this.style.backgroundColor = "";
};
}
};
</script>
</body>
</html>
拓展的页面中嵌入广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style type=text/css>
div {
font-size: 12px;
font-family: arial
}
.baidu {
font-size: 14px;
line-height: 24px;
font-family: arial
}
a, a:link {
color: #0000cc;
}
.baidu span {
color: #6f6f6f;
font-size: 12px
}
a.more {
color: #008000;
}
a.blk {
color: #000;
font-weight: bold;
}</style>
</head>
<body>
<script language="JavaScript" type="text/JavaScript"
src="http://news.baidu.com/ns?word=x%20title%3Aiphone&tn=newsfcu&from=news&cl=2&rn=5&ct=0">
</script>
//这里 script脚本嵌入的链接文件打开是 document.write('...') 之所以链接的方式是后台开发人员可以改代码来改变广告的内容
</body>
</html>
第三种元素创建方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 150px;
border: 2px dashed pink;
}
</style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//第三种方式创建元素
//创建元素
//document.createElement("标签名字");对象
//把元素追加到父级元素中
//点击按钮,在div中创建一个p
my$("btn").onclick = function () {
//创建元素的
var pObj = document.createElement("p");
setInnnerText(pObj, "这是一个p");
//把创建后的子元素追加到父级元素中
my$("dv").appendChild(pObj);
};
</script>
</body>
</html>
案例 动态创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
cursor: pointer;
}
div {
width: 200px;
height: 400px;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
//点击按钮动态的创建列表,把列表加到div中
my$("btn").onclick = function () {
//创建ul,把ul立刻加入到父级元素div中
var ulObj = document.createElement("ul");
my$("dv").appendChild(ulObj);
//动态的创建li,加到ul中
for (var i = 0; i < kungfu.length; i++) {
var liObj = document.createElement("li");
//设置li中间的文字内容
liObj.innerHTML = kungfu[i];
ulObj.appendChild(liObj);
//为li添加鼠标进入事件
liObj.onmouseover = mouseoverHandle;
//为li添加鼠标离开事件
liObj.onmouseout = mouseoutHandle;
}
};
//此位置.按钮的点击事件的外面
function mouseoverHandle() {
this.style.backgroundColor = "red";
}
function mouseoutHandle() {
this.style.backgroundColor = "";
}
//如果是循环的方式添加事件,推荐用命名函数
//如果不是循环的方式添加事件,推荐使用匿名函数
</script>
</body>
</html>
案例 点击按钮创建一个表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var arr=[
{name:"百度",href:"http://www.baidu.com"},
{name:"谷歌",href:"http://www.google.com"},
{name:"优酷",href:"http://www.youku.com"},
{name:"土豆",href:"http://www.tudou.com"},
{name:"快播",href:"http://www.kuaibo.com"},
{name:"爱奇艺",href:"http://www.aiqiyi.com"}
];
//点击按钮创建表格
my$("btn").onclick=function () {
//创建table加入到div中
var tableObj=document.createElement("table");
tableObj.border="1";
tableObj.cellPadding="0";
tableObj.cellSpacing="0";
my$("dv").appendChild(tableObj);
//创建行,把行加入到table中
for(var i=0;i<arr.length;i++){
var dt=arr[i];//每个对象
var trObj=document.createElement("tr");
tableObj.appendChild(trObj);
//创建第一个列,然后加入到行中
var td1=document.createElement("td");
td1.innerText=dt.name;
trObj.appendChild(td1);
//创建第二个列
var td2=document.createElement("td");
td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
trObj.appendChild(td2);
}
};
</script>
</body>
</html>
元素相关的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="干掉第一个子元素" id="btn2"/>
<input type="button" value="干掉所有子元素" id="btn3"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var i=0;
my$("btn").onclick=function () {
i++;
var obj= document.createElement("input");
obj.type="button";
obj.value="按钮"+i;
//my$("dv").appendChild(obj);//追加子元素
//把新的子元素插入到第一个子元素的前面
my$("dv").insertBefore(obj,my$("dv").firstElementChild);
//my$("dv").replaceChild();---自己玩
};
my$("btn2").onclick=function () {
//移除父级元素中第一个子级元素
my$("dv").removeChild(my$("dv").firstElementChild);
};
my$("btn3").onclick=function () {
//点击按钮删除div中所有的子级元素
//判断父级元素中有没有第一个子元素
while(my$("dv").firstElementChild){
my$("dv").removeChild(my$("dv").firstElementChild);
}
};
</script>
</body>
</html>
只创建一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//有则删除,无则创建
//先判断有没有,有就删除,然后再创建
// my$("btn").onclick=function () {
// //判断,div中有没有这个按钮,有就删除
// //判断这个按钮的子元素是否存在
// if(my$("btn2")){//如果为true就有
// my$("dv").removeChild(my$("btn2"));
// }
// var obj=document.createElement("input");
// obj.type="button";
// obj.value="按钮";
// obj.id="btn2";
// my$("dv").appendChild(obj);
// };
my$("btn").onclick=function () {
//判断,div中有没有这个按钮,有就删除
//判断这个按钮的子元素是否存在
if(!my$("btn2")){//如果为true就有
var obj=document.createElement("input");
obj.type="button";
obj.value="按钮";
obj.id="btn2";
my$("dv").appendChild(obj);
}
};
</script>
</body>
</html>
为元素绑定多个事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
//为元素绑定事件(DOM):一种,但是不兼容,有两种
//1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
//2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持
//为按钮绑定点击事件
//参数1:事件的类型---事件的名字,没有on
//参数2:事件处理函数---函数(命名函数,匿名函数)
//参数3:布尔类型,目前就写false-----没有为什么,不解释,明天说
//为同一个元素绑定多个相同的事件--
// my$("btn").addEventListener("click",function () {
// console.log("小苏猥琐啊");
// },false);
// my$("btn").addEventListener("click",function () {
// console.log("小苏龌龊啊");
// },false);
// my$("btn").addEventListener("click",function () {
// console.log("小苏邪恶啊");
// },false);
// my$("btn").addEventListener("click",function () {
// console.log("小苏下流啊");
// },false);
//参数1:事件类型---事件名字,有on
//参数2:事件处理函数---函数(命名函数,匿名函数)
// my$("btn").attachEvent("onclick",function () {
// console.log("小杨好帅哦1");
// });
//
// my$("btn").attachEvent("onclick",function () {
// console.log("小杨好帅哦2");
// });
//
// my$("btn").attachEvent("onclick",function () {
// console.log("小杨好帅哦3");
// });
</script>
</body>
</html>
为元素绑定事件 编写兼容性代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
addEventListener(my$("btn"),"click",function () {
console.log("哦1");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦2");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦3");
});
// my$("btn")["on"+"click"]=function () {
//
// };
// function Person(name) {
// this.name=name;
// this.sayHi=function () {
// console.log("您好啊");
// };
// }
// var per=new Person("小明");
// if(per.sayHii){//判断这个对象中有没有这个方法
// per.sayHii();
// }else{
// console.log("没有这个方法");
// }
</script>
</body>
</html>
复习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
/*
*
* 节点:
* 节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)
* 文档:document---页面中的顶级对象
* 元素:页面中所有的标签, 标签---元素--对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)
* 节点的属性:作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素
* 节点的类型:1标签节点,2属性节点,3文本节点
* nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点
* nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---#text
* nodeValue:标签---null,属性---属性的值,文本---文本内容
* if(node.nodeType==1&&node.nodeName=="P")
*
* 获取节点及元素的代码(下面呢)
*
*
*
* 元素的创建
* 三种元素创建的方式
* 1. document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉
* 2. 父级对象.innerHTML="标签代码及内容";
* 3. document.createElement("标签名字");得到的是一个对象,
* 父级元素.appendChild(子级元素对象);
* 父级元素.inerstBefore(新的子级对象,参照的子级对象);
* 移除子元素
* 父级元素.removeChild(要干掉的子级元素对象);
*
* 事件的绑定:为同一个元素绑定多个相同的事件
* 三种方式:
* 1. 对象.on事件名字=事件处理函数 如果是多个相同事件注册用这种方式,最后一个执行,之前的被覆盖了
* my$("btn").onclick=function(){};
* 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);
* my$("btn").addEventListener("click",function(){},false);
* 3. 对象.attachEvent("有on的事件名字",事件处理函数);
* my$("btn").attachEvent("onclick",function(){});
*
*
*
* */
//为任意的一个元素,绑定任意的一个事件
function addEventListener(element,type,fn) {
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
// my$("btn")["on"+"click"]=function(){};
//
// var obj={
// name:"张三",
// sayHi:function () {
//
// }
//
// };
//获取当前节点的父级节点
console.log(my$("uu").parentNode);
//获取当前节点的父级元素
console.log(my$("uu").parentElement);
//获取当前节点的子级节点
console.log(my$("uu").childNodes);
//获取当前节点的子级元素
console.log(my$("uu").children);
//获取当前节点的第一个子级节点
console.log(my$("uu").firstChild);
//获取当前节点的第一个子级元素
console.log(my$("uu").firstElementChild);
//获取当前节点的最后一个子级节点
console.log(my$("uu").lastChild);
//获取当前节点的最后一个子级元素
console.log(my$("uu").lastElementChild);
//获取当前节点的前一个兄弟节点
console.log(my$("uu").previousSibling);
//获取当前节点的前一个兄弟元素
console.log(my$("uu").previousElementSibling);
//获取当前节点的后一个兄弟节点
console.log(my$("uu").nextSibling);
//获取当前节点的后一个兄弟元素
console.log(my$("uu").nextElementSibling);
// document.write("<p>这是一个p</p>")
//
// document.body.innerHTML="<p>这是一个p</p>";
</script>
</head>
<body>
<script src="common.js"></script>
<script>
// var pObj=document.createElement("p");
// 父级元素.appendChild(pObj);
</script>
</body>
</html>
绑定事件的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
/*
*
* 总结绑定事件的区别:
* addEventListener();
* attachEvent()
*
* 相同点: 都可以为元素绑定事件
* 不同点:
* 1.方法名不一样
* 2.参数个数不一样addEventListener三个参数,attachEvent两个参数
* 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
* attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
* 4.this不同,addEventListener 中的this是当前绑定事件的对象
* attachEvent中的this是window
* 5.addEventListener中事件的类型(事件的名字)没有on
* attachEvent中的事件的类型(事件的名字)有on
*
* 现在遇到的逆境,都是以后成长的阶梯
*
*
*
*
*
*
*
*
*
* */
//为按钮绑定多个点击事件
// my$("btn").addEventListener("click",function () {
// console.log(this);
// },false);
// my$("btn").attachEvent("onclick",function () {
// console.log(this);
// });
</script>
</body>
</html>
为元素解绑事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="小苏" id="btn"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="common.js"></script>
<script>
//1 对象.on事件名字=事件处理函数----绑定事件
// my$("btn").onclick=function () {
// console.log("我猥琐");
// };
// my$("btn2").onclick=function () {
// //1.解绑事件
// my$("btn").onclick=null;
// };
// function f1() {
// console.log("第一个");
// }
// function f2() {
// console.log("第二个");
// }
// my$("btn").addEventListener("click",f1,false);
// my$("btn").addEventListener("click",f2,false);
//
// //点击第二个按钮把第一个按钮的第一个点击事件解绑
// my$("btn2").onclick=function () {
// //解绑事件的时候,需要在绑定事件的时候,使用命名函数
// my$("btn").removeEventListener("click",f1,false);
// };
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
my$("btn").attachEvent("onclick",f1);
my$("btn").attachEvent("onclick",f2);
my$("btn2").onclick=function () {
my$("btn").detachEvent("onclick",f1);
};
//解绑事件:
/*
* 注意:用什么方式绑定事件,就应该用对应的方式解绑事件
* 1.解绑事件
* 对象.on事件名字=事件处理函数--->绑定事件
* 对象.on事件名字=null;
* 2.解绑事件
* 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
* 对象.removeEventListener("没有on的事件类型",函数名字,false);
* 3.解绑事件
* 对象.attachEvent("on事件类型",命名函数);---绑定事件
* 对象.detachEvent("on事件类型",函数名字);
*
*
* */
</script>
</body>
</html>
为元素绑定事件和解绑事件的兼容代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="common.js"></script>
<script>
//绑定事件的兼容
function addEventListener(element,type,fn) {
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
//解绑事件的兼容
//为任意的一个元素,解绑对应的事件
function removeEventListener(element,type,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else{
element["on"+type]=null;
}
}
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
addEventListener(my$("btn1"),"click",f1);
addEventListener(my$("btn1"),"click",f2);
my$("btn2").onclick=function () {
removeEventListener(my$("btn1"),"click",f1);
};
</script>
</body>
</html>
事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv1{
width: 300px;
height: 200px;
background-color: red;
}
#dv2{
width: 250px;
height: 150px;
background-color: green;
}
#dv3{
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<script>
//事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
</script>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="common.js"></script>
<script>
//事件冒泡,阻止事件冒泡,
//如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持
// e.stopPropagation(); 谷歌和火狐支持,
my$("dv1").onclick=function () {
console.log(this.id);
};
my$("dv2").onclick=function () {
console.log(this.id);
//window.event.cancelBubble=true;
};
//事件处理参数对象
my$("dv3").onclick=function (e) {
console.log(this.id);
//阻止事件冒泡
//e.stopPropagation();
console.log(e);
};
// document.body.onclick=function () {
// console.log("颤抖吧,你们这些愚蠢的标签");
// };
</script>
</body>
</html>
事件的三个阶段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv1 {
width: 300px;
height: 200px;
background-color: red;
}
#dv2 {
width: 250px;
height: 150px;
background-color: green;
}
#dv3 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<script>
//事件有三个阶段:
/*
*
* 1.事件捕获阶段 :从外向内
* 2.事件目标阶段 :最开始选择的那个
* 3.事件冒泡阶段 : 从里向外
*
* 为元素绑定事件
* addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的)
* 事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->
* window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持
* window.event就是一个对象,是IE中的标准
* e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持
* window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准
* 事件参数e在IE8的浏览器中是不存在,此时用window.event来代替
* addEventListener中第三个参数是控制事件阶段的
* 事件的阶段有三个:
* 通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的
* 如果这个属性的值是:
* 1---->捕获阶段
* 2---->目标阶段
* 3---->冒泡
* 一般默认都是冒泡阶段,很少用捕获阶段
* 冒泡阶段:从里向外
* 捕获阶段:从外向内
*
*
*
*
*
*
*
* */
</script>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="common.js"></script>
<script>
//事件冒泡:是从里向外
//同时注册点击事件
var objs = [my$("dv3"), my$("dv2"), my$("dv1")];
//遍历注册事件
objs.forEach(function (ele) {
//为每个元素绑定事件
ele.addEventListener("click", function (e) {
console.log(this.id+"====>"+e.eventPhase);
}, true);
});
//该属性在事件参数对象中存在
</script>
</body>
</html>
为同一个元素绑定多个不同事件指向同一个事件处理函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="小苏" id="btn"/>
<script src="common.js"></script>
<script>
//为同一个元素绑定多个不同的事件,指向相同的事件处理函数
my$("btn").onclick = f1;
my$("btn").onmouseover = f1;
my$("btn").onmouseout = f1;
function f1(e) {
switch (e.type) {
case "click":
alert("好帅哦");
break;
case "mouseover":
this.style.backgroundColor = "red";
break;
case "mouseout":
this.style.backgroundColor = "green";
break;
}
}
// my$("btn").onmouseover=function (e) {
// console.log(e);
// };
</script>
</body>
</html>
案例 百度搜索智能提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 450px;
margin: 200px auto;
}
#txt {
width: 350px;
}
#pop {
width: 350px;
border: 1px solid red;
}
#pop ul {
margin: 10px;
padding: 0px;
width: 200px;
list-style-type: none;
}
#pop ul li {
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="txt" value="">
<input type="button" value="搜索" id="btn">
</div>
<script src="common.js"></script>
<script>
var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传智播客是一个培训机构", "传说在传智有个很帅很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"];
//获取文本框注册键盘抬起事件
my$("txt").onkeyup = function () {
//每一次的键盘抬起都判断页面中有没有这个div
if(my$("dv")){
//删除一次
my$("box").removeChild(my$("dv"));
}
//获取文本框输入的内容
var text = this.value;
//临时数组--空数组------->存放对应上的数据
var tempArr = [];
//把文本框输入的内容和数组中的每个数据对比
for (var i = 0; i < keyWords.length; i++) {
//是否是最开始出现的
if (keyWords[i].indexOf(text) == 0) {
tempArr.push(keyWords[i]);//追加
}
}
//如果文本框是空的,临时数组是空的,不用创建div
if (this.value.length == 0 || tempArr.length == 0) {
//如果页面中有这个div,删除这个div
if (my$("dv")) {
my$("box").removeChild(my$("dv"));
}
return;
}
//创建div,把div加入id为box的div中
var dvObj = document.createElement("div");
my$("box").appendChild(dvObj);
dvObj.id = "dv";
dvObj.style.width = "350px";
//dvObj.style.height="100px";//肯定是不需要的------
dvObj.style.border = "1px solid green";
//循环遍历临时数组,创建对应的p标签
for (var i = 0; i < tempArr.length; i++) {
//创建p标签
var pObj = document.createElement("p");
//把p加到div中
dvObj.appendChild(pObj);
setInnerText(pObj, tempArr[i]);
pObj.style.margin = 0;
pObj.style.padding = 0;
pObj.style.cursor = "pointer";
pObj.style.marginTop = "5px";
pObj.style.marginLeft = "5px";
//鼠标进入
pObj.onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//鼠标离开
pObj.onmouseout = function () {
this.style.backgroundColor = "";
};
}
};
</script>
</body>
</html>
BOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
body{
height: 2000px;
}
</style>
<script>
/*
* JavaScript分三个部分:
* 1. ECMAScript标准---基本语法
* 2. DOM--->Document Object Model 文档对象模型,操作页面元素的
* 3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的
*
* 浏览器中有个顶级对象:window----皇上
* 页面中顶级对象:document-----总管太监
* 页面中所有的内容都是属于浏览器的,页面中的内容也都是window的
*
* 变量是window的
*
*
* */
// var num=100;
// console.log(window.num);
// function f1() {
// console.log("小苏我也从了");
// }
// window.f1();
//因为页面中的所有内容都是window的,window是可以省略的.
//window.document.write("哈哈");
// var name="您好";
// console.log(window.name);
// console.log(top);
// console.log(window);
</script>
</head>
<body>
</body>
</html>
系统弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//window.alert("您好啊");//以后不用,测试的时候使用
//window.prompt("请输入帐号");
// var result=window.confirm("您确定退出吗");
// console.log(result);
</script>
</head>
<body>
<p>这是一个P</p>
</body>
</html>
加载事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//页面加载的时候,按钮还没出现,页面没有加载完毕
//页面加载完毕了,再获取按钮
//只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件
// window.function () {
// document.getElementById("btn").onclick=function () {
// alert("您好");
// };
// };
//很重要
// function () {
// document.getElementById("btn").onclick=function () {
// alert("您好");
// };
// };
//扩展的事件---页面关闭后才触发的事件
// window.onunload=function () {
//
// };
//扩展事件---页面关闭之前触发的
// window.onbeforeunload=function () {
// alert("哈哈");
// };
</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
</body>
</html>
location 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//对象中的属性和方法
//location对象
//console.log(window.location);
// //地址栏上#及后面的内容
// console.log(window.location.hash);
// //主机名及端口号
// console.log(window.location.host);
// //主机名
// console.log(window.location.hostname);
// //文件的路径---相对路径
// console.log(window.location.pathname);
// //端口号
// console.log(window.location.port);
// //协议
// console.log(window.location.protocol);
// //搜索的内容
// console.log(window.location.search);
function () {
document.getElementById("btn").onclick=function () {
//设置跳转的页面的地址
//location.href="http://www.jd.com";//属性----------------->必须记住
//location.assign("http://www.jd.com");//方法
//location.reload();//重新加载--刷新
//location.replace("http://www.jd.com");//没有历史记录
};
};
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>
history对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="跳过去" id="btn1"/>
<input type="button" value="前进" id="btn2"/>
<input type="button" value="后退" id="btn"/>
<script src="common.js"></script>
<script>
//跳转的
my$("btn1").onclick = function () {
window.location.href = "15test.html";
};
//前进
my$("btn2").onclick = function () {
window.history.forward();
};
//后退
my$("btn").onclick = function () {
window.history.back();
};
</script>
</body>
</html>
navigator 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
//通过platform可以判断浏览器所在的系统平台类型.
//console.log(window.navigator.platform);
</script>
</head>
<body>
</body>
</html>
定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//BOM中有两个定时器---计时器
</script>
</head>
<body>
<input type="button" value="停止" id="btn"/>
<script>
//定时器
//参数1:函数
//参数2:时间---毫秒---1000毫秒--1秒
//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....
//返回值就是定时器的id值
var timeId = setInterval(function () {
alert("hello");//断言
}, 1000);
document.getElementById("btn").onclick = function () {
//点击按钮,停止定时器
//参数:要清理的定时的id的值
window.clearInterval(timeId);
};
</script>
</body>
</html>
案例 一起摇起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
img {
width: 200px;
height: 200px;
}
div {
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="摇起来" id="btn1"/>
<input type="button" value="停止" id="btn2"/>
<div id="dv">
<img src="images/heihei.jpg" alt=""/>
<img src="images/lyml.jpg" alt=""/>
</div>
<script src="common.js"></script>
<script>
//点击按钮摇起来
var timeId="";
my$("btn1").onclick = function () {
timeId= setInterval(function () {
//随机数
var x = parseInt(Math.random() * 100 + 1);
var y = parseInt(Math.random() * 100 + 1);
//设置元素的left和top属性值
my$("dv").style.left = x + "px";
my$("dv").style.top = y + "px";
}, 10);
};
my$("btn2").onclick=function () {
clearInterval(timeId);
};
</script>
</body>
</html>
案例 定时器控制图片src切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<img src="" alt="" id="im" />
<script src="common.js"></script>
<script>
function f1() {
//获取当前时间
var dt = new Date();
//获取小时
var hour = dt.getHours();
//获取秒
var second = dt.getSeconds();
hour = hour < 10 ? "0" + hour : hour;
second = second < 10 ? "0" + second : second;
my$("im").src="meimei/"+hour+"_"+second+".jpg";
}
f1();
//页面加载完毕后,过了1秒才执行函数的代码
setInterval(f1,1000);
</script>
</body>
</html>
setTimeout()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//常用的,反复的执行
// window.setInterval(function () {
// alert("哈哈");
// },1000);
//window.clearInterval(定时器id);//清理定时器
//另一个定时器-------一次性的定时
/*
* 参数1:函数
* 参数2:时间---1000毫秒---1秒
* 返回值:该定时器的id
*
*
* */
// window.setTimeout(函数,时间);
//页面加载后
window.function () {
//一次性的定时器
var timeId=window.setTimeout(function () {
alert("您好");
},1000);
//点击这个按钮,停止这个一次性的定时器
document.getElementById("btn").onclick=function () {
clearTimeout(timeId);
};
};
</script>
</head>
<body>
<input type="button" value="停下" id="btn"/>
<script>
</script>
</body>
</html>
按钮禁用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<textarea name="texta" id="" cols="30" rows="10">
这个世界就是这么疯狂,你不同意,我就让你注册,秦始皇,打钱
</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
<script src="common.js"></script>
<script>
var time=5;
var timeId= setInterval(function () {
time--;
my$("btn").value="请仔细阅读协议("+time+")";
if(time<=0){
//停止定时器就可以
clearInterval(timeId);
//按钮可以被点击了
my$("btn").disabled=false;
my$("btn").value="同意";
}
},1000);
</script>
</body>
</html>
div渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="dv"></div>
<input type="button" value="渐变" id="btn"/>
<script src="common.js"></script>
<script>
my$("btn").onclick=function () {
var opacity=10;
//按钮的点击事件
var timeId=setInterval(function () {
//透明化了
opacity--;
if(opacity<=0){
clearInterval(timeId);//清理定时器
}
//设置div的透明度
my$("dv").style.opacity=opacity/10;
},200);
};
</script>
</body>
</html>
设置div的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 150px;
background-color: red;
border-radius: 100px;
}
</style>
</head>
<body>
<input type="button" value="变宽" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
var width = 200;
var timeId = setInterval(function () {
width+=10;
if(width==800){
clearInterval(timeId);
}
my$("dv").style.width=width+"px";
}, 20);
};
</script>
</body>
</html>
案例 移动元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
input {
margin-top: 20px;
}
div {
margin-top: 30px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//div要移动,要脱离文档流---position:absolute
//如果样式的代码是在style的标签中设置,外面是获取不到
//如果样式的代码是在style的属性设置,外面是可以获取
//获取div的当前位置
//console.log(my$("dv").offsetLeft);
//点击第一个按钮移动到400px
my$("btn1").onclick = function () {
//一会要清理定时器(只产生一个定时器)
var timeId= setInterval(function () {
//获取div的当前的位置
var current = my$("dv").offsetLeft;//数字类型,没有px
//div每次移动多少像素---步数
var step = 9;
//每次移动后的距离
current += step;
//判断当前移动后的位置是否到达目标位置
if(current<=400){
my$("dv").style.left=current+"px";
}else{
//清理定时器
clearInterval(timeId);
}
}, 20);
};
//点击第二个按钮移动到800px
my$("btn2").onclick = function () {
//一会要清理定时器(只产生一个定时器)
var timeId= setInterval(function () {
//获取div的当前的位置
var current = my$("dv").offsetLeft;//数字类型,没有px
//div每次移动多少像素---步数
var step = 10;
//每次移动后的距离
current += step;
//判断当前移动后的位置是否到达目标位置
if(current<=800){
my$("dv").style.left=current+"px";
}else{
//清理定时器
clearInterval(timeId);
}
}, 20);
};
</script>
</body>
</html>
封装动画函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
input {
margin-top: 20px;
}
div {
margin-top: 30px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//div要移动,要脱离文档流---position:absolute
//如果样式的代码是在style的标签中设置,外面是获取不到
//如果样式的代码是在style的属性设置,外面是可以获取
//获取div的当前位置
//console.log(my$("dv").offsetLeft);
//点击第一个按钮移动到400px
my$("btn1").onclick = function () {
animate(my$("dv"), 400);
};
//点击第二个按钮移动到800px
my$("btn2").onclick = function () {
animate(my$("dv"), 800);
};
//动画函数---任意一个元素移动到指定的目标位置
function animate(element, target) {
//先清理定时器
clearInterval(element.timeId);
//一会要清理定时器(只产生一个定时器)
element.timeId = setInterval(function () {
//获取div的当前的位置
var current = element.offsetLeft;//数字类型,没有px
//div每次移动多少像素---步数
var step = 10;
step = current < target ? step : -step;
//每次移动后的距离
current += step;
//判断当前移动后的位置是否到达目标位置
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval( element.timeId );
element.style.left = target + "px";
}
}, 20);
}
</script>
</body>
</html>
动画函数封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
/*脱离文档流*/
position: absolute;
}
</style>
<script>
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 20);
}
</script>
</head>
<body>
</body>
</html>
轮播图轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen"><!--相框-->
<ul>
<li><img src="images/1.jpg" width="500" height="200"/></li>
<li><img src="images/2.jpg" width="500" height="200"/></li>
<li><img src="images/3.jpg" width="500" height="200"/></li>
<li><img src="images/4.jpg" width="500" height="200"/></li>
<li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="common.js"></script>
<script>
//获取最外面的div
var box = my$("box");
//获取相框
var screen = box.children[0];
//获取相框的宽度
var imgWidth = screen.offsetWidth;
//获取ul
var ulObj = screen.children[0];
//获取ul中的所有的li
var list = ulObj.children;
//获取ol
var olObj = screen.children[1];
//焦点的div
var arr = my$("arr");
var pic = 0;//全局变量
//创建小按钮----根据ul中的li个数
for (var i = 0; i < list.length; i++) {
//创建li标签,加入到ol中
var liObj = document.createElement("li");
olObj.appendChild(liObj);
liObj.innerHTML = (i + 1);
//在每个ol中的li标签上添加一个自定义属性,存储索引值
liObj.setAttribute("index", i);
//注册鼠标进入事件
liObj.onmouseover = function () {
//先干掉所有的ol中的li的背景颜色
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
//设置当前鼠标进来的li的背景颜色
this.className = "current";
//获取鼠标进入的li的当前索引值
pic = this.getAttribute("index");
//移动ul
animate(ulObj, -pic * imgWidth);
};
}
//设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//自动播放
var timeId= setInterval(clickHandle,1000);
//鼠标进入到box的div显示左右焦点的div
box.onmouseover = function () {
arr.style.display = "block";
//鼠标进入废掉之前的定时器
clearInterval(timeId);
};
//鼠标离开到box的div隐藏左右焦点的div
box.onmouseout = function () {
arr.style.display = "none";
//鼠标离开自动播放
timeId= setInterval(clickHandle,1000);
};
//右边按钮
my$("right").onclick =clickHandle;
function clickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
//如何从第6个图,跳转到第一个图
pic = 0;//先设置pic=0
ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
}
pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
//第五个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一个按钮颜色设置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按钮的背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
};
//左边按钮
my$("left").onclick = function () {
if (pic == 0) {
pic = 5;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
//设置小按钮的颜色---所有的小按钮干掉颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
};
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 10);
}
</script>
<script>
// var num=0;
// function f1(){
//
// num=1000;
// }
// f1();
// console.log(num);
</script>
</body>
</html>
offset 系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
margin: 0;
padding: 0;
}
input{
top: 250px;
position: absolute;
}
#dv1{
width: 200px;
height: 150px;
background-color: red;
position: absolute;
left: 100px;
top: 30px;
}
#dv2{
width: 100px;
height: 50px;
background-color: green;
}
</style>
<script>
//三个大的系列:
/*
* 三组属性
* 1. offset系列中的属性
*
*
* */
</script>
</head>
<body>
<div id="dv1">
<div id="dv2"></div>
</div>
<input type="button" value="显示效果" id="btn"/>
<script src="common.js"></script>
<script>
//红色div的宽和高
my$("btn").onclick=function () {
//在style标签中设置的样式属性获取不到
//style属性中设置的样式属性是可以获取到的
//获取元素的样式,下面的方式废了
//console.log(my$("dv1").style.width);
//console.log(my$("dv1").style.height);
//以后获取元素的宽和高,应该使用offset系列来获取
/*
*
* offsetWidth:获取元素的宽
* offsetHeight:获取元素的高
* offsetLeft:获取元素距离左边位置的值
* offsetTop:获取元素距离上面位置的值
*
* */
console.log(my$("dv1").offsetWidth);
console.log(my$("dv1").offsetHeight);
console.log(my$("dv1").offsetLeft);
console.log(my$("dv1").offsetTop);
};
</script>
</body>
</html>
offset系列具体的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
margin: 0;
padding: 0;
}
input{
top: 250px;
position: absolute;
}
#dv1{
width: 200px;
height: 150px;
background-color: red;
/*父级元素*/
position: relative;
margin-left: 10px;
padding-left: 10px;
left: 100px;
}
#dv2{
width: 100px;
height: 50px;
background-color: green;
position: absolute;
left: 10px;
margin-left: 100px;
}
</style>
<script>
//三个大的系列:
/*
* 三组属性
* 1. offset系列中的属性
*
*
* */
</script>
</head>
<body>
<div id="dv1">
<div id="dv2"></div>
</div>
<input type="button" value="显示效果" id="btn"/>
<script src="common.js"></script>
<script>
my$("btn").onclick=function () {
//没有脱离文档流:
/*
*
* offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin
*
*
* 脱离文档流了
* 主要是自己的left和自己的margin
* */
//子级元素的
console.log(my$("dv2").offsetLeft);
};
</script>
</body>
</html>
通过document获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>24kcs好帅哦</title>
</head>
<body>
<script>
//获取body
console.log(document.body);//获取的是元素--标签
//获取title
console.log(document.title);//标签中的值
document.title="嘎嘎去";
//获取html
console.log(document.documentElement);
</script>
</body>
</html>
案例 鼠标移动挂件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
img{
position: absolute;
}
</style>
</head>
<body>
<img src="images/tianshi.gif" alt="" id="im">
<script src="common.js"></script>
<script>
//鼠标在页面中移动,图片跟着鼠标移动
document.onmousemove=function (e) {
//鼠标的移动的横纵坐标
//可视区域的横坐标
//可视区域的纵坐标
my$("im").style.left=e.clientX+"px";
my$("im").style.top=e.clientY+"px";
};
</script>
</body>
</html>