东莞最新招聘信息直招,宁波优化推广选哪家,校园网站安全建设方案,网站开发都用什么语言本篇文章是本人在学习JS时所记录的笔记#xff0c;记录的知识点比较基础#xff0c;但是较为详细。
使用
在html中有两种方式可以使用javascript
1.外引
script src...js/script
调用js文件时调用的是拷贝体
2.内嵌
script......…本篇文章是本人在学习JS时所记录的笔记记录的知识点比较基础但是较为详细。
使用
在html中有两种方式可以使用javascript
1.外引
script src...js/script
调用js文件时调用的是拷贝体
2.内嵌
script..........
/script
外引和内嵌同时存在时内嵌的会失效
注意标签内的元素
src:引入js
defer:延迟js文件加载
script中的属性中的 “ - ” 全部去掉,并且 “ - ” 后的首字母换成大写
例如background-color变为backgroundColor margin-left变为marginLeft 定义数据
script属于弱类型语言不区分数据类型,都用var定义语法与PHP,python,shell相似
强类型语言C, C, java, C#GO速度极快
弱类型语言javascript, PHP, python, shell速度极慢
定义字符串用” “ 例var a4 adaf;
js中的变量类型分为两大类基本类型和复合类型
基本类型
可以使用typeof来检查变量类型typeof(a)
1.数值类型
var a 10.7
var b 12
2.字符串类型
var a asd var b a
3.布尔类型
var a true var b false
4.undefined类型
只有一个值
当定义一个变量但未赋值时就叫undefined
var d undefined
5.null类型
空对象
复合类型
1.数组
定义数组用中括号 例var a3 [1,2,3,4];
将字符串转化为整数类型用parseInt 例a6 parseInt(a6)
定义数组中可以不区分类型存储,,甚至可以数组中存放数组
例
var a7 [2, 3, [3,5,6], [ 3,2,[2, 6,[ faga],6],9,fjs], ijpj ];
arr.push()向数组中添加数据
与java中数组的区别
1).数组长度可变2.没有越界3.不用同类型
2).数组长度可变2.没有越界3.不用同类型
2.对象类型:
格式{ “ 名字 ”对应的对象 “ 名字 ”对应的对象 ,........“ 名字 ”对应的对象 }
例
var b1 { name :张三,id:12345,年龄:16};
对象可以复杂一些比如放数组或是另一组对象
例
var b2 { name: 王五,house : [北二环, 东三环,西六环],friend : [ { name:小明, age: 9}, { name:黎明, age: 8}]};
使用方式( b2.name b2.house[1] b2.friend[1].name )
对象还可以放方法
例
var b2 { name: 王五,house : [北二环, 东三环,西六环],method1 : function(a,b){return a b;}} ;
调用方式 var x2 b2.method1(4,7);
对象类数组的访问如b2[name]
对象类数组的访问方式的重要性和必要性可以放置变量如b2[age]
3.函数类型
定义函数
(1).命名函数function test(a,b),可以被引用var b function test(a,b),引用后调用时用b(a,b)
(2).匿名函数function(a,b),也可以被引用var b function(a,b),调用时用b(a,b)
使用函数
1.函数名加括号 test(5,6)
2.函数整体作为值来使用
var b test
3.函数作为返回值来使用
var btest(5,6)
js中函数无法重载与最下面的保持一致
方法中入参的不一定是变量也可能是另一个方法 例
function m3(a,b,c){a(10,20);b(c,6);
}
m3(function(p1,p2){ console.info(p1p2)},function(p1,p2){ console.info(p1-p2)},30
);
m3(function(p1,p2){ console.info(p1 * p2) },function(p1,p2){ p1 (p2 9) },//这里是方法中的方法继续带入方法p1带入的是c,也就是function(k),p1(p29)相当于c(p29),也就是c(69),输出30function(k){ console.info(2 * k) }
);
script例子控制台中输出了x1与x2 scriptfunction f(x1,x2){return x1 x2;}function f2(a,b,c){return a b - c;}var x1 f(23,99)var x2 f2( x1, 44, 33 - x1 );console.info(x1);console.info(x2);/script
字符串拼接用加号连接即可,例
var x1 www;
var x2 mmm;
var x3 67;
var x4 x1 x2 x3; // wwwmmm67
在for循环中根据i的不同生成不同的iid字符串拼接
生成div_1到div_81:
注意变量不能被双引号引住
function m1(){var x document.getElementById(div1);var html ;for(var i 0;i 81; i){if(i%2 1){html div iddiv_ i classsty2/div;}else{html div iddiv_ i classsty3/div;}}x.innerHTML html;} dom增删改查
查
1.以ID来查找元素getElementById()
var x document.getElementBtId(zjd)
当id重复时只会获取符合条件的第一个
2.以class来查找元素getElementsByClassName()
获取到符合条件的所有元素拿到的是一个数组
3.以元素名称来查找元素getElementsByTagName()
var x document.getElementsByTagName(div)
4.以选择器来查找元素querySelector()
只会获取符合条件的第一个元素
var x document.querySelector(.zjd)
5.以选择器来查找元素querySelectorAll()
会获取符合条件的所有元素
根据关系查找
parentNode/parentElement获取当前节点的父节点
例
var x document.querySelector(.zjd);console.log(x.parentNode)
childNodes获取当前节点的所有孩子节点元素节点和文本节点可以通过nodeType来过滤
children获取当前节点的所有孩子节点只获取元素节点)
previousSibling 获取当前节点的上一个节点注意文本节点的存在
previousElementSibling 获取当前节点的上一个元素节点
nextSibling获取当前节点的下一个节点注意文本节点的存在
nextElementSibling获取当前节点的下一个元素节点
firstChild获取当前节点的第一个孩子节点注意文本节点的存在
firstElemnetChild获取当前节点的第一个元素孩子节点
lastChild获取当前节点的最后一个孩子节点注意文本节点的存在
lastElemnetChild获取当前节点的最后一个元素孩子节点 console.log()打印元素
conslole.dir()打印对象元素
js有事件传播机制点击内部元素后也会触发外部外部元素上带有的事件
想要点击子级元素时只触发子级元素的方法而不触发父级元素的方法可以在子级元素方法中加入一个参数在函数内加上 参数名.stopPropagation()
op_list[i].onclick function(e) {e.stopPropagation()
}
事件监听器addEventListener(事件“方法true/false)true为捕获从外向里默认为false为冒泡从里向外
修改|获取
修改内容innerHTML(非表单控件包含html元素 innerText(非表单控件只包含纯文本 value表单控件
var x document.querySelector(.container)
x.innerHTML zjd//修改
alert(x.innerHTML)//获取
修改文本框中的内容必须用value
修改属性
获取的元素.元素的属性 或者 setAttribute(更改的属性”“更改后的值”)
获取属性getAttribute()
var input document.querySelector(.container)
input.typebutton//将该元素的type属性改为button
input.setAttribute(class,6666) //将该元素的class属性改为6666
alert(input.getAttribute(zjd))//获取该元素中zjd属性
修改样式style className
style.background
style.color等等
input.classNamezjd 修改class属性
增加
步骤一创建或者复制元素
创建createElement()
var div document.createElement(div)
div.classzjd
复制元素 cloneNode(boolean)true是深复制false是浅4复制
步骤二添加到已有元素中
添加appendChild()
父节点.appendChild(新节点)
var x document.querySelector(.container)
x.appendChild(div)
插入insertBefore()
父节点.insertBefore(新节点哪个节点之前)
替换元素replaceChild()
父节点.replace(新节点旧节点
删除
removeChild()
可以这样写
要删除的元素.parentNode.removeChild(要删除的元素
定时器
周期定时器
var timer setInterval(函数|字符串[函数名]间隔[毫秒】
例
setInterval(fun,1000)或setInterval(fun(),1000)或setInterval(function(){},1000)
每隔一段时间执行一次
清除定时器 clearInterval(timer)
延迟定时器
var timer setTimeout(函数间隔[毫秒】)
一段时间后执行一次执行后不再执行只执行一次
清除定时器 cleartimeout(timer) 动画效果
下面是初学时使用js实现的一些小的动画效果
document.getElementById(id )在整个页面中通过id触发结点 例var x document.getElementById(dd1);
setTimeout 计时器 例setTimeout(m1( ), 3000);3000ms后触发m1方法
方法中可以改变body中元素的属性从而形成动画效果
例字符串拼接与计时器的结合的方法利用递归使图形每过20ms变化一次从而形成动画效果
//对id为dd1的块的动画效果
function m1(a){var x document.getElementById(dd1);x.style.width (100 a )%500 px;//拼接结果100px 101px 102px ....x.style.backgroundColor #a00;x.style.transform rotate( (30a) deg);//rotate(30deg) rotate(31deg)...setTimeout(m1( (a1) ),20); //setTimeout(m1(1),20); setTimeout(m1(2),20)...
} //利用递归使图形每过20ms变化一次从而形成动画效果 例选择样式1选项时添加10个小方块在第一个方块元素中利用了for循环
!DOCTYPE HTML
htmlheadmeta charset utf-8style.sty1{ background-color:#aaa;height:200px;width:200px; margin-top:20px ; margin-left : 10px ;float:left}/style/headbodydiv iddiv1 classsty1 /divdiv iddiv2 classsty1 /divdiv iddiv3 classsty1 /div select id s1 onchangem1()option valueflag0请选择样式/optionoption valueflag1样式1/optionoption valueflag2样式2/optionoption valueflag3样式3/optionoption valueflag4样式4/optionoption valueflag5样式5/option/select /bodyscript function m1(){var x document.getElementById(s1);if(x.value flag1){var y document.getElementById(div1);var html ;for(var i0; i10; i){html div styleheight:40px;width:40px;background-color:#2ac;float:left;margin-left:10px;margin-top:10px;/div;}y.innerHTML html;}} /script/html
