js设置属性值的方法,javascript在哪设置

大家好,小编为大家解答js设置属性值的方法的问题。很多人还不知道javascript在哪设置,现在让我们一起来看看吧!

文章目录

1️⃣ 一、前端简介

🚋 1、三要素

  • HTML

​ 结构层,超文本标记语言,决定网页的结构和内容。

  • CSS

​ 表现层,层叠样式表,设定网页的表现样式Deepl降重

  • JavaScript

​ 行为层,一种弱类型的脚本语言,其源码不需要经过编译,而是由浏览器解释运行,用于控制网页的行为,严格区分大小写,但是并不适合处理高并发的工作。

🎈 2、CSS预处理器

CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加一些编程特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗地说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加了一些编程的特性,无需考虑浏览器的兼容性问题,例如,你可以在CSS中使用变量、简单地逻辑程序和函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳、更易于代码的维护等诸多好处。

2️⃣ 二、简单使用

🚋 1、引入JavaScript

<!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>
    <>
        //这里可以写JS代码
    </>

       <!--也可以外部引入-->
    < src="./js.js"></>
</head>
<body>

    <>
        //这里也可以写
    </>
</body>
</html>

🎈 2、弹窗——alert()

<>
    alert("Hello World!");
</>

🌈 3、调试——console.log()

类似 Java 中的打印,console.log() 就是在浏览器的控制台打印

<>
    console.log("Hello World!");
</>

3️⃣ 三、数据类型总括

JavaScript是一种弱类型的编程语言

🚋 1、分类

类型举例/说明特点
number12、12.34、-12、1.12e3JS不区分小数和整数
NaN不是一个数,与所有的数值包括自己都不相等使用 isNaN() 方法进行判断
Infinity表示无限大的数,超出计算机的计算范围
字符串’abc‘ 、 “abc”JS中使用单双引号并没有太大区别
布尔值(boolean)true 、 false
逻辑运算符与、或、 非 、短路与、 短路或
比较运算符= 、 == (类型可以不一样,值一样) 、 ===(绝对等于,类型和值都必须一样)
undefined未定义取数组下标越界后就会出现 undefined
数组var arr = [123,‘abc’,true,null,[1,2,3]];用中括号定义
对象var person = { “name” : “haobing”, “age” : 18, “job” : “student”, “home” : “jiangxi”};用大括号定义,不同属性之间用逗号隔开

🎈 2、严格检查模式

在 JS 代码的第一行加上 ’ use strict '; 可以防止JavaScript的随意性导致产生的一些问题

建议:局部有变量都使用 let 定义

4️⃣ 四、数据类型详解

JavaScript中所有的键都是字符串,值是任意对象。

🚋 1、字符串

JS 字符串不可变

<body>
    <>
        //转义字符   使用 \ + ...(包括Unicode字符、Ascall字符)
        console.log('hello\nworld');

        //多行字符
        var msg =  
        `hello
        world
        我是
        JavaScript`;

        //模板字符串  使用  `${变量名}`
        let name = "张三";
        let age = 18;
        let msg2 = `你好,我叫${name},今年${age}岁了!`;
        console.log(msg2);

        //常用方法
        var msg3 = "abcABC";
        msg3[3];//获取指定下标的字符值,通过下标取值
        msg3.toUpperCase();//转大写
        msg3.toLowerCase();//转小写
        msg3.length;//获取字符串的长度
        msg3.indexOf('C');//获取指定字符的下标
        msg3.substring(1,4);//截取字符串,取左不取右
    </>
</body>

🎈 2、数组

JS 中的数组可以包含任意的数据类型,数组的长度和内容均可以改变

<body>
    <>
        //数组中可以包含任意数据类型
        var arr = [1,2,3,null,true,[1,2,3]];

        arr.indexOf(true);//获取指定元素的下标,字符串 "1" 和 数字 1 是不同的
        arr.slice(1,4);//截取数组的一部分,返回一个新的数组,类似 substring(),取左不取右

        //追加元素  ————返回操作后,数组的长度
        arr.unshift('a');//头部追加   
        arr.push('b');//尾部追加

        //弹出元素  ————返回操作后,弹出的元素
        arr.shift();//头部弹出
        arr.pop();//尾部弹出

        //排序
        arr.sort();

        //元素翻转
        arr.reverse();

        //拼接数组  ————返回拼接好后的新数组,原来的数组不会被修改
        arr.concat([1,2,3]);

        //连接符
        arr.join("-");//打印拼接数组,使用特定的字符串拼接

        //填充数组
        arr.fill(1);
    </>
