Python全栈 Web(前端三剑客之JavaScript 从小白鼠到武林盟主)-阿里云开发者社区

开发者社区> 巴黎香榭> 正文

Python全栈 Web(前端三剑客之JavaScript 从小白鼠到武林盟主)

简介: Python、WEB、前端、前端三剑客、JS、JavaScript、巴黎香榭
+关注继续查看

f1b5c7884df5800f


1b9cc8805cc25bca




// HTML嵌套:
// 	元素标签中绑定JS代码:
// 		"<p onclick="js操作">文本</p>"
// 	文档嵌套:
// 		"<script type="text/javascript"> js操作 </script>"
// 	外部链接:
// 		"<script src="外部.js文件""> js操作 </script>"
// 		href:边加载边执行  src:加载完毕后执行

JS常用操作:
	alert("hello wotld!");				普通网页弹窗
	pormpt("please input");				接受用户输入的弹窗
	console.log("hello wotld");			输出到控制台
	document.weite("<h1>Hello</h1>");	
		浏览器可以解析字符串内的 HTML标签
		将标签添加到body末尾  若事件方式会重写网页

var a = 15;					变量
const PI = 3.14;			常量		全大写方式 声明必须赋值

方法:
	var pi = 3.141592693975358;
	pi.tofixed(2);  		保留小数点后两位 //3.14

	var s = "Paris";
	s.charCodeAt(2);		查看r对应的Unicode编码

	var s = "张";
	s.toString();			转换为十六进制
	var s = "\u4e00";		十六进制转换为中文
	"\u4e00" ~ "\u9fa5";	中文的范围

	console.log(typeof s);	查看变量s的数据类型
	console.log(typeof(s));



转移符:
	\n:换行
	\t:制表符
	\':'
	\":"
	\\:\



基本数据类型:
	number:
		整数:
			0~9 	十进制 
			0~7		八进制    以0开头 013 
			0~f		十六进制  以0x为前缀 0x45
		小数:
			3.14	小数点计数法
			1.5e3	指数/科学计数法
	string:
		所有引号引起来的字符串
	boolean:
		true = 1	真
		false = 0	假
	undefined:
		所有声明未赋值的变量或访问对象属性不存在时
	null:
		空类型
引用数据类型:
	数组、函数、对象

数据类型转换:
	隐式转换:
		字符串与任何数据类型相加都等于字符串类型
		boolean类型可以当number类型使用
	强制转换:
		toString()			任意类型转换为字符串类型
		Number()			数字字符串转换为number类型 失败返回NaN
		parseInt()			解析数字开头的字符串 遇到非整数(包括小数)停止 遇到小数只取整数部分
		parseFloat()		等同于parseInt只解析小数部分 可以解析指数计数法
运算符:
	赋值运算符:=
	算数运算符: + - * %  3 / 2
	自增自减:
		++ --	++在后先使用后自增 ++在前先自增后使用(自减用法相同)
	关系运算符:
		> < >= <= == != === !==
		数字与字符串比较:
			先转换为数字 失败返回NaN 结果为False
			NaN 与任何数据做 != 都为 true  包括 NaN != NaN 结果为 true
			NaN 与任何数据 除了!= 其他都为 false
		字符串之间用Unicode码比较
		== != 等 不等:
			先进行数据转换后进行数值得比较
		=== !== 全等/恒等 不全等/不恒等:
			数据类型和值必须全部等
	逻辑运算符:
		!	非
		&&	与
		||	或
	位运算:
		&	按位与
		|	按位或
		^	按位异或
/*
数据交换
	var a = 3;
	var b = 5;
	1.
		var c = a;
		a = b;
		b = c;
	2.
		a = a + b;	a += b;
		b = a - b;	b = a -b;
		a = a - b;	a -= b;
	3.
		a = a ^ b;	a ^= b;
		b = b ^ a;	b ^= a;
		a = a ^ b;	a ^= b;
	4.Python特有
		a, b = b, a
*/
	条件运算符:
		单目运算符:
			++ -- ! typeof -
		双目运算符:
			+ - * % ^ && || & | ! = 等
		三目运算符:
			? : 相当于简单版的 if-else 结构
