JavaScript魅力总结(1-5)

最新推荐文章于 2019-04-21 15:02:40 发布
最新推荐文章于 2019-04-21 15:02:40 发布
阅读量179 收藏
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yexudengzhidao/article/details/89338562
版权

初探JavaScript魅力1

  1. 获取CSS样式的名称：
    • className
    • classList
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
            <title>
                无标题文档
            </title>
            <style>
                #div1 {width:100px; height:100px; border:1px solid black;}
				.box {background:red;}
            </style>
            <script>
                function toRed()
				{
					var oDiv=document.getElementById('div1');
	
					oDiv.className='box';
				}
            </script>
        </meta>
    </head>
    <body>
        <input onclick="toRed()" type="button" value="变红"/>
        <div id="div1">
        </div>
    </body>
</html>
  1. 任何标签都可以加ID，包括link
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link id="l1" rel="stylesheet" type="text/css" href="css1.css" />
<script>
function skin1()
{
	var oL=document.getElementById('l1');
	
	oL.href='css1.css';
}

function skin2()
{
	var oL=document.getElementById('l1');
	
	oL.href='css2.css';
}
</script>
</head>

<body>
<input type="button" value="皮肤1" onclick="skin1()" />
<input type="button" value="皮肤2" onclick="skin2()" />
</body>
</html>

初探JavaScript魅力2

  1. 对象中能用点的就一定能用中括号的形式，反过来则不一定。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red;}
</style>
<script>
function setStyle(name, value)
{
	var oDiv=document.getElementById('div1');
	
	oDiv.style[name]=value;
}
</script>
</head>

<body>
<input type="button" value="变宽" onclick="setStyle('width', '400px')" />
<input type="button" value="变高" onclick="setStyle('height', '400px')" />
<input type="button" value="变绿" onclick="setStyle('background', 'green')" />
<div id="div1">
</div>
</body>
</html>
  1. 选项卡实现思路：利用对象可以扩展无限属性，给对象添加index索引
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; border:1px solid #999; display:none;}
</style>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var aBtn=oDiv.getElementsByTagName('input');
	var aDiv=oDiv.getElementsByTagName('div');
	
	for(var i=0;i<aBtn.length;i++)
	{
		aBtn[i].index=i;
		aBtn[i].onclick=function ()
		{
			for(var i=0;i<aBtn.length;i++)
			{
				aBtn[i].className='';
				aDiv[i].style.display='none';
			}
			// console.log(this);
			// console.log(aDiv[this.index])
			this.className='active';
			//alert(this.index);
			aDiv[this.index].style.display='block';
			// this.style.display = 'block';
		};
	}
};
</script>
</head>

<body>
<div id="div1">
	<input class="active" type="button" value="教育" />
	<input type="button" value="培训" />
	<input type="button" value="招生" />
	<input type="button" value="出国" />
    <div style="display:block;">1111</div>
    <div>2222</div>
    <div>333</div>
    <div>4444</div>
</div>
</body>
</html>

或者在标签上添加index，然后通过getAttribute()来获取index属性

<div id="div1">
	<input class="active" type="button" value="教育" index="0" />
	<input type="button" value="培训" index="1" />
	<input type="button" value="招生" index="2" />
	<input type="button" value="出国" index="3" />
    <div style="display:block;">1111</div>
    <div>2222</div>
    <div>333</div>
    <div>4444</div>
</div>

定时器的使用

  1. absolute 可以相对于前面的absolute、relative、fixed相对定位
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#fixed {
			width: 300px;
			height: 400px;
			background: red;
			position: fixed;
			left: 20px;
			top: 100px;
		}
		#absolute {
			width: 200px;
			height: 200px;
			background: yellow;
			position: absolute;
			left: 10px;
			top: 20px;		
		}
	</style>
</head>
<body>
	<div id="fixed">
		<div id="absolute"></div>
	</div>

</body>
</html>
  1. 延迟弹出框注意事项：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {float:left; margin:10px;}
