4）jQuery的基础部分和js的部分

发布时间：2023-09-06 02:05责任编辑：沈小雨关键词：js jQuery

1：js：

包含三部分：

ESMAScript：基础语法

Array（）

索引、length、push（）、pop（）

DOM：

获取DOM的三种方式：

（1）Id

（2）Class

（3）标签获取 TayName

BOM：

入口函数：

等待这文档，

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box"></div>
<script>
window.onload=function () {
alert(2)
}
// 有覆盖现象
window.onload=function () {
alert(3)
}
</script>

</body>
</html>

这里的var可以变量提升：

Var =i;

I = 0; \可以写成var i = 0；

总结：

Var 声明的变量存在变量提升

Let声明的变量是块级作用域

Const 声明的是常量一旦声明变量不可改变

DOM的创建和添加：

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM可以做什么

找对象（元素节点）

设置元素的属性值

设置元素的样式

动态创建和删除元素

事件的触发响应：事件源、事件、事件的驱动程序

操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点：

vardiv1 = document.getElementById("box1"); //方式一：通过id获取单个标签

vararr1 = document.getElementsByTagName("div1"); //方式二：通过标签名获得标签数组，所以有s

vararr2 = document.getElementsByClassName("hehe"); //方式三：通过类名获得标签数组，所以有s

创建节点

格式如下：

新的标签(元素节点) = document.createElement("标签名");

比如，如果我们想创建一个li标签，或者是创建一个不存在的adbc标签，可以这样做：

vara1 = document.createElement("li"); //创建一个li标签

vara2 = document.createElement("adbc"); //创建一个不存在的标签

console.log(a1);

console.log(a2);

console.log(typeofa1);

console.log(typeofa2);</script>

插入节点

插入节点有两种方式，它们的含义是不同的。

方式1：

父节点.appendChild(新的子节点);

解释：父节点的最后插入一个新的子节点。

方式2：

父节点.insertBefore(新的子节点,作为参考的子节点);

解释：

·在参考节点前插入一个新的节点。

·如果参考节点为null，那么他将在父节点最后插入一个子节点。

删除节点

格式如下：

父节点.removeChild(子节点);

解释：用父节点删除子节点。必须要指定是删除哪个子节点。

如果我想删除自己这个节点，可以这么做：

node1.parentNode.removeChild(node1);

复制节点（克隆节点）

格式如下：

要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。

要复制的节点.cloneNode(true);

括号里带不带参数，效果是不同的。解释如下：

不带参数/带参数false：只复制节点本身，不复制子节点。

带参数true：既复制节点本身，也复制其所有的子节点。

设置节点的属性

我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。

我们就统一拿下面这个标签来举例：

下面分别介绍。

1、获取节点的属性值

方式1：

元素节点.属性;

元素节点[属性];

举例：（获取节点的属性值）

varmyNode = document.getElementsByTagName("img")[0];

console.log(myNode.src);

console.log(myNode.className); //注意，是className，不是classconsole.log(myNode.title);

console.log("------------");

console.log(myNode["src"]);

console.log(myNode["className"]); //注意，是className，不是classconsole.log(myNode["title"]);</script></body>

方式2：（推荐）

素节点.getAttribute("属性名称");

例子：

console.log(myNode.getAttribute("src"));

console.log(myNode.getAttribute("class")); //注意是class，不是className

console.log(myNode.getAttribute("title"));

删除节点的属性

格式：

元素节点.removeAttribute(属性名);

举例：（删除节点的属性）

myNode.removeAttribute("class");

myNode.removeAttribute("id");

举例：

留言板：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.close{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
background-color: rgba(0,0,0,.1);
margin-left: 20px;
}
</style>
</head>
<body>
<h1>简易留言板</h1>
<div id="box">


</div>
<textarea id="msg"></textarea>
<input type="button" id="btn" value="留言"/>
<button onclick="sum()">统计</button>
</body>
<script type="text/javascript">

// 0 将ul标签添加到div#box标签中
var oUl = document.createElement('ul');
var oBox = document.getElementById('box');
oBox.appendChild(oUl);

var oBtn = document.getElementById('btn');
var oMsg = document.getElementById('msg')
// 控制留言的总数量
var count = 0;
oBtn.onclick = function(){

// 点击留言按钮事件操作
// 1.创建li标签
var oLi = document.createElement('li');
//2.设置内容
oLi.innerHTML = oMsg.value + "<span>X</span>"

// 3.如果想在插入的第一个li获取的前面继续添加li标签
//3.1获取li标签
var olis = document.getElementsByTagName('li');
//3.2 如果是第一次添加的li标签，则直接添加到ul的后面
if(olis.length == 0){
oUl.appendChild(oLi);
count++;

}else{
// 3.3 如果不是第一次添加的li标签，则插入到第一个li标签的前面
oUl.insertBefore(oLi,olis[0]);
count++;
}
// 4.添加完成之后清空textarea的值
oMsg.value = '';

// 5.点击X的时候删除当前的一条数据
//5.1先获取所有的X
var oSpans = document.getElementsByTagName('span');

// 5.2for循环对所有的X添加点击事件
for(var i = 0; i< oSpans.length; i++){
oSpans[i].onclick = function(){
// 5.3 移除当前的li标签
oUl.removeChild(this.parentNode)
count--;
}
}

}

