javascript

最新推荐文章于 2024-07-29 23:41:14 发布
最新推荐文章于 2024-07-29 23:41:14 发布
阅读量366 收藏
点赞数
分类专栏： web 前端 文章标签： html+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16688265/article/details/81675436
版权

javascript

嵌入方式

1.行间事件

<input type="button" name="" onclick="alert('ok！');">

2.页面script标签嵌入

<script type="text/javascript">        
    var a = '你好！';
    alert(a);
</script>

3.外部引入

<script type="text/javascript" src="js/index.js"></script>
注释

1.单行注释

//var a = 1;

2.多行注释

/*
var name = 'xuhaixiang';
console.log(name)
*/
数据类型

1.number
2.string
3.boolen
4.undefined
5.null
6.object

DOM(document object map)
1.window.onload = function(){} 用法

放在头部的js在操作dom元素时，由于页面是从上到下执行，会报错；将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了

2.操作元素属性

2.1 "."操作

<a href="http://www.baidu.com" id="baidu">百度</a>
var oA = document.getElementById('baidu');
//读取属性值
console.log(oA.href,oA.id)
//设置属性
oA.title = '前往百度'；
oA.style.color = 'red';
oA.style.fontSize = '15px';

2.2 "[]"操作

<a href="http://www.baidu.com" id="baidu">百度</a>
var oA = document.getElementById('baidu');
oA['title'] = '前往百度';
oA['style']['fontSize'] = '20px';
oA['style'].backgroundColor = 'red';
var test = 'style';
oA[test].backgroundColor = 'blue';
3.属性写法

3.1 html的属性和js里面属性写法一样
3.2 “class” 属性写成 “className”,“classList”
3.3 “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成"style.fontSize"

条件语句
运算符
1.算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2.赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3.条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
if else
var a = 6;
if(a>6)
{
	console.log('greater');
}
else if(a==6)
{
	console.log('equal');
}
else
{
	consle.log('less');
}
switch
var a = 6;
switch (a){
    case 4:
        console.log(4);
        break;
    case 5:
        console.log(5);
        break;
    default:
        console.log(6);
}
数组
定义创建

1.对象实例创建

var aList = new Array(1,2,3);

2.直接变量创建

var aList = [1,2,'abc'];
多维数组

多维数组指的是数组的成员也是数组的数组

var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;
方法

1.获取数组的长度：aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 弹出4

2.用下标操作数组的某个数据：aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 弹出1

3.join() 将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4

4.push() 和 pop() 从数组最后增加成员或删除成员

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

5.unshift()和 shift() 从数组前面增加成员或删除成员

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4

6.reverse() 将数组反转

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 弹出4,3,2,1

7.indexOf() 返回数组中元素第一次出现的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

8.slice 切片

var aList = [1,2,3,4];
aList.slice(0,2);
console.log(aList);		//[1,2]

9.sort

var aList = [3,2,1,4];
aList.sort()
console.log(aList);		//[1,2,3,4]

10.splice() 在数组中增加或删除成员

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4
循环
for循环
//for循环数组去重示例
var aList = [1,2,3,2,4,5,6,,7,5];
var aList1 = [];
for(var i=0;i<aList.length;i++){
	if(aList.indexOf(aList[i]) == i){
		aList1.push(aList[i]);
	}
}
console.log(aList1);
while循环
var i = 0;
var aList = [];
while(i<5){
	aList.push(i);
	i++;
}
javascript的组成

1.ECMAscript javascript的语法（变量、函数、循环语句等语法）
2.DOM 文档对象模型 操作html和css的方法
3.BOM 浏览器对象模型 操作浏览器的一些方法

字符串处理

1.字符串合并操作：“ + ”
2.parseInt() 将数字字符串转化为整数
3.parseFloat() 将数字字符串转化为小数
4.split() 把一个字符串分隔成字符串组成的数组
5.charAt() 获取字符串中的某一个字符
6.indexOf() 查找字符串是否含有某字符
7.substring() 截取字符串 用法： substring(start,end)（不包括end）
8.toUpperCase() 字符串转大写
9.toLowerCase() 字符串转小写

类型转换

1.加号和减号的区别
加号不仅代表运算符，字符串拼接也是用加号

console.log('1'+2)	//12
console.log(parseInt('1')+2)	//3
console.log('2'-1)	//1

2.隐式转换"==“和”-"

'3' == 3	//true
'5' - 1	//4

3.NaN 和 isNaN

isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况
console.log(isNaN('123'))	//false
console.log(isNaN('123a'))	//true
console.log(isNaN('a123'))	//true
console.log(isNaN(123)) 	//false
console.log(isNaN(123-1)) 	//false
console.log(isNaN(-1.5)) 	//false
定时器
定时器类型及语法
  • setTimeout 只执行一次的定时器
function func(){
	console.log('一次');
}
var time1 = setTimeout(func,2000);
或者
var time1 = setTimeout(function(){
		console.log('一次');
	},2000);
  • clearTimeout 关闭只执行一次的定时器
