JavaScript笔记

作者：@冰山醉酒
本文为作者原创，转载请注明出处：https://www.cnblogs.com/douFrank/p/16117821.html

1|0JavaScript

1|1引入方式

直接引入

<script>
     alert('hello world');
</script>

外部引入qj.js

 <!--    注意script标签必须成对出现-->
     <script src="js/qj.js"></script>
 <!--    不用显式定义type，默认就是javascript-->
     <script type="text/javascript"></script>

1|2基本语法

 
 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  ​
 7  <!--    JavaScript严格区分大小写-->
 8      <script>
 9          // 1,定义变量  变量类型 变量名 = 变量值
10          var score = 71;
11          // 2,条件控制
12          if(score>60 && score<70){
13              alert("60~70");
14          }else if(score>70 && score<80){
15              alert("70~80");
16          }else{
17              alert("other");
18          }
19  ​
20          // console.log(score)在浏览器的控制台打印变量
21      </script>
22  </head>
23  <body>
24  ​
25  </body>
26  </html>

2|0数据类型

数值，文本，推行，音频，视频……

number

js不区分小数和整数，Number

 123 //整数123
 123.1  //浮点数
 1.123e3  //科学计数法
 -99  //负数
 NaN  //not a number
 Infinity  //表示无限大

字符串

'abc' "abc"

布尔值

true ，false

逻辑运算

 &&
 ||
 !

比较运算符

 =
 == 等于（类型不一样，值一样，也判断为true）
 === 绝对等于（类型一样，值一样，结果true）

这是一个JS的缺陷，坚持不要使用==比较

须知：

  • NaN===NaN，这个与所有的数值都不相等，包括自己

  • 只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

 console.log((1/3)-(1-2/3))

尽量避免使用浮点数进行运算，存在精度问题

 Math.abs((1/3)-(1-2/3))<0.000000000001

null和undefined

  • null 空

  • udefined 未定义

数组

java的数组必须是相同的类型的对象，JS不需要这样

 //保证代码的可读性，尽量使用[]
 var arr = [1,2,3,4,5,"hello",null,true]
 ​
 new Array(1,2,4,"hello",null,true)

取数组下标：如果越界了，不会报错，返回undefined

对象

对象是大括号，数组是中括号

每个属性之间用逗号隔开，最后一个不需要添加

 //Person person = new Person(1,2,3,4)
 var person = {
     name:"hanxin",
     age:3,
     tags:['is','java','...']
 }

取对象的值

 person.name
 peron.age

2|1严格检查模式

 
 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  <!--
 7  前提：IDEA需要设置支持ES6语法
 8  "use strict"严格检查模式，预防Javascript的随意性导致产生的一些问题
 9  必须写在JavaScript的第一行
10  局部变量建议使用let取定义
11  -->
12      <script>
13          "use strict"//必须写在第一行
14          // i =1; //默认为全局变量
15          let i = 1;  //局部变量 var修饰页为局部变量
16      </script>
17  </head>
18  <body>
19  ​
20  </body>
21  </html>

2|2字符串

1，正常字符串我们使用单引号或者双引号包裹

2，注意转义字符

 \'
 \n
 \t
 \u4e2d  \u#### unicode字符
 \x41 Ascll字符

3，多行字符串编写

 
//tab上面那个键 多行字符串
         var msg =`
         hello
         你好
         西巴西巴
         `
         console.log(msg)

4，模板字符串

 let name = "韩信";
 let age = 3;
 //tab上面那个键 多行字符串
 let msgs = `你好吧，${name}`;
 console.log(msgs)

5，字符串长度

 console.log(str.length)

6，字符串的可变性，不可变

7，大小写转换

//注意。这里是方法，不是属性
 student.toUpperCase()
 student.toLowerCase()

8，返回匹配字符的下标位置

student.indexOf('t')

9，截取字符串

 //[ ) 左闭右开
  student.substring(1)//从第二个字符串截取到最后一个
  student.substring(1,3)//[1,3)

2|3数组

Array可以包含任意的数据类型

 var arr = [1,2,3,4,5,6];//通过下标取值和赋值
 arr[0] = 1

1，长度

 arr.length

注意：假如给arr.length赋值，数组大小就会发生变化~,如果复制过小，数据就会丢失

2，indexOf，通过元素获取下标索引

 arr.indexOF(2)
 1

