JavaScript

最新推荐文章于 2024-09-14 18:52:56 发布

liuhui111222

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量718

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/liuhui111222/article/details/122045794

版权

1.什么是javascript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现，在日常场合。
但事实上，JavaScript比ECMA-262的含义多得多，一个完整的JavaScript实现应该由以下三个部分组成：

ECMAScript：核心
DOM：文档对象模型
BOM：浏览器对象模型这两个词是可以互换的

ECMAScript它可以理解为是Javascript的一个标准
最新版本已经到es6版本-
但是大部分浏览器还只停留在支持es5代码上!
开发环境一线上环境,版本不一致

2.快速入门

2.1、引入JavaSciprt
1、内部标签

<script>
//...
</script>
123

2、外部引入

  <script src="qj.js"></script>

测试代码

<!DOCTYPE html>  
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 

    <!--script标签内,写Javascript代码--> 
    <!--<script>--> 
    <!--alert( 'hello,world');--> 
    <!--</script>--> 

    <!--外部引入--> 
    <!--注意：script标签必须成对出现--> 
    <script src="js/qj.js"></script>

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

    </script> 
</head> 
<body>
<!--这里也可以存放--> 
</body> 
</html>
123456789101112131415161718192021222324

2.2、浏览器调试必备须知
在这里插入图片描述

2.3、数据类型

变量（不能以数字开头，可以是中文）

		<script>
			var $a=1;
			var _a=2;
			var 你="帅哥";
			alert(你);
		</script>

number

		<script>
			123 //整数123
			123.1 //浮点数123.1
			1.123e3 //科学技术法
			-99 //负数
			NaN //not a number
			Infinity //无穷大
		</script>

字符串

		<script>
		"你好"
		'我很好'
		</script>

布尔值

true，false

逻辑运算

		&& 两个都为真,结果为真
		|| 一个为真,结果为真
		!  取反

比较运算符

		=
		==    等于(值一样,类型不一样,结果为true)
		===   绝对等于(值和类型必须都一样,结果才为true)
		<script>
		//NaN===NaN,这个与所有的数值都不相等,包括自己
		//只有通过isNaN(NaN)来判断是否是NaN
		alert(NaN===NaN);    //false
		alert(isNaN(NaN));   //true
		</script>

浮点数问题

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

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

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

//Person person = new Person(1,2,3,4,5); 
对象是大括号，数组是中括号~~
var person = { 
    name:"qinjiang", 
    age: 3, 
    tags: ['js','java','web','...'] 
}

在浏览器调试

person.name 
> "qinjiang" 
person.age 
> 3

2.4、严格检查格式

在这里插入图片描述

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
<！--
前提：IEDA需要设置支持ES6语法
'use strict'；严格险查模式，预防JavaScript的随意性导致产生的一些问题,必须写在Javascript的第一行！
局演变量建议都使用 let 去定义~
-->
<script>
	'use strict' ;
	//全局变量
	let = 1;
	//ES6   let
</script>
</head>

3.数据类型详解

3.1 字符串

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

2.注意转移字符 \

\'    打印 '
\n   换行
\t
\u4e2d  \u#### Unicode字符
\x41    Ascll字符

3.多行字符串编写

<script>
    var msg=
        `
    hello
    world
    你好
    多行输出
    `
</script>

4.模板字符串

<script>
   'use strict'
   let name="刘辉";
   let age=18;
   let msg=`你好帅，${name}`
   alert(msg)
</script>

5.字符串长度

str.length

6.字符串的可变性，不可变在这里插入图片描述 7.大小写转换

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

8.获取指定元素的下标

str.indexOf("a")

9.截取字符串指定位置字符

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

3.2 数组

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

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

1.长度

arr.length
注意给arr.length赋值，数组大小会发生变化，如果赋值过小，元素会丢失，增加的元素是类型是未定义元素

2.indexOf,通过元素获得下标索引

arr.indexOf(2)  获得元素为2的下标索引
字符串的"1"和数字1是不同的

3.slice()截取array的一部分，返回应该新数组，类似于stirng中的substring

4.push（）,pop（）尾部

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