function func(){
	console.log('一次');
}
var time1 = setTimeout(func,2000);
clearTimeout(time1);
  • setInterval 反复执行的定时器
function func(){
	console.log('一次');
}
var time1 = setInterval(func,2000);
或者
var time1 = setInterval(function(){
		console.log('一次');
	},2000);
  • clearInterval 关闭反复执行的定时器
	var n = 1;
	var time1 = setInterval(function(){
		console.log(n);
		n++;
		if(n>10){
			clearInterval(time1);	//关闭定时器
		}		
	},1000);
定时器应用实例

1.定时器制作时钟

	<div id="clock">
		clock
	</div>

	function timeShow(){
		var oDiv = document.getElementById('clock');
		var now = new Date();
		// oDiv.innerHTML = now;
		var year = now.getFullYear();
		var month = now.getMonth() + 1;		//javascript的date得到的月份范围0-11，需要加1
		var day = now.getDate();
		var week = now.getDay();
		var hour = now.getHours();
		var minute = now.getMinutes();
		var second = now.getSeconds();
		oDiv.innerHTML = '当前时间是：' + year + '年' + addZero(month) + '月' + addZero(day) + '日 ' + toWeek(week) + ' ' + addZero(hour) + ':' + addZero(minute) + ':' + addZero(second);
	}
	timeShow();
	setInterval(function(){
		timeShow();
	},1000);
	//对于小于10的数字前加0
	function addZero(num){
		if(num<10){
			return '0'+num;
		}
		else{
			return num;
		}
	}
	//将数字0-6转化为星期格式
	function toWeek(num){
		switch(num){
			case 0:
				return '星期日';
			case 1:
				return '星期一';
			case 2:
				return '星期二';
			case 3:
				return '星期三';
			case 4:
				return '星期四';
			case 5:
				return '星期五';
			case 6:
				return '星期六';
		}
	}

2.定时器制作倒计时

	<div class="clock" id="clock">
		clock
	</div>

   var oDiv = document.getElementById('clock');
    function timeleft(){
        var now = new Date();
        var future = new Date(2018,7,15,24,0,0);//Date中的7代表实际中的8月，
        var lefts = parseInt((future-now)/1000);
        var day = parseInt(lefts/86400);
        var hour = parseInt(lefts%86400/3600);
        var min = parseInt(lefts%86400%3600/60);
        var sec = lefts%60;
        str = '距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒';
        oDiv.innerHTML = str; 
    }
    timeleft();
    setInterval(timeleft,1000);
闭包

1.什么是闭包
函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回

2.闭包计数器

	var count = (function(){
		var num = 0;
		function add(){
			num++;
			return num;
		}
		return add;
	})();
	console.log(count());	//1
	console.log(count());	//2
	console.log(count());	//3

3.将一个变量长期驻扎在内存当中，可用于循环中存索引值

	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>

	//依次点击打印5,5,5,5,5
	var divList = document.getElementsByTagName('div');
	console.log(divList);
	for(var i=0;i<divList.length;i++){
		divList[i].onclick = function(){
			console.log(i);
		}
	}

	//依次点击打印 0,1,2,3,4
	var divList = document.getElementsByTagName('div');
	console.log(divList);
	for(var i=0;i<divList.length;i++){
		divList[i].onclick = (function(i){
			return function(){
				console.log(i);
			}
		})(i)
	}
	//一次点击打印 0,1,2,3,4
	for(var i=0;i<divList.length;i++){
		(function(i){
			divList[i].onclick = function(){
				console.log(i);
			}
		})(i)
	}
面向对象
对象创建的俩种方式
  • 直接创建
var obj = {name:'xhx'};
本质就是
var obj = new Object();
obj.name = 'xhx';
  • 构造函数创建
function Person(name){
	this.name = name;
}
var obj = new Person('xhx');

#####prototype与__proto__