#div1 {width:50px; height:50px; background:red;}
#div2 {width:250px; height:180px; background:#CCC; display:none;}
</style>
<script>
window.onload=function ()
{
	var oDiv1=document.getElementById('div1');
	var oDiv2=document.getElementById('div2');
	var timer=null;
	
	oDiv1.onmouseover=function ()
	{
		//先将定时器清除
		clearTimeout(timer);
		oDiv2.style.display='block';
	};
	oDiv1.onmouseout=function ()
	{
		timer=setTimeout(function (){
			oDiv2.style.display='none';
		}, 500);
	};
	
	//在还没有将异步函数放入队列之前将定时器清除
	// clearTimeout不会在内存中销毁变量
	oDiv2.onmouseover=function ()
	{
		clearTimeout(timer);
	};
	oDiv2.onmouseout=function ()
	{
		timer=setTimeout(function (){
			oDiv2.style.display='none';
		}, 500);
	};
};
</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
  1. 数码时钟
    1. 在使用setInterval()函数的时候为了避免第一次加载仍为原来的转态，那么需要先执行一下setInterval()里的那个函数。
    2. ‘abc’.charAt() //取字符串中的字符
    3. ‘bad’[0] //取字符串中的字符
  2. 无缝滚动
    1. offsetWidth获取元素对象的border+padding+width
    2. oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; 复制一份
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}
#div1 ul {position:absolute; left:0; top:0;}
#div1 ul li {float:left; width:178px; height:108px; list-style:none;}
</style>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var oUl=oDiv.getElementsByTagName('ul')[0];
	var aLi=oUl.getElementsByTagName('li');
	
	var speed=-2;
	
	//oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
	oUl.innerHTML+=oUl.innerHTML;
	oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
	
	function move(){
		//注意这里是相对于父元素的绝对定位
		if(oUl.offsetLeft<-oUl.offsetWidth/2)
		{
			oUl.style.left='0';
		}
		if(oUl.offsetLeft>0)
		{
			oUl.style.left=-oUl.offsetWidth/2+'px';
		}
		oUl.style.left=oUl.offsetLeft+speed+'px';
	}
	var timer=setInterval(move, 30);
	
	oDiv.onmouseover=function ()
	{
		clearInterval(timer);
	};
	
	oDiv.onmouseout=function ()
	{
		timer=setInterval(move, 30);
	};
	
	document.getElementsByTagName('a')[0].onclick=function ()
	{
		speed=-2;
	};
	document.getElementsByTagName('a')[1].onclick=function ()
	{
		speed=2;
	};
};
</script>
</head>

<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
    <ul>
    	<li><img src="img2/1.jpg" /></li>
    	<li><img src="img2/2.jpg" /></li>
    	<li><img src="img2/3.jpg" /></li>
    	<li><img src="img2/4.jpg" /></li>
    </ul>
</div>
</body>
</html>
  1. 基础运动
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
            <title>
                无标题文档
            </title>
            <style>
                #div1 {width:200px; height:200px; background:red; position:absolute; left:0; top:50px;}
            </style>
            <script>
                setInterval(function (){
					var oDiv=document.getElementById('div1');
					oDiv.style.left=oDiv.offsetLeft+10+'px';
				}, 30);
            </script>
        </meta>
    </head>
    <body>
        <div id="div1">
        </div>
    </body>
</html>

4 深入javascript

  1. 通过arguments对象可以实现模拟JavaScript里函数重载的功能
  2. 取非行间样式（兼容性写法），obj.currentStyle是IE的写法，getComputedStyle()是Chrome和Firefox的写法。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red;}
</style>
<script>
function getStyle(obj, name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj, false)[name];
	}
}

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
		
	alert(getStyle(oDiv, 'backgroundColor'));
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>
  1. 不管是往数组前面还是后面都可以同时添加多个，例如：arr.push(2,4,5); arr.unshift(5,6,7);
    但是，从数组前面shift还是后面pop都只能一次一个，不管写不写参数。
  2. splice函数，这个函数返回删除的值
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
            <title>
                无标题文档
            </title>
            <script>
                var arr=[1,2,3,4,5,6];

				//删除：splice(起点, 长度)
				// arr.splice(2, 3);

				//插入：splice(起点, 长度, 元素...);
				// arr.splice(2, 0, 'a', 'b', 'c');

				arr.splice(2, 2, 'a', 'b', 'd');

				alert(arr);
            </script>
        </meta>
    </head>
    <body>
    </body>
</html>

5. Ajax基础