字符串的“1”和数字1是不同的

3，slice() 截取Array的一部分，返回一个新数组，类似于String的substring方法

4，push()，pop()尾部

 push:压入到尾部
 pop:弹出尾部的一个元素

5，unshift()，shift()头部

 unshift:压入到头部
 shift:弹出头部的一个元素

6，排序sort

 arr.sort()

7，元素反转reverse()

 arr.reverse()

8，拼接concat() 

 var arr = [1,2,3,4]
 arr.concat(["A","B","c"])
 ​
 //[1,2,3,4,"A","B","c"]

注意：concat()并没有修改数组，只是会返回一个新的的数组

9，连接符join

打印拼接数组，使用特定的字符串连接

 arr = ["C","B","A"]
 arr.join('-')
 "C-B-A"

10，多维数组

1  arr = [[1,2],[3,4],["5","6"]]
2  arr[1][1]
3  4

2|4对象

若干个键值对

 var 对象名 = {
     属性名：属性值，
     属性名：属性值，
     属性名：属性值
 }
 ​
 //定义了一个person对象，它有四个属性
 var person  = {
     name:"hanxin",
     age:3,
     email:"253643@qq.com",
     score:59
 }

JS中对象，{……}表示一个对象，键值对描述属性 XXX：XX，多个属性之间用逗号隔开，最后一个属性不加逗号

JS中所有的键都是字符串，值是任意对象

1，对象赋值

 person.name = "libai"

2，使用一个不存在的对象属性，不会报错，undefined

3，动态删减属性，通过delete删除对象属性

delete person.name

4动态的添加，直接给新的属性添加值即可

 person.haha= "hahha"

5，判断属性值是否在这个对象中 XXX in XX

1  'age' in person //别忘记使用引号
2  true
3  //继承
4  'toString' in person
5  true

6，判断一个属性是否是这个对象自身拥有的hasOwnProperty()

1 person.hasOwnProperty('tostring')
2  false
3  person.hasOwnProperty('age')
4  true

2|5循环

for while do while循环

var arr = [12,34,56,8,5,21,84,1];
 //forEach循环
 arr.forEach(function (value) {
     console.log(value)
 })
 //forin循环
 for (var arrKey in arr) {
     console.log(arr[arrKey])
 }

2|6Map和Set

ES6新特性

Map

var map = new Map([['tom',80],['jack',90],['march',10]]);
var name = map.get('tom'); //通过key获得value
console.log(name);
map.set('admin',1243); //新增或修改
map.delete('tom'); //删除！

Set：无序不重复的集合

var set = new Set([3,1,5,4,3,7,1]);
set.add(2);//增加
set.delete(7);//删除
console.log(set.has(3));//判断是否包含

2|7iterator

遍历数组

 var arr = [1,2,3,4,5,6];
 for (let value of arr) {
     console.log(value)
 }

遍历map

//遍历Map
 var map = new Map([["tom",80],["jack",12],["marly",30]]);
 for (let mapElement of map) {
     console.log(mapElement)
 }

遍历set

 //遍历set
 var set = new Set([1,1,1,2,3,5,5,7])
 for (let number of set) {
     console.log(number)
 }

3|0函数

3|1定义函数

 
 //方式一
 function abs(x){
     if(x>=0){
         return x;
     }else{
         return -x;
     }
 }
 //方式二
 var abss = function(x){
     if(x>=0){
         return x;
     }else{
         return -x;
     }
 }

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

function(x){……}这是一个匿名函数。但是可以把结果赋值给abs，

调用函数

 abs(10)
 abs(-10)

参数问题：js可以传任意个参数，也可以不传递参数~

参数进来是否存在问题？

假设不存在参数，如何规避？

 function abs(x){
     //手动抛出异常来判断
     if(typeof x!== 'number'){
         throw 'Not a Number'
     }
     if(x>=0){
         return x;
     }else{
         return -x;
     }
 }

arguments

arguments是一个JS免费赠送的关键字；

代表，传递进来的所有的参数，是一个数组！

 var abs = function(x){
     console.log("x=>"+x);
     for (let i = 0; i < arguments.length; i++) {
         console.log(arguments[i]);
     }
     if(x>=0){
         return x;
     }else{
         return -x;
     }
 }

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数。

rest

