js用来实现页面的动态效果。
js的特点：1、是客户端语言，客户端进行解释执行。
2、是一种脚本语言
3、是一种基于对象的语言，不用定义类和实例化对象，直接使用类即可
4、js前端和后端都可以做
js基础
1、变量
变量用var声明，没用var声明的为全局变量。
2、一些规范注意
语法格式跟c语言类似，用{}来封装代码块，/* */ //注释，语句结束加分号，不加分号，换行表示一句结束。
3、循环、选择等控制语句和c语言的一样。
4、基本数据类型
js有5种基本数据类型，number、string、Boolean、null、undefined。
number：表示任意类型的数，整数浮点数；
string：表示字符串
Boolean：1，0。console.log(1+true)为2
null：用于对象，表示对象没有值的情况
undefined：两种情况出现undefined
1、x只声明，没有定义的时候
var x;
console.log(x);
2、函数没有返回值的时候
function f(){ }
console.log(f())
数据类型之间的转换
console.log(123+“hello”)//"123hello"
console.log(123+true)//
console.log("hello"+true)//"hellotrue"
强制类型转换：
parseInt("hello")=NaN
parseInt("123")=123
parseInt("123hello")=123
parseInt("hello123")=NaN
parseInt("123hello123")=123
parseFloat("1.23")=1.23
eval,跟python一样，对字符串求值
掌握3种对象：内置对象、bom对象，dom对象。
11种内置对象：
1、string
两种创建方法。
var a="hello";//typeof为string
var a = new String("hello");//typeof方法为object
字符串对象的属性和方法：
length，格式编排方法：
console.log(a.length);
console.log(a.anchor());
console.log(a.bold());
console.log(a.italics());
输出：
5
<a name="undefined">hello</a>
<b>hello</b>
<i>hello</i>
大小写转换：
console.log(a.toUpperCase());//转换为大写
console.log(a.toLowerCase());//转换为小写
获取字符，用得不多：
console.log(a.charAt(1));//e
console.log(a.charCodeAt(1));//
查询字符：第一个可有两个参数，指从哪个位置开始查询，查到就返回，第二个从后面开始查询。
console.log(a.indexOf("e"));//获取下标
console.log(a.lastIndexOf("e"));
子字符串的处理，这个用得较多。
连接字符串
var b=a.concat("abc");//a还是原来的值，b在a的基础上增加。和“+”的效果一样
截取字符串，原字符串不变。
a.substr(1,2)；//参数，起始位置，截取长度
a.substring(1,4)；//参数，起始位置，结束位置，前闭后开
a.slice(-3,-1)；//参数，起始位置，结束位置，前闭后开，和python的切片差不多
a.slice(0,3)；
替换字符串
a.replace("hell","haha")//a不变
var b=a.replace("hell","haha")
分割字符串
var x = "1,2,3,4,5,6";
var y = x.split(",");//x不变
console.log(x);
console.log(y);
2.数组对象
数组的创建
var a = [1,2,3,4];
var a = new Array();//个数不限
var a = new Array(5);//个数为5个
var a = new Array(1,"hello",7);//直接用元素创建
二维数组的创建：
数组的属性和方法：
属性有length，和上述一样。
方法：
join，在python中join是字符串的方法。"".join(["1","2"])，列表里面元素需要为字符串，而在js中，join是数组的方法，数组中的元素可以为数字。
var a = new Array(1,"hello",7);
var b = a.join("*");
console.log(b);
//1*hello*7
在js中所有内置对象都继承于object对象，因此所有对象都有方法，toString()
concat
var a = [1,2,3,4];
var b = a.concat([5,6]);
console.log(b);//6个，concat中的值，不是作为整体连接的
console.log(a);//4个，a的值没有改变
reverse
var a = [1,2,3,4];
var b = a.reverse();
console.log(b);//b为4,3,2,1
console.log(a);//a也为4,3,2,1
sort
js中的sort和python中不一样，js中的先按照高位排序，高位相同再依次比较低位，没有的比0 小。
var a = [35,100,354,79,10];
var b = a.sort();
console.log(b);//[10,100,35,354,79]
console.log(a);//[10,100,35,354,79]
如果需要按照正常的排序需要些一个函数作为参数传入到sort中。
var a = [35,100,354,79,10];
var b = a.sort();
console.log(b);//[10,100,35,354,79]
console.log(a);//[10,100,35,354,79] function func(a,b) {
if(a>b){
return 1;
}
else if (a<b){
return -1;
}
else {
return 0;
}
}
var c = a.sort(func);
console.log(a);//[10,35,79,100,354]
console.log(c);//[10,35,79,100,354]
slice
数组中slice和字符串中slice一样。
splice
删除，插入操作
var a = [1,2,3,4,5,6];
a.splice(0,3)//删除，从0位置开始删除3个
console.log(a)
a.splice(1,0,7,8,9)//插入，从1位置插入7,8,9
console.log(a);//[4, 7, 8, 9, 5, 6]
进出栈操作：
push，pop
var a = [1,2,3,4,5,6];
a.push([6,7]);//将[6,7]作为整体一次性放入栈中
console.log(a);//[1,2,3,4,5,6,[6,7]]
a.push(9,"hello");//分别依次放入
console.log(a);//[1,2,3,4,5,6,[6,7],9,"hello"]
a.pop();
console.log(a);//[1,2,3,4,5,6,[6,7],9]
unshift,shift
var a = [1,2,3,4,5,6];
a.unshift([6,7]);//将[6,7]作为整体一次性放入栈中
console.log(a);//[[6,7],1,2,3,4,5,6]
a.unshift(true,"hello");//作为整体放入，但是整体为两个值
console.log(a);//[true,"hello",[6,7],1,2,3,4,5,6]
a.shift();
console.log(a);//["hello",[6,7],1,2,3,4,5,6]
3、函数对象
创建函数有两种方式，1、正常的，2、用new创建，不用，了解 这种创建方式。var func = new Function（“参数1”，......“参数n”，“函数体”）。
在python中，函数调用不可以在函数定义之前。python读取一行执行一行，先读到执行那儿找不到定义，报错
在js中，函数调用可以写在函数定义之前。页面加载时，先加载所有定义的函数再执行，因此写在前面也能找到。
function func(a,b) {
return a+b
}
console.log(func.length)//表示函数期望的参数个数
function func(a,b) {
return a+b
}
console.log(func.length);//表示函数期望的参数个数
console.log(func(1));//NaN
console.log(func());//NaN
console.log(func(1,2));//3
console.log(func(1,2,3));//3
function func() {
console.log(arguments);//arguments是存储传入参数的对象
var sum = 0;
for(var num in arguments){//num表示下标
sum +=arguments[num];
}
console.log(sum)
}
func(1,2,3);
//匿名函数1，和标准函数不一样，先去掉函数的名字，再赋值给一个变量。再函数赋值给变量前执行会报错，func不能调用
var func = function () {
alert(123)
};
func();
//匿名函数2
(function () {
alert(456)
})()
BOM对象有：window对象、history对象、location对象
所有浏览器都支持window对象，window对象，一个html文档就是一个window对象、window对象用于控制浏览器窗口的，window对象不用创建课直接使用。常用的alert（）就是window对象。有alert（），confirm（），prompt（），open（），close(),.......
BOM对象就是浏览器对象，功能为：使js有能力和浏览器“对话”。
window对象，1、一个html文档就是一个window对象；2、window对象就是浏览器的一个窗口；3该对象不用创建，可以直接使用，对象的方法也可直接使用，window对象为全局变量。
一：
alert():窗口弹出一个弹出框，提示用户
confirm():
var flag = window.confirm("是否确定删除");//点击确定，返回true；点击取消，返回false
console.log(flag);
prompt():
var content = window.prompt("请输入内容：");//与上不同在于，有一个框提阿尼额输入内容，点击确定返回输入内容，点击取消返回null
console.log(content);
二：
open():打开一个新的浏览器窗口
close():关闭一个浏览器窗口
三：
var clock = window.setInterval(func,1000);//相当于设定定时器
function func() {
console.log("hello");
}
window.clearInterval(clock);//关闭定时器
var t = window.setTimeout(func,1000);//与上述区别在于只执行一次，1秒钟之后
function func() {
console.log("hello");
}
window.clearTimeout(t);//关闭
history对象：
history对象是window对象的一个子对象，用于实现窗口的前进后退。
<button onclick="func_back()">back</button>
<button onclick="func_forward">forward</button>
function func_back() {
window.history.back();//后退，相当于浏览器上的后退
window.history.go(-1);//表示后退几步
}
function func_forward() {
window.history.forward();//前进
window.history.go(1);
window.history.go(2);//表示前进几步
}
location对象：
<button onclick="func()">点击</button>
function func() {
window.location.reload();//刷新页面
window.location.assign("http://www.baidu.com");//链接到百度，可后退
window.location.replace("http://wwww.baidu.com");//将当前窗口替换为百度窗口，不可后退
}
DOM对象
DOM是关于html文档和xml的访问标准，DOM主要完成两件事情，1、找；2、操作。DOM对象有两个主要的对象，document对象和element对象。也称为节点。
1、找；
找到文档中的具体某一标签对象
<div>
<p name="pp"> hello p</p>
<div id="div_a">
<p class="content">hello hello</p>
<a href="">点击</a>
</div>
</div>
var ele = document.getElementsByTagName("a")[0];
var ele1 = document.getElementsByName("pp")[0];
var ele2 = document.getElementById("div_a");
var ele3 = document.getElementsByClassName("content")[0];
console.log(ele);
console.log(ele1);
console.log(ele2);
console.log(ele3);
直接找到标签就用上面的4种方法。在element对象中也可以进行局部查找它里面的标签，但是只能用ByTagName，ByClassName；林外两个使用拿不到结果。
还可以利用节点的导航属性找到其他的标签对象。
var ele = document.getElementsByTagName("a")[0];
var ele1 = document.getElementsByName("pp")[0];
var ele2 = document.getElementById("div_a");
var ele3 = document.getElementsByClassName("content")[0];
// console.log(ele);
// console.log(ele1);
// console.log(ele2);
// console.log(ele3);
var ele4 = ele.parentElement;//拿到该标签的父元素
console.log(ele4);
var ele5 = ele2.children;//拿到该标签的所有子元素
console.log(ele5);
var ele6 = ele2.firstElementChild;//拿到该标签的第一个子元素
console.log(ele6);
var ele7 = ele2.lastElementChild;//拿到该标签的最后一个子元素
console.log(ele7);
var ele8 = ele3.nextElementSibling;//拿到该标签的下一个兄弟标签
console.log(ele8);
var ele9 = ele.previousElementSibling;//拿到该标签的上一个兄弟标签
console.log(ele9);
节点属性：
自身属性：
innerHTML
导航属性：
DOM，事件、绑定方式，this。
两种绑定事件的方式
1、直接写在标签上
2、写在js中
js中的事件有
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开 onselect 文本被选中。
onsubmit 确认按钮被点击。
window.onload=function(){}；或者在body标签上添加上onload事件绑定。表示页面加载完成后再执行函数内的内容。
增删改查操作：
增:
createElement(name)创建元素
appendChild();将元素添加
删:
获得要删除的元素
获得它的父元素
使用removeChild()方法删除
改:
第一种方式:
使用上面增和删结合完成修改
第二中方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
<script type="text/javascript">
//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页.
function addNode(){
//1.获得 第一个div
var div = document.getElementById("div_1");
//2.创建a标签 createElement==>创建一个a标签 <a></a>
var eleA = document.createElement("a");
//3.为a标签添加属性 <a href="http://www.baidu.com"></a>
eleA.setAttribute("href", "http://www.baidu.com");
//4.为a标签添加内容 <a href="http://www.baidu.com">百度</a>
eleA.innerHTML = "百度";
//5.将a标签添加到div中
div.appendChild(eleA);
}
//点击后 删除div区域2
function deleteNode(){
//1 获得要删除的div区域
var div = document.getElementById("div_2");
//2.获得父亲
var parent = div.parentNode;
//3 由父亲操刀
parent.removeChild(div);
}
//点击后 替换div区域3 为一个美女
function updateNode(){
//1 获得要替换的div区域3
var div = document.getElementById("div_3");
//2创建img标签对象 <img />
var img = document.createElement("img");
//3添加属性 <img src="001.jpg" />
img.setAttribute("src", "001.JPG");
//4.获得父节点
var parent = div.parentNode;
//5.替换
parent.replaceChild(img, div);
}
//点击后 将div区域4 克隆一份 添加到页面底部 function copyNode(){
//1.获取要克隆的div
var div = document.getElementById("div_4");
//2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己
var div_copy = div.cloneNode(true);
//3.获得父亲
var parent = div.parentNode;
//4.添加
parent.appendChild(div_copy);
} </script>
- 改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ，innerText。
- 改变 CSS 样式
|
1
2
|
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br data-filtered="filtered"> .style.fontSize=48px
|
- 改变 HTML 属性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
- 创建新的 HTML 元素
createElement(name)
- 删除已有的 HTML 元素
elementNode.removeChild(node)
- 关于class的操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove