Notas de estudio de JavaScript+JQuery

Enterprise 2023-08-23 02:12:44 views: null

1. ¿Qué es JavaScript?

  1. Un lenguaje de programación de secuencias de comandos web literal
  2. JavaScript es un lenguaje de programación seguro, basado en objetos y controlado por eventos.
  3. Funciones de JavaScript Agregue comportamiento interactivo a las páginas HTML El lenguaje de secuencias de comandos, la sintaxis y Java son similares a los lenguajes interpretados, interpretando durante la ejecución.

2. Composición de JavaScript

1. ECMAScript: sintaxis principal de JavaScript

2. DOM: modelo de objetos de documento (modelo de objetos de documento) todas las etiquetas son objetos

3.BOM: el modelo de objetos del navegador simula el navegador como un objeto

3. El método de introducción de JavaScript (tres tipos)

1. pasar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSDemo</title>
</head>
<body>
    
</body>
<!-- 嵌入网页中使用 script 标签-->
<script>
    //javaScript代码
    console.log("hello world");
</script>
</html>

2. pasar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSDemo</title>
    <link rel="stylesheet" type="text/css" href="index.css"  />
</head>
<body>
    <p id="p1">123</p>
</body>
<!-- 引入js文件 -->
<script type="text/javascript" src="demo.js"></script>
</html>

3. Escribe directamente en la etiqueta HTML.

<input name="btn" type="button" value="弹出消息框"   
   onclick="javascript:alert('欢迎你');"/>

Sobre el problema del orden de carga de js

  1. Si hay contenido para manipular elementos DOM en el archivo js, ​​asegúrese de que el elemento esté cargado antes de realizar operaciones js; de lo contrario, se obtendrá un valor nulo.

4. Modo de operación JS\HTML\CSS

1. Los archivos JS, HTML y CSS se publican y almacenan en el lado del servidor.

2. Si desea acceder, debe enviar una solicitud a través del navegador para obtener los datos que contienen el contenido de los archivos js, html y css.

3. Los datos se devuelven al navegador del cliente de manera receptiva y el navegador carga html, js y css para representar la página web.

5. Definición de variables

变量的声明方法
 js中没有数据类型的描述
 只有作用域描述词：var let const

  var :全局作用域以及可变数据类型
  （平时推荐）let: 块作用域变量可变数据类型
  const: 常量

  注意：定义变量时不要使用name作为变量名,严格遵循驼峰规则定义,定义规则和java一致

let userName = “123”;
var age = 18;
const code = 1;

tipos de datos en js

var age1 = 10;//number
var age2 = 11.1;//number

var isOk = true;//boolean

var html = '<p id="p1">123</p>';// 单引号和双引号在js中都是string字符串

var obj1 = {
    
    
  userName:"蔡徐坤",
  age:18,
  say:function(){
    
    
      console.dir("你干嘛！");
  }
};
//对象类型：数组、集合、内置类、json对象

typeof devuelve la cadena del nombre del tipo de datos

//对象类型：数组、集合、内置类、json对象
/* typeof 变量名称 返回一个数据类型名称字符串 */ 
if(typeof age1 == "number"){
    
    
  console.dir("!!!!");
}

Declaración de matriz JS

  1. La matriz en js no es un espacio ordenado de longitud fija, pero se puede expandir según el contenido del elemento.
  2. Las matrices en js pueden almacenar diferentes tipos de datos
let arr = new Array(数组的长度);
let arr2 = new Array(初始元素值1,初始元素值2..);
let arr3 = [];// 声明一个空数组
let arr4 = [1,2,3];// 边声明边赋值

Obtener y asignar

let arr4 = [1,2,3];

var temp = arr4[下标];//取值
arr4[下标] = 值;//赋值

Métodos comunes para matrices

let arr = [1,2,3];

arr.length;// 返回数组长度
let arr = ["B","b","a"];

var str = arr.join();// 变成 “100,200,300” 字符串 类似java中的toString方法

arr.sort();// 数值升序，文字按照unicode字典升序排序

arr.push("c");// 往末尾追加元素

6. El uso de while, do... while, for loop, break y continue en JS es consistente con el de java.

Recorrido de matriz: método especial: bucle for-in

let arr = [1,2,3];
//for-in循环
/*
i:数组下标
arr:数组对象
*/
for(var i in arr){
    
    
  console.dir(arr[i]);
}

7. Operadores

operador aritmético + - ***** / % ++ —
operador de asignación = += -=
Operadores de comparación (todos los resultados son valores booleanos) > < >= <= == != === !==
Operadores logicos && || ! 
let a = 1;
let b = "1";

console.dir(a == b);// 把左右两侧的数值变成字符串比较（只比较文字是否相同）
console.dir(a === b);// 严格等于判断：先判断两侧数据类型是否相同，再判断数值是否相同

8.js obtiene la entrada y salida del usuario a través de objetos

alert("你干嘛！！！");//浏览器弹窗（提示信息框）

/**
 * 点击确定时：填写的数据返回保存至userName
 * 点击取消：userName值为null
 */
var userName = prompt("请输入用户名:","默认值");

console.dir(userName);

9. Método de depuración de puntos de interrupción

Depuración con herramientas de desarrollo de navegador

Utilice el depurador para establecer puntos de interrupción en el código

var count = 0;
for(var i=0;i<10;i++){
    
    
   debugger;//在此处设置一个断点
   var temp = i;
   console.dir(temp);
   var temp2 = (i+10);
   console.dir(temp2);
}

10. Función JS (método)

Por definición: con o sin valor de retorno

say();//函数名(参数) 就可以调用这个方法
let age = say2();
console.dir(age);

/* 函数定义的位置可以在js文件的任意位置 */ 
/*无参-无返回值*/ 
function say(){
    
    
   console.dir("！！！");
}

/*无参-有返回值 */
function say2(){
    
    
  console.dir("！！！");
  return 10;//当前方法会返回给调用处一个数值10
}

/** 注意：有返回值和无返回值的函数重点就看函数体有没有写return 数据;语句 */

Sobre la definición: el método de escritura de la lista de parámetros.

say("admin","123456");
say2(1,"123",new Date());

/** 定义函数的形参直接写参数名称不需要写修饰符，多个用逗号分隔 */
function say(userName,pwd){
    
    
   console.dir(userName);
   console.dir(pwd);
}

/** JS中可变参数的定义方法 ...arr 理解成一个数组
 * 可变参数只能定义在参数列表的最后一个
 */
function say2(userName,...arr){
    
    
   console.dir(arr);
}

var arr = [1,2,3];

/** 参数可以接收任何数据类型 */
say("123");
say(1);
say(arr);


function say(userName){
    
    
   console.dir(typeof userName);
}

Método común del sistema

parseInt ("字符串")
将字符串转换为整型数字 
如: parseInt ("86")将字符串“86“转换为整型值86
parseFloat("字符串")
将字符串转换为浮点型数字 
如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45
isNaN()
用于检查其参数是否是非数字
eval()
用于计算一个字符串的计算表达式

Atributo de evento HTML: llamar a la función JS

Eventos comunes:

1. Teclado

onkeydown guion Ejecutar un script cuando se presiona una tecla
al presionar una tecla guion Ejecutar un script cuando se presiona y suelta una tecla
encendido guion Ejecutar script cuando se suelta la clave

Dos, el ratón

al hacer clic guion Ejecutar un script cuando se hace clic con el mouse
hacer clic guion Ejecutar un script cuando se hace doble clic con el mouse
inaguantable guion Ejecutar un script al arrastrar un elemento
indiferente guion Ejecute el script cuando finalice la operación de arrastre.
portador guion Script que se ejecutará cuando un elemento se arrastre a un destino de colocación válido
ondragleave guion Ejecute un script cuando un elemento abandone un destino de colocación válido
ondragover guion Script que se ejecutará cuando un elemento se arrastre sobre un destino de colocación válido
inicio del contrato guion Ejecutar script cuando comience la operación de arrastre
ondrop guion Script que se ejecutará cuando se suelte el elemento arrastrado
con el mouse abajo guion Ejecutar script cuando se presiona el botón del mouse
mover el mouse guion Ejecutar script cuando se mueve el puntero del mouse
en el mouse guion Ejecutar un script cuando el puntero del mouse sale de un elemento
el ratón por encima guion Ejecutar un script cuando el puntero del mouse esté sobre un elemento
en el ratón guion Ejecutar un script cuando se suelta el botón del mouse
en la rueda del mouse guion Ejecutar un script cuando se gira la rueda del mouse
desplazamiento guion Ejecutar un script cuando se desplaza la barra de desplazamiento del elemento

3. Elementos o ventanas

en la huella posterior guion Ejecutar un script después de imprimir un documento
en antes de imprimir guion Ejecute un script antes de imprimir el documento.
antes de cargar guion Ejecute el script antes de que se cargue el documento.
en la falta de definición guion Ejecute el script cuando la ventana pierda el foco
error guion Ejecute el script cuando ocurra un error
enfocado guion Ejecute el script cuando la ventana se enfoque
cambio de hash guion Ejecutar script cuando el documento cambie
cargar guion Ejecutar script cuando se carga el documento
en mensaje guion Ejecutar un script cuando se activa un mensaje
en línea guion Ejecutar script cuando el documento esté fuera de línea
en línea guion Ejecutar script cuando el documento se active
ocultar en la página guion Ejecutar script cuando la ventana está oculta
mostrar en la página guion Ejecutar script cuando la ventana esté visible
estado pop guion Ejecutar script cuando cambie el historial de la ventana
rehacer guion Script que se ejecutará cuando el documento realice una operación de rehacer (rehacer)
cambiar el tamaño guion Ejecutar script cuando se cambia el tamaño de la ventana
almacenamiento guion Ejecute el script cuando se actualice la zona de almacenamiento web (cuando cambien los datos en el espacio de almacenamiento)
mundo guion Ejecutar un script cuando un documento realiza una operación de deshacer
descargar guion Ejecutar un script cuando el usuario sale del documento

4. Formulario (entrada del usuario)