</body>

🌈 3、对象

核心:若干个键值对

JavaScript中所有的键都是字符串,值是任意对象

<body>
    <>
        //使用关键字 new 对象,使用大括号声明
        var person = {
            "name" : "张三",//属性之间使用逗号隔开
            "age" : 18,
            "email" : "12345678@qq.com",
            "score" : 100
        }

        //判断某个属性是否是这个对象自身所拥有的
        person.hasOwnProperty("name");

        //可以直接更改对象的属性,并且使用一个不存在的对象属性,浏览器只是报 undefined 
        person.name = "李四";

        //动态删减属性
        delete person.score;

        //动态添加属性,直接赋值
        person.habit = "sleep";

        //判断某个属性是否在这个对象中,包括继承过来的属性    xxx  in  xxx
        "toString" in person;
        "name" in person;

        //JavaScript中所有的键都是字符串,值是任意对象
        person['age'];
    </>
</body>

5️⃣ 五、分支与循环

<body>
    <>

        let a = 5;

        //if 判断
        if(a>5){
            alert('大于5');
        }else if(a<5){
            alert('小于5');
        }else{
            alert('等于5');
        }

        //while 循环
        while(a<=10){
            alert(a);
            a++;
        }

        //do while 循环
        do{
            alert(a);
            a++;
        }while(a<=10);

        //for 循环
        for(let i = 0 ; i <100 ; i++){
            console.log(i);
        }

        //数组循环            
        
        /*
            Java中的增强 for:  
                for(Type str : el){}
        */
        var arr = [1,2,3,4,5];

        for(let b in arr){   //------->  let index  in  arr  使用 in 取的是下标
            console.log(arr[b]);
        }

        for(let c of arr){   //------->  let value  of  arr  使用 of 取的是值
            console.log(c);
        }

        //forEach循环
        arr.forEach(function(e){  //同样可以遍历数组中的所有值
            console.log(e);
        });
    </>
</body>

6️⃣ 六、Map 和 Set 集合

可以将学生的名字和成绩映射起来

🚋 1、Map

类似Python中的字典

<body>
    <>

        //Map 的声明
        var map = new Map([['Tom',100],['Jack',80],['Rose',60]]);

        //取值
        map.get('Tom');

        //设置值   参数:  (Key , Value)
        map.set('Kitty',85);
        map.set('Tom',99);  //修改值

        //删除值
        map.delete('Tom');
 
    </>
</body>

🎈 2、Set

指无序不重复的集合

<body>
    <>

        //Set 的声明   Set可以去重
        var set = new Set([1,2,2,2,3]);

        //添加不重复的值
        set.add(5);

        //删除值
        set.delete(1);

        //判断是否包含某个元素
        set.has(5);

    </>
</body>

🌈 3、Iterable迭代

  • 遍历数组
var arr = [1,2,3,4,5]
for(let x of arr){
    console.log(x);
}
  • 遍历Map
var map = new Map([['Tom',100],['Jack',80],['Rose',60]]);       
for(let x of map){
    console.log(x);
}
  • 遍历Set
var set = new Set([1,2,2,2,3]);
for(let x of set){
    console.log(x);
}

bug

在新增值时,用 for…in … 去下标时,会存在错误,而使用 for… of … 会修正。

7️⃣七、函数

将函数放在对象类中就变成了方法

🌈1、定义

//定义方式一
function 函数名(参数){
    //函数体
}

//定义方式二  ----匿名函数
var 函数名 = function(参数){
    //函数体
}

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

如何解决不存在参数的问题?--------------------手动抛出异常

<body>
    <>
        var fun = function(x){
            if(typeof(x) !== 'number'){//typeof()可以获取变量(参数)的类型
                throw 'Not a Number';
            }

            alert(x);
        }
    </>
</body>

如何解决参数存在多个的问题?(浏览器默认只取第一个)---------arguments