以前：

 for (let i = 0; i < arguments.length; i++) {
     console.log(arguments[i]);
 }

ES6引入的新特性，获取除了已经定义的参数意外的所有参数~

 function aaa(a,b,...rest){
     console.log("a=>"+a);
     console.log("b=>"+b);
     console.log(rest)
 }

rest参数只能写在最后面，必须用...标识。

3|2变量的作用域

在js中，var定义变量是有作用域的

假设在函数体中声明，则在函数体外不可以使用~ （非要使用，需要使用闭包）

 function qj() {
     var x= 1;
     x = x + 1;
 }
 x = x + 2;//Uncaught ReferenceError: x is not defined

如果两个函数是用来相同的变量名，互不影响

 function qj() {
     var x= 1;
     x = x + 1;
 }
 ​
 function qj2() {
     var x = A;
     x = x + 1;
 }

内部函数可以访问外部函数的成员，反之则不行

function f() {
     var x = 1;
     //内部函数可以访问外部函数的成员，反之则不行
     function f1() {
         var y = x + 1;  //2
     }
     var z = y + 1;  //Uncaught ReferenceError: y is not defined
 }

提升变量的作用域

 //不报错
 function f() {
     var x = "x" + y ;
     console.log(x);
     var y = 'y';
 }

结果：xunfefined

说明：js执行引擎，自动提升了y的生命更，但不会提升变量的赋值；

 function f() {
     var y;
     var x = "x" + y ;
     console.log(x);
     y = 'y';
 }

这个是js在建立之初就存在的特性，养成规范：所有的变量定义都放在函数的头部，不要乱放，利于代码维护。

 function f1() {
     var x = 1,
         y = x + 1,
         z,i,a;//undefined
     //之后随便用
 }

全局函数

 //全局变量
 x = 1;
 function f() {
     console.log(x);
 }
 f();
 console.log(x);

全局对象 window

 var x = 'xxx';
 alert(x);
 alert(window.x);//默认所有的全局变量都自动绑定在window对象上

alert()这个函数本身也是一个window变量

 var x = 'xxx';
 window.alert(x);
 var old_alert = window.alert;
 old_alert(x);
 window.alert = function () {
 ​
 };
 //发现alert()失效了
 window.alert(123);
 //恢复
 window.alert = old_alert;
 window.alert(456);

js实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错RefrenceError.

规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~>如何能过减少冲突？

 //唯一的全局变量
 var App = {};
 ​
 //定义全局变量
 App.name = 'hanxin';
 App.add = function (a,b) {
     return a+b;
 }

把自己的代码全部放入自己定义的唯一空间名字内，减低全局命名的冲突

例如：jQuery

局部作用域 let

function aa(){
     for (let i = 0; i < 100; i++) {
         console.log(i);
     }
     console.log(i+1);
 }

建议大家都用let取定义局部作用域的变量；

常量 const

3|3方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

 var hanxin = {
     name:'韩信',
     birth:2000,
     //方法
     age:function () {
         //今年-出生的年
         var now = new Date().getFullYear();
         return now-this.birth;
     }
 }
 //属性
 hanxin.name
 //方法，一定要带()
 hanxin.age();

this.代表什么？分开写

 function getage(){
     var now = new Date().getFullYear();
     return now-this.birth;
 }
 var hanxin = {
     name:'韩信',
     birth:2000,
     age:getage  //不加括号
 }
 hanxin.age();//ok
 geyage() //NaN

this是无法指向的，是默认子项调用它的那个对象；

apply

在js中可以控制this指向！

function getage(){
     var now = new Date().getFullYear();
     return now-this.birth;
 }
 var hanxin = {
     name:'韩信',
     birth:2000,
     age:getage
 }
 hanxin.age();
 getage.apply(hanxin,[]);//this,指向韩信，参数为空 

4|0内部对象

4|1Data

 
 var now = new Date();//Sun Mar 27 2022 10:09:55 GMT+0800 (中国标准时间) {}
 now.getFullYear();
 now.getMonth();  //0~11
 now.getDate();
 now.getDay(); //星期几
 now.getHours();
 now.getMinutes();
 now.getSeconds();
 ​
 now.getTime();  //自1970.1.1的毫秒数
 console.log(new Date(1648347156566)); //时间戳转时间
 ​
 //转换
  now = new Date(1648347156566);
  now.toLocaleString();

