Web前端基础（06）
【摘要】 🌊 作者主页：海拥🌊 简介：🏆CSDN全栈领域优质创作者、🥇HDZ核心组成员、🥈蝉联C站周榜前十🌊 粉丝福利：粉丝群 每周送六本书，不定期送各种小礼品 JavaScript中对象分类内置对象: number/string/boolean等浏览器相关对象BOM: Browser Object Model浏览器对象模型页面相关对象DOM: Document Object Model文...
🌊 作者主页：海拥
🌊 简介：🏆CSDN全栈领域优质创作者、🥇HDZ核心组成员、🥈蝉联C站周榜前十
🌊 粉丝福利：粉丝群 每周送六本书，不定期送各种小礼品
JavaScript中对象分类
- 内置对象: number/string/boolean等
- 浏览器相关对象BOM: Browser Object Model浏览器对象模型
- 页面相关对象DOM: Document Object Model文档对象模型
BOM浏览器相关内容
- window: 该对象的属性和方法称为全局属性和全局方法,访问时可以省略掉window.
- window中常见的方法:
- window.isNaN() 判断变量是否是NaN
- window.alert() 弹出提示框
- window.confirm() 弹出确认框
- parseInt()/parseFloat() 把字符串或数值 转成整数/转成小数
- var timer =setInterval(方法,时间间隔) 开启定时器
- clearInterval(timer) 停止定时器
- window中常见的属性:
- history: 历史(当前窗口的历史)
window.history.length 获取历史页面数量
history.back() 返回上一页面
history.forward() 前往下一页面 - location: 位置
window.location.href 获取和修改浏览器的访问地址 location.href=“http://www.baidu.com”;
location.reload(); 刷新 - screen 屏幕
screen.width/height 获取屏幕的分辨率 - navigator 帮助/导航
navigator.userAgent 获取浏览器的版本信息
事件
-
什么是事件: 系统给提供的一些特定时间点, 事件包括:鼠标事件,键盘事件,状态改变事件
-
鼠标事件:
- onclick 鼠标点击事件
- onmouseover 鼠标移入事件
- onmouseout 鼠标移出事件
- onmousedown 鼠标按下事件
- onmouseup 鼠标抬起事件
- onmousemove 鼠标移动事件
-
键盘事件
- onkeydown 键盘按下事件
- onkeyup 键盘抬起事件
event.keyCode 获取按键编码 String.fromCharCode() 把按键编码转成字符
-
状态改变事件
- onload 页面加载完成事件
- onchange 值改变事件
- onresize 窗口尺寸改变事件
-
事件绑定(给元素添加事件的方式)
- 事件属性绑定
- 动态绑定(通过js代码给元素后期添加事件)
-
事件传递(事件冒泡): 如果某一个位置有多个元素的事件需要响应,响应顺序是从最底层往上层传递(类似气泡),所以也称为事件冒泡
DOM
-
Document Object Model文档对象模型,包括和页面相关的内容
-
通过id获取元素 var d = document.getElementById(“id”)
-
获取和修改元素的文本内容 innerText
-
获取和修改元素的html内容 innerHTML
-
获取和修改元素的值 input.value 元素对象.name/id/value
<input type="text" name="abc" id="xxx" value="xxx" class="xxx"> -
原生JavaScript中DOM相关内容在jQuery框架中基本实现了全覆盖,所以只需要掌握jQuery框架的使用方式即可
jQuery框架
-
这是一个通过js语言所写的框架,对原生js语言进行封装,作用:提高开发效率.
-
jQuery框架就是一个普通的js文件,通过外部引入方式 把该文件引入即可.
-
js对象和jq对象互相转换:(js对象和jq对象不是一个东西,不能互相调用彼此的方法,有些时候只能的js对象但是需要用到jq框架里面的方法这时候就需要使用以下方式将js对象转成jq,同理有时只能得到jq对象但是需要调用js对象里面的方法,所以需要使用以下方法把jq对象转成js对象)
//js获取对象的方式
var js = document.getElementById(“d1”);
//jq获取对象的方式
var jq = $("#d1");
- 基础选择器 用法和css中一样
- id选择器 $("#id")
- 标签名选择器 $(“div”)
- class选择器 $(".class")
- 分组选择器 $("#id,div,.class")
- 任意元素选择器 $("*")
- 层级选择器
- $(“div span”) 匹配div里面所有的span(包括所有后代span)
- $(“div>span”) 匹配div里面所有的span子元素
- $(“div+span”) 匹配div后面的span
- $(“div~span”) 匹配div后面所有的span
- 层级相关的方法:
- $("#abc").prev(“div”) 匹配id为abc元素的div哥哥元素
- $("#abc").prevAll() 匹配id为abc元素的哥哥们元素
- $("#abc").next() 匹配id为abc元素的弟弟元素
- $("#abc").nextAll() 匹配id为abc元素的弟弟们元素
- $("#abc").siblings() 匹配id为abc元素的所有兄弟元素
- $("#abc").parent() 匹配元素的父元素
- $("#abc").children() 匹配元素的所有子元素们
- 过滤选择器
- $(“div:first”) 匹配第一个div
- $(“div:last”) 匹配最后一个div
- $(“div:eq(n)”) 匹配下标为n的div 从0开始
- $(“div:lt(n)”) 匹配下标小于n的div
- $(“div:gt(n)”) 匹配下标大于n的div
- $(“div:not(.abc)”) 匹配所有div 排除掉class值为abc的div
- $(“div:even”) 匹配下标为偶数的div
- $(“div:odd”) 匹配下标为基数的div
- 内容选择器
- $(“div:has§”) 匹配包含p子元素的div
- $(“div:empty”) 匹配空的div
- $(“div:parent”) 匹配非空的div
- $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div
- 可见选择器
- $(“div:visible”) 匹配所有显示的div
- $(“div:hidden”) 匹配所有隐藏的div
- 显示隐藏相关方法:
- $("#abc").show() 显示
- $("#abc").hide() 隐藏
- $("#abc").toggle() 显示隐藏切换
选择器回顾:
- 基础选择器
- 标签名 div
- id #id
- class .class
- 分组 div,#id,.class
- 任意元素 *
- 层级选择器
- 子孙后代 div span
- 子元素 div>span
- 弟弟 div+span
- 弟弟们 div~span
- 相关方法:
哥哥 .prev() 哥哥们 .prevAll() 弟弟 .next() 弟弟们 .nextAll()
所有兄弟 .siblings() 父元素 .parent() 子元素们 .children()
- 过滤选择器
- 第一个 div:first
- 最后一个 div:last
- 第n个 div:eq(n)
- 小于n个 div:lt(n)
- 大于n个 div:gt(n)
- 不包含 div:not(xxx)
- 偶数 div:even
- 基数 div:odd
- 内容选择器
- 包含子元素 div:has(xxx)
- 空元素 div:empty
- 非空元素 div:parent
- 包含文本的元素 div:contains(xxx)
- 可见选择器
- 所有可见元素 div:visible
- 所有不可见 div:hidden
- 相关方法: 显示.show() 隐藏 .hide() 显示隐藏切换 .toggle()
练习:
1.定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var i = 0;
//开启定时器每隔1秒调用- -次myfn方法
//直接调用方法写括号,把方法作为参数传递时不写括号
var time1 = setInterval(myfn, 1000);
function myfn() {
console.log(i++);
if(i>10){
// 停止定时器
clearInterval(time1)
}
}
// 第二种
var time2 = setInterval(function(){
console.log("第二种:"+i)
if(i>10){
// 停止定时器
clearInterval(time2)
}
},2000);
//只执行一次的定时器
setTimeout(function(){
alert("时间到");
},3000);
</script>
</body>
</html>
2.定时器练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mydiv"></div>
<script type="text/javascript">
//实现每隔1秒钟 往mydiv里面添加一-张图片当10秒后停止添加
var timer = setInterval(function(){
mydiv.innerHTML+="<img width='150' height='100' src='../images/img8.jpg'>";
}, 1000);
//创建一个10秒后执行的定时器
setTimeout (function(){
clearInterval(timer);
},10*1000);
</script>
</body>
</html>
3.鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color:red;
}
</style>
</head>
<body>
<div onmouseover= " overfn()" onmouseout= " outfn()" onmousedown= " downfn()"
onmouseup= "upfn()" onmous emove= " movefn()">
</div>
<script type="text/javascript">
function downfn(){
console.log("鼠标按下");
}
function upfn(){
console. log("鼠标抬起");
}
function movefn(){
console.log("鼠标移动");
}
function overfn(){
//快捷写法 clog
console.log("鼠标移入");
}
function outfn(){
console.log("鼠标移出");
}
</script>
</body>
</html>
4.键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type= "text/javascript">
//页面加载完成事件!
onload =
function(){
i1.value="abc";
function downfn(){
//得到按键编码
console.1log("键盘按下:"+event.keyCode);
function upfn(){
//把按键编码转成字符
console.log("键盘抬起:"+String.fromCharCode(event.keyCode)) ;
}
</script>
</head>
<body>
<input type= "text" onkeydown= "downfn()" onkeyup="upfn()" />
<script type="text/javascript">
function downfn(){
console.log("键盘按下");
}
function upfn(){
console.log("键盘抬起");
}
</script>
</body>
</html>
5.值改变事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="属性事件绑定"
onclick="alert('事件触发!')"/>
<input type="button" value="动态绑定" id="btn" />
<select id="s" onchange="changefn()">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option >广州</option>
</select>
<script type="text/javascript">
//动态绑定事件 工作中使用多,可以将js代码和html代码分离
btn.onclick = function(){
alert("动态绑定成功!");
}
function changefn(){
//当值改变时得到下拉选里面的值
alert(s.value);
}
onresize = function(){
console.log("窗口尺寸改变了");
}
</script>
</body>
</html>
6.事件传递
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
border:1px solid red;
}
</style>
</head>
<body>
<div onclick="alert('div')">
<p onclick="alert('p')">
<input type="button" value="按钮" onclick="alert('按钮')"/>
</p>
</div>
</body>
</html>
7.引入jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1">
</div>
<input type="text" />
<!-- 引入jq框架 script标签如果引入了文件就不能在标签体内继续写代码否则不执行 -->
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//通过id选择器选择到页面中的div然后修改里面的文本为abc
$("#d1").text("abc");
//原生js写法
/* var d1 = document.getElementById("d1");
d1.innerText="abc"; */
//val() 等效js中的value属性 不能混用
$("input").val("测试");
//js获取对象的方式
var js = document.getElementById("d1");
//jq获取对象的方式
var jq = $("#d1");
</script>
</body>
</html>
8.对象转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="i1"/>
<input type="button" value="js转jq" id="b1"/>
<input type="button" value="jq转js" id="b2"/>
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// jQuery中的动态绑定事件的方式
$("#b1").click(function(){
//得到js对象
var js = document.getElementById("i1");
//js对象转成jq对象
var jq = $(js);
//jq.val() 获取文本框的值
alert(jq.val());
});
$("#b2").click(function( ){
//得到js对象
var jq = $("#i1");
//jq对象转成js对象，jq对象实际上就是一个数组
var js = jq[0];
alert(js.value);
});
</script>
</body>
</html>
未完待续…
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）