流程控制:
	if 语句:
		if (条件) {
			语句块;
		} else if{
			语句块2;
		...

		} else {
			语句块n;
		}
	switch 语句:
		switch (变量) {
			case 值1:
				语句块1;
				break;  //可以省略
			case 值2:
				语句块2;
				break;
			...

			default:
				语句块n; //想过与 if-else if 结构的else
		}

	while 循环:
		while (条件) {
			循环操作;
		}

	do...while循环(至少循环一次):
		do{
			循环操作;
		}while(条件);

	循环可以任意嵌套:外层走一次 内层走一轮

函数:
	定义函数:
		function 函数名(参数列表){
			函数体
			[ return 返回值] //[]代表可省略
		}
		在任何可以书写JS代码的地方都可以调用
	匿名函数:
		function (参数列表) {
			函数体
			[return 返回值]
		}
		为某个事件而生的 只能用作与某个事件

作用域:
	所有用 var 关键字声明的变量都是当前作用域的变量
	如果不使用 var 关键字声明的变量都是全局变量
	变量所在的并可被访问的区域叫做作用域

数组:
	创建数组:
		var arr = [];
		var arr = ["a", "b", "c", 1, 2, 3];
		var arr = new Array(5);	//默认5个 undefined值  下标从5开始
		var arr = new Array();
		var arr = new Array("a", "b", "c", 1, 2, 3);
	索引:
		arr[2]; 	//"c"
		arr[100];  // undefined
	索引赋值:
		arr[arr.length] = 0; //清空数组
		arr[2] = "F"; //["a", "b", "F", 1, 2, 3]
		arr[100] = "张3"; //["a", "b", "F", 1, 2, 3, "张3"]
		"张3"的下标为100  3 的下标为5 中间的下标为空值 取值返回 undefined
	获取数组长度:
		var len = arr.length;
	数组常用的API:
		var arr = [];
		arr.toString();			将数组转换为字符串用“,”链接
		arr.join(seperator);	返回用seperator字符串链接的长字符串
		arr.reverse();			将数组元素翻转 直接改变现有的数组
		arr.sort();				对数组进行排序默认按照Unicode码排序  直接改变现有的数组
		arr.sort(function);	function:			排序函数
		arr.sort(function(a, b) {return a - b});利用匿名函数升序排序
		arr.sort(function(a, b) {return b - a});利用匿名函数降序排序
	进出栈操作:
		arr.push(element);		压入  向数组的尾部添加新元素并返回数组长度
		arr.pop();				弹出	  删除数组中的最后一个元素并返回删除的内容
		arr.unshift(element);	向数组头部添加一个新的元素并返回长度
		arr.shift();			删除数组头部的第一元素并返回删除的内容
二维数组:
	创建二维数组:
		var names = [
			[1, 2, 3, 4, "a", "b"],
			["a", "b", 3, 4, 5, 6]
		];
字符串:
	声明字符串:
		var str = "字符串";
		var str = String("字符串");
		var str = new String("字符串");
	获取字符串长度:
		str.length;
	字符串常用API:
		str.toUpperCase();		返回完全大写字符串
		str.toLowerCase();		返回完全小写字符串
		str.trim();				返回去掉字符串两侧空格后的内容
		str.charAt(index);		返回字符串内下标为index的字符
		str.split(seperator);	返回用seperator字符串拆分后的数组
		str.charCodeAt(index);	获取指定字符的Unicode码
		str.indexOf(value, fromIdex);
			value:
				要查找的字符串
			fromIndex:
				开始位置
			返回值:
				返回第一次出现的字符串 没有返回-1
		str.lastIndexOf(value, fromIdex);
			value:
				查找的字符
			fromIndex:
				开始位置
			返回值:
				返回最后一次出现的字符串 没有返回-1
		str.substring(startm, end);	
			startm:
				开始位置
			end:
				结束位置
			返回值:
				返回 startm~end-1 截取到的字符串
		str.relplace(substr/regexp, replacement);
			substr/regexp:
				正则表达式/修饰符
			replacement:
				要替换的字符串
			返回值:
				返回替换后的字符串
		str.match(substr/regexp);
			substr/regexp:
				正则表达式/修饰符
			返回值:
				返回满足匹配条件的字符串格式


内置对象:
	RegExp对象:
		创建:
			var reg = /正则表达式/修饰符;
			var reg = new RegExp("匹配模式", "修饰符");  //装饰符可以省略
		修饰符:
			i: 	ignorecase (忽略大小写)
			g: global	   (全局匹配)
			m:  multiple   (允许多行匹配)
		方法:
			test(string);
				string:
					要验证的字符串
				返回值:
					如果能够匹配到string返回true否则返回false

	Math对象:
		属性:
			Math.PI;
			Math.E;
		方法:
			三角函数:
				Math.sin();
				Math.cos();
				Math.tan();
			计算函数:
				Math.sqrt();		开平方
				Math.log();			求对数
				Math.pow(x, y);		求x的y次方
			数值函数:
				Math.abs(x);		绝对值
				Math.max(a, b, c);	求最大
				Math.min(a, b, c);	求最小
				Math.random();		随机数(0~1)
				Math.round(x);		将x四舍五入
	Date对象:
		获取当前日期:
			var date = new Date();
		创建自定义时间对象:
			var date = new Date("2018-9-12 12:00:00");
		方法:
			date.getTime();			返回1970-1-1 00:00:00 到date所经过的毫秒
			date.setTime(ms);		返回根据给定的毫秒结合1970计算日期
			date.getFullYear();		返回date对象对应的年
			date.getYear();			返回1970至date时间所进过的年
			date.getMonth();		返回0~11 表示1~12 月 0 代表一月
			date.getDate();			返回date对象所对应的日
			date.getDay();			返回date对应的是星期几
			date.getHours();		返回date对应的小时
			date.getMinutes();		返回date对应的分钟
			date.getSeconds();		返回date对应的秒
			date.getMilliseconds();	返回date对应的毫秒
			date.toString();		返回date转换后的标准时期字符串
			date.toLocaleString();	返回date转换后的本地时间日期字符串
			date.toLocaleTimeString();	返回date转换后的(时分秒)被转换后的字符串
			date.toLocaleDateString();	返回date转换后的(年月日)被转换后的字符串