<body>
    <>
        var fun = function(x){

            //arguments 代表传递进来的所有参数,实际上是一个数组
            for(let i = 0 ; i <arguments.length;i++ ){
                console.log(arguments[i]);
            } 
            alert(x);  //实际上用到的只有第一个参数
        }

    </>
</body>

存在问题:数组arguments中还包括当前参数

如何排除已经存在过的参数?------------------rest 类似Java中的可变长参数

<body>
    <>
        //传统方法
        var fun1 = function(a,b){
            console.log(a);
            console.log(b);
            if(arguments.length>2){
                for(let i = 2 ;i <=arguments.length;i++){
                    console.log(i);
                }
            }
        }

        //使用 rest 改进
        var fun2 = function(a,b,...rest){
            console.log(a);
            console.log(b);
            console.log(rest);
        }
    </>
</body>

       

🎈2、变量的作用域

  • 在JavaScript中,var定义变量实际上是有作用域的,在函数体中声明的,在函数体外不能使用。
<body>
    <>
        function add(){
            var x = 1;
            x++;
        }
        x += 2;//报  Uncaught ReferenceError: x is not defined
    </>
</body>
  • 内部函数可以访问外部函数的变量,外部函数不能访问内部函数的变量。
<body>
    <>
        function add(){//-------------外部函数
            var x = 1;
            x++;
            function add2(){//----------内部函数
                var y = 2;
                console.log(x);//正常运行
            }
            console.log(y);//报  Uncaught ReferenceError: y is not defined
        }
    </>
</body>
  • 假设内外函数变量重名,JavaScript会从内向外查找,函数查找变量从自身函数开始,内部函数会屏蔽外部函数变量
<body>
    <>
        function add(){//-------------外部函数

            var x = 1;

            function add2(){//----------内部函数

                var x = 2;

                console.log('内部:'+x);
            }
            console.log('外部:'+x);
            add2();
        }
        add();
    </>
</body>
  • JavaScript执行引擎,会自动提升 y 的声明,但是不会提升变量 y 的赋值
<body>
    <>
        var x = 'x ' +y;
        console.log(x);//打印 x undefined,说明 y 已经声明,但是没有被赋值
        var y = 'y';

        /*
            等价于 下面
        */

        var y; //执行引擎自动提升了 y 的声明
        var x = 'x '+y;
        console.log(x);
        y = 'y'; //但是不会提升 y 的赋值

    </>
</body>
  • 养成规范:所有的变量定义都放在函数的头部,不要乱放,便于代码维护。
  • 默认所有的全局变量都会自动绑定在window 对象下

​ JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,直到在全局作用域没有找到(即 window下),报错 ReferenceError

  • Bug:由于我们所有的全局变量都会绑定在我们的 window 上,如果不同的 js 文件使用了相同的全局变量就会发生冲突-------------------如何减少冲突?

将自己的全局变量全部放入自己定义的唯一空间中,降低全局命名冲突的问题,例如:jQuery使用----$(选择器).action();

<body>
    <>

        var Haobing ={};//唯一的全局变量 放在这

        Haobing.name ='Haobing';       //添加自己的全局变量
        Haobing.add = function(a,b){   //添加自己的全局函数
            return a+b;
        }

    </>
</body>
  • 局部变量let,一般用于 for 循环中
  • 常量const,定义一些不能够被修改的变量,通常使用全大写字母声明,为只读变量

🧲3、方法

函数定义在对象中就称为方法

  • 方法的使用
<body>
    <>

        var person = {
            name : 'Haobing', //-------属性
            birth : 2000,  //---------属性
            age : function(){  //-------方法
                var now = new Date().getFullYear();
                return now - this.birth;  //this是无法指向的,默认指向调用它的那个对象
            }
        }

        person.age();//-----调用时需要看成是函数的调用,加上括号

    </>
</body>
  • Bug:如何解决 this 关键字 无法指向的问题 (即如果将方法函数剥离出去,直接调用剥离后的函数会报错)
<body>
    <>

        function getAge(){
            var now = new Date().getFullYear();
            return now - this.birth;//this 是无法指向的,是默认指向调用它的那个对象的
        }

        var person = {
            name : 'Haobing', //-------属性
            birth : 2000,  //---------属性
            age : getAge   //--------这里不需要加括号
        }

        person.age();//-----调用时需要看成是函数的调用,加上括号,正常运行

        getAge();  //报 NaN ,由于window下没有 this 指的 birth
        
    </>
