阅读 53

Web前端基础(06)

###JavaScript中对象分类

  1. 内置对象: number/string/boolean等
  2. 浏览器相关对象BOM: Browser Object Model浏览器对象模型
  3. 页面相关对象DOM: Document Object Model文档对象模型
    ###BOM浏览器相关内容
  • window: 该对象的属性和方法称为全局属性和全局方法,访问时可以省略掉window.
  1. window中常见的方法:
  • window.isNaN() 判断变量是否是NaN
  • window.alert() 弹出提示框
  • window.confirm() 弹出确认框
  • parseInt()/parseFloat() 把字符串或数值 转成整数/转成小数
  • var timer =setInterval(方法,时间间隔) 开启定时器
  • clearInterval(timer) 停止定时器
  1. window中常见的属性:
  • history: 历史(当前窗口的历史)
    window.history.length 获取历史页面数量
    history.back() 返回上一页面
    history.forward() 前往下一页面
  • location: 位置
    window.location.href 获取和修改浏览器的访问地址 location.href=“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];
      ###选择器
  1. 基础选择器 用法和css中一样
  • id选择器 $("#id")
  • 标签名选择器 $(“div”)
  • class选择器 $(".class")
  • 分组选择器 $("#id,div,.class")
  • 任意元素选择器 $("*")
  1. 层级选择器
  • $(“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() 匹配元素的所有子元素们
  1. 过滤选择器
  • $(“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
  1. 内容选择器
  • $(“div:has§”) 匹配包含p子元素的div
  • $(“div:empty”) 匹配空的div
  • $(“div:parent”) 匹配非空的div
  • $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div
  1. 可见选择器
  • $(“div:visible”) 匹配所有显示的div

  • $(“div:hidden”) 匹配所有隐藏的div

  • 显示隐藏相关方法:

    1. $("#abc").show() 显示
    2. $("#abc").hide() 隐藏
    3. $("#abc").toggle() 显示隐藏切换

###选择器回顾:

  1. 基础选择器
  • 标签名 div
  • id #id
  • class .class
  • 分组 div,#id,.class
  • 任意元素 *
  1. 层级选择器
  • 子孙后代 div span
  • 子元素 div>span
  • 弟弟 div+span
  • 弟弟们 div~span
  • 相关方法:
    哥哥 .prev() 哥哥们 .prevAll() 弟弟 .next() 弟弟们 .nextAll()
    所有兄弟 .siblings() 父元素 .parent() 子元素们 .children()
  1. 过滤选择器
  • 第一个 div:first
  • 最后一个 div:last
  • 第n个 div:eq(n)
  • 小于n个 div:lt(n)
  • 大于n个 div:gt(n)
  • 不包含 div:not(xxx)
  • 偶数 div:even
  • 基数 div:odd
  1. 内容选择器
  • 包含子元素 div:has(xxx)
  • 空元素 div:empty
  • 非空元素 div:parent
  • 包含文本的元素 div:contains(xxx)
  1. 可见选择器
  • 所有可见元素 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>
复制代码

在这里插入图片描述


未完待续…

文章分类
前端
文章标签