html前端学习十：javascript简介获取标签

最新推荐文章于 2023-01-20 10:00:00 发布

myt2000

最新推荐文章于 2023-01-20 10:00:00 发布

阅读量225

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/myt2000/article/details/103660610

版权

html 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

javascript简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

直译式脚本语言：边执行，边编译

特点：
js是由unicode字符集编写的，完全支持中文（Unicode是Ascii和lation-1超集）

js注意事项；

js严重区分大小写；
每段代码结束后需要加分号，表示一句代码解释；
构造函数首字母大写，再驼峰原则；
函数命名，首字母小写；
注释： //当行注释 /* */多行注释
三种执行方式：
1. 内联方式：在标签上执行，不建议使用
```
 <div class="box" onclick="alert(1)"></div>    
```
效果点击盒子，弹出1
2. body > script
3. 通过script src属性引用js脚本
```
<script src="first-js.js"></script>
```

js获取节点对象

获取ID对象：
document.getElementById(“id名字”) 返回只有一个

<body>
    <div id="box"></div>
</body>
<script>
	alert(document.getElementById("box");)
	
</script>

获取class对象：对象可以可以多个
document.getElementByClassName(“class名字”);
document.getElementsByClassName(""); 获取多个对象仅支持IE9+ 返回一个列表——类数组


<body>
    <div class="parent" id="box"></div>
	<a class="parent" href="#"></a>
	<p class="parent"></p>
</body>
<script>
	// alert(document.getElementById("box");)
	alert(document.getElementsByClassName("parent")[0]);
</script>

获取标签对象
document.getElementsByTagName(“tag标签名字”) 通过Tag标签来获取元素返回集合

<body>
    <div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
<script>
    alert(document.getElementsByTagName("div").length); //返回div标签的长度
<script>

获取name属性的值
document.getElementsByName(“name属性”)

	<div name="username">1</div>
	<div name="brooks">2</div>
	<div name="password">3</div>
	<div name="username">4</div>
<script>	
alert(document.getElementsByName("username").length);	
</script>	


<script>	
alert(document.getElementsByName("username").innerHTML);	//innerHTML显示指定值的内容
</script>

innerHTML 解析为HTML
改写html,将内容1替换

<div id="box">1</div>
<script>
    var box = document.getElementById("box");
	box.innerHTML= '请<a href="https://baidu.com">百度</a>';
<script>

效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7LEbHLIE-1577066177123)(http://img0.ph.126.net/TDVaGG0JOi2NhDHjF0uN1Q==/6632752217514298743.png)]

innerText 仅显示文字

	var box = document.getElementById("box");
	box.innerText = '请<a href="https://baidu.com">百度</a>';

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xbefuEqs-1577066177124)(http://img0.ph.126.net/RlXMDhfnV-SNCRinE0_msg==/1281274094006921547.png)]

innerValue
如果有其他标签，不显示标签效果，只显示内部内容

关键字var

定义变量，所有的变量都需要这种方式定义

所有的变量必须使用var声明之后使用
变量名定义：字母、数字、下划线、$ （数字不能作为开头，关键字不能作为变量）
没有被赋值的变量的初始值是undefined

六大数据类型

Number —数字
String — 字符串
Boolean — 布尔
function — 函数函数名字加括号是执行函数
undefined — 未定义
object — 对象只有对象曾能去点方法点属性，数组也是对象

var obj = {
    "name" : "slice",
    "age"  :  18
};

注册事件（绑定事件、事件监听）Eventlistener

onmouseenter / oumouseover 鼠标划入

鼠标划入显示div的内容

<body>
    <div id="box">12345</div>
</body>
<script>
	var box =document.getElementById("box");
	box.onmouseover = function(){
		alert(box.innerHTML);
	};
	
</script>

onmouseleave / onmouseout 鼠标划出

onmousemove 鼠标移动

onclick 点击左键

ondbclick 双击左键

onblur 失去焦点能被获取焦点的元素才能触发失去焦点

onfocus 得到焦点能被获得到焦点的元素才能触发失去焦点

能被输入字符才能触发的事件

onkeydown 键盘按下某键

onkeyup 键盘抬起某键

onkeypress 键盘按下并抬起某键

通过css3样式，结合javascript变化

-moz代表火狐的内核
-ms代表IE内核
-webkit代表webkit内核，常见是的是谷歌和苹果浏览器

transition语法

用于图像渐变的变化速度和方式

transition: property duration timing-function delay;

timing-function的详细介绍： http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp

实例:div盒子100px渐变时间为1s,变为300px

    	#box-on {
    		width: 100px;
    		height: 100px;
    		background: pink;
    		-webkit-transition：all 1s ease;
    		-o-transition: all 1s ease;
    		transition: all 1s ease;
    	}

css3样式控制案例

 <style type="text/css">
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	#box {
    		width: 300px;
    		height: 300px;
    		background: skyblue;
    		-webkit-transition：all 1s linear;
    		-o-transition: all 1s linear;
    		transition: all 1s linear;
    		border-radius: 50%;
    	}
    	#box-on {
    		width: 100px;
    		height: 100px;
    		background: pink;
    		-webkit-transition：all 1s ease;
    		-o-transition: all 1s ease;
    		transition: all 1s ease;
    	}
    	#parent {
    		width: 300px;
    		height: 300px;
    	}
    </style>
</head>

<body>
	<div id="parent">
    	<div id="box"></div>
	</div>
    <button id="btn">变化</button>


<script>
	var btn = document.getElementById("btn");
	var box = document.getElementById("box");


	btn.onclick = function() {
		if(box.id == "box"){
			box.id="box-on";
		} else {
			box.id ="box";
		}
	}

通过javascript调整样式

box.style.marginTop 等同于 box.style[margin]

   <style>
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	#box {
    		width: 150px;
    		height: 150px;
    		background: orange;
    	}
	</style>
</head>

<body>
    <div id="box">
		    	
    </div>
<script>
	var box = document.getElementById("box");

	box.onclick = function() {
		box.style.width = "500px";
		box.style.height = "300px";
		box.style.transition = "all 1s linear";
		box.style.marginTop = "200px";
		box.style.marginLeft = "200px";
		// box.style["margin-top"] = "200px";   等同于box.style.marginTop = "200px";
	}
	
</script>

//也可以这样写
//		var a = "margin-top";
//		box.style[a] = "180px";

样式修改简写模式：

box.style.cssText += "width:900px;height:500px;margin-top:100px;margin-left:150px";


浮动的方式
		//浮动
		box.style.cssText +="float:right;"; //IE9+  等价于如下方式：
		box.style.cssFloat = "right"; //IE9
		
		
		box.style.styleFloat ="right";  //IE8-