</body>

如何解决?-----------------使用 apply 方法

<body>
    <>

        function getAge(){
            var now = new Date().getFullYear();
            return now - this.birth;//this 是无法指向的,是默认指向调用它的那个对象的
        }

        var person = {
            name : 'Haobing', //-------属性
            birth : 2000,  //---------属性
            age : getAge   //--------这里不需要加括号
        }
        
		//***************解决方案*************************
        getAge.apply(person,[]);//表示 this 指向 person 这个对象,参数为空
        
    </>
</body>

8️⃣八、Date日期对象

调用方法说明
var now = new Date();//参数可以传入时间戳,将时间戳转为时间中国标准时间
now.getFullYear();整年
now.getMonth();当前月份 - 1
now.getDate();日期
now.getDay();星期几
now.getHours();
now.getMinutes();
now.getSeconds();
now.getTime();时间戳
now.toLocaleString();获取当地时间

9️⃣九、JSON对象

轻量级的数据交换格式

在JavaScript中一切皆为对象,任何JS支持的类型都可以用JSON来表示

格式:对象都用 { } 大括号

​ 数组都用 [ ] 中括号

​ 所有键值对用 ‘ key’ : 'value ’ ----------均当做字符串,使用双引号

<body>
    <>

        //对象
        var person = {
            name : 'Haobing',
            age : 18,
            job : 'student',
            tags : ['Java','C++','Web']//-----数组
        }

        //将对象转为 JSON 字符串
        var json_person = JSON.stringify(person);

        //将 JSON 字符串转为对象
        var obj_person = JSON.parse(json_person);
    </>
</body>

1️⃣0️⃣ 十、面向对象

🌈1、面向原型继承(旧)

类是对象的抽象,对象是类的具体实例。

<body>
    <>

        var person = {
            name : 'Haobing',
            age : 18,
            job : 'student',
            run : function(){
                console.log(this.name+' run...');
            }
        }

        var Haobing = {
            name : 'Haobing'
        }

        //Haobing.run(); //TypeError: Haobing.run is not a function

        //原型指向
        Haobing.__proto__ = person;  //表示  Haobing 继承了 person   ---------- Haobing 的原型是 person
        Haobing.run();  //正常运行,打印 Haobing run...
    </>
</body>

🎈2、面向class继承(新)

在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象

<body>
    <>
        function Student(name){
            this.name = name;
        }

        //给Student新增一个方法-------找原型添加(不推荐使用)
        /*
            prototype这个属性指向函数的原型对象
        */
        Student.prototype.hello = function(){
            alert('Hello!');
        }

        //****************************************************
        //****************************************************

        // 定义一个学生的类 ----------(推荐使用)
        class Student2{
            constructor(name){ //--------构造器
                this.name = name;
            }
            hello(){  //----------添加方法
                alert('Hello!');
            }
        }

        var Haobing = new Student2('Haobing');//new 实例对象

        class xiaoStudent2 extends Student2{ //继承,等价于 原型指向父类 __proto__
            hello(){
                alert(this.name+' Hello!');//重写方法
            }
        }
        var Jack = new xiaoStudent2('Jack');

    </>
</body>

1️⃣1️⃣十一、操作BOM对象

BOM:浏览器对象模型

对象作用
window全局对象,接受所有窗口的属性,eg:alert()、innerHeight、outerWidth
navigator(不建议使用)封装了浏览器的信息,eg:appName、appVersion、platform
screen电脑屏幕属性(尺寸),eg:width、height
location重要,代表当前页面的URL信息,eg:reload()刷新网页、assign(‘绝对网址’)设置新地址、protocol
document当前页面内容,eg:title 当前网页网址、getElementById()获取具体的文档树节点、cookie 获取客户端的一些本地信息
history(不建议使用)历史网页,back()后退、forward()前进

1️⃣2️⃣十二、操作DOM对象

DOM :文档对象模型,浏览器网页就是一个DOM树形节点

🎈1、获得DOM节点

  • 遍历(获得)