Atributos valor describir
en la falta de definición guion Ejecutar script cuando el elemento pierda el foco
en cambio guion Ejecutar script cuando el elemento cambie
Menú de contexto guion Ejecutar script cuando se activa el menú contextual
enfocado guion Ejecute el script cuando el elemento reciba el foco
cambio de formulario guion Ejecutar script cuando cambie el formulario
entrada de formulario guion Ejecute el script cuando el formulario reciba la entrada del usuario
en entrada guion Ejecute el script cuando el elemento reciba la entrada del usuario
en inválido guion Ejecutar script cuando el elemento no sea válido
reiniciar guion Ejecute el script cuando se restablezca el formulario. HTML5 no es compatible.
al seleccionar guion Ejecutar un script cuando se selecciona un elemento
al enviar guion Ejecute el script cuando se envíe el formulario.

5. Eventos multimedia (etiqueta de audio img video)

abortar guion Ejecutar un script cuando ocurre un evento de aborto
oncanplay guion Script que se ejecutará cuando los medios puedan comenzar a reproducirse, pero es posible que deban detenerse debido al almacenamiento en búfer.
oncanplaythrough guion Ejecute el script cuando los medios puedan reproducirse hasta el final sin detenerse para almacenar en búfer
onduracióncambio guion Ejecutar script cuando cambie la longitud del medio
uno vaciado guion Ejecute el script cuando el elemento de recurso multimedia esté repentinamente vacío (error de red, error de carga, etc.)
terminado guion Ejecute el script cuando el medio haya llegado al final.
error guion Ejecutar script cuando ocurre un error durante la carga del elemento
datos cargados guion Ejecutar script cuando se cargan datos multimedia
metadatos cargados guion Ejecute el script cuando se hayan cargado la duración del elemento multimedia y otros datos multimedia
inicio de carga guion Ejecute el script cuando el navegador comience a cargar datos multimedia
onpause script 当媒介数据暂停时运行脚本
onplay script 当媒介数据将要开始播放时运行脚本
onplaying script 当媒介数据已开始播放时运行脚本
onprogress script 当浏览器正在取媒介数据时运行脚本
onratechange script 当媒介数据的播放速率改变时运行脚本
onreadystatechange script 当就绪状态（ready-state）改变时运行脚本
onseeked script 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
onseeking script 当媒介元素的定位属性为真且定位已开始时运行脚本
onstalled script 当取回媒介数据过程中（延迟）存在错误时运行脚本
onsuspend script 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdate script 当媒介改变其播放位置时运行脚本
onvolumechange script 当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaiting script 当媒介已停止播放但打算继续播放时运行脚本

写法案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSDemo</title>
    <link rel="stylesheet" type="text/css" href="index.css"  />
</head>
<body>
    <!-- this代表当前元素DOM对象，this.value代表当前元素Dom对象的value属性 -->
    <input type="text" onchange="say2(this.value)" />
</body>
<!-- 引入js文件 -->
<script type="text/javascript" src="demo.js"></script>
</html>

function say2(e){
    
    
   console.dir(e);
}

11.BOM对象

BOM对象核心是window对象

三个属性：

1.history：浏览器历史对象（前进、后退）

2.location：浏览器地址栏对象（刷新网页、跳转到别的网页）

3.document：浏览器文档对象（DOM）-HTML标签被描述为对象

谷歌浏览器js打开窗口关闭不了问题解决

W3CSchool对该方法的解释如下：

1.执行close()方法将关闭有window指定的顶层浏览器窗口。

2.某个窗口可以通过调用self.close()方法或只调用close()方法来关闭其自身。

3.只有通过JavaScript代码打开的窗口才能够由JavaScript代码关闭，这是为了阻止了恶意的脚本终止用户的浏览器。

在IE浏览器中，window.close()能生效，但是在生效的时候，会弹出包含警告信息的提示框，询问你是否关闭该窗口。

但是在Chrome浏览器或Firefox浏览器下则这个方法完全不会生效，如果你打了断点进行调试，就会发现这个方法是能运行通过的，也会照常执行，不会报错，只是没有执行的效果。

/*  demo1页面，打开新窗口 */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSDemo</title>
    <link rel="stylesheet" type="text/css" href="index.css"  />
</head>
<body>
    
    <button onclick="toNewPage()">测试</button>
</body>
<!-- 引入js文件 -->
<script >
function toNewPage(){
      
      
    
   open("demo2.html","baidu","width=500px,height=500px");
   
}    
</script>
</html>

/**  demo2 被打开的窗体页面，想要关闭，注意js设置  */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="cc()">关闭</button>
</body>
<script>

function cc(){
      
      
   window.opener = null;//设置之后才能关闭自己，谷歌浏览器设置了打开者权限，只能由开启者关闭窗口，设置为null则表述没有开启者，则可以自行关闭
   window.close();    
}

</script>
</html>

更多版本浏览器设置方法：http://t.zoukankan.com/yanggb-p-11120847.html

延迟执行函数-setTimeout()

  1. 延迟调用某个函数
function toNewPage(){
    
    
    
  setTimeout("say()",2000);
   
}

function say(){
    
    
    console.dir("我大意了，没有闪");
}
  1. 使用匿名函数调用（推荐使用，更加灵活）
