js部分笔记摘录

js笔记

js中：一切皆对象

python、js:是直译型语言

1.数据类型：var

2.数据转换：

3.法一：行内 法二：文本内 法三：外部链接

4.js中双引号不能嵌套双引号

5.点击我 看看
点击我 看看

6.变量：先定义 再使用 关键字 var

7.JS三大模块
1.核心语法:ECMA5标准 ECMA6
2.DOM操作 HTML
3.BOM操作 操作浏览器

8.数据类型：
1.基本数据类型：
number
数值
string
null
Boolean(逻辑/布尔类型)：True False
undefined(未定义)

2.复合数据类型：
	obj
	对象
	函数

9.对象(对象名 属性 方法)
var work={
id:‘1002nfdaex’
old:34,
sed:‘nan’,
salary:‘13455’
marry:‘yes’,
function hardWork(n){
console.log(‘搬砖’+n);
}
}

work.marry	引用对象，查看是否已婚
work.hardWork(2)引用对象，查看是否已婚

10.number对象方法：
isNaN(a): 判断是否不是数值类型 isNaN：is not a number
a.toFixed(2); 保留两位小数，四舍五入
a.toString() 转换成字符串，只变显示形式，不变本质（a还是原数值）
parseInt(a): 找出整数，不四舍五入（如果是不纯字符串，一遇到不是数字的就不会往下找）
parseFloat(a)： 找出浮点型

11.string对象方法：
a.length: 判断长度
a.charAt(n): 查找第n个字符
a.charCodeAt(n): 转换成第n位的ASCII码
newStr=a.concat(b,‘ssd’): 连接a、b和‘ssd’字符串形成新的字符串，和+用法类似newStr+‘shdfhk’
a.indexOf(‘bc’，1); 从下标1处开始查找子串下标，只查找第一个遇见的子串位置（参数一：查找的子串 参数二：从哪个下标找起）
a.lastIndexOf() 从后面开始找，其他同上
a.replace(/javascript/i,“JavaScript”) 替换 可匹配正则 参数（原字符正则，替换字符）
a.slice(3,6) 截取第三位到第五位 左闭右开[3,6)）
a.substring() 截取子串，同slice

.split()	切割，字符串转数组
	"1:2:3:4:5".split(":")
	"a|b|c".split("|")
	"hello".split("",3)	切割出前三位放进数组

a.trim()		去掉空格

处理空格：

判断
	if(a>5){
		a=a+5;
	}	

===	：数值、类型都要求相同

总结：
查找内容：a.charAt(2) 查找第2位是什么
查找位置：a.indexOf(2) 查找a中2在第几位
转换ASCII：a[2].charCodeAt()

截取子串：a.sice(1,-1)

切割：a.split(',')



不确定？？？？？number(a)	把字符串（数字+字符）转换成数字（使用前提：不能用纯字符串）

12.Boolean/布尔类型：
var a=10;
console.log(Boolean(a)); >>true(1是蓝色的数值型)

console.log(Boolean(0));	>>false（0同上）
console.log(Boolean(''));	>>false
console.log(Boolean(NaN));	>>false
console.log(Boolean(null));	>>false
console.log(Boolean(false));	>>false
console.log(Boolean('undefined'));	>>false
除以上，其余都是真的	

day-02:
1.运算符（算术、关系、逻辑运算符）

关系运算符：===	值、类型都要相等
逻辑运算符（且&&  或||  非！）
运算符优先级：（）、一元、算术、关系、相等、逻辑、赋值

undefined:	本身就是一个类型
null:	通常用来指向对象，所以是obj类型
toString、String:	当数据类型是undefined和null时，需要用String类型
Number('3254gked'):	必须是非纯字符串才能转

1.判断基本数据类型：	typeof a

2.顺序结构
由上到下（输入（0-n） 输出（1-n） ）
3.选择结构
条件表达式
表达式1？表达式2：表达式3 表达式1为真就执行表达式2，表达式1为假就执行表达式3（和if(){}else{}一样）

prompt(左右类似python中的input)