<body>

    <div id="father">
        <h1>标签选择器</h1>
        <p id="p1">id选择器</p>
        <p class="p2">class选择器</p>
    </div>

    <>

        var h1 = document.getElementsByTagName('h1');//标签选择器

        var p1 = document.getElementById('p1');//id选择器

        var p2 = document.getElementsByClassName('p2');//class选择器

        var father = document.getElementById('father');

        var children = document.children;//获取父节点下的所有子节点

        father.firstChild;//获取第一个子节点
        father.lastChild;//获取最后一个子节点

        p1.previousSibling;//上一个节点
        p1.nextSibling;//下一个节点
        
    </>
</body>
  • 更新
<body>
    <div id="father">
        12345
    </div>

    <>
        var father = document.getElementById('father');

        father.innerText = 'abcde';//修改内容

        father.innerHTML = '<h2>abcde</h2>';//修改超文本

        father.style.color = 'red';//修改样式(颜色)

        father.style.fontSize = '2em';//修改样式(字体)

        father.style.padding = '1.5em';//修改样式(内边距)
    </>
</body>
  • 删除

​ 步骤:先获取父节点,再通过父节点删除自己

<body>
    <div id="father">
        <p id="p1">123</p>
        <p id="p2">abc</p>
        <p id="p3">ABC</p>
    </div>

    <>
        var p1 = document.getElementById('p1');//确定要删除的子节点

        var father = p1.parentElement;//找到该子节点的父节点

        father.removeChild(p1);//删除指定节点

    </>
</body>

​ Bug:删除多个节点的时候,children 是在时刻变化的,删除节点的时候,尽量不使用下标去删除

<body>
    <div id="father">
        <p id="p1">123</p>
        <p id="p2">abc</p>
        <p id="p3">ABC</p>
    </div>

    <>
        var father = document.getElementById('father');

        father.removeChild(father.children[0]);
        father.removeChild(father.children[1]);//-----------并不能完全删除
        father.removeChild(father.children[2]);
    </>
</body>
  • 添加(添加或插入新节点)

使用 innerHTML直接插入,缺点:会覆盖不为空的DOM节点

解决方案

  • 追加已经存在的节点
  • 创建新节点
  • 创建标签节点
  • 创建style标签
<body>
    <p id="p">0000</p>
    <div id="list">
        <p id="p1">1234</p>
        <p id="p2">abcd</p>
        <p id="p3">ABCD</p>
    </div>

    <>

        // 追加
        var p = document.getElementById('p');
        var list = document.getElementById('list');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementById('p2');
        var p3 = document.getElementById('p3');
        list.appendChild(p);//追加到list尾部

        // 创建  -----   普通标签
        var newP = document.createElement('p');
        newP.id ='newP';  //等价于  newP.setAttribute('id','newP');
        newP.innerText = 'Hello,newP!'; //等价于 newP.setAttribute('innerText','Hello,newP!');
        list.appendChild(newP);

        // 创建  ------  特殊标签
        var myScript = document.createElement('');
        myScript.setAttribute('type','text/java');  //设置 键 与 值
        list.appendChild(myScript);

        //创建  -------style标签
        var myStyle = document.createElement('style');
        myStyle.setAttribute('type','text/css');
        myStyle.innerHTML = 'body{ background-color : green}';
        document.getElementsByTagName('head')[0].appendChild(myStyle);

        //插入节点
        list.insertBefore(p3,p2);//insertBefor(newNode,targetNode);  新节点插到目标节点之前

        //获取指定节点
        list.children[2];
    </>
</body>

1️⃣3️⃣十三、表单

🧲1、表单的基本使用

表单的基本格式:

< form method=“post” action=“result.html” >
​ < !-- 表单内容 – >
< /form >

  • method 规定如何发送表单数据,常用值:get/post,提交方式;

    • get方式提交,我们可以在URL中看到我们提交的信息,不安全,但是高效;
    • post方式提交,则不会,可以传输大文件,但是后台依然可以看到,需要进行加密。
  • action 表示向何处发送表单数据,即表单提交的位置,可以是网站,也可以是请求处理地址。

使用:简单的表单提交

<body>
    <h2>注册</h2>
    <form method="post" action="test2.html">
        <!-- 文本输入框 :input type="text" -->
        <p>名字:<input type="text" name="username"></p>

        <!-- 密码框:input type="password" 框中内容可以隐藏-->
        <p>密码:<input type="password" name="pwd"></p>

        <p>
            <!-- 提交 -->
            <input type="submit" name="Submit" value="提交">
            <!-- 重置 -->
            <input type="reset" name="Reset" value="重填">
        </p>
    </form>
