前端的重要部分js

时间:2024-01-21 11:42:09

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,格式编排方法:

前端的重要部分js
    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>
前端的重要部分js

大小写转换:

    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中。

前端的重要部分js
    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]
前端的重要部分js

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

前端的重要部分js
    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]
前端的重要部分js

unshift,shift

前端的重要部分js
    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]
前端的重要部分js

3、函数对象

创建函数有两种方式,1、正常的,2、用new创建,不用,了解 这种创建方式。var func = new Function(“参数1”,......“参数n”,“函数体”)。

在python中,函数调用不可以在函数定义之前。python读取一行执行一行,先读到执行那儿找不到定义,报错

在js中,函数调用可以写在函数定义之前。页面加载时,先加载所有定义的函数再执行,因此写在前面也能找到。

    function func(a,b) {
return a+b
}
console.log(func.length)//表示函数期望的参数个数
前端的重要部分js
    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
前端的重要部分js
前端的重要部分js
    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);
前端的重要部分js
前端的重要部分js
    //匿名函数1,和标准函数不一样,先去掉函数的名字,再赋值给一个变量。再函数赋值给变量前执行会报错,func不能调用
var func = function () {
alert(123)
};
func();
//匿名函数2
(function () {
alert(456)
})()
前端的重要部分js

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>
前端的重要部分js
    function func_back() {
window.history.back();//后退,相当于浏览器上的后退
window.history.go(-1);//表示后退几步
}
function func_forward() {
window.history.forward();//前进
window.history.go(1);
window.history.go(2);//表示前进几步
}
前端的重要部分js

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、找;

找到文档中的具体某一标签对象

前端的重要部分js
<div>
<p name="pp"> hello p</p>
<div id="div_a">
<p class="content">hello hello</p>
<a href="">点击</a>
</div>
</div>
前端的重要部分js
前端的重要部分js
    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);
前端的重要部分js

直接找到标签就用上面的4种方法。在element对象中也可以进行局部查找它里面的标签,但是只能用ByTagName,ByClassName;林外两个使用拿不到结果。

还可以利用节点的导航属性找到其他的标签对象。

前端的重要部分js
    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);
前端的重要部分js

节点属性:

自身属性:

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