5.unshift（），shift（）头部

unshift():压入到头部
shift()：弹出头部第一个元素

6.排序sort()

arr=[8,6,9,2,4,1]
(6) [8, 6, 9, 2, 4, 1]
arr.sort()
(6) [1, 2, 4, 6, 8, 9]

7.元素反转 reverse（）

(6) [1, 2, 4, 6, 8, 9]
arr.reverse()
(6) [9, 8, 6, 4, 2, 1]

8.concat（）数组中添加数组

(6) [9, 8, 6, 4, 2, 1]
arr.concat(['A','B'])
(8) [9, 8, 6, 4, 2, 1, "A", "B"]
注意：并没有修改数组，只是会返回一个新的数组

9.连接符join

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

(8) [9, 8, 6, 4, 2, 1, "A", "B"]
arr.join('-')
"9-8-6-4-2-1"

10.多维数组

arr=[[1,2],[3,4],[5,6]]     00 01 ，10 11， 20 21
arr[1][1]
4

3.3 对象

若干键值对

var 对象名={
		属性名： 属性值，
		属性名： 属性值，
		属性名： 属性值
}
Js中对象，{....}表示一个对象，键值对描述属性XXXX:XXX,多个属性之间用逗号隔开，最后一个属性不加逗号！
Js中的所有的键都是字符串，值是任意对象

1.对象赋值

person.name="liuhui"
person.name /取值
"liuhui"

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

person.hahha
undefined

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

delete person.name
true

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

person.haha="haha"
"haha"

5.判断属性值是否在这个对象中！ xxx in xxx

'age' in person
true
//继承
'toString' in person
true

6.判断应该属性是否是这个对象自身拥有的 hasOwnProperty（）

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

3.4 流程控制

if 判断

var age = 3; 
if(age>3){ //第一个判断 
   alert('haha"); 
}else if(age<5) {  //第二个判断 
   alert("hello~"); 
}else { //否则, 
   alert("world~"); 
}

while循环,避免程序死循环

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< 100;i++){ 
  console.Log(i) 
 }

forEach 循环

var age = [12,3,12,3,12,3,12,31,23,123]; 
    //函数 
     age. ForEach(function (value) { 
     console.Log(value) 
 })

for…in

//for(var index in object) { }
for(var num in age){ 
    if(age.hasownProperty(num)){ 
        console.log("存在") 
        console.log(age[num]) 
    } 
}

3.5 Map和Set

var map =new Map ([['tom' , 100] , ['jack' ,90] , ['haha ,80]];
var name = map.get('tom'); //通过key获得value
map.set('admin',123456); //新增或修改
map.delete ("tom"); //删除

Set:无序不重复的集合
 set.add (2); //添加!
 set.delete(1); //删除!
 console.1og(set.has(3)); //是否包含某个元素!

3.6 iterator

ES6的新特性~
ES6 创造了一种新的遍历命令for…of循环， Iterator 接口主要供for…of消费
使用iterator来迭代Map和Set

//通过for of 是值，for in 是下标
var arr=[3,4,5]
for(var 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([5,6,7]);
for (Tet x of set) {
console. 1og(x) 
}

4 函数

4.1 定义函数

方式一：

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

一旦执行到return代表函数结束，返回结果。
如果没执行reurn，函数执行完也会返回结果，结果是undefined。

方式二：

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

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

调用函数：

abs(-1)  //1

参数问题: javascript可以传任意个参数,也可以不传递参数

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

假设不存在参数,如果规避?

	var a=function(x){
				// 未输入参数，手动抛出异常
				if(typeof x!='number'){
					throw 'Not aNumber';
				}
				
				if(x<0){
					return -x;
				}
				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;
				}
				return x;
			}

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

rest

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

	var abs=function(a,b,...rest){
			console.log("a=>"+a);
			console.log("b=>"+b);
			console.log(rest);
	}
	注意：rest参数只能写在最后面，必须用...标识

4.2 变量的作用域

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

假设在函数体中声明，则在函数体外不可以使用（非要想实现的化，后面可以研究一下闭包）

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

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

function lh(){
        var x=1;
         x=x+1;
    }
      function lh2(){
        var x='a';
         x=x+1;
    }

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

    function lh(){
        var x=1;
         x=x+1;
         
        function lh2(){//内部函数可以访问外部函数的成员，反之则不行
            var y=x+1;
    }
    var  z=y+1;
    }

假设在javascipt中函数查找变量从自身函数开始，有内向外查找，假设外部存在这个同名的函数变量，则内部函数就会屏蔽外部函数的变量。

 function lh(){
        var x=1;
         x=x+1;

        function lh2(){//内部函数可以访问外部函数的成员，反之则不行
            var x="a";
            console.log("内部："+x); //输出a
    }
    lh2();
 console.log("外部："+x); 输出2
    }
    lh();

提升变量的作用域

 function lh() {
    var x="x"+ y;
    console.log(x);
    var y="y";
    }
    结果：xundefined

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

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

规范：所有的变量定义都放在函数的头部，不要乱发便于代码的维护

   function lh() {
    var x=1,
        y=x+1,
        z,i,a;//undefined
    } 后面就不用定义var类型的z，i，a了直接赋值使用即可

全局变量

 		x=1;
    function lh() {
  console.log(x);
    }
    lh();

全局对象 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(123);

   window.alert=function (){

   };
   //发现alert失效了
   window.alert(456);
   //恢复
   window.alert=old_alert;
   window.alert(789);

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

规范

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

  //唯一全局变量
  var quanju={};
//定义全局变量
  quanju.name="liuhui";
  quanju.add=function (a,b){
      return a+b;
  }

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

局部作用域 let

function lh(){
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);//输出了 101
}

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

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

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

常量const

在ES6 之前，怎么定义常量：只有用全部大写字母定于的变量是常量不要修改。只是一个约定，但是还是可以修改。

ES6引用const关键字，无法修改

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

4.3 方法

定义方法

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

var liuhui={
    name:"刘辉",
    birth:"2000",
    age:function (){
        var now =new Date().getFullYear();
        return now-this.birth;
    }
}
//属性
liuhui.name
//方法一定要带括号（）
liuhui.age()

this代表什么？拆开上面代码看看-

  function getAge(){
         var now =new Date().getFullYear();
        return now-this.birth;  
    }
var liuhui={
    name:"刘辉",
    birth:"2000",
    age:getAge
}
//liuhui.age() ok
//getAge() NaN window

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

apply

在js可以控制this 的指向

    function getAge(){
         var now =new Date().getFullYear();
        return now-this.birth;
    }
var liuhui={
    name:"刘辉",
    birth:"2000",
    age:getAge
}
getAge.apply(liuhui,[]);//利用apply将this指向了liuhui对象，所以可以正常输出年龄

5.内部对象

标准对象

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

5.1 Date

基本使用：

const now = new Date();
console.log(now);//"2021-12-20T01:55:46.025Z"
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//周几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒

now.getTime();//时间戳，全世界统一 1970 1.1 0：00：00 毫秒数

转换：

now = new Date (1578106175991)
"Sat Jan 04 2020 10:49:35 GMT-0800 (中国标准时间)
now. toLocalestring //注应,调用是一个方式,不是一个属性!
f toLocalestring() { [native code] }
now. toLocalestring()
"2020/1/4上午10:49:35"
now. toGMTString()
"sat, 04 Jan 2020 02:49:35 GмT"

5.2 Json

json是什么

早期,所有数据传输习惯使用XML文件!.

JSONUavascript Object Notation, JS对象简谱)是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言·
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

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

格式：

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

JSON字符串和JavaScript对象的转换

var user={
    name:"liuhui",
    age: "20",
    sex:"男"
}

//对象转化为json字符串
var jsonUser=JSON.stringify(user);

//json字符串转换成对象
//var obj = JSON.parse(jsonUser);
var obj = JSON.parse('{"name":"liuhui","age":"20","sex":"男"}');

json与JS对象的区别

var obj={a:'hello',b:'world'};
var json='{"a":"hello","b":"world"}'

5.3 Ajax

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

6.面向对象编程

原型对象

        var student={
            name:"qinjiang",
            age:20,
            run:function (){
                console.log(this.name + "run...");
            }
        };

        var xiaoming={
            name : "xiaoming"
        };

        //原型对象
        xiaoming._protp=student;

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 . 继承

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

}