4|2JSON

json是什么

早期，所有数据传输习惯使用XML文件

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

  • 并有效地提升网络传输效率。

在js中一切皆为对象，任何js支持的类型都可以用JSON来表示：

格式：

  • 对象都用{}

  • 数组都用[]

  • 所有的键值对都是用key:value

JSON字符串和JS对象的转换

 'use strict'
     var user = {
         name:"hanxin",
         age:3,
         sex:'男'
     }
 ​
     //js对象转为JSON格式
     var userJSON = JSON.stringify(user);
     //'{"name":"hanxin","age":3,"sex":"男"}'
 ​
     //JSON转为js对象
     var obj = JSON.parse('{"name":"hanxin","age":3,"sex":"男"}');
     //{name: 'hanxin', age: 3, sex: '男'}

很多人搞不清楚，JSON和JS对象的区别

 var obj = {name: 'hanxin', age: 3, sex: '男'}
 var userJSON = '{"name":"hanxin","age":3,"sex":"男"}'

4|3Ajax

  • 原生的js写法 xhr异步请求

  • jQuey封装好的方法 $("#name").ajax("")

  • axios请求

5|0面向对象编程

5|1什么是面向对象

javascript 、java、C#.....面向对象。javascript有些不同

  • 类：模板

  • 对象：具体的实例

在javaScript这个需要大家换一下思路

原型：

 var student = {
     name:"hanxin",
     age: 3,
     run:function () {
         console.log(this.name+"run...")
     }
 };
 ​
 var xiaoming = {
     name:"xiaoming"
 }
 xiaoming.__proto__ = student;
 ​
 var bird = {
     fly:function () {
         console.log(this.name+"fly...")
     }
 }
 xiaoming.__proto__ = bird;
 function student() {
     this.name = name
 }
 //给student新增一个方法
 student.prototype.hello = function () {
     alert('hello');
 }​

class继承

class关键字，是ES6引入的

//定义一个学生的类
 class student{
     constructor(name) {
         this.name = name;
     }
     hello(){
         alert('hello');
     }
 }
 var xiaoming = new student("xiaoming");
 var xiaohong = new student("xiaohong");
 xiaoming.hello();

继承

 class student{
     constructor(name) {
         this.name = name;
     }
     hello(){
         alert('hello');
     }
 }
 ​
 class xiaostudent extends student{
     constructor(name,grade) {
         super(name);
         this.grade = grade;
     }
     maGrade(){
         alert('我是一名小学生')
     }
 }
 ​
 var xiaoming = new student("xiaoming");
 var xiaohong = new xiaostudent("xiaohong",1);
 xiaoming.hello();
 xiaohong.maGrade();

原型链

6|0操作BOM对象（重点）

浏览器介绍

js和浏览器的关系

js诞生就是为了能够让它在浏览器中运行

BOM：浏览器对象模型

  • IE6~11

  • Chorme

  • Safari

  • FireFox

三方

  • QQ浏览器

  • 360浏览器

window（重要）

window代表浏览器窗口

 1 window.alert(1)
 2 undefined
 3 window.innerHeight
 4 506
 5 window.innerWidth
 6 150
 7 window.outerHeight
 8 592
 9 window.outerWidth
10 563

Navigator(不建议使用)

Navigator，封装了浏览器的信息

 navigator.appName
 'Netscape'
 navigator.appVersion
 '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36 Edg/99.0.1150.46'
 navigator.userAgent
 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36 Edg/99.0.1150.46'
 navigator.platform
 'Win32'

大多数时候，我们不会使用navigator对象，因为会被人修改，不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

 screen.width
 1220 px
 screen.height
 686 px

location (重要)

location代表当前页面的URL信息

1 location.host
2  'www.baidu.com'
3  location.href
4  'https://www.baidu.com/'
5  location.protocol
6  'https:'
7  location.reload()//刷新网页
8  //设置新的网址
9  location.assign('https://www.bing.com')

document(内容：DOM)

document代编当前的页面，HTML DOM文档树

  document.title='360'
 '360'

获取具体的文档树节点

 <dl id="app">
     <dt>Java</dt>
     <dd>JavaSE</dd>
     <dd>JavaEE</dd>
 </dl>
 <script>
     var dl = document.getElementById('app')
 </script>

获取cookie

 document.cookie
 'RT="z=1&dm=baidu.com&si=hvjepf3mdm&ss=l18o6alq&sl=2&tt=2z5&bcn=https%3A%2F%2Ffclog.baidu.com%2Flog%2Fweirwood%3Ftype%3Dperf&ld=376&ul=yed&hd=ygk"; BIDUPSID=A374440AE4DFC39C8EE0573FEDBC553B; PSTM=1648356813; BAIDUID=A374440AE4DFC39C71DA56082D68F81F:FG=1; BD_HOME=1; H_PS_PSSID=35835_31253_35978_36165_34584_36120_36075_35993_35955_35322_26350_36047_36103; BAIDUID_BFESS=A374440AE4DFC39C71DA56082D68F81F:FG=1; BD_UPN=12314753; BA_HECTOR=0h01ala10l0l20209i1h3vro70r'

history

history代表浏览器的历史记录

 history.back()//后退
 history.forward()//前进

7|0操作DOM对象（重点）

核心

浏览器网页就是一个DOM树形结构！

  • 更新：更新Domain节点

  • 遍历dom节点：得到Dom节点

  • 删除：删除一个Dom节点

  • 添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获取Domain节点

1  //对应CSS选择器
2  var h1 = document.getElementsByTagName('h1');
3  var p1 = document.getElementById('p1');
4  var p2 = document.getElementsByClassName('p2');
5  var father = document.getElementById('father');
6  ​
7  var childrens = father.children;//获取父节点下的所有子节点
8  // father.firstChild
9  // father.lastChild

这是原生代码，之后我们尽量都是用jQuery();

更新节点

操作文本

  • id1.innerText = '李白'修改文本的值

  • id1.innerHTML = '韩信' 可以解析HTML文本标签

操作CSS

id1.style.color = 'red' //属性使用字符串 包裹
id1.style.fontSize = '100px' // 有“-”的转为驼峰命名

删除节点

删除节点的步骤：先获取父几点，再通过父节点删除自己

 1  <div id="father">
 2      <h1>标题一</h1>
 3      <p id="p1">p1</p>
 4      <p class="p2">p2</p>
 5  </div>
 6  <script>
 7      //删除节点
 8      var self = document.getElementById('p1');
 9      var father = p1.parentElement;
10      father.removeChild(self)
11  ​
12  ​
13      //删除是一个动态的过程
14      father.removeChild(father.children[0]);
15      father.removeChild(father.children[1]);
16      father.removeChild(father.children[2]); //不存在了
17  </script>

注意；删除多个节点的时候，children是在时刻变化的，

插入节点

 1 //新建节点
 2  var newP = document.createElement('p');
 3  newP.id = 'newP'
 4  newP.innerText = '我是新建的';
 5  list.appendChild(newP);
 6  ​
 7  //创建新的标签
 8  var myScript = document.createElement('script');
 9  myScript.setAttribute('type','text/javascript');
10  list.appendChild(myScript);
11  ​
12  var myStyle = document.createElement('style');//新建一个style属性
13  // myStyle.setAttribute('type','text/css');
14  myStyle.innerHTML = 'body{}';//添加内容
15  document.getElementsByTagName('head')[0].appendChild(myStyle);

insertBefore

 //插到前面
 var se = document.getElementById('se');
 var ee = document.getElementById('ee');
 list.insertBefore(ee,se);

操作表单（验证）

表单是什么 form DOM树

  • 文本框 text

  • 下拉框 <select>

  • 单选框 radio

  • 多选框 chenckbox

  • 隐藏域 hidden

  • 密码框 password

  • .........

表单的目的：提交信息

获取要提交的信息

 1 <form action="post">
 2      <p>
 3      <span>用户名：</span><input type="text" id="username">
 4  </p>
 5  <p>
 6      <span>性别：</span>
 7  <input type="radio" name="sex" value="man" id="boy">男
 8  <input type="radio" name="sex" value="woman" id="girl">女
 9  </p>
10  </form>
11  ​
12  <script>
13      var username = document.getElementById('username');
14  var boy = document.getElementById('boy');
15  var girl = document.getElementById('girl');
16  username.value;//获取值
17  username.value= '12466'//赋值
18  boy.checked //若为true，选中，反之没选中
19  boy.checked = 'true'//赋值