外部对象:
	window对象(BOM模型)
		window.alert();				警告框
		window.potmpt();			输入框
		window.console.log();		终端输出
		window.confirm();			确认框
		window.setInterval(fun, time);
			fun:
				函数  要周期执行的操作 可以是匿名函数
			time:
				要间隔的时间 以毫秒为单位
			ret:
				返回值 返回周期定时器对象
		window.clearInterval(obj);		清除周期定时器对象
		window.setTimeout(fun, time); 	返回一次性定时器对象
		window.clearTimeout(obj);		清除一次性定时器对象

		window.screen;					获取显示器的相关信息
			window.screen.width;			屏幕的宽度
			window.screen.height;			屏幕的高度
			window.screen.availwidth;		可用的宽度
			window.screen.avalheight;		可用的高度
		window.history;					获取当前窗口URL的地址
			window.history.length;			当前窗口所访问过的URL数量
			window.back();					前进
			window.forward();				后退
			window.go(number);				前进或后退number步 负数代表后退
		window.location;				表示浏览器地址栏信息
			window.location.href;			当前窗口浏览的网址 为其赋值可以实现网页跳转
			window.reload();				重新加载当前网页 相当于刷新
		window.navigator;				浏览器的相关信息
			window.userAgent;				显示浏览器的相关信息
			...								一系列没屌用的信息
		window.document;				真正的大佬来了 上面的都是弟弟 都是弟弟行为
			走丢了...

	document 对象/属性(DOM模型  window.document;)
		DOM树:
			网页加载后在内存中形成的节点树 节点:每一个文本、元素、属性
			直接操作内存实现网页的同步变化

			查找元素节点:
				var elem = window.document.getElementById("元素id");
					window 可以省略不写 包括上面所有的window
					返回值:
						返回对应id的元素 在js中的表现形式(DOM对象)
					DOM对象属性:
						elem.innerHTML;		获取或修改(赋值)DOM对象的HTML文本(只对双标记)
						elem.innerText;		获取或修改(赋值)DOM对象的普通文本(只对双标记)
						elem.value;			获取和设置表单控件的值(只针对表单控件)
			读取节点信息:
				elem.nodeType;
					返回值:
						1:元素节点
						2:属性节点
						3:文本节点
						8:注释节点
						9:文档节点
				elem.nodeName;
					返回值:
						标签名:		元素节点
						属性名:		属性节点
						#text:		文本节点
						#document:	文档节点
						#comment:	注释节点
			设置或获取节点的属性:
				elem.getAttribute("attrName");
					attrName:
						要获取的属性名称
					返回值:
						对用属性的值
				elem.setAttribute("attrName", "attrValue");
					attrName:
						要是设置的属性名
					attrValue:
						要设置的属性值
				elem.removeAttribute("attrName");
					attrName:
						要删除的属性名
		查询节点:
			document.getElementById("idName");		根据id查找节点
			elem.parentNode;						返回当前节点的父节点
			elem.childNodes;						返回当前节点的所有子节点(数组)
			elem.children;							返回当前节点的所有子"元素"节点(数组)
			elem.nextSibling;						返回当前节点的下一个兄弟节点
			elem.nextElementSibling;				返回当前节点的下一个兄弟"元素"节点
			elem.previousSibling;					返回当前节点的上一个兄弟节点
			elem.previousElementSibling;			返回当前节点的上一个兄弟"元素"节点
			document/elem.getElementByTagName("标签名");
				document:
					整个文档内查找
				elem:
					某个元素内查找
				返回值:
					指定标签的数组
			document.getElementsByName("Name属性值");
				返回值:
					name属性的值为Name属性值得所有元素的数组
			document/elem.getElementsByClassName("class属性值");
				返回值:
					包含指定class属性值得所有元素的数组
		增加节点:
			创建节点:
				var text = document.createTextNode("文本内容");
					创建文本节点 文本节点可以添加到元素中
				var elem = document.createElement("标签名");
					返回值:
						创建好的元素
					例如:
						var div = document.createElement("div");
						div.setAttribute("id", "contarner");
						div.innerHTML = "动态创建的元素文本";
						div.style.color = "red";
						div.style.fontWeight = "bold";
			增加节点:(由父元素节点发起)
				document.body.appendChild(elem);	将元素追加到body中
				parentNode.appendChild(elem);		将元素追加到parentNode(父元素节点)中
				parentNode.insertBefore(newElem, oldElem);
					parentNode:
						父元素节点
					newElem:
						要插入的心元素节点(插入到旧节点前)
					oldElem:
						父元素中已有的元素节点
		删除节点:
			parentNode.removeChild(elem);
				parentNode:
					父元素节点(删除节点只能由我(父元素节点)发起  
					没有办法 就是这么强大 哈哈哈哈~)
				elem:
					要删除的元素节点

事件:
	所有事件前面绑定时都必须加 on 例如:click --> onclick

	click:
		当鼠标单击时触发该事件
	dbclick:
		当鼠标双击时触发该事件
	mouseover:
		当鼠标移入元素时触发的事件
	mouseout:
		当鼠标移出元素时触发的事件
	mousemove:
		当鼠标在元素内移动时的事件
	keydown:
		当键盘键位按下时触发的事件
	keypress:
		当键盘键位按下时触发的事件
	keyup:
		当键位抬起时所触发的事件
	load:
		当元素加载完成时所触发的事件(body)
	change:
		当元素内容发生变化时所触发的事件(select)
	input:
		当元素内容发生变化时所触发的   实时同步事件
	focus:
		当元素获取焦点时所触发的事件(输入框类)
	blur:
		当元素失去焦点时所触发的事件(输入框类)
	submit:
		当表单被提交时触发的事件

