学习javaScript

最新推荐文章于 2024-08-01 14:32:35 发布

深夜暗月

最新推荐文章于 2024-08-01 14:32:35 发布

阅读量241

点赞数

原文链接：https://blog.csdn.net/qq_33956536/article/details/107024951

版权

本文介绍了JavaScript的入门步骤，包括首个JS程序示例、严格区分大小写、变量与数据类型、基本逻辑控制、数组和对象操作，以及ES6新特性如let和const。同时涵盖了字符串处理、数据类型转换、流程控制、DOM操作和jQuery基础。

摘要由CSDN通过智能技术生成

快速入门

我的第一个js程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    script标签内，写JavaScript代码-->
    <script>
        alert('Hello,world');
    </script>
<!--    外部引入-->
<!--    注意：script标签必须成对出现-->
    <script src="js/js.js"></script>

<!--    不用显示定义type，默认就是javascript-->
    <script type="text/javascript">

    </script>
</head>
<body>

</body>
</html>

js/js.js

alert('你好啊，我的朋友！')

基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  JavaScript严格区分大小写-->
  <script>
    //1、定义变量：   变量类型 变量名 = 变量值;
    var score = 90;
    //alert(score)
    //2、调监控制
    if(score > 60 && score < 70){
      alert('60~70')
    }else if(score > 85 && score < 100){
      alert('85~100')
    }else{
      alert('other');
    }

    //console.log(score)  在浏览器的控制台打印变量！Syetem.out.println()
    /*
    * haha
    * */
  </script>
</head>
<body>

</body>
</html>

数据类型

变量

var $1
var 王者荣耀 = "倔强青铜"

number

js不区分小数和整数，Number

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

字符串

‘abc’ “abc”

布尔型

true，false

逻辑运算

&& 都真为真 
|| 都假为假
！ 真即假 假即真

比较运算符

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

坚决不要使用==判断

NaN==NaN ，这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题

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

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

console.log(Math.abs(1/3-(1-2/3))<0.0000001)

null和undefined

null 空
undefined 未定义

数组

java的数组必须是一些相同类型的对象，js中则不需要

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

new Array(1,2,23,4,5,6,hello);

取数组下标：如果越界了就会undefined

对象

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

//Person person = new Person()
//每个属性之间使用逗号隔开
var person = {
  name:"yeyue",
  age:28,
  tags:['python','java','shell','...']
}

取对象的值

person.name"yeyue"person.age28person.tags["python", "java", "shell", "..."]

严格检查模式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title><!--前提：IDEA需要设置支持ES6语法'use strict';严格检查模式，预防JavaScript的随意性导致产生一些问题必须写在javaScript的第一行局部变量建议使用let定义-->  <script>    'use strict';    //全局变量    let i=10;    //ES6 let  </script></head><body></body></html>

数据类型

字符串

正常字符串我们使用单引号或者双引号包裹
注意转译字符 \

  <script>    console.log('a\'b')  a'b    console.log('a\nb')  a                         b    console.log('a\tb')  a	b    console.log('\u4e2d') 中         \u#### Unicode字符    console.log('\x41')   A          Ascll字符  </script>

多行字符串编写

//tab 上面 esc下面var msg =    `hello     world     nihao ya     nihao`

模板字符串

//tab 上面 esc下面let name = "yeyue";let age = 18;let msg = `My name is ${name} and my age is ${age}`

字符串长度

str.length

字符串的可变性：不可变

console.log(student[1])tstudent[1]= 11console.log(student)student

大小写转换

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

student.indexOf(‘t’)
substring

[) student.substring(1) //截取从第一个字符到最后一个字符 student.substring(1,3)//[1,3)

数组

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

arr = [1,2,3,4,5,6,7,8](8) [1, 2, 3, 4, 5, 6, 7, 8]arr[0]1

长度

arr.length8

注意：给arr.length赋值可以改变数组的大小，若赋值太小，元素会丢失

indexOf() ：通过元素获得下标索引

arr.indexOf(2)1

注意：字符串“1”和数字1不相同

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

arr.slice(3,8)(5) [4, 5, 6, 7, 8]

push(),pop() 尾部

push ：压入到尾部
pop  ：弹出尾部的一个元素
arr.push("a","b")
12
arr
(12) [1, 2, 3, 4, 5, 6, 7, 8, empty × 2, "a", "b"]
arr.pop()
"b"
arr
(11) [1, 2, 3, 4, 5, 6, 7, 8, empty × 2, "a"]

unshift(),shift() 头部

unshift ：压入到头部
shift  ：弹出头部的一个元素
arr.unshift("c","d")
13
arr
(13) ["c", "d", 1, 2, 3, 4, 5, 6, 7, 8, empty × 2, "a"]
arr.shift()
"c"
arr
(12) ["d", 1, 2, 3, 4, 5, 6, 7, 8, empty × 2, "a"]

排序sort()

arr = ["A","C","B"]
(3) ["A", "C", "B"]
arr.sort()
(3) ["A", "B", "C"]

元素反转（reverse）

arr.sort()
(3) ["A", "B", "C"]
arr.reverse()
(3) ["C", "B", "A"]

concat()

arr
(3) ["C", "B", "A"]
arr.concat([1,2,3])
(6) ["C", "B", "A", 1, 2, 3]
arr
(3) ["C", "B", "A"]

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

连接符join

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

(3) ["C", "B", "A"]arr.join('*')"C*B*A"

多维数组

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

对象

若干个键值对