![prototype 与 proto 的区别]](https://i.stack.imgur.com/UfXRZ.png)

1.构造函数具有prototype属性，对象没有；
2.对象有__proto__属性，对象的__proto__属性等于该对象的构造函数的prototype

function Foo(){};
var foo = new Foo();
Foo.prototype == foo.__proto__; 	//true

3.构造函数也是对象，该对象的构造函数是Function,所以构造函数也有__proto__属性

function Foo(){};
Foo.__proto__ == Function.prototype;	//true

4.Function是所有构造函数对象的构造函数，Function也是对象,Function对象的构造函数是Function

Function.prototype;		//ƒ () { [native code] }
Function.__proto__;		//ƒ () { [native code] }
Function.__proto__ == Function.prototype;	//true

5.Object构造函数用来生成{}对象，Object构造函数也是对象，该对象的构造函数是Function

var obj = new Object();
console.log(obj);	//{}

Object.__proto__ == Function.prototype;		//true

6.Object.prototype属性对象

//对象的__proto__为其构造函数的prototype，构造函数(Object除外)的prototype的__proto__为Object的prototype
Function.prototype.__proto__ === Object.prototype;		//true
Foo.prototype.__proto__ === Object.prototype;		//true

//Object构造函数的prototype的__proto__为null
Object.prototype.__proto__;		null
likely001
关注
专栏目录
JavaScript基础知识3（ES6）
m0_54088431的博客
06-24 628
一组值和语义的封装 2.广义的对象 dom元素；数组；函数判断是否为对象，那就判断是否可以添加属性（ x.username=‘xx’），可以添加的话就是对象 2.json 1.js对象和JSON格式的区别： 1.JSON的属性一定要加双引号；对象可以加，也可以不加 2.JSON不可以进行赋值（obj.name = 'zx'），也不可以以属性的形式取值，对象可以。 3.转换为js对象类型 3.对象中的this 1.执行上下文 代码分类（位置）
JS原型链
qq_56889810的博客
05-24 211
#构造函数
【JavaScript】详解JavaScript语法
lph159的博客
07-29 751
JavaScript是一门广泛应用于Web开发的编程语言。掌握JavaScript语法是成为前端开发者的第一步。本文将详细介绍JavaScript的基本语法，包括变量、数据类型、运算符、条件语句、循环、函数、对象、数组、ES6+新特性等内容。通过本文，你将全面了解JavaScript语法，并能在实际开发中灵活应用。JavaScript支持基本的算术运算：加（条件语句用于根据条件的真假执行不同的代码。是ES6引入的用于声明变量的关键字。函数是可以重复使用的代码块。数组是有序的元素集合。对象是键值对的集合。
JS基础知识(二)原型和原型链
Daisy
11-18 417
原型和原型链 问题： 如何准确判断一个变量是数组类型 写一个原型链继承的例子 描述new 一个对象的过程 Zepto（或其他框架）源码中如何使用原型链 知识点： 1.构造函数 function Foo (name, age) { this.name = name; this.age = age; this.class = 'class-...
js查看浏览器是否支持某一方法 [native code] 如ES6新特性 && 获取内置对象的子类型
泥猴桃的博客
12-22 2617
1. 查看浏览器的对于API的支持 如 Proxy, Promise, Map, Symbol, Reflect等原生方法，在浏览器中的支持情况都可以用这个函数检测 // 判断浏览器是否支持某一方法 function isNative(Ctor) { return typeof Ctor === 'function' && /native code/.test(Cto...
【JS】属性的遍历
ccuucc的博客
04-04 2098
关于属性的枚举和循环遍历
javaScript api
11-03
JavaScript API 是一种重要的编程资源，它为开发者提供了与JavaScript语言交互的接口和工具。这个离线版的JavaScript API 指南，以CHM（Compiled Help Manual）格式提供，是开发者学习和查阅JavaScript相关功能和...
JavaScript JavaScript JavaScript
06-26
JavaScript JavaScript JavaScript
前端javascript
最新发布
08-31
对应狂神 javascript
JavaScript结课大作业.zip
12-25
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责实现客户端的交互效果、动态更新内容以及处理用户输入。在"JavaScript结课大作业.zip"这个压缩包中，我们可以推测这是一份关于JavaScript编程的...
JavaScript基础
10-22
JavaScript基础
JavaScript.docx
10-27
"JavaScript 基础知识" JavaScript 是一门广泛应用于 Web 开发的编程语言，所有现代的 HTML 页面都可以使用 JavaScript。它非常容易学，本教程将教会您从初级到高级的 JavaScript 知识。 JavaScript 简介 ...
JavaScript-Cryptography
05-29
JavaScript-密码学 JavaScript，通常缩写为 JS，是一种符合 ECMAScript 规范的编程语言。 JavaScript 是高级别的，通常是即时编译的，并且是多范式的。 它具有花括号语法、动态类型、基于原型的面向对象和一流的功能
JavaScript学习
08-10
JavaScript学习
JavaScript 正则
04-21
JavaScript 正则
JavaScript详解
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
JavaScript看这一篇就够了，简单全面一发入魂
学Java，找哪吒
03-09 3万+
文档对象模型（DOM,Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的HTML。DOM将整个页面抽象为一组分层节点。 DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松地删除、添加、替换、修改节点。 对浏览器而言，DOM就是使用ECMAScript实现的，如今已经成为JavaScript语言的一大组成部分。 言而言之，DOM提供与网页内容交互的方法和接口。
JavaScript 教程 （详细 全面）
热门推荐
梁辰兴的博客
10-31 8万+
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。JavaScript 诞生于 1995 年，几乎是和互联网同时出现；
日本JavaScript函数教学课件详解：背景色与样式控制
本教学课件是关于日语版的JavaScript编程语言，专注于讲解函数这一核心概念。课程内容包括以下几个部分： 1. **函数基础**: - 函数定义：讲解了如何在JavaScript中使用`function`关键字来创建一个名为`f`的函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值