JavaScript

最新推荐文章于 2024-07-22 14:15:06 发布

皮卡qiu~

最新推荐文章于 2024-07-22 14:15:06 发布

阅读量169

点赞数

分类专栏： Java web 文章标签： js java javascript

本文链接：https://blog.csdn.net/Sruggle/article/details/108972056

版权

Java web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、JavaScript和html代码的结合方式

1.第一种方式

<!-- JavaScript和html代码的结合方式JavaScript和html代码的结合方式1
需求
①在head或body标签中，使用script标签来书写JavaScript代码
基础知识

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        //alert是JavaScript语言提供的警告框函数，可接受任意参数作为警告框的提示信息
        alert("hello javaScript");
    </script>
</head>
<body>

</body>
</html>

2.第二种方式

//js代码
alert("hello javaScript");

<!-- JavaScript和html代码的结合方式JavaScript和html代码的结合方式2
需求
①使用script标签引入单独的JavaScript代码文件
基础知识
1.src属性专门用来引入js文件路径
2.script标签可以用来定义js代码，也可以用来引入js文件，但是两个功能二选一，不能同时使用
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript" src="js.js"></script>
</head>
<body>

</body>
</html>

二、基础知识

1.逻辑运算

<!-- 逻辑运算
需求
①
基础知识
1.在js中，所有变量都可作为boolean类型变量去使用，0，null，undefined，""(空串)都认为是false
2.&& 且运算有两种情况
  1.表达式全为真时，返回最后一个表达式的值
  2.表达式中有一个为假时，返回第一个为假的表达式的值
3.|| 或运算有两种情况
  1.表达式全为假时，返回最后一个表达式的值
  2.表达式中有一个为真时，返回第一个为真的表达式的值
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        /*
        这里验证基础知识1
        var a = 0;//null、undefined、""意思均相同
        if(a) {
            alert("0为真")
        } else {
            alert("0为假")
        }
        这里验证基础知识2
        var a = "abc";
        var b = true;
        var d = false;
        var c = null;
        //alert(a && b);//true
        //alert(b && a);//abc
        alert(a && d);
        */
    </script>
</head>
<body>

</body>
</html>

2.数组

<!-- 数组
需求
①演示js数组
基础知识
1.js数组自动扩容
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        var arr = [];//定义一个空数组
        arr[0] = 12;
    </script>
</head>
<body>

</body>
</html>

3.函数

函数的第一种定义方式

<!-- 函数的第一种定义方式
需求
①演示js函数
基础知识
1.函数格式
  function 函数名(形参列表) {
      函数体
  }
2.定义带有返回值的函数
  只需在函数体内直接使用return语句返回值即可
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        //定义一个无参函数
        function fun() {
           alert("无参函数被调用了");
       }
       //fun();
       //定义一个有参函数
        function fun2(a,b) {
            //alert("有参函数fun2()被调用了 a=" + a + ",b=" +b);
        }
        fun2(1,2);
        //定义带有返回值的函数
        function fun3(num1,num2) {
            var result = num1 + num2;
            return result;
        }
        alert(fun3(100,150));
    </script>
</head>
<body>

</body>
</html>

函数的第二种定义方式

<!-- 函数的第二种定义方式
需求
①演示js函数
基础知识
1.函数格式
  var 函数名 = function(形参列表) {
      函数体
  }
2.定义带有返回值的函数
  只需在函数体内直接使用return语句返回值即可
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        var fun = function () {
            alert("无参函数");
        }
        //fun();
        var fun2 = function (a,b) {
            alert("有参函数a="+a+",b="+b);
        }
        //fun2(1,2);
        var fun3 = function (num1,num2) {
            return num1+num2;
        }
        alert(fun3(1,2));
    </script>
</head>
<body>

</body>
</html>

4.自定义对象

Object形式的自定义对象

<!-- JS中的自定义对象
需求
①Object形式的自定义对象
基础知识
1.对象的定义
  var 变量名 = new Object(); //对象实例(空对象)
  变量名.属性名 = 值;//定义一个属性
  变量名.函数名 = function(){}//定义一个函数