var 对象名{    属性名：属性值，    属性名：属性值，    属性名。属性值}var person = {      name:"yeyue",      age:28,      tags:['python','java','shell','...']

Js中对象，{…}表示一个对象，键值对描述属性 xxxx:xxxx,多个属性用逗号隔开，最后一个属性不加逗号

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

对象赋值

person.name = "shenye""shenye"person.name"shenye"

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

person.hahaundefined

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

delete person.agetrue

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

person{name: "yeyue", tags: Array(4)}person.age = 1818person{name: "yeyue", tags: Array(4), age: 18}

判断一个属性值是否在这份对象中！xx in xxx

'age' in persontrue//继承'toString' in persontrue

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

person.hasOwnProperty('age')trueperson.hasOwnProperty('toString')false

流程控制

if判断

var score = 90;if(score > 60 && score < 70){  alert('60~70')}else if(score > 85 && score < 100){  alert('85~100')}else{  alert('other');}

while循环，避免程序死循环

let age = 3;while(age < 100){    age = age + 1;    console.log(age)} do{    age=age+1;    console.log(age)}while(age<100)

for循环

for (let i = 0; i < 30; i++) {    console.log(i)}

forEach循环

5.1引入

var age = [12,2,3,43,56,6,32,31,123]//函数age.forEach(function (value) {    console.log(value)})

for…in

var age = [12,2,3,43,56,6,32,31,123]//函数//for (var index in object){ console.log(object[index]) }for (var num in age){    if(age.hasOwnProperty(num)){        console.log("存在")        console.log(age[num])    }}

Map 和 Set

ES6的新特性

Map：

//ES6 Map//学习的成绩，学生的名字var map = new Map([['tom',100],['jack',90],['haha',80]])var name = map.get('tom') //通过key获得valuemap.set('admin',123456); //新增或修改map.delete('tom'); //删除

Set：无序不重复的集合

var set = new Set([3,1,1,1,1]); //set可以去重set.add(2); //增加set.delete(1); //删除console.log(set.has(3)); //是否包含某个元素

itrator

ES6 新特性

遍历数组：

//通过for of / for in 下标var arr = [5,6,7]for (let x of arr) {  console.log(x)}

遍历Map：

var map = new Map([["tom",100],["jack",90],["haha",80]]);for (let x of map) {  console.log(x)}

遍历Set：

var set = new Set([7,8,9])for (let x of set) {  console.log(x)}

函数

定义函数

定义方式一

绝对值函数

function abs(x){  if( x>= 0){    return x;  }else{    return -x;  }}

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

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

定义方式二

var abs = function(x){  if( x>= 0){    return x;  }else{    return -x;  }}

function(x){…} 这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！

方式一和方式二等价！

调用函数

abs(10)  //10abs(-10)  //10

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

参数进来是否存在的问题？

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

var abs = function(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 (var i = 0; i < arguments.length; i++) {    console.log(arguments[i]);  }  if( x>= 0){    return x;  }else{    return -x;  }}

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

rest

以前：

function aaa(a,b){
  console.log("a=>"+a);
  console.log("b=>"+b);
  if(arguments.length>2){
    for(var i =2,i<arguments.length,i++){
      
    }
  }
}

ES6引入的新特性，获取除了已经定义的参数以外的参数

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

rest参数只能写在最后边，必须用…标识！

变量的作用域

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

假设在函数体中声明，在函数体外不可以使用~（非要实现的话，可以研究下闭包）

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

如果两个函数使用了相同的变量名，只要在函数内部就不冲突

function yeyue(){
  var x = 1;
  x = x + 1;
}
function yeyue2(){
  var x = 'A';
  x = x + 1;
}

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

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

假设，内部函数变量和外部函数的变量，重名

function yeyue(){  var x = 1;  function yeyue2(){    var x = 'A';    console.log('inner'+x);  }  console.log('outer' + x);  yeyue2();}yeyue();

在Js中，函数变量从自身函数开始，由内到外查找。假如外部存在同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

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

结果：xundefined

说明js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

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

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

function yeyue(){  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);

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

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

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

规范

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

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

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名重提的问题。

局部作用域 let

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

ES6 let 关键字，解决局部作用域冲突问题

function aaa(){  for (let i = 0; i < 100; i++) {    console.log(i);  }  console.log(i + 1);//Uncaught ReferenceError: i is not defined}

建议使用let去定义局部作用域的变量

常量 const

在ES6之前，定义常量：只有用全部大写字母命名的变量都是常量；建议不要修改这样的值

var PI = '3.14';console.log(PI);PI = '123';console.log(PI);

在ES6引入了常量关键字 const

const PI = '3.14';console.log(PI);PI = '123'; //Uncaught TypeError: Assignment to constant variable.console.log(PI);

方法

定义方法

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

var yeyue = {  name : '夜月',  birth : 2000,  //方法  age : function (){    //今年 - 出生年    var now = new Date().getFullYear();    return now - this.birth;  }}//属性yeyue.name//方法,一定要带（）yeyue.age()

this代表？拆分代码看看~

function getAge(){  //今年 - 出生年  var now = new Date().getFullYear();  return now - this.birth;}var yeyue = {  name : '夜月',  birth : 2000,  //方法  age : getAge}//yeyue.age()   21//getAge()      NaN  window

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

apply

在js中可以控制this的指向！

function getAge(){  //今年 - 出生年  var now = new Date().getFullYear();  return now - this.birth;}var yeyue = {  name : '夜月',  birth : 2000,  //方法  age : getAge}getAge.apply(yeyue,[]);//this,指向了yeyue，参数为空//yeyue.age()  21//getAge.apply(yeyue,[])  21

内部对象

标准对象

typeof 123"number"typeof '123'"string"typeof true"boolean"typeof NaN"number"typeof []"object"typeof {}"object"typeof Math.abs"function"typeof undefined"undefined"

Date

基本使用

var now = new Date(); //Wed Jul 21 2021 12:06:04 GMT+0800 (GMT+08:00)now.getFullYear(); //年now.getMonth(); //月 0~11now.getDate();  //日now.getDay(); //星期几now.getHours(); //时now.getMinutes(); //分now.getSeconds(); //秒now.getTime(); //时间戳 全世界统一console.log(new Date(1626840576266)); //时间戳转化为时间

转换

now = new Date(1626840576266)Wed Jul 21 2021 12:09:36 GMT+0800 (GMT+08:00)now.toLocaleString //调用的是一个方法，不是一个属性！ƒ toLocaleString() { [native code] }now.toLocaleString()"2021/7/21下午12:09:36"now.toGMTString()"Wed, 21 Jul 2021 04:09:36 GMT"

JSON

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

格式

对象都用{}
数组都用[]
所有的键值对都用 key:value

JSON字符串和JS对象的转化

var user = {  name : 'yeyue',  age : 18,  sex : '男'}//对象转化为json字符串var jsonUser = JSON.stringify(user);//JSON字符串转化为对象，参数为json字符串var obj = JSON.parse('{"name":"yeyue","age":18,"sex":"男"}');

JSON和js对象的区别

var obj = {name: "yeyue", age: 18, sex: "男"}var json = '{"name":"yeyue","age":18,"sex":"男"}'

Ajax

原生的js写法 xhr异步请求
jQuey封装好的方法 $("#name").ajax("")
axios请求

面向对象编程

原型对象

JavaScript、java、c# …面向对象；javascript有些区别！

类：模板原型对象
对象：具体实例

在javascript这个需要换一下思维方式

原型：

var Student = {
  name:'yeyue',
  age:18,
  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(name){
    this.name = name;
  }
  Student.prototype.hello = function (){
    alert('hello')
  }

class继承

class关键字，是在ES6引入的

1、定义一个类，属性，方法

class Student{
  constructor(name) {
    this.name = name;
  }
  hello(){
    alert('hello')
  }
}

var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello()

2、继承

<script>
  class Student{
    constructor(name) {
      this.name = name;
    }
    hello(){
      alert('hello')
    }
  }

  class XiaoStudent extends Student{
    constructor(name,grade) {
      super(name);
      this.grade = grade;
    }
    myGrade(){
      alert("我是一名小学生");
    }
  }

  var xiaoming = new Student("xiaoming");
  var xiaohong = new XiaoStudent("xiaohong");
</script>

原型链

在这里插入图片描述

操作BOM对象

浏览器介绍

JavaScript诞生是为了能够让他可以在浏览器中运行

BOM：浏览器对象模型

IE 6-11
Chrome
Safari
FireFox

三方：

qq浏览器
360浏览器

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
150
window.innerWidth
929
window.outerHeight
728
window.outerWidth
945

navigator

封装了浏览器的信息

window.navigator.appCodeName
"Mozilla"
window.navigator.appName
"Netscape"
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象，因为会被认为修改！

不建议使用这些属性来判断和编写代码

screen 代表屏幕尺寸

screen.width1920screen.height1080

location 代表当前页面的url信息

host: "www.baidu.com"href: "https://www.baidu.com/"protocol: "https:"reload: ƒ reload() //刷新网页//设置新的地址location.assign('网页url')

document 代表当前的页面，html，dom文档树

document.title"百度一下，你就知道"document.title = '你好啊'"你好啊"

获得具体的文档树节点

<dl id="app">
  <dt>Java</dt>
  <dt>JavaSE</dt>
  <dt>JavaEE</dt>
</dl>

<script>
  var dl = document.getElementById('app');
</script>

获取cookie

document.cookie
"BIDUPSID=46D26536F06D4B37A87BF35AED9B295F; PSTM=1626924758; BAIDUID=38631FCFEA5A871621FA2D3F86CA7D6A:FG=1; BD_UPN=12314753; BAIDUID_BFESS=38631FCFEA5A871621FA2D3F86CA7D6A:FG=1; BD_HOME=1; H_PS_PSSID=34267_33764_34222_34279_34004_34280_26350_34289; BA_HECTOR=008l218l0g0h8h244u1gfhq9c0r"

劫持cookie原理

<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器-->

服务器端可以设置 cookie:httpOnly

history 浏览器的历史记录

history.forward()
history.back()

核心

浏览器网页就是一个Dom属性结构

更新：更新Dom节点
遍历dom节点：得到dom节点
删除：删除一个dom节点
添加：添加一个新的节点

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

获得Dom节点

  //对应CSS选择器
  var h1 = document.getElementsByTagName('h1');
  var p1 = document.getElementById('p1');
  var p2 = document.getElementsByClassName('p2');
  var father = document.getElementById('father');

  var childrens = father.children; //获取父节点下的所有子节点
  var first = father.firstChild;
  var last = father.lastChild;

更新节点

<div id="id1"></div>
<script>
  var id1 = document.getElementById('id1');
</script>

id1.innerHTML = ' <strong> 123</strong> ' 可以解析htmlid1.innerText = 'haha' 修改文本的值

操作JS

id1.style.color = 'red' //属性使用 字符串 包着"red"id1.style.fontSize='20px' // - 转 驼峰命名"20px"id1.style.padding='1em'"1em"

删除节点

<body id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>

<script>
  var self = document.getElementById('father');
  var father = p1.parentElement;
  father.removeChild(self)
  //删除是一个动态的过程
  father.removeChild(father.children[0])
</script>

注意：删除多个节点的时候，children是时刻变化的，删除节点的时候一定要注意。

插入节点

获得了某个节点，假设这份dom几点是空的，我们通过innerHTML就可以增加一个元素了，但是这个dom节点已经存在元素了，我们就不能这么干了！会覆盖！

创建新节点并追加

<p id="js">JavaScript</p>
<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaME</p>
</div>

<script>
  var js = document.getElementById('js');  //已经存在的节点
  var list = document.getElementById('list')
  //通过js创建一个新的节点
  var newP = document.createElement('p'); //创建一个p标签
  newP.id = 'newP';
  newP.innerText = 'hello,world';
  list.appendChild(newP);
  //创建一个标签节点
  var myScript = document.createElement('script');
  myScript.setAttribute('type','text/javascript');
  myScript.innerText = 'java';
  list.appendChild(myScript);
  //创建一个style标签
  var myStyle = document.createElement('style'); //创建一个空的stype标签
  myStyle.setAttribute('type','text/css');
  myStyle.innerHTML = 'body{background-color:chartreuse;}'; //设置标签内容

  document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

插入

<p id="js">JavaScript</p>
<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaME</p>
</div>

<script>
  var js = document.getElementById('js');
  var ee = document.getElementById('ee');
  var list = document.getElementById('list')
  //要包含的节点.insertBefore(newNode,targetNode)
  list.insertBefore(js,ee);
</script>

操作表单

表单是什么 form DOM树

文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

获得要提交的信息

<form action="post">
  <p>
    <span>用户名：</span><input type="text" id="username">
    <span>密码：</span><input type="text" id="password">
  </p>
<!--多选框的值就是定义好的value-->
  <p>
    <apan>性别：</apan>
    <input type="radio" name="sex" value="man" id="boy"> 男
    <input type="radio" name="sex" value="woman" id="girl"> 女
  </p>
</form>
<script>
  var input_text = document.getElementById('username');
  var boy_radio = document.getElementById('boy');
  var girl_radio = document.getElementById('girl');

  //得到输入框的值
  input_text.value
  //修改输入的值
  input_text.value = '123'

  //对于单选框，多选框等等固定的值.boy_radio.value只读取到当前的值
  boy_radio.checked; //查看返回的结果，是否为true，如果是true，则被选中
  boy_radio.checked = true;
</script>

提交表单 md5加密密码，表单优化

<!--表单绑定提交事件
onsubmit 绑定一个提交检测的函数， true false
将这个结果返回给表单，使用onsubmit 接收！
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span> <input type="password" id="input-password">
    </p>

    <input type="hidden" id="md5-passwd" name="password">
<!--    可以绑定事件 onclick 被点击-->
    <button type="submit">提交</button>
</form>
<script>
    function aaa() {
        alert(1);
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-passwd');

        md5pwd.value = md5(pwd.value);
        //可以校验判断表单内容，true就是通过提交  false就是阻止提交
        return false;
    }
</script>

jQuery

JavaScript

jQuery库，里边有大量的JavaScript函数

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--$(selector).action()-->
<a href="" id="test-jquery">点我</a>

<script>
  document.getElementById('id');
  //选择器就是CSS的选择器
  $('#test-jquery').click(function (){
    alert('hello,jquery');
  })

</script>
</body>
</html>

选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName()
//id
document.getElementById()
//类
document.getElementsByClassName()

//jQuery css的选择器全部都能用
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器

事件

  $('.class1').mousedown() //按下
  $('.class1').mousemove() //移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
  <style>
    #divMove{
      height: 500px;
      width: 500px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<!--要求：获取当前鼠标的坐标-->
mouse:
<span id="mouseMove"></span>
<div id="divMove">
  在这里移动鼠标试试
</div>

<script>
  //当网页元素加载完毕之后，响应事件
  $(function (){
    $('#divMove').mousemove(function (e){
      $('#mouseMove').text('x：' + e.pageX + 'y:' +e.pageY)
    })

  });
</script>
</body>
</html>

操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获取值
$('#test-ul li[name=python]').text('hahaha');//设置值
$('#test-ul li[name=python]').html();//获取值
$('#test-ul li[name=python]').html('<strong>123</strong>');//设置值

CSS操作

$('#test-ul li[name=python]').css('color','red');

元素显示和消失：本质 display:none

$('#test-ul li[name=python]').hide()//隐藏
$('#test-ul li[name=python]').show()//显示

娱乐测试

$(window).width()
1728
$(window).height()
387
$('#test-ul li[name=python]').toggle() //依次切换显示和隐藏

深夜暗月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