目录
BOM模型
BOM:浏览器将当前页面加载到内存中,生成了一个用来描述窗口属性和状态的对象window。这个对象就是浏览器对象模型DOM。浏览器对象模型中一共有几大模块分别是
document文档对象模型：用于读写html
frames: html自框架
hostory:浏览器的历史记录
location:当前页面路径
navigator:浏览器相关资源
screen:获取屏幕尺寸
window：就是浏览器对象模型。我们使用这个对象就可以有能力与浏览器进行对话
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window定时器
单次定时器:可以让函数在多少秒后执行一次
var t1 = setTimeout(函数名称,毫秒值) 1000毫秒=1秒
返回值t表示当前定时器它是一个number类型的数值
循环定时器:可以让我们的函数每隔多少秒执行一次
var t = setInterval(函数名称,毫秒值)
返回值t表示当前定时器它是一个number类型的数值
清除定时器
clearTimeout(t1)
clearInterval(t)
案例１-轮播图
每隔1000毫秒自动轮换下一张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../img/1.jpg" id="m1" />
</body>
<script>
//2、写一个函数 (修改页面中图片的src地址)
var index =1;
function fun1(){
//获取m1这个标签
var img=document.getElementById("m1")
img.src="../img/"+index+".jpg";
index++;
if(index>3){
//重新给值
index=1;
}
}
//3、写一个定时器 每隔1秒调用一下这个函数
setInterval(fun1,1000)
</script>
</html>
2 -定时显示图片
图片默认隐藏，页面加载后延迟3000毫秒显示图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
/*绝对定位*/
position: absolute;
bottom: 0px;
right: 0px;
/*隐藏div*/
display: none;
}
</style>
</head>
<body>
<div id="d1">
<img src="../img/西门大官人.jpg" width="200px"height="200px" />
</div>
</body>
<script>
//显示div
function show(){
//获取到div
var div =document.getElementById("d1")
//设置div显示
div.style.display="block"
}
//三秒后执行该函数
setTimeout(show,3000)
</script>
</html>
3 -显示系统当前时间
1、写一个函数 (往div中写当前日期的)
2、在开始计时上绑定单击事件
在点击事件触发的函数中 写个循环定时器每个1秒调用一个 写日期到div中这个函数
3、在停止刷新上绑定单机事件
事件中主要是清除定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="d1">
</div>
<input type="button" value="停止刷新" onclick="clearTime()" />
<input type="button" value="开始计时" onclick="startTime()" />
</body>
<script>
//1、写一个函数 (往div中写当前日期的)
function fun1(){
//创建日期对象
var d= new Date();
//将当前日期转换为本地的字符串形式
var time =d.toLocaleString()
//获取到div
var div =document.getElementById("d1")
//往div中写日期
div.innerHTML="当前的日期是:"+time
}
//调用方法
fun1();
//定时器返回值
var t;
//2、在开始计时上绑定单击事件
function startTime(){
if(t!=null){
//先清除
clearInterval(t)
}
//写个循环定时器每个1秒调用一个 写日期到div中这个函数
t=setInterval(fun1,1000)
}
function clearTime(){
//清除定时器
clearInterval(t)
}
</script>
</html>
window弹出框
警告框
alter()
确认取消框
confirm()
提示录入框
prompt()
window其他对象
Window Location
页面重定向
loaction.href = “url” 页面重定向
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
Window History
history.back()上一页
history.foward()下一页
history.go(1) 数值是正整数表示 下xx页 如果是负整数表示 上 xx页
Window Screen
screen.availWidth - 可用的屏幕宽度 整个电脑屏幕的宽度
screen.availHeight - 可用的屏幕高度 除了任务栏以外的高度
Window Document
document.body.offsetWidth-网页可见区域的宽度（包括连线的宽） html网页的宽度1280-body的默认左右外外边距16 得出1264
document.body.offsetHeight-网页可见区域的高度（包括连线的高） html网页的高 在body中标签的高度+标签的上下边框
案例 -桌面弹球
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 70px;
height: 70px;
border: 1px solid rgb(30,144,255);
background-color: rgb(30,144,255);
border-radius: 50%;
}
/* *所有标签
所有标签都没有边距
* */
*{
margin: 0px;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
<script>
/*
marginLeft:设置div小球的左外边距
*
* */
//移动的外边距 像素
var index=1
//网页可见宽度
var width =document.body.offsetWidth
function toRight(){
//得到小球
var ball =document.getElementById("ball")
//设置小球的左外边距
ball.style.marginLeft=index+"px";
index++;
//小球可移动的最大的宽度距离
if(index>=width-75){
//折返
setTimeout(toLeft,1)
}else{
setTimeout(toRight,1)
}
}
function toLeft(){
//得到小球
var ball =document.getElementById("ball")
//设置小球的左外边距
ball.style.marginLeft=index+"px";
index--;
if(index<=0){
//到达做左侧了
setTimeout(toRight,1)
}else{
setTimeout(toLeft,1)
}
}
//调用往右跑
toRight();
</script>
</html>
jQuery基本介绍
jQuery简介
概述:
jQuery是对js的封装、主要的思想是少写多做。它可以简化我们js编程、没有浏览器兼容性问题
jQuery引入
jQuery基本语法
格式
$(选择器)
jQuery(选择器)
$==jQuery
注意:jQuery单词严格区分大小写
jQuery页面加载
概述：页面加载函数、等页面加载完成后再执行的函数
window.οnlοad=function(){} js页面加载函数
$(function(){}) jq页面加载函数 方式一
$(document).ready(function(){}) jq页面加载函数 方式二
js与jQuery页面加载函数的区别 面试
1、js的页面加载函数一个页面中允许多个、但是最终只执行最后一个
2、js页面加载函数与jq页面加载函数同时存在的时候,jq的页面加载函数最先执行
3、jq页面加载函数一个页面允许多个、执行的时候按照顺序依次执行
4、js的页面加载函数会等待当前页面中所有的静态资源加载成功后才会执行(包括图、音频…)
jq的页面加载函数不会等到当前页面中所有的静态资源加载成功后才会执行(包括图、音频…)
DOM对象和jQuery对象转换
DOM对象就是js对象
转换：js转jQuery jQuery转js
DOM转jQuery $(js对象)
jQuery转DOM 对象[0]
val(); jQuery方式获取标签中的value值
val(内容); jQuery方式修改标签中的value值
jQuery选择器
jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的定位，从而完成元素属性和行为的处理。
jQuery选择器的分类：
基本选择器******
层次选择器**
过滤选择器*****
属性选择器*****
表单选择器*****
this选择器**
基本选择器
id选择器 $(#标签上的id) 快速获取单个标签
标签选择器 $(标签名) 获取当前页面中某一种所有标签
类选择器 $(.类名) 获取当前页面中作用相同类型样式的所有标签
层级选择器
form input 获取到form标签下所有的input标签 (子孙节点)
form > input 获取到form标签下所有的input标签 (子节点)
form +input 获取 form同级下的一个的input标签(兄弟节点)
form ~input 获取form同级下的所有input标签(兄弟节点)
过滤选择器
:header 获取当前页面中所有的标题标签
:gt(index) 获取当前页面中索引大于xx值所有标签
:lt(index) 获取当前页面中索引小于xx值所有标签
:eq(index) 获取当前页面中所以等于xx值所有标签
:odd 获取当前页面中奇数行的所有标签
:even 获取当前页面中偶数行的所有标签
:first 获取第一个标签
:last 获取最后一个标签
属性选择器
[href] 获取当前页面中含有href属性的标签
[href = ’http://www.baidu.com’] 获取当前页面中href属性=xx属性值的标签
[href != ’http://www.baidu.com’]获取当前页面中href属性!=xx属性值的标签
[href $= ’.com’] 获取当前页面中含有href属性并且属性值以.com结尾的标签
[href ^= ’http’] 获取当前页面中含有href属性并且属性值以http开头标签
表单选择器
:disabled 获取当前页面中未激活的标签
:enabled 获取当前页面中可用的标签
:checked 获取当前页面中被选中的标签
:selected 获取当前页面中被选中的下拉项
this选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
用户名:<input type="text" id="big" name="username" />
</body>
<script>
/*js动态绑定*/
/* document.getElementById("big").οnblur=function(){
}
*/
/*在哪个节点上绑定事件哪个节点就是this*/
$("input[name='username']").blur(function(){
//$(js对象) 其实就相当于 将this这个js转成了jQuery对象
//再调用jQuery的方法
alert(this.value)
//var value =$(this).val();
//alert(value)
})
</script>
</html>
扫一扫
859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