2.对象的访问
  变量名.属性名/函数名();
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        var obj = new Object();
        obj.val = 10;
        obj.fun = function() {
            alert(obj.val);
        }
        obj.fun();
    </script>
</head>
<body>
</body>
</html>

{}花括号形式的自定义对象

<!-- JS中的自定义对象
需求
①{}花括号形式的自定义对象
基础知识
1.对象的定义
  ①var 变量名 = {}; //对象实例(空对象)
  ②var 变量名 = {
     属性名1:值1,//定义一个属性
     属性名1:值2,
     函数名:function(){} //定义一个函数
  };
2.对象的访问
  变量名.属性名/函数名();
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        var obj = {
            name:"naruto",
            age:16,
            introduction:function () {
                alert("name="+this.name+",age="+this.age);
            }
        };
        obj.introduction();
    </script>
</head>
<body>
</body>
</html>

5.JS中的事件

基础知识

<!-- JS中的事件
需求

基础知识
1.事件的概念
  事件是由电脑输入设备与页面进行交互的响应
2.常用的事件
  onload   加载完成事件---常用于页面js代码初始化操作
  onclick  单击事件---常用于按钮的点击响应操作
  onblur   失去焦点事件---常用于输入框失去焦点后，验证其输入内容是否合法
  onchange 内容发生改变事件---常用于下拉列表和输入框内容发生改变后操作
  onsubmit 表单提交事件---常用于表单提交前，验证所有表单项是否合法
3.事件的注册(绑定)
  1.概念
    告诉浏览器，当事件响应后要执行哪些操作代码
  2.静态注册
    通过html标签的事件属性直接赋予事件响应后的代码
  3.动态注册
    1.概念
      先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码
    2.步骤
      1.获取标签对象
      2.标签对象.事件名 = function(){}
  
-->

onload事件演示

<!-- JS中的事件
需求
1.onload事件演示
基础知识
1.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        function onloadFun() {
            alert('静态注册onload事件，所有代码');
        }
        //onload事件动态注册，是固定写法
        window.onload = function () {
            alert("动态注册的onload事件");
        }
    </script>
</head>
<!-- 静态注册onload事件
<body onload="alert('静态注册onload事件')">
<body onload="onloadFun();">-->
<body>
</body>
</html>

onclick事件的演示

<!-- JS中的事件
需求
1.onclick事件演示
基础知识
1.document是js语言提供的一个对象(文档)，比如当前包含所有代码的整个页面
2.getElementById("")，根据id获取元素(html标签)
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert('静态注册onclick事件');
        }
        //onclick事件动态注册
        window.onload = function () {
            //1.获取标签对象
            var btnObj = document.getElementById("btn2");
            //2.通过标签对象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("动态注册的onclick实际");
            }
        }
    </script>
</head>
<!-- 静态注册onload事件-->
<body>
    <button onclick="onclickFun();">按钮1</button>
    <button id="btn2" onclick="onclickFun();">按钮2</button>
</body>
</html>

onblur事件的演示