var xiaoming=new Student("xiaoming");
var xiaohong=new Student("xiaohong");
var xiaozhang=new xiaoStudent("xiaozhang",10);

本质：查看对象原型

在这里插入图片描述

原型链

在这里插入图片描述

7.操作BOM对象(重点)

浏览器介绍

Javascript与浏览器的关系? Javascript诞生就是为了能够在浏览器中运行！

BOM:浏览器对象模型

window

window代表浏览器窗口

window.innerHeight
453
window.innerWidth
929
 window.outerHeight
1019
window.outerWidth
945
//调整浏览器窗口试试

Navigator（不建议使用）

Navigator封装了浏览器的信息

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

大多数时候，我们不会使用navigator对象，因为可以被人为修改。

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

screen

代表屏幕尺寸

screen.width
1920  单位是px
screen.height
1080  单位是px

location 重要

location 代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:" 协议
reload：f reload() 刷新
//设置新的地址
location.assign('跳转到新页面的地址')

document

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

document.title
'百度一下，你就知道'
document.title="新标题"
'新标题'

获取具体的文档树节点

<dl id="app">
    <dt>java</dt>
    <dd>javase</dd>
    <dd>javase</dd>
</dl>
<script>
var dl=document.getElementById("app")
</script>

获取cookie

document.cookie
'BAIDUID=22012B4DCCA37D96BF1703F25BA01808:FG=1; BAIDUID_BFESS=22012B4DCCA37D96BF1703F25BA01808:FG=1; BAIDU_WISE_UID=wapp_1622184497144_21; BIDUPSID=22012B4DCCA37D96BF1703F25BA01808; PSTM=1630208983; MCITY=-218%3A; BD_UPN=12314753; baikeVisitId=367f374a-166f-4f8e-89d2-d58782b82112; COOKIE_SESSION=0_0_0_0_1_0_1_0_0_0_0_0_0_0_1_0_1639806526_0_1639806525%7C1%230_0_1639806525%7C1; BD_HOME=1; H_PS_PSSID=35412_35295_35105_31660_34584_35490_35246_35168_35319_26350; BA_HECTOR=80a52h218g8l0k24m81grvsea0q'

劫持cookie原理：超链接劫持拿到cookie上传到恶意人员的服务器

避免方法：服务器可以设置cookie：httpOnly

history（不建议使用）ajax刷新

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

8.操作DOM对象（重点）

DOM：文档对象模型

核心

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

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

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

获得dom节点

<div id="father">
     <h1>标题1</h1>
     <p id="p1">p1</p>
     <p class="p2">p2</p>
</div>

<script>
  var h1=  document.getElementsByTagName("h1");
  var p1=  document.getElementById("p1");
  var p2=  document.getElementsByClassName("p2");
  var father=  document.getElementById("father");

  var childrens=father.children;//获取父节点下的所有子节点
        //  father.firstElementChild 第一个节点
         //  father.lastElementChild 最后一个节点
        //  p1.nextElementSibling 下一个节点
</script>

更新节点

id1.innerText=123  //修改文本值
123
id1.innerText="456"
'456'

id1.innerHTML="<strong>123<strong>"  //可以解析html文本标签
'<strong>123<strong>'

操作js

id1.style.color="red"
'red'
id1.style.fontSize="100px" //字体大小
'100px'
id1.style.padding="2em" //内边距
'2em'

删除节点

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

<div id="father">
     <h1>标题1</h1>
     <p id="p1">p1</p>
     <p class="p2">p2</p>
</div>

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

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

插入节点

我们获得了某个dom节点，假设这个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"), //已存在的节点
       list =document.getElementById("list");

        list.appendChild(js);//将id为js的标签追加到list标签末尾
</script>

效果
在这里插入图片描述