function toNewPage(){
    
    
    
  setTimeout(function(){
    
    
    say();
  },2000);
   
}

function say(){
    
    
    console.dir("我大意了，没有闪");
}

周期定时执行函数-setInterval

function toNewPage(){
    
    
    
  setInterval(function(){
    
    
     say();
  },1000);
   
}

function say(){
    
    
    console.dir("我大意了，没有闪");
}

清除定时执行

function toNewPage(){
    
    

  let count = 0;
  let timt1 = setInterval(function(){
    
    
     say();
     count++;
     if(count==10){
    
    
        clearInterval(timt1);//清楚定时执行
     }
  },1000);
   
}

function say(){
    
    
    console.dir("我大意了，没有闪");
}

清除延迟执行

var  myTime＝setTimeout("disptime() ", 10000 );
clearTimeout(myTime);

history对象

back() 加载 history 对象列表中的前一个****URL
forward() 加载 history 对象列表中的下一个****URL
go() 加载 history 对象列表中的某个具体****URL 
history.back()//后退----->history.go(-1)
history.forward()//前进----->history.go(1)   如果是go(0) 刷新当前页面

location对象

常用属性

host IP+端口：设置或返回主机名和当前URL的端口号
hostname IP：设置或返回当前URL的主机名
href 完整的地址：设置或返回完整的****URL

一般情况下： host、hostname 只取不改

只能改写的是href

  1. 同一个项目中其他文件页面的跳转
location.href = "demo2.html";  
//http://127.0.0.1:8848/qianduanClass/htmls/demo1.html
--->跳转到
//http://127.0.0.1:8848/qianduanClass/htmls/demo2.html
  1. 跨站访问（比如跳转到百度）
location.href = "http://主机地址:端口号/资源位置/资源位置";

常用方法

reload()	重新加载当前文档(刷新)
replace("url地址");	用新的文档替换当前文档 location.href = "demo2.html"; 相类似

12.常用类

Math数学类

常用方法

方法 说 明 示例
ceil() 对数进行上舍入 Math.ceil**(25.5);返回26****Math.ceil(-25.5);返回-25**
floor() 对数进行下舍入 Math.floor(25.5);返回25****Math.floor(-25.5);返回-26
round() 把数四舍五入为最接近的数 Math.round(25.5);返回26****Math.round(-25.5);返回-26
random() 返回0~1之间的随机数 Math.random**();****例如：**0.6273608814137365

随机数取值区间：2~99

var iNum=Math.floor(Math.random()*98+2);

Date日期类

创建对象方法;

var date = new Date();//以当前客户端的系统时间创建一个日期对象

var date1 = new Date(毫秒数时间戳);

getDate**()** 返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay**()** 返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours**()** 返回 Date 对象的小时数，其值介于0～23之间
getMinutes**()** 返回 Date 对象的分钟数，其值介于0～59之间
getSeconds**()** 返回 Date 对象的秒数，其值介于0～59之间
getMonth() 返回 Date 对象的月份，其值介于0～11之间
getFullYear() 返回 Date 对象的年份，其值为4位数
getTime() 返回自某一时刻（1970年1月1日）以来的毫秒数

13.DOM- 文档对象模型

DOM组成

  1. DomCore:doucment对象的常用属性和方法
  2. HTML-DOM：把标签节点描述成对象操作的方法
  3. CSS-DOM：把CSS内容描述成对象操作的方法

