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:编译型语言
基本数据类型保存在栈,复合类型对象,函数等保存在堆