提交表单，md5Jami密码 ，表单优化

 
 
 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
 7  </head>
 8  <body>
 9  <form action="#" method="post">
10      <p>
11          <span>用户名：</span> <input type="text" id="username" name="username">
12      </p>
13      <p>
14          <span>密码：</span> <input type="password" id="password" name="password">
15      </p>
16  <!--    <input type="submit">-->
17      <button type="submit" onclick="aaa()">提交</button>
18  </form>
19  <script>
20      function aaa() {
21          var unme = document.getElementById('username');
22          var pwd = document.getElementById('password');
23          console.log(unme.value);
24          pwd.value = md5(pwd.value);
25          console.log(pwd.value);
26          return true;
27      }
28  ​
29  </script>
30  </body>
31  </html>

优化，过滤 ，双密码框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
 7 </head>
 8 <body>
 9 <!--表单提交事件
10 onsubmit= 绑定一个提交检测的事件，true，false
11 将这个结果返回给表单，使用onsubmit接收
12 -->
13 <form action="#" method="post" onsubmit="return aaa()">
14     <p>
15         <span>用户名：</span> <input type="text" id="username" name="username">
16     </p>
17     <p>
18         <span>密码：</span> <input type="password" id="input-password" >
19     </p>
20     <p>
21         <input type="hidden" id="md5-password" name="password">
22     </p>
23 <!--    <input type="submit">-->
24     <button type="submit">提交</button>
25 </form>
26 <script>
27     function aaa() {
28         var unme = document.getElementById('username');
29         var pwd = document.getElementById('input-password');
30         var md5pwd = document.getElementById('md5-password')
31         md5pwd.value = md5(pwd.value);
32         return true;
33     }
34 
35 </script>
36 </body>
37 </html>

8|0jQuery

初始jQuery

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--
 7     在线引入
 8     <script src="http://code.jquery.com/jquery-migrate-        1.2.1.min.js"></script>
 9     -->
10     <!--本地引入-->
11     <script src="lib/jquery-3.6.0.js"></script>
12     <!--
13     使用公式：$('selector').action()
14     -->
15 </head>
16  <body>
17      <a href="#" id="text-jQuery">点我</a>
18      <script>
19          //选择器就是CSS的选择器
20          $('#text-jQuery').click(function () {
21              alert(1);
22          })
23      </script>
24     </body>
25 </html>

选择器

//js的选择器方式
document.getElementsByTagName()
document.getElementById()
document.getElementsByClassName()

//jQuery的选择器方式
$('p').click();
$('#id1').click();
$('.class1').click();

事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <script src="lib/jquery-3.6.0.js"></script>
 7         <style>
 8             #divMove{
 9                 width: 500px;
10                 height: 500px;
11                 border: 1px solid red;
12             }
13         </style>
14     </head>
15     <body>
16         <!--要求：获取鼠标当前的一个坐标-->
17         mouse: <span id="mouseMove"></span>
18         <div id="divMove">
19 
20         </div>
21         <script>
22             //当页面元素夹杂完毕之后，响应事件
23             // $(document).ready(function () {
24             //    
25             // })  简写为
26             $(function () {
27                 $('#divMove').mousemove(function (e) {
28                     $('#mouseMove').text('X:'+e.pageX+'Y:'+e.pageY)
29                 })
30             });
31         </script>
32     </body>
33 </html>

操作DOM

文本操作

$('#text-ul li[name=python]').text(); //获得值
$('#text-ul li[name=python]').text('123');//设置值

$('#text-ul').html();//获得值
$('#text-ul').html('<strong>123</strong>');//设置值

css的操作

$('#text-ul li[name=python]').css({"color":"red","font-size":"20px"});

元素的显示和隐藏 本质display：none；

$('#text-ul li[name=python]').show()
$('#text-ul li[name=python]').hide()

小技巧

1,巩固JS（看jQuery源码，看游戏源码！）

2，巩固HTML，CSS（扒网站，全部down下来，然乎对应修改看效果）

Layer弹窗组件

Element-ui


__EOF__

本文作者：冰山醉酒
本文链接：https://www.cnblogs.com/douFrank/p/16117821.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   冰山醉酒  阅读(150)  评论(0)  编辑  收藏  举报
相关博文：
·  JavaWeb笔记
·  Java知识点笔记
·  JavaScript笔记
·  JavaScript
·  JavaScript
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手