document对象访问元素(节点)的方法

  1. 通过元素标签的id属性访问：let nodeObj = document.getElementById(“id属性值”)- 只能获取第一个被指定id标识的元素
  2. 通过元素的class属性名称访问：let obj = document.getElementsByClassName(“myPtext”);
  3. 通过元素的标签名称访问：let obj = document.getElementsByTagName(“p”);
  4. 通过元素的name属性访问：let obj = document.getElementsByName(“userName”);
  5. 通过CSS元素选择器访问节点：document.querySelector(“#son1”);

注意：当方法返回的是集合或者nodeList时，访问元素的方法和数组一致

访问父节点

parentNode： 返回的是当前节点的父元素节点

父节点访问子节点方法

1.children: 获取所有子元素节点方法( 元素节点指的就是标签节点 )

2.childNodes：获取所有的子节点（包含非元素节点）

3.firstChild：获取第一个子节点（不一定是标签元素）

4.firstElementChild：获取第一个子元素节点（获取的一定是html标签元素）

5.lastChild：获取最后一个子节点（不一定是标签元素）

6.lastElementChild： 获取最后一个子元素节点（获取的一定是html标签元素）

7.previousElementSibling： 获取前一个相邻的元素节点（获取的一定是html标签元素）

8.previousSibling：获取前一个相邻兄弟节点（不一定是标签元素）

9.nextSibling：获取后一个相邻兄弟节点（不一定是标签元素）

10.nextElementSibling：获取后一个相邻兄弟元素节点（获取的一定是html标签元素）

11.childElementCount：子元素节点数量

节点的区分

  1. 节点类型
节点类型 NodeType****值
元素element（html中的所有标签） 1
属性attr 2
文本text（换行符号、文字、符号） 3
注释comments（ html中的注释） 8
文档document（document对象） 9

访问属性

通过方法去访问、设值

1.getAttribute(“属性名”) : 属性名-标签中的属性名，而且获取的值是静态的 ，（获取的是当前网页浏览器加载出现的元素中显示的属性值）

2.setAttribute(“属性名”,“属性值”) ： 注意：属性值—是html中规定的属性值（checked的属性值是checked）

通过dom对象访问、设值

dom.属性名； // 访问

dom.属性名 = 属性值； //设值 要去观察是否和html标签中描述的值相同

特殊案例-1. 获取当前用户对输入框输入的值

let obj = document.getElementById("userName");

    obj.getAttribute("value");// 获取不到最新输入的值，只能获取标签中定义的值

    obj.value;// 能获取到用户实时输入的新数据

特殊案例-2.设置checkbox、radio表单元素被选中

let obj = document.getElementById("sex");

    obj.setAttribute("checked","checked");
    //或
    obj.checked = true;

借助js改变元素class属性值，使用animate.css动画库完成动画

<!DOCTYPE html>
<html lang="en" id="myBD">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
<body >

    <!-- class属性默认为 animate__animated  -->
    <img class="animate__animated" id="pp" src="../imgs/top.avif" width="100px"/>
    <button onclick="toSee2()">出现动画</button><!-- 点击出现动画 -->

</body>
<script type="text/javaScript" src="../js/demo3.js"></script>
</html>

function toSee2(){
    
    
    let obj = document.getElementById("pp");

    console.dir(obj);

    obj.className = "animate__animated animate__shakeX";//animate__animated animate__动画名字

    setTimeout(function(){
    
    
        obj.className = "animate__animated";// 动画结束将元素恢复至原有class属性值 
    },1500)
    
}

元素创建、元素插入网页

<div id="father">
        <p id="son1">AAAAA</p>
    </div>
    
    <button onclick="addElmenet()">添加元素</button>

//1. 模拟创建一个元素
    let A = document.createElement("p");
    
    objP.innerHTML = "<span>nihao!</span>";// 改变内部的html以及文本结构

    //2. 放入到某个位置
    //2.1 添加到指定元素的子节点末尾
    let father = document.getElementById("father");
    father.appendChild(objP);//father 元素的子节点末尾

    //2.2 插入到某个元素之前
    let father2 = document.getElementById("father");
    let B = document.getElementById("son1");
    // 告诉父元素，子节点，要把A插入到B之前
    father2.insertBefore(objP,son1);// 把A 插入到 B 之前

元素的删除和替换

元素删除和替换都必须使用父元素调用去操作子元素删除或替换

替换：

  1. 如果元素替换中，替换的元素是网页中已有的元素则会出现元素移动位置覆盖被替换的元素
  2. 如果元素替换中，替换的元素是js创建的新元素，则只会出现元素的覆盖
<body >
    
     <div id="d1">
        <p id="p1">123</p>
        <p id="p2">456</p>
        <p id="p3">789</p>
     </div>
    <button onclick="toDelete()">删除\替换</button>
</body>

let father = document.getElementById("d1");

    //删除子节点方法
    //let p1 = document.getElementById("p1");
    //father.removeChild(p1);// 删除 d1 元素的 子节点 p1

    //替换节点
    let newSpan = document.createElement("span");
    newSpan.innerHTML = "新节点";
    //let p3 = document.getElementById("p3");

    // 选中要替换的旧节点
    let p1 = document.getElementById("p1");
    //进行替换
    //father.replaceChild(p3,p1);
    father.replaceChild(newSpan,p1);

获取节点的样式、改变节点样式

<body >
     
    <h1 id="myH1" style="color:red;">厉害！！！！</h1>

    <button onclick="getCss()">获取样式</button>
</body>

function getCss(){
    
    

    let obj = document.getElementById("myH1");

    // 获取样式的方法 dom对象.style.样式名  只能访问到行内样式
    // (样式名按照驼峰规则描述了：如 margin-top 变为 marginTop)
    let marginTop = obj.style.marginTop;
    let color = obj.style.color;

    // 改变样式，dom对象.style.样式名 = "样式的属性值" 只能设置行内样式
    obj.style.marginTop = "500px";
    obj.style.color = "blue";
}

课程案例-发帖功能

<!DOCTYPE html>
<html lang="en" id="myBD">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn{
      
      
            width: 80px;
            height: 30px;
            border-radius: 8px;
            background-color: green;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .main{
      
      
            width: 500px;
            height: 150px;
            box-sizing: border-box;
            border-top: 1px solid gray;
            margin-top: 5px;
        }

        .context{
      
      
            width: 100%;
            height: 80px;
            box-sizing: border-box;
            padding: 5px;
            border-bottom: 1px dotted gray;
        }

        .userPhoto{
      
      
            width: 70px;
            height: 70px;
            background-color: red;
            float: left;
            border-radius: 50%;
            background-size: 100%;
        }

        .context_main{
      
      
            width: calc(100% - 70px);
            height: 100%;
            float: left;
            padding-left: 10px;
            box-sizing: border-box;
        }

        .context_main>h3{
      
      
            margin: 5px 0px;
        }

        p{
      
      
            color:gray;
        }

        .layerDiv{
      
      
            width: 50%;
            height: 60%;
            border-radius: 8px;
            background-color: white;
            border: 1px solid gray;
            position:fixed;
            top: 80px;
            left: 25%;
            padding: 5px;
        }

        .layerDiv input{
      
      
            width: 98%;
        }

        .layerDiv textarea{
      
      
            width: 98%;
        }

    </style>
</head>
<body >
    <div class="btn" onclick="toAddTz()">
        <span>我要发帖</span>
    </div>
    <div id="main" class="main">
        <div class="context">
            <div class="userPhoto" style="background-image: url(../imgs/1.jfif);"></div>
            <div class="context_main">
                <h3>标题标题标题标题标题</h3>
                <p>板块:新手来了&nbsp;&nbsp;发表时间:2022-11-25 16:22</p>
            </div>
        </div>
    </div>

    <!-- 弹窗 -->
    <div class="layerDiv" id="addLayer" style="display: none;">
        <form>
            <input id="title" type="text" name="title" placeholder="请输入帖子标题" /><br/>
            <label>请选择板块</label>
            <select id="bk">
                <option value="1">新闻</option>
                <option value="2">娱乐</option>
            </select>
            <br/>
            <textarea id="tzContext" placeholder="输入贴子内容" name="tieziContext" ></textarea>
            <div class="btn" onclick="toFb()">
                <span>发布</span>
            </div>
        </form>
    </div>

</body>
<script type="text/javaScript" src="../js/demo3.js"></script>
</html>

// 帖子数据（数组）
let tz_list = [];


/** 我要发帖 */
function toAddTz(){
    
    
    //1. 显示添加信息的弹窗
    let addLayer = document.getElementById("addLayer");
    addLayer.style.display = "block";// 显示弹窗
}

/**
 * 发布
 */
function toFb(){
    
    
    
    //将表单的数据获取出来
    let title = document.getElementById("title");
    let tz_title = title.value;//标题数据

    let bk = document.getElementById("bk");
    let tz_bk = bk.value;// 板块数据

    let tzContext = document.getElementById("tzContext");
    let tz_tzContext = tzContext.value;// 帖子内容

    let nowDate = new Date();
    let dateStr = nowDate.getFullYear()+"-"+(parseInt(nowDate.getMonth())+1)+"-"+nowDate.getDate()+" "+nowDate.getHours()+":"+nowDate.getMinutes();
    
    // 填写的数据保存到js集合中
    //1. 将数据保存在map中
    // let map = new Map();
    // map.set("title",tz_title);
    // map.set("bk",tz_bk);
    // map.set("context",tz_tzContext);
    // map.set("time",dateStr);
    // tz_list.push(map);

    //2. 对象保存方法 (json格式对象)
    let tzObj = {
    
    };
    tzObj.title = tz_title;// 对象如果没有改属性，就会给你自动创建一个属性保存值
    tzObj.bk = tz_bk;
    tzObj.context = tz_tzContext;
    tzObj.time = dateStr;
    tz_list.push(tzObj);


    // 点击发布后关闭弹窗
    let addLayer = document.getElementById("addLayer");
    addLayer.style.display = "none";// 隐藏弹窗

    //重置表单
    title.value = "";
    bk.value = 1;
    tzContext.value = "";
    console.dir(tz_list);

    initTzList();
}

/**
 *  刷新生成新的帖子
 */
function initTzList(){
    
    

    var htmls = "";

    for(var i in tz_list){
    
    
        htmls += '<div class="context">'+
        '<div class="userPhoto" style="background-image: url(../imgs/'+(i%2==0?'1':'2')+'.jfif);"></div>'+
        '<div class="context_main">'+
        '<h3>'+tz_list[i].title+'</h3>'+
        '<p>板块:'+(tz_list[i].bk==1?'新闻':'娱乐')+'&nbsp;&nbsp;发表时间:'+tz_list[i].time+'</p>'+
        '</div>'+
        '</div>';
    }

    let main = document.getElementById("main");
    main.innerHTML = htmls;
}

currentStyle-获取当前元素实时的样式信息（只读操作-IE8以前提供的属性）

/* 如果你的浏览器输入没有这个属性，则换用getComputedStyle() */
var obj =  document.getElementById("myDiv");
obj.currentStyle.backgroundColor;

getComputedStyle()-获取当前元素的样式信息(只读操作-window对象调用)

可以获取到在内部样式或者外部样式文件中使用元素选择器赋予的样式内容

只读，不能被修改

var obj =  document.getElementById("myDiv");
   
    /**
     *     getComputedStyle(要查询的dom对象,伪类元素选择器名称) 
     * 
     * */
   let theObjCss =  window.getComputedStyle(obj);
   console.dir(theObjCss.backgroundColor);

let theObjCss2 =  window.getComputedStyle(obj,":after");//访问对应元素的伪类元素样式
    console.dir(theObjCss2.display);

浏览器内核判别

var obj =  document.getElementById("myDiv");
   if(obj.currentStyle){
    
    //IE8以下内核
    
   }else{
    
    //高版本内核的浏览器

    }

14.JS集合

// List ===> 数组 在js中如：var arr = [];定义就是list，操作方法和数组相同

// Set 
let mySet = new Set();

//添加元素
mySet.add("A");
mySet.add("B");
mySet.add("C");

//删除元素
mySet.delete(1);

//清空元素
mySet.clear();//集合元素全部删除

//访问-遍历
// for-of (没有索引的集合)
for(let item of mySet){
    
    
  console.dir(item);
}

/*foreach循环-遍历的set集合value和index元素
            -遍历的如果是数组（list） value是元素 index是下标
  array- 是当前正在遍历的集合对象
*/
mySet.forEach(function(value,index,array){
    
    
    

});

let map = new Map();

//添加元素
map.set("101","中国");
map.set("102","美国");

//访问元素
var value = map.get("101");

//删除元素
map.clear();//清空集合
map.delete("101");

//遍历
//1. values() 获得所有value值的一个迭代器
let values = map.values();
// values.next() 获取下一个指针指向的对象
// values.next().value 才能获取值
console.dir(values.next().value);

let keys = map.keys();
console.dir(keys.next().value);

//2. value---> map的值数据 index---》map的键数据
map.forEach(function(value,index,arry){
    
    
    console.dir(value+"---"+index);
})

//3.  for-of
/**
 * 会把每一组key-》value封装成数组
 * 数组的0索引值是key，1索引值是value
 */
for(var i of map){
    
    
   console.dir(i);
}

15. JS事件

事件是什么？

鼠标点击、双击；键盘按键按下弹起；浏览器加载开始、结束

Js能够对浏览器中会出现的事件实现监听（js脚本能实现当鼠标点击时做什么事情）

html\js中事件的写法（三种）

1. 在HTML标签中使用事件属性完成事件的注册

<body>
    <h1 onclick="toClick(this)">你好！我叫王大锤！</h1>
</body>
<script>
   function toClick(e){
      
      
        console.dir(e);// toClick(this) this:代表的是当前标签元素dom对象
        console.dir("我被点击！");
   }

</script>
</html>

2.JS使用元素去注册事件进行绑定

优点：实现与html内容的解耦

<body>
    <h1 id="myH1">你好！我叫王大锤！</h1>
</body>
<script>

    let myH1 = document.getElementById("myH1");

    //绑定事件 dom元素.on事件名称 = 匿名函数
    myH1.onclick = function(){
      
      
        // 当元素出现点击时，执行的代码
        toClick();
    }

   function toClick(){
      
      
        console.dir("我被点击！");
   }

</script>

3. JS中使用元素去注册监听器，完成对事件的监听然后出发函数调用

<body>
    <h1 id="myH1">你好！我叫王大锤！</h1>
</body>
<script>

    let myH1 = document.getElementById("myH1");

    /* 监听 元素 myH1 是否出现单击事件，如果出现匿名函数就会调用 */
    myH1.addEventListener("click",function(){
      
      
        toClick();
    });

   function toClick(){
      
      
        console.dir("我被点击！");
   }

</script>

JS事件冒泡

什么是事件冒泡？

当三个元素叠放在一起，而且恰巧，三个元素都有相同的事件被绑定监听，那当点击最上层的元素时，所有的下层元素都会触发绑定的事件

<body id="body1">
    <div id="father1" class="father">
        <div id="son1" class="son"></div>
    </div>
</body>
<script>

    document.getElementById("body1").onclick = function(){
      
      
        console.dir("body被点击");
    }

    document.getElementById("father1").onclick = function(){
      
      
        console.dir("father被点击");
    }

    document.getElementById("son1").onclick = function(){
      
      
        console.dir("son被点击");
    }

</script>

阻止JS事件冒泡

1. 设置事件对象不要执行冒泡（出现的情况是元素绑定事件时使用）

<body id="body1">
    <div id="father1" class="father">
        <div id="son1" class="son"></div>
    </div>
</body>
<script>

    document.getElementById("body1").onclick = function(){
      
      
        console.dir("body被点击");
    }

    document.getElementById("father1").onclick = function(){
      
      
        console.dir("father被点击");
    }

    //event : 事件对象
    document.getElementById("son1").onclick = function(event){
      
      
        // 通过事件对象阻止冒泡 一定要写在最顶层的元素事件监听中
        event.cancelBubble = true;
        console.dir("son被点击");
    }

</script>

2. 在设置监听元素触发事件回调参数（元素监听事件时使用）

/** 待定 */

当所有dom元素加载完成的回调

window.onload = function(){
    
    // 当网页的所有dom元素加载完成后回调
    let obj = document.getElementById("myH1");
    console.dir(obj);
}

16.JQuery

  1. 引入JQuery类库

JQuery的操作方法

基础语法结构：

$(selector).action()

selector： css元素选择器

action：操作

如：

let domObj1 = $(“#myH1”);

等同于：

let domObj2 = document.getElementById(“myH1”);

$ 代表的是JQuery核心对象

1. 元素的访问

$("#myH1")

$("p”) 选取 <p> 元素。
$("p.into") 选取所有 class="into" 的 <p> 元素。
$("p#into") 选取所有 id="into" 的 <p> 元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
let objs = $("#myH1>.son1");  可以使用CSS3中描述的所有选择器

2.元素的显示、隐藏

<body>
    
    <h1 id="myH1">123</h1>
    <button onclick="toHide()">隐藏</button>
    <button onclick="toShow()">显示</button>

</body>
<script>

function toHide(){
      
      
    // $("#myH1").hide(动画执行时间,当动画执行完成的回调);
    $("#father").hide(1000,function(){
      
      
        console.dir("完成隐藏");    
    })
    
    $("#myH1").hide(1000);//将元素隐藏  参数毫秒数代表的是动画过渡的时间
}

function toShow(){
      
      
     // $("#myH1").show(动画执行时间,当动画执行完成的回调);
    $("#myH1").show(1000);//将元素显示
    
    
}
    

</script>

/*  jquery选择器位置可以放置一个dom对象，完成js对象使用jquery操作的过渡 */
 let obj = document.getElementById("myH1");

    $(obj).hide(1000);//将元素隐藏

<button onclick="javascript:$(this).hide();">隐藏</button>

3. 当dom文档加载完成后回调的方法

在html页面中js代码的加载顺序可以不受影响

// 当网页的所有dom元素加载完成后回调
$(document).ready(function(){
    
    
    let obj = document.getElementById("myH1");
    console.dir(obj);
});

//函数、变量、常量

// 当网页的所有dom元素加载完成后回调( 推荐 )
$(function(){
    
     
    
    // 一般编写操作网页dom元素的内容;定义和dom绑定的事件
    //因为你要操作网页dom就必须等待dom加载完成后才能操作，否则会操作失败报错

});

4. JQuery绑定事件

// $(选择器).事件名称(function(){
    
    

})

$(".hideBtn").click(function(event){
    
    
    event.cancleBuble = true;//取消事件冒泡
        console.dir("12312321");
});

$(".hideBtn").bind("click",function(){
    
    
        console.dir("12312321");
})

4.1 JQuery绑定未来元素

什么是未来元素？

​ 就是网页后续可能通过事件触发或ajax添加到网页中的元素

案例：

    <style>
        #father{
      
      
            width: 200px;
            height: 100px;
            background-color: red;
            color: white;
        }

    </style>
</head>
<body>
    
    <div id="father">
    </div>

    <button onclick="addYs()">添加元素</button>
    <button onclick="test()">未来元素点击事件测试</button>

</body>

$(function(){
    
     
    
   // 未来元素事件绑定过程
    //  #father 给子元素 div的后代.sons 绑定了事件 click
    $("#father").on("click",".sons",function(){
    
    
        console.dir("被点击！");
    });
});


function addYs(){
    
    
    
     var htmls = "<span class='sons'>子标签</span>";

     //append 方法支持添加dom对象或html标签字符串
     $("#father").append(htmls);

}

5. 操作dom元素

5.1 表单取值赋值

let tt = $("#userName").val();//取出表单value的实时值
    
$("#userName").val(88888);// 设置表单的value值

5.2 dom元素包含的文本操作

let tt = $("#father").text();//取出dom元素包裹的文本
    // obj.innerText 类似
    $("#father").text("<h1>萨日朗！！！</h1>");// 设置dom元素包裹的文本

5.3 dom元素获取子元素的html字符串和使用html字符串替换子元素

let tt = $("#father").html();//取出dom元素包裹的html标签字符串
    // obj.innerHTML 类似
    $("#father").html("<h1>萨日朗！！！</h1>");// 设置dom元素包裹的元素

5.4 dom元素往子元素追加元素

$("#father").append(可以是dom对象也可以是html字符串); // 在father元素的子元素末尾追加
$("#father").preppend(可以是dom对象也可以是html字符串); // 在father元素的子元素首位追加

5.5 dom元素操作节点属性

let classNames = $("#father").attr("class");// 单参数，代表取出属性的值
  // 等同于 js中的 getAttribute setAttribute
  $("#father").attr("class","textWhite"); // 双参数第一个参数是属性名，第二参数是属性值

5.6 dom元素删除

$("span").remove(); //谁调用将谁删除
$("#father").empty(); //将father元素的子元素清空
$("span").remove(".son");// 删除所有span标签中有class属性为.son的span标签

5.7 dom元素的插入

let newObj = document.createElement("h3");
    newObj.innerText = "蔡徐坤！";

    $("#srl1").after(newObj);//在元素srl1 之后 插入新元素
    $("#srl1").before(newObj);//在元素srl1 之前 插入新元素

5.8 dom CSS样式操作

let oo = $("#father").css("background-color");// css方法，单参数代表的是查询样式
    
    $("#father").css("background-color","black");// 双参数是修改

Supongo que te gusta

Origin blog.csdn.net/gjb760662328/article/details/129164556
Recomendado
Clasificación
Diario
Más
2024-05-21(34)
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(4)
2024-05-16(22)
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)

Code World

© 2018 codetd.com