Web前端基础（06）

###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 获取浏览器的版本信息

###事件

什么是事件: 系统给提供的一些特定时间点, 事件包括:鼠标事件,键盘事件,状态改变事件
鼠标事件:
1. onclick 鼠标点击事件
2. onmouseover 鼠标移入事件
3. onmouseout 鼠标移出事件
4. onmousedown 鼠标按下事件
5. onmouseup 鼠标抬起事件
6. onmousemove 鼠标移动事件
键盘事件
1. onkeydown 键盘按下事件
2. onkeyup 键盘抬起事件
  event.keyCode 获取按键编码 String.fromCharCode() 把按键编码转成字符
状态改变事件
1. onload 页面加载完成事件
2. onchange 值改变事件
3. onresize 窗口尺寸改变事件
事件绑定(给元素添加事件的方式)
1. 事件属性绑定
2. 动态绑定(通过js代码给元素后期添加事件)
事件传递(事件冒泡): 如果某一个位置有多个元素的事件需要响应,响应顺序是从最底层往上层传递(类似气泡),所以也称为事件冒泡
###DOM
Document Object Model文档对象模型,包括和页面相关的内容
通过id获取元素 var d = document.getElementById(“id”)
获取和修改元素的文本内容 innerText
获取和修改元素的html内容 innerHTML
获取和修改元素的值 input.value 元素对象.name/id/value
原生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");
1. js转jq: var jq = $(js);
2. jq转js: var js = jq[0];
  ###选择器

基础选择器用法和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
层级相关的方法:
1. $("#abc").prev(“div”) 匹配id为abc元素的div哥哥元素
2. $("#abc").prevAll() 匹配id为abc元素的哥哥们元素
3. $("#abc").next() 匹配id为abc元素的弟弟元素
4. $("#abc").nextAll() 匹配id为abc元素的弟弟们元素
5. $("#abc").siblings() 匹配id为abc元素的所有兄弟元素
6. $("#abc").parent() 匹配元素的父元素
7. $("#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
显示隐藏相关方法:
1. $("#abc").show() 显示
2. $("#abc").hide() 隐藏
3. $("#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>

在这里插入图片描述

未完待续…

Web前端基础（06）

练习:

猜你喜欢