a.toUpperCase() :把a中的都转变成大写

循环
for(var i=0;i<10;i+=1){
sum+=1;
}

while(i<10){
	sum+=1;
	i++;
}
while可能没有执行循环体（先判断条件）


do{
	sum+=1;
	i++;
}while(i<10);
do while必须执行一次循环体（先执行循环体）

数组：
arr1 = new Array(5);
arr.length();
for(var i in arr){console.log(i+’:’+arr[i]);} (for in循环可用于对象（for i in arr出来的i是下标,arr[i]才是值），for循环做不到）

for in遍历对象：
for(var i in obj){
console.log(i,obj[i]） i是键，obj[i]是值
}

四大类排序：选择，冒泡，插入，归并？？

稳定排序：相同的关键字在排序前后相对位置不变

day-03

栈结构：先进的最后出，最后进的第一个出（串糖葫芦，吃糖葫芦）
队列结构：先进先出，后进后出（排队上车）

数组追加：a.push(2)	追加2到数组最后一个元素
数组弹出：a.pop()	弹出最后一位（栈结构方法）

：a.unshift(2)		把2加到数组开头
:a.shift()		从开头弹出一个元素

：a.splice(1,3)		截取子数组，a[1]到a[3],两边界都包括

：a.join(',')/(' ')		数组转字符串[1,2,3,4]——"1,2,3,4"/"1 2 3 4"

函数：默认返回undefined function(形参，arguments) 实参对象arguments：保存所有实参的值（数组形式） 所以可不用形参，不用考虑实参形参

function sum(n1,n2) {
	return n1+n2;
}

定义函数时是不占用内存空间，形参只起到占位作用，并不用定类型，传进实参，按顺序匹配

在函数中定义的变量是局部变量，在函数外定义的是全局，当局部变量被用到返回的函数中时，变量持久化（拷贝到嵌套函数的地址中保存），在返回函数中依旧可用

闭包机制：函数作为返回值（函数嵌套） return一个函数,返回的是函数的指针，需要再调用一次该指针，才能执行嵌套中的函数
function f1(){
var x=1;
return function(){
x++；
console.log(x);
}
}
var res = f1();
res();
console.log(res);

ECMA：核心语法

DOM：document object model 文档对象模型（面向对象 基于事件）
1.btn = document.getElementById(‘btn’)
2.var btn = document.getElementsByTagName(‘button’)[0]
3.var btn = document.getElementsByClassName(‘myBtn’)[0]
4.var btn = document.querySelector(’.dv1 a’)
5.var btn =document.querySelectorAll(’.myBtn’)[0]
btn.onclick = function (ev) { //回调函数
alert(‘啊呀！我被点了!’);
};

1.点击按钮弹出对话框（对象：按钮	事件：点击）
<button id='btn'>按钮</button>
<button class='myBtn' id='btn1'>按钮</button>
<button class='myBtn'>按钮</button>

<script>
	/*面向对象(获取元素)  基于事件*/
	/*api 接口  函数*/

	/*1.通过ID获取元素document.getElementById()*/
	var btn = document.getElementById('btn');

	/*2.通过标签名获取元素document.getElementsByTagName()[0]	返回的是数组，由所有button组成*/
	var btn = document.getElementsByTagName('button');
	console.log(btn);


	/*3.通过类名*/
	var btn = document.getElementsByClassName('myBtn')[0]

	/*4.选择器*/
	var btn = document.querySelector('.dv1 a');	唯一挑选
	var btn = document.querySelectorAll('.myBtn')[0];	所有挑选，数组形式

	/*点击按钮 弹出对话框  alert()*/
	btn.onclick = function(ev) {	//回调函数
		alert('啊呀！我被点了！');
	};	
	console.log(btn);
</script>

neiront.style.cursor='pointer'
neirong/this.innerText='....'		往p元素中重写内容，不具备标签效果
this.innerHTML='<strong>....<strong>...'同上，可写入标签，且会覆盖innerText


/*加载  事件函数  回调（触发事件是才回调该函数）*/
<script>
	window.onload = function(ev)
	{
		/*js代码*/
	}
</script>

day-04
1.自定义属性如：

自定义了一个下标属性
2.表单的获取元素：document.getElementsByName(‘text1’)[0];
获取文本框内容：text[0].value

3.鼠标事件：
1.移入：onmouseover
2.移除：onmouseout
3.移动：onmousemove

4.对象.className 替换元素身上所有的类样式

对象.classList. 可增删改查

5.对象.getAttribute(‘属性名’) 获取属性：

对象.setAttribute(‘属性’，‘值’) 增加或修改

对象.removettribute(‘属性名’); 移除

6.元素透明度0–1：opacity

7.计时器：

1.永久：
timeId = window.setInterval(function()
{
定时要执行的行数
if(清除条件)
{
clearInterval(timeId);
}
},1000);

2.一次性：
onetime = window.setTimeout(function()
{
clearTimeout(oneteme)
},1000);

8.transition过渡：属性名字（width） 时长（2s） 延时s 曲线 线性曲线linear ease 快–慢 ease-in 快–慢--快 ease-out 快–慢
transition:width 2s 0s linear;

9.聚焦、离矫事件
1.聚焦
对象.onfocus = function(){
this.value = ‘’;
}

2.离矫
	对象.onblur = function(){
	}

鼠标时间：
1.点击：a.onclick = function(){}
2.移入：a.onmouseover = function(){}
3.移出：a.onmouseout = function(){}

day-05

对话框：
alert() 警示框
prompt() 输入框
confirm() 确认框/询问框

1.wubdiw对象属性
location：
1.window.location.href(获取地址)
1.window.location.search(获取地址问号后的内容)

history:
	history.back()		回到上一界面
	history.go/forword()	回到下一个界面

userAgent:用户代理，浏览器的信息
platform:浏览器位数

2.document.write() 会覆盖body中的标签元素，大多不用
document.innerHTML 不能修改已存在标签的属性

创建元素：
var image = document.creataElement(‘img’);
image.src = ‘’
image.alt = ‘’
对象.appendChild(image);把创建的元素追加如对象中，成为其子元素

var ol = document.createElement('ol');
for(var i=0;i<5;i++){
	var li=document.createElement('li');
	var Text = document.createTextNode(i+'阿道夫')；	生成文本节点
	li.appendChild(Text);		，节点连接，追加
	ul.appendChild(li);  循环添加li元素到ul标签里
	}

节点类型：（标签1 文本2 属性3 注释）
box.parentNode box的父节点
box.childNodes[1] box的第一个子节点
box.children box的所有子元素
box.nextSibling box的下一个兄弟节点
box.previousSibling box的前一个兄弟节点
box.parentNode.nodeType box的父节点，box父节点的属性

img_box.onmouseover = function(){end()};可以写成 img_box.onmouseover = end;

连接js文件
\

事件对象event (event是事件对象，包含事件的具体信息，监控着任何事件相对应的属性)
var body = document.getElementsByTagName(‘body’)[0];
body.onmousemove = function(event)
{
var event = window.e || event (ie浏览器使用的是挂接在window下的event,其他浏览器使用的是e，所以用||就处理了ie与其他浏览器的兼容性问题)
var mouseX = event.clientX; 获取鼠标水平方向值
var mouseY = event.clientY;

}

获取对象盒子距父盒子的左边距： obj.offsetLeft
获取对象盒子距父盒子的上边距： obj.offsetTop
获取对象整体宽度： obj.offsetWidth
获取对象整体高度： obj.offsetHeight
鼠标变成十字架：obj.style.cursor = ‘move’;
左侧的黄色快左边距/小盒子的宽度-阴影块宽度 = 大图片相对于右侧盒子左边界值/大盒子宽度-图片的宽度

问题：
console.log(Boolean(a).toString()); 转换字符串成灰色

零碎知识：
.c—.obj二进制语言—.exe:编译型语言
基本数据类型保存在栈，复合类型对象，函数等保存在堆