function ajax(url, fnSucc, fnFaild)
{
	//1.创建Ajax对象
	if(window.XMLHttpRequest)
	{
		var oAjax=new XMLHttpRequest();
	}
	else
	{
		var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	//2.连接服务器（打开和服务器的连接）
	oAjax.open('GET', url, true);
	
	
	//3.发送
	oAjax.send();
	
	//4.接收
	oAjax.onreadystatechange=function ()
	{
		if(oAjax.readyState==4)
		{
			if(oAjax.status==200)
			{
				//alert('成功了：'+oAjax.responseText);
				fnSucc(oAjax.responseText);
			}
			else
			{
				//alert('失败了');
				if(fnFaild)
				{
					fnFaild();
				}
			}
		}
	};
}
. . . . .
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
开始感受JavaScript的魅力
weixin_42699636的博客
08-01 203
** 初探JavaScript的魅力1 ** 第一个js特效——鼠标提示框 首先，我们要求鼠标移入移出提示框的时候有特定的变化，那么我们在没有学习js的时候我们都是直接把标签的样式进行改变即可，但是使用起来往往不太方便。 改变div样式 我们直接将复选框的样式改变 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展...
初探JavaScript魅力-笔记
eluanshi12的博客
10-24 253
初探JavaScript魅力-01初探JavaScript魅力-01JavaScript是一门用于给网页添加功能、交互的脚本语言。<html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> #div1{ width:200px; height: 100p
JavaScript魅力总结(17-20)
EmotionComputer
04-21 132
JS运动基础 负数向上取整 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> alert(Math.ceil(-9.8)); //-9 //向上取整 alert(Math.floor(4...
js的强大魅力
心若冰清
09-17 255
[code="html"] 分数等级查询 function graded(){ var score = document.getElementById("score").value; var rate = (score == '' && '请输入') || (score < 0 && '不会吧') || (score >= 0 && score < 60 &amp
【JavaScript从入门到精通】第一课 初探JavaScript魅力-01
GBin1中文互联
10-23 192
第一课 初探JavaScript魅力-01    JavaScript是什么   如今我们打开一个大型的网站，都会有很多JS效果的功能和应用。对于学过CSS+HTML的同学，即使是像淘宝那样的网站，用一两天时间也可以将布局写出来。但对于一个网页来说，除去CSS，HTML这样描述静态布局的元素外，还有诸如弹窗，幻灯，编辑等很难用纯粹的CSS+HTML实现的功能，而这些都是通过JavaScr...
初识JS的魅力（4）
fukaiqiang
03-14 312
本篇博文主要介绍了style和className的区别和需要注意的地方、提取行间事件（把onclick提取出来和把script提取出来）、匿名函数、getElementsByTagName、循环的使用方法以及全选、反选和不选的案例。通过阅读本篇博文，我们又对JS的基础有了更深一层的了解，为后面的深入学习JS打下了良好的基础，大家加油。
JavaScript 你特有的魅力
android_0327的博客
10-08 257
JavaScript，你特有的魅力 数据可视化 在过去我阅读的一些书籍里面，主要是以Processing作为可视化的语言——它起始于2001年，它最初是面向美术工作者和设计者创建的，后来变成了全面的设计和原型工具，可以用于创建复杂数据可视化领域。 移动端应用： Cordova 接着就是PhoneGap（今天的Cordova），将WebView带向了移动应用，也将JavaSc
一、初探Javascript魅力(1)_看智能社blue老师JS视频整理的笔记
cherry_vicent的专栏
12-24 3077
1、javascript是什么 根据用户的一些操作，然后来修改页面上的一些元素、属性等。 （1）HTML+CSS静态页面，JS给页面添加动的效果 （2）网页特效的原理 javascript就是修改样式 （3）编写JS的流程： 【1】布局：HTML+CSS 【2】属性：确定要修改哪些属性 【3】事件：确定用户做哪些操作 【4】编写JS：在事件中，用JS来修改页面元素的样式
JS 的魅力
luhuajcdd的专栏
02-14 436
http://js1k.com/2012-love/demo/1015
JavaScript魅力总结(6-10)
EmotionComputer
04-19 305
6. BOM应用 打开和关闭标签页 <body> <input onclick="window.close();" type="button" value="close"/> <input onclick="window.open();" type="button" value="close"/> </body> ...
初探JavaScript魅力（1）
weihongda666的博客
12-05 192
wu
第一篇博客笔记
weixin_30399055的博客
03-15 75
一、初探JavaScript魅力 基本知识： JavaScript是什么 网页特效原理 　　-JavaScript就是修改样式 编写JS流程 　　- 布局：HTML + CSS 　　- 属性：确定修改哪些属性 　　- 事件：确定用户做哪些操作（产品设计） 　　- 编写js：在事件中，用js来修改页面元素样式 （小注：html + css 是静态页面，html + css + j...
JavaScript魅力总结(13-14)
EmotionComputer
04-20 151
1. JS面向对象基础 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> 无标题文档 </title> <script&g...
【JavaScript从入门到精通】第二课 初探JavaScript魅力-02
GBin1中文互联
10-23 127
第二课 初探JavaScript魅力-02   变量   说起变量，我们不得不提起我们有一部比较古老的电视剧叫《包青天》。包青天有一把非常厉害的宝剑叫“尚方宝剑”，见到尚方宝剑有如见到皇帝。某种程度来说，变量具有类似于尚方宝剑的特性。 我们对第一课末的代码进行如下修改： function toGreen() { var oDiv=document.getElemen...
初识JS的魅力（1）
fukaiqiang
03-07 319
这篇文章主要介绍了JS的简介和实现原理，以及JS开发中函数的运用，如何初步解决兼容性问题，还介绍了事件的运用，对于初学JS的伙伴来说，读完这篇文章可以对JS有一个基础的认识，对后面运用JS开发非常有益。
初探js魅力 (鼠标提示框、换肤、函数、重用、函数传参、.和[]、 全选不选和反选、选项卡)
weixin_40512519的博客
09-02 216
第一个JS特效：鼠标提示框 鼠标移入到input时，让div1显示。鼠标移出input时，div1隐藏。 &lt;style&gt; #div1{ width: 200px; height: 100px; background-color: #cccccc; border: 1px solid #999; ...
node-v12.22.1-linux-x64.tar.xz
最新发布
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
JavaScript 去随机数1-100
03-30
```javascript var randomNum = Math.floor(Math.random() * 100) + 1; console.log(randomNum); ``` 这个代码会在控制台输出一个随机数。说明： - `Math.random()` 生成一个0到1之间的随机数（包括0，不包括1）。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

. . . . .

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值