目录
前端06 /JavaScript
昨日内容回顾
js的引入
方式一:方式二:
js的编程要求
结束符 ;注释 // 单行注释 /*多行注释*/
变量
声明 var变量的命名 : 数字 字母 下划线 $ 不能用js中的保留字
输入输出
alert('弹出的警告框')console.log('在控制台里打印')var inp = prompt('请输入内容 :') 基础数据类型
number
整数和小数都属于number类型toFixed(2) 保留两位小数
string
'字符串' "字符串"属性 :length方法 :trim(),concat('str'),charAt(索引),indexOf(元素),slice(start,end),split(sep,返回前n个值) toLowerCase(),toUpperCase() boolean
true [] {}false undefined null NaN 0 '' null
设置为空
undefined
未定义 当一个变量只声明 不赋值的时候
转换
parseInt('123') 字符串转数字parseFloat('1.235') 字符串转小数String(undefined) 小数转字符串(推荐)var a = 123a.toString() 数字转字符串Boolean(数据类型) 任意类型转换成boolean 内置对象类型
array
var a = [1,2,3,4]var a = new Array([1,2,3,4])属性:length方法:push() pop() shift() unshift() slice() reverse() join('sep') sort() splice(1,2,'新的值') concat() 自定义对象
var obj = {'alex':'name'} //对象 json数据类型序列化
'{"key":18,"123":[1,2,3]}'自定义对象 = JSON.parse(json字符串)json字符串 = JSON.stingify(自定义对象) 运算符
算数运算符 : + - * / ** % ++ -- var b = ++a varb = a++ 赋值运算符 : = += -= *= /= %=比较运算符 : > < >= <= == != === !==逻辑运算符 : &&与 ||或 !非
流程控制
条件判断
if(条件){ //满足条件之后要执行的代码}else if(条件){ //满足条件之后要执行的代码}else{ //都不满足之后要执行的代码}switch(值){ case 值1: 代码; break case 值2: 代码; break default: 代码} 循环
while(条件){ 循环体}for(var i=0;i<10;i++){ 循环体}for(i in arr){ i是索引,arr[i]是具体的值}for(vari=0;i 三元运算符
var 值 = 条件 ? 条件为true返回的内容:条件为false返回的内容
函数
function 函数名(参数){ 函数体 return 返回值 //返回值的个数必须是一个,如果返回多个值,放在数组中返回}函数名(参数)arguments 函数中内置的动态单数,可以接收所有的参数匿名函数var 变量名 = function(参数){ 函数体 return 返回值 }自调用函数(function(形参){ 函数体 return 返回值})(实参) 今日内容
1.BOM
location对象 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面,就是刷新一下页面定时器 1. setTimeOut() 一段时间之后执行某个内容,执行一次 示例 var a = setTimeout(function f1(){confirm("are you ok?");},3000); var a = setTimeout("confirm('xxxx')",3000); 单位毫秒 清除计时器 clearTimeout(a); 2.setInterval() 每隔一段时间执行一次,重复执行 var b = setInterval('confirm("xxxx")',3000);单位毫秒 清除计时器 clearInterval(b); 2.DOM
2.1 什么是dom
document object modle 文档对象模型整个文档就是一颗树树当中的每一个节点都是一个对象 : 这个对象中维系着 属性信息 文本信息 关系信息在页面上还有一些动作效果: 根据人的行为改变的 点击 鼠标悬浮 自动在改变的
2.2 js是怎么给前端的web加上动作的呢?
1.找到对应的标签2.给标签绑定对应的事件3.操作对应的标签
2.3 查找标签
1.直接查找
var a = document.getElementById('baidu') //根据ID获取一个标签，直接返回一个元素对象console.log(a)var sons = document.getElementsByClassName('son') //根据class属性获取，返回元素组成的数组console.log(sons)sons[0] //获取到一个标签对象 var divs = document.getElementsByTagName('div') //根据标签名获取标签合集，返回元素组成的数组console.log(divs)示例: Title are you ok? div2 操作: var divEle = document.getElementById('d1'); var divEle = document.getElementsByClassName('c1'); var divEle = document.getElementsByTagName('div'); 2.间接查找
parentElement 父节点标签元素children 所有子标签firstElementChild 第一个子标签元素lastElementChild 最后一个子标签元素nextElementSibling 下一个兄弟标签元素previousElementSibling 上一个兄弟标签元素示例:Title are you ok? span1 span2 span3div2操作: var divEle = document.getElementById('d1'); 找父级:divEle.parentElement; 找儿子们:divEle.children; 找第一个儿子:divEle.firstElementChild; 找最后一个儿子:divEle.lastElementChild; 找下一个兄弟:divEle.nextElementSibling;
3.标签操作
创建标签:重点 var aEle = document.createElement('a'); //aEle就是一个新创建出来的标签对象添加标签 追加一个子节点（作为最后的子节点） somenode.appendChild(newnode)； 示例: var divEle = document.getElementById('d1') divEle.appendChild(aEle) 把增加的节点放到某个节点的前边。 somenode.insertBefore(newnode,某个节点); 示例: var divEle = document.getElementById('d1'); 找到父级标签div var a = document.createElement('a'); 创建a标签 a.innerText = 'baidu'; 添加文本内容 var span2 = document.getElementById('s2'); 找到div的子标签span2 divEle.insertBefore(a,span2); 将a添加到span2的前面 html文件代码: Title are you ok? span1 span2 span3 div2 删除节点
获得要删除的元素，通过父元素调用该方法删除。somenode.removeChild(要删除的节点)示例: 删除span2标签 var divEle = document.getElementById('d1'); var span2 = document.getElementById('s2'); divEle.removeChild(span2); 替换节点：
somenode.replaceChild(newnode, 某个节点);somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉
标签的复制
节点.cloneNode() //只克隆一层节点.cloneNode(true) //克隆自己和所有的子子孙孙注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上
4.文本节点操作
var divEle = document.getElementById("d1")divEle.innerText #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容divEle.innerHTML #获取的是该标签内的所有内容，包括文本和标签取值示例: div2.innerText; 不识别标签 "are you ok? span1 span2 span3" div2.innerHTML; 识别标签 " are you ok? span1 span2 span3 "设置值: var div1 = document.getElementById('d1'); div1.innerText = 'xxx'; div1.innerText = '百度'; div1.innerHTML = '百度'; 2.4 属性操作
var divEle = document.getElementById("d1");divEle.setAttribute("age","18") #比较规范的写法divEle.getAttribute("age")divEle.removeAttribute("age")// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的imgEle.srcimgEle.src="..."示例: 百度 操作 var a = document.getElementsByTagName('a'); a[0].href; 获取值 a[0].href = 'xxx'; 设置值 2.5 获取值操作
输入框 input 获取值 var inpEle = document.getElementById('username'); inpEle.value; 设置值 inpEle.value = 'alexDsb';select选择框 获取值 var selEle = document.getElementById('select1'); selEle.value; 设置值 selEle.value = '1'; 2.6 类操作
className 获取所有样式类名(字符串)首先获取标签对象标签对象.classList; 标签对象所有的class类值标签对象.classList.remove(cls) 删除指定类classList.add(cls) 添加类classList.contains(cls) 存在返回true，否则返回falseclassList.toggle(cls) 存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个示例: var divEle = document.getElementById('d1'); divEle.classList.toggle('cc2'); var a = setInterval("divEle.classList.toggle('cc2');",30); 判断有没有这个类值的方法 var divEle = document.getElementById('d1'); divEle.classList.contains('cc1'); 2.7 css设置
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可设置值: divEle.style.backgroundColor = 'yellow';获取值 divEle.style.backgroundColor;
3.事件
简单示例:Title
绑定事件的方式
方式1: 下面的this表示当前点击的标签 var divEle = document.getElementById('d1'); divEle.onclick = function () { this.style.backgroundColor = 'purple'; }方式2 标签属性写事件名称=某个函数(); 获取当前操作标签示例,this标签当前点击的标签 function f1(ths) { ths.style.backgroundColor = 'purple'; } 绑定方式:方式一: var btn = document.getElementById('btn') btn.onclick = function () { alert('点我干嘛') }方式二: btn.onclick = clik function clik() { alert('不要点') }方式三: function clik() { alert('不要点') }