</body>

🌈2、表单元素格式

属性说明
type指定元素的类型,有 text、password、checkbox、radio、submit(提交按钮)、reset(清空表单)、file、hidden、image、button,默认是 text。
name必须使用,指定表单元素的名称,type为radio时,name值必须都相等,即分组
value元素的初始值,type为radio(单选框)时必须指定一个值
maxlengthtype为text或password时,限定输入的最大字符数
checkedtype为radio或checkbox时,指定按钮是否是被选中
size指定表单元素的初始宽度,即文本框的长度
<body>
    <h2>注册</h2>
    <form method="get" action="test2.html">
        <!-- 文本输入框 :input type="text" -->
        <p>名字:<input type="text" name="username" value="hello" maxlength="10"></p>

        <!-- 密码框:input type="password" 框中内容可以隐藏-->
        <p>密码:<input type="password" name="pwd" size="10em"></p>

        <p>
            <span>性别:</span>
            <!-- 单选框:input type="radio" -->
            <input type="radio" name="sex" value="boy" checked>男
            <input type="radio" name="sex" value="girl">女
        </p>

        <p>
            <span>爱好:</span>
            <!-- 多选框:input type="checkbox" -->
            <input type="checkbox" name="love" value="eat">吃
            <input type="checkbox" name="love" value="sleep" checked>睡
            <input type="checkbox" name="love" value="play">玩
        </p>

         <p>
            <span>按钮:</span>
            <!-- 按钮:input type="button" -->
            <input type="button" name="btn1" value="点击变长">
            <!-- 图片按钮:input type="image" 点击同样可以提交-->
            <input type="image" src="1.jpg">
         </p>   

         <!-- 下拉框、列表框 -->
         <p>
            <span>国籍:</span>
            <select name="nation">
                <option value="中国">中国</option>
                <option value="美国" selected>美国</option>
                <option value="日本">日本</option>
                <option value="韩国">韩国</option>
                <option value="朝鲜">朝鲜</option>
            </select>
         </p>

         <!-- 文本域 -->
         <p>
            <span>简介:</span>
            <textarea name="textarea" cols="30" rows="5"></textarea>
         </p>

         <!-- 文件域 -->
         <p>
            <span>文件:</span>
            <input type="file" name="files">
            <input type="button" value="上传" name="upload">
         </p>

         <!-- 邮件验证 -->
         <p>
            <span>邮箱:</span>
            <input type="email" name="email">
         </p>

         <!-- URL验证 -->
         <p>
            <span>URL:</span>
            <input type="url" name="url">
         </p>

         <!-- 数字验证 -->
         <p>
            <span>商品数量:</span>
            <input type="number" name="number" max="999999999999" min="0" step="10">
         </p>

         <!-- 滑块 -->
         <p>
            <span>音量:</span>
            <input type="range" min="0" max="100" name="voice" step="20">
         </p>

         <!-- 搜索框 -->
         <p>
            <span>搜索:</span>
            <input type="search" name="search">
         </p>

        <p>
            <!-- 提交  提交后的信息:/test/test2.html?username=hello654&pwd=432&sex=girl&Submit=提交 -->
            <input type="submit" name="Submit" value="提交">
            <!-- 重置 -->
            <input type="reset" name="Reset" value="重填">
        </p>
    </form>
</body>

🚦3、表单的应用

  • 只读 readonly
  • 禁用 disabled
  • 隐藏 hidden(但是值还在)
  • 默认值 value
  • 提高用户体验,增强鼠标可用性
<p>
    <label for="mark">点我试试</label>
	<input type="text" id="mark">
</p>

🛹4、获得和设置表单提交的信息

通过JavaScript实现

<body>

    <form action="post">
        <p>
            <span>用户名:</span><input type="text" id="username">
        </p>
        
        <!-- 单选框的值,就是定义好的value -->
        <p>
            <span>性别:</span>
            <input type="radio" name="sex" value="man" checked id="boy">男
            <input type="radio" name="sex" value="women" id="girl">女
        </p>

    </form>

    <>
        //1、获取指定的按钮节点
        var input_text = document.getElementById('username');

        //2、获取值
        input_text.value;//得到输入框所输入的值

        //3、修改值
        input_text.value = 'Hello!';

        // 对于单双选框等固定的值,用boy_raido.value只能获取当前的值
        var boy_raido = document.getElementById('boy');
        var girl_radio = document.getElementById('girl');
        //解决
        boy_raido.checked;//判断是否选中

    </>