function sum(){
alert('一共发布了'+count+'条留言');

}
</script>
</html>

结果：

使用js模拟选择器中的hover

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
//需求：鼠标放到哪个button上，改button变成×××背景（添加类）

var btnArr = document.getElementsByTagName("button");
//绑定事件
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
btnArr[i].onmouseover = function () {
//【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current"; //【重要】核心代码
}
}

//鼠标离开current时，还原背景色
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原
this.className = "";
}
}

</script>

</body>

</html>

结果：

创建对象的几种常用方式

1.使用Object或对象字面量创建对象

2.工厂模式创建对象

3.构造函数模式创建对象

4.原型模式创建对象

使用Object或对象字面量创建对象

JS中最基本创建对象的方式：

varstudent = newObject();

student.name = "easy";

student.age = "20";

当我们要创建同类的student1，student2，…，studentn时，我们不得不将以上的代码重复n次....

varsutdent1 = {

name : "easy1",

age : 20

};

varsutdent2 = {

name : "easy2",

age : 20

};

...

varsutdentn = {

name : "easyn",

age : 20

};

使用构造函数的方式创建对象：

工厂模式创建对象

JS中没有类的概念，那么我们不妨就使用一种函数将以上对象创建过程封装起来以便于重复调用，同时可以给出特定接口来初始化对象

functioncreateStudent(name, age) {

varobj = newObject();

obj.name = name;

obj.age = age;

returnobj;

}

varstudent1 = createStudent("easy1", 20);

varstudent2 = createStudent("easy2", 20);

...

varstudentn = createStudent("easyn", 20);

同时又定义了”生产”水果对象的createFruit()函数：

functioncreateFruit(name, color) {

varobj = newObject();

obj.name = name;

obj.color = color;

returnobj;

}

varv1 = createStudent("easy1", 20);

varv2 = createFruit("apple", "green");

Python和js的对比：

Es6中的函数可以写成箭头函数

举例对比：

在js中prototype原型，是每个对象的父类

原型的模式创建对象

原型链甚至原型继承，是整个JS中最难的一部分也是最不好理解的一部分，在这里由于我们课程定位的原因，如果对js有兴趣的同学，可以去查阅一下相关JS原型的一些知识点。更加有助于你以后前端JS的面试。

functionStudent() {

this.name = 'easy';

this.age = 20;

}

Student.prototype.alertName = function(){

alert(this.name);

};

varstu1 = newStudent();varstu2 = newStudent();

stu1.alertName(); //easy

stu2.alertName(); //easy

alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数

Es6中的文件引入：

Import aaa from xxx

前端三大工具：

Grunt

Glup

Webpack

作用：

文件压缩、打包

定时器：

在js中的定时器分两种：1、setTimeout() 2、setInterval()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = box style="width: 100px;height: 100px;background-color: red;">

</div>
<script>
var a = 0;
var oDiv = document.getElementById('box')
setInterval(function () {
a++;
oDiv.style.marginLeft = a+'px'
console.log(a)
},10)
</script>
</body>
</html>

优化后的；有定时器：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = box style="width: 100px;height: 100px;background-color: red;">
</div>
<button id = 'btn'>停止</button>
<script>
var a =0;
function $(id) {
return document.getElementById(id);
}
var oDiv = document.getElementById('box');
var oBtn = document.getElementById('btn');
var c = setInterval(function () {
a +=3;
$('box').style.marginLeft = a+'px';
console.log(a);
},50)
$('btn').onclick = function () {
clearInterval(c)
}
</script>
</body>
</html>

数据异步机制：

不等待功能

setTimeout(function () {
alert(2);
console.log(2222);
},2000)
console.log(1111);

定时器：

<body>
<script>
setTimeout(function () {
window.open('http://www.baidu.com');
},2000);
</script>
</body>

自动刷新：

全局刷新：可以测试使用

4）jQuery的基础部分和js的部分

DOM可以做什么

创建节点

插入节点

删除节点

复制节点（克隆节点）

设置节点的属性

1、获取节点的属性值

删除节点的属性

创建对象的几种常用方式

使用Object或对象字面量创建对象

工厂模式创建对象

原型的模式创建对象

知识推荐