创建一个新标签，实现插入

  //通过js创建一个新的节点
       var newp= document.createElement("p");
       newp.id="newp";
       newp.innerText="hello,liuhui";

       list.appendChild(newp);

<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"),
       list =document.getElementById("list");

      /*  list.appendChild(js);//将id为js的标签追加到list标签末尾*/
        //通过js创建一个新的节点
       var newp= document.createElement("p");
       newp.setAttribute("id","newp");
    /*   newp.id="newp";
       newp.innerText="hello,liuhui";*/

       //创建一个标签节点
        var myscript = document.createElement("script");
        myscript.setAttribute("type","type/javascript")
        list.appendChild(myscript);
        list.appendChild(newp);
</script>

insertBefore 插入某节点前面

<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 ee=document.getElementById("ee");
  var js=document.getElementById("js");
  var list=document.getElementById("list");

  list.insertBefore(js,ee); //将id为list的标签中，id为ee节点的前面插入id为js的标签
</script>

9.操作表单（验证）

表单是什么 form Dom树

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

表单的目的：提交信息

获得提交的信息

<form action="post">
    <p><span>用户名</span> <input type="text" id="username"></p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boys">男
        <input type="radio" name="sex" value="women" id="girls">女
    </p>
</form>
<script>
var  input_text=document.getElementById("username");
var  input_boy=document.getElementById("boys");
var  input_girl=document.getElementById("girls");
//得到输入框的值
input_text.value
//修改输入框的值
input_text.value="张三"

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

提交表单，md5密码加密，表单优化（高级玩法 - hidden）

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- MD5工具类 -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!-- 表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit接受 -->
    <form action="" method="POST" onsubmit="return aaa()">
        用户：<input type="text" id="uname" name="username" placeholder="用户名"/><br/>
        密码：<input type="password" id="pname" name="userpassword" placeholder="密码"/><br/>
        <input type="hidden" id="md5pwd" name="epassword"/>
        <button type="submit">提交</button>
    </form>
</body>

<script>
    function aaa(){
        var u = document.getElementById('uname');
        var p = document.getElementById('pname');
        var md5pwd = document.getElementById('md5pwd');
        md5pwd.value = md5(p.value);
        //可以校验判断表单内容，true就是通过提交，false是阻止提交
        return true;
    }
</script>

10. jQuery

公式：$(selector).action() 官网： j查询 (jquery.com)

可以下载jquery到本地，也可以代码开头cdn加速地址使用

jQuery库，里面存在大量的javaScript函数

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- jQuery的cdn加速地址 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <a href="" id="test-jquery">点我</a>

    <script>
        //选择器就是css的选择器
        $('#test-jquery').click(
            function(){
                alert('holle，world');
            }
        )

    </script>
</body>

选择器

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

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

//jquery css中的选择器它全部都能用!
$('p').click(); //标签选择器s
￥('#id1').click(); //id选择器
$('.class1').click() //class选择器

事件

鼠标事件，键盘事件，其他事件
在这里插入图片描述

比如获取鼠标坐标：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red; 
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</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>

操作DOM

节点文本操作

<body>
<ul id="test-ul">
  <li class="js">javascript</li>
  <li name="python">python</li>
</ul>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
  $('#test-ul li[name=python]').text();//获得值
  $('#test-ul li[name=python]').text("设置值");//设置值
  $('#test-ul').html();//获得值
  $('#test-ul').html("设置值");//设置值
</script>
</body>

css的操作

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

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

 //$('#test-ul li[name=python]').show(); //显示元素
  $('#test-ul li[name=python]').hide(); // 隐藏元素display: none;

liuhui111222

关注

0
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

JavaScript

文章目录

1.什么是javascript

2.快速入门

3.数据类型详解

3.1 字符串

3.2 数组

3.3 对象

3.4 流程控制

3.5 Map和Set

3.6 iterator

4 函数

4.1 定义函数

4.2 变量的作用域

4.3 方法

5.内部对象

5.1 Date

5.2 Json

5.3 Ajax

6.面向对象编程

7.操作BOM对象(重点)

8.操作DOM对象（重点）

9.操作表单（验证）

10. jQuery