</body>

⛽5、表单初级验证

作用:

  • 数据安全性
  • 减轻服务器的压力

使用:

  • placeholder 提示信息
  • required 必填属性
  • pattern 正则表达式判断
<body>
    <h2>注册</h2>
    <form method="get" action="test2.html">

        <!-- 使用 placeholder 作为提示信息-->
        <p>
            <span>用户名:</span>
            <input type="text" name="username" placeholder="请输入用户名">
        </p>

        <!-- 使用 required 表示元素内容不能为空 -->
        <p>
            <span>密码:</span>
            <input type="password" name="psd" required>
        </p>

        <!-- 使用pattern,通过正则表达式判断 -->
        <p>
            <span>自定义邮箱:</span>
            <input type="text" name="idy_name" pattern="^[A-Za-z0-9]+$">
        </p>

        <p>
            <input type="submit" value="提交">
        </p>

    </form>
</body>

📌6、表单提交验证以及MD5加密

通过自定义脚本,获取表单内容,并对表单内容进行检查

MD5工具类

 < src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></>
  • 方法一:MD5加密
<body>
    <form method="post">
        <h2>注册</h2>
        <p>
            <span>用户名:</span><input type="text" name="username" id="username">
        </p>
        <p>
            <span>密码:</span><input type="password" name="pwd" id="password">
        </p>
        <p>
            <!-- <input type="submit"> -->
            <!-- 绑定事件 onclick 被点击 -->
            <button type="submit" onclick="check()">提交</button>
        </p>
    </form>

    < src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></>

    <>
        function check(){
            var username = document.getElementById('username');
            var pwd = document.getElementById('password');
            console.log(username.value);
            //使用 MD5 算法进行加密
            pwd.value = md5(pwd.value);
            // 结果:
            // username: 3452253
            // pwd: 747eae4eb05a78eaf03094cd9c179412
            //但是用户体验不佳,容易被发现


            console.log(pwd.value); //这里可以直接调出密码
            // pwd.value = '***'; //也是明文的
        }
    </>
</body>
  • 方案二:隐藏真实密码
<body>
    <form method="post">
        <h2>注册</h2>
        <p>
            <span>用户名:</span><input type="text" name="username" id="username">
        </p>
        <p>
            <span>密码:</span><input type="password" id="input_password">
        </p>

        <!-- 隐藏真实密码 -->
        <input type="hidden" id="md5_password" name="password">

        <p>
            <!-- <input type="submit"> -->
            <!-- 绑定事件 onclick 被点击 -->
            <button type="submit" onclick="check()">提交</button>
        </p>
    </form>

    < src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></>

    <>
        function check(){
            var username = document.getElementById('username');
            var pwd = document.getElementById('input_password');
            var md5pwd = document.getElementById('md5_password');

            md5pwd.value = md5(pwd.value);
        }
    </>
</body>
  • 方案三:通过表单绑定提交事件 ——onsubmit
<body>
    <form action="https://baidu.com" method="post" onsubmit="return check()">
        <h2>注册</h2>
        <p>
            <span>用户名:</span><input type="text" name="username" id="username">
        </p>
        <p>
            <span>密码:</span><input type="password" id="input_password">
        </p>

        <!-- 隐藏真实密码 -->
        <input type="hidden" id="md5_password" name="password">

        <p>
            <!-- <input type="submit"> -->
            <!-- 绑定事件 onclick 被点击 -->
            <button type="submit">提交</button>
        </p>
    </form>

    < src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></>

    <>
        function check(){
            var username = document.getElementById('username');
            var pwd = document.getElementById('input_password');
            var md5pwd = document.getElementById('md5_pwd');

            md5pwd.value = md5(pwd.value);

        	//可以校验表单内容,true就是通过提交,false就是阻止提交
            return true;
        }
    </>
</body>

说在最后📝

​ ✍创作不易,如果觉得文章写得还可以的话,就不要吝啬你的 👍 啦~ ✍


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值