<!-- JS中的事件
需求
1.onblur事件演示(失去焦点事件)
基础知识
1.console是控制台对象，由js提供，用来向浏览器控制台打印输出，用于测试使用
2.log()是打印的方法
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        //静态注册失去焦点事件
        function fun() {
            console.log("静态注册失去焦点");
        }
        //动态注册失去焦点事件
        window.onload = function () {
            //1.获取标签对象
            var pwObj = document.getElementById("password");
            //2.对象名.事件名 = function(){}
            pwObj.onblur = function () {
                console.log("动态注册失去焦点");
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text" onblur="fun()"><br/>
    密码:<input id="password" type="text" ><br/>
</body>
</html>

onchange事件的演示

<!-- JS中的事件
需求
1.onchange事件演示(内容发生改变事件)
基础知识
1.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        //静态注册onchange事件
        function onchangeFun() {
            alert("球员已经改变了");
        }
        //动态注册onchange事件
        window.onload = function () {
            //1.获取标签对象
            var selObj = document.getElementById("sel01");
            //2.标签对象.事件名 = function(){}
            selObj.onchange = function () {
                alert("球员已经改变了")
            }
        }
    </script>
</head>
<body>
    请选择你心中的球员(静态注册):
    <select onchange="onchangeFun()">
        <option>--球员--</option>
        <option>库里</option>
        <option>克莱</option>
        <option>格林</option>
    </select>

    请选择你心中的球员(动态注册):
        <select id="sel01">
            <option>--球员--</option>
            <option>帕克</option>
            <option>吉诺比利</option>
            <option>邓肯</option>
        </select>
</body>
</html>

onsubmit表单提交事件

<!-- JS中的事件
需求
1.onsubmit事件演示(表单提交事件)
基础知识
1.若发生错误，则不应提交表单，静态注册要在onsubmit中设置return false 或 onsubmitFun()
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        //静态注册onsubmit事件
        function onsubmitFun() {
            alert("静态注册表单提交");
            return false;
        }
        //动态注册onsubmit事件
        window.onload = function () {
            //1.获取标签对象
            var subObj = document.getElementById("sub01");
            //2.标签对象.事件名 = function(){}
            subObj.onsubmit = function () {
                alert("动态注册表单提交");
                return true;
            }
        }
    </script>
</head>
<body>
    <form action="http://localhost:8000" method="get" onsubmit="return onsubmitFun()">
        <input type="submit" value="静态注册">
    </form>
    <form id="sub01" action="http://localhost:8000">
        <input type="submit" value="动态注册">
    </form>
</body>
</html>

6.DOM模型

基本介绍

<!-- DOM模型
需求
1.
基础知识
1.DOM全称是文档对象模型(Document Object Model)，它的作用就是将文档(当前页面即html文档)中的标签、属性、
  文本转换为对象来管理
2.对Document对象的理解
  1.Document管理所有的html文档的内容
  2.Document是一种树结构的文档，有层级关系
  3.Document能够把所有的标签对象化
  4.可以通过Document访问所有的标签对象
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>

</body>
</html>

Document对象----getElementById

<!-- DOM模型
需求
1.验证用户名是否有效，必须由字母、数字、下划线组成，长度为5~12位
基础知识
1.正则表达式对象中的test()方法用于测试某个字符串是不是匹配规则，匹配返回true，不匹配返回false
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        function onclickFun() {
            //1.获取标签对象
            var usernameObj = document.getElementById("username");
            var usernameText = usernameObj.value;
            //利用正则表达式验证文本是否合法
            var patt = /^\w{5,12}$/;
            if(patt.test(usernameText)) {
                alert("用户名合法");
            } else {
                alert("用户名不合法");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg"/>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

正则表达式对象

<!-- 正则表达式对象
需求
1.
基础知识
1.两种方式创建正则表达式对象(二者等效)
  1.var patt = new RegExp("pattern");
  2.var patt = /pattern/;
2.常用方法
  1.查找字符串是否包含一个字符---/ch/
  2.查找字符串是否包含任意字符---/[ch1ch2ch3...]/
  3.查找字符串是否包含任意小写字母/大写字母---[a-z]/[A-Z]
  4.查找字符串是否包含任意数字---/[0-9]/
3.元字符
  1.\w查找单词字符，包括字母、数字,以及下划线
4.量词
  1.查找字符串中至少包含一个ch---/ch+/
  2.查找字符串中至少包含零个或多个ch---/ch*/
  3.查找字符串中至少包含零个或一个ch---/ch?/
  4.查找字符串中是否包含连续的3个字符---/ch{3}/
  5.查找字符串中是否包含3~5个连续的字符---/ch{3,5}/
  6.查找字符串中是否包含至少3个连续的字符---/ch{3,}/
  7.查找字符串中是否以ch结尾---/ch$/
  8.查找字符串中是否以ch开始---/^ch/
  9.要求字符串从头到尾完全匹配---/^ch{3,5}$/
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        //创建正则表达式对象，要求字符串中必须包含e
        var patt = new RegExp("e");
        var patt2 = /[a2322]/;
        var str = "abcd"
        alert(patt2.test(str));
    </script>
</head>
<body>
</body>
</html>

常见的验证提示效果

<!-- 两种常见的验证提示效果
需求
1.验证用户名是否有效，必须由字母、数字、下划线组成，长度为5~12位
基础知识
1.innerHTML表示起始标签和结束标签中的内容，该属性可读、可写
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        function onclickFun() {
            //1.获取标签对象
            var usernameObj = document.getElementById("username");
            var usernameText = usernameObj.value;
            //利用正则表达式验证文本是否合法
            var patt = /^\w{5,12}$/;

            var usernameSpanObj = document.getElementById("usernameSpan");

            if(patt.test(usernameText)) {
                //提示方式1(文字)
                usernameSpanObj.innerHTML = "用户名合法";
                //提示方式2（图片）
                //usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            } else {
                usernameSpanObj.innerHTML = "用户名不合法";
                //usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            }

        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg"/>
    <span id="usernameSpan" style="color: red;">用户名不合法</span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

getElementsByName

<!-- getElementsByName
需求
1.演示全选、全不选与反选
基础知识
1.getElementsByName()是根据指定的name属性查询返回多个标签对象集合
2.集合中的元素顺序是由html页面中标签对象的顺序决定的
3.checked表示复选框的选中状态，选中为true，否则为false，该属性可读、可写
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        function checkAll() {
            //获取标签对象
            var hobbies = document.getElementsByName("hobby");
            for(var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = true;
            }

        }
        function checkNo() {
            //获取标签对象
            var hobbies = document.getElementsByName("hobby");
            for(var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }

        }
        function checkReverse() {
            //获取标签对象
            var hobbies = document.getElementsByName("hobby");
            for(var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
            }

        }
    </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox" name="hobby" value="cpp">C++
    <input type="checkbox" name="hobby" value="cpp">Java
    <input type="checkbox" name="hobby" value="cpp">JavaScript
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

getElementsByTagName

<!-- getElementsByTagName
需求
1.
基础知识
1.getElementsByTagName是根据标签名来获取集合
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        function checkAll() {
            //按照指定标签名查询并返回集合(集合中都是dom对象，顺序与html页面中一致)
            var inputs = document.getElementsByTagName("input");
            for(var i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox"  value="cpp">C++
    <input type="checkbox"  value="cpp">Java
    <input type="checkbox"  value="cpp">JavaScript
    <br/>
    <button onclick="checkAll()">全选</button>
</body>
</html>

节点的常用属性和方法

<!-- 节点的常用属性和方法
需求
1.
基础知识
1.节点就是标签对象，节点的属性和方法也就是标签对象的属性和方法
2.常用的属性
  1.childNodes---获取当前节点的所有子节点
  2.firstChild---获取当前节点的第一个子节点
  3.lastChild---获取当前节点的最后一个子节点
  4.parentNode---获取当前节点的父节点
  5.nextSibling---获取当前节点的下一个节点
  6.previousSibling---获取当前节点的上一个节点
  7.className---获取/设置标签的class属性值
  8.innerHTML---获取/设置起始标签和结束标签中的内容
  9.innerText---获取/设置起始标签和结束标签中的文本
3.常用的方法---通过具体的元素节点调用
  1.getElementsByTagName()---获取当前节点的指定标签名孩子节点
  2.appendChild(oChildNode)---添加一个子节点，oChildNode是要添加的孩子节点
-->

document对象的补充说明

<!-- 节点的常用属性和方法
需求
1.使用js代码来创建html标签，并显示在页面上，标签内容是<div>国哥好帅<div>
基础知识
1.document.createElement("")---创建标签
2.appendChilde("");---添加子元素
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        window.onload = function () {
            var divObj = document.createElement("div");
            divObj.innerHTML = "国哥好帅";//对标签内容赋值
            document.body.appendChild(divObj);//相当于添加到body中
        }
    </script>
</head>
<body>
</body>
</html>

皮卡qiu~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

一、JavaScript和html代码的结合方式1.第一种方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>t
复制链接

扫一扫

专栏目录