事件绑定:
	标签绑定:
		"<标签名 on事件名=“触发操作”></标签名>"
	动态绑定:
		DOM对象.on事件名 = function() {};	触发匿名函数操作
			在JS绑定事件中  
			允许使用this来表示触发当前元素事件的DOM对象
			必须是在匿名函数内才可以这么写
事件行为:
	load:(通常为body添加)
		1."<body onload="function"></body>"

		2. window.onload = function{
			网页加载后自行的操作
			通常为避免某些对象或属性由于书写顺序拿不到的问题
		}
	submit:(表单提交)
		表单对象.onsubmit = function() {
			return true;  允许提交
			return false; 不允许提交
		}
	change:
		主要用于下拉列表
		DOM对象.onchange = function() {
			每次当选项发生改变时就会激发一次该事件
		}
事件对象 event:
	任何事件出发后 都会产生一个event对象
	默认自动创建 想调用就当参数传入 不想就省略
	获取event对象:
		1.HTML元素中绑定事件
			<元素名 on事件名=“btnClick(event)”></元素名>

			<script>
				function btnClick(event) {
					event 表示就是事件对象
				}
			</script>
		2.JS动态绑定事件:
			var d1 = document.getElementById("d1");
			d1.onclick = function(event) {
				event表示的就是事件对象
			}
	事件源:
		获取事件源:
			event.target;
			得到的是一个DOM对象
			在JS绑定事件中 事件源等同于 this
		鼠标事件属性:
			mouseover,mouseout,mousemove,click
			1.offsetX,offsetY
				获取鼠标在元素上的坐标点(元素內容区的左上角为0,0 点)
		键盘事件属性:
			keydown,keypress,keyup
				keydown,keypress事件中允许增加返回值 
				通知浏览器是否正常处理按下的字符  true正常显示  false不显示字符
			keydown:
				只要按下键位就触发不管有没有输出
					which属性:
						按下键位的键位码
			keypress:
				只有按下输出键时才会触发
					which属性:
						输出的字符的ASCII码
			keyup:
				只要按下任意键并抬起就会触发

事件冒泡:
	什么是事件冒泡?
		例如有三层的div嵌套 
		分别绑定onclick事件
		当点击最外层元素时执行最外层的onclick事件
		当点击内层的元素时依次向外成执行  有多少成执行多少次
		像冒泡似的执行代码 就是事件的冒泡
	阻止事件冒泡:
		event.stopPropagation();
			只能阻止一层事件冒泡







版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十八】
  《Web 前端开发精华文章推荐》2013年第六期(总第十八期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。
1793 0
前端优秀作品展示,JavaScript 版水果忍者
  《水果忍者》是一款非常受喜欢的手机游戏,刚看到新闻说《水果忍者》四周年新版要上线了。网页版的切水果游戏由百度 JS 小组开发,采用 vml + svg 绘图,使用了 Raphael,效果很赞,赶紧来膜拜一下。
850 0
Furatto – 轻量,友好的响应式前端开发框架
  Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站。这个框架采用流行的扁平化设计和响应式设计。除了布局和网格之外,所有的主要元素都有预定义的样式,例如按,表格,表单等,而且还有各种各样的 JavaScript 组件,像模态弹窗,工具提示等等。
613 0
一款前端简易聊天框,快拿去!
提供一个简约,纯净单纯的聊天框实现,希望可以帮到初学者
116 0
好程序员web前端分享javascript枚举算法
好程序员web前端分享javascript枚举算法,题目:在1,2,3,4,5 五个数中,我们随机选取 3个数。问有多少种取法?并且把每种取出数的方法列举出来。 乍看这道题,其实感觉没什么难度。三个for循环不就解决问题了。
940 0
阿里云大学「学习路线」,一站式从入门到高手——Python、Java、前端、运维、数据库、云原生……
阿里云大学有哪些学习路线? 已上线(免费学习+自测考试): Python学习路线:https://edu.aliyun.com/roadmap/pythonJava学习路线:https://edu.aliyun.
11633 0
+关注
巴黎香榭
一个有梦想的咸鱼~~~
86
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载