javascript

GXT988

于 2022-05-11 11:37:35 发布

阅读量101

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_61768954/article/details/124706375

版权

js的使用方式

1,内部样式
    <script type = "text/javascript">
        //内部书写js,
        //注意:type = "text/javascript"可以省略
    </script>
2,外部样式
    在项目中的js文件夹中单独创建一个后缀为.js的文件,书写js代码
    在html文件中导入js文件
        <script src = ""> </script>

js常见的函数

输出语句:document.write("HelloWorld");
在控制台打印内容:console.log("HelloWorld");
浏览器弹出一个提示框:window.alert("HelloWorld");
    简写:alert("HelloWorld");

js注释

单行注释://
多行注释:/*             */

js基本数据类型

number
    无论整数还是小数都是number,js引擎会自动提升为Number对象类型
    var a = 10;
    var b = 3.14;
string 
    无论字符还是字符串都是string,js引擎会自动提升为String对象类型
    var c = "hello";
    var d = 'a';
object
    (创建一个对象 )js引擎会自动提升为Object对象类型
    在Js中,Object对象代表所有js对象的模板!
    var e = new Object();
boolean
    true=1
    false=0
    js引擎会自动提升为 Boolean 对象类型
    var f = true
    var g = false
undefined
    未定义类型 (这种没有意义),因为没有赋值!
    var h;
查看js的变量的数据类型,使用一个函数 typeof(变量名)

js中的运算符

算数运算符:+,-,*,/,%,++,--
    注意:var a = 3/4; 值为0.75;并不会像java取数据类型一致的结果
赋值运算符:=,+=,-=,*=,/=,%=
比较运算符:<,>,<=,>=,==,!=
逻辑运算符:与&&,或||
三目运算符:(表达式)?执行true的结果:执行false的结果

js中的流程控值语句:

if(表达式){
    语句;
}
-----------------------------
if(表达式1){
    语句1;
}else if(表达式2){
    语句2;
}else if(){
    ...
}else{
    语句n;
----------------------------
switch(表达式){
    case 变量/常量:
        语句1;
        break;
    case 变量/常量:
        语句2;
        break;
    ...
    default:
        语句n;
        break;
}
注意:
    js中,数字字符串 在和number进行==,string会自动转换成number
    case语句后面: string类型数字字符串 无法自动转换为number进行对比
        js中有一个函数: js提供的 parseInt(数字字符串) ->number类型

js中的循环语句

for(初始化语句;条件表达式;控值体语句){
    循环体语句;
}
-----------------------------------
do{
    循环体;
    控值体语句;
}while(条件表达式);
----------------------------------
while(条件表达式){
    循环体;
    控值体语句;
}

js事件编程三要素

1,事件源
    就是html标签 (单击,双击...)
2,编写事件监听器
    就是编写一个函数
    function 方法名(){
        方法体;
    }
3,绑定事件监听器
    就在事件源上加上οnclick="函数名称()"

<body>
    <input type="text" id="month" placeholder="请输入月份的值" />
    <input type="button" value="查询" onclick="testSerach()" />
</body>
function testSerach(){
    var inputObject =document.getElementById("month") ;
    var content = inputObject.value ;
    content = parseInt(content) ;
    switch(content){
        case 3:
        case 4:
        case 5:
            alert("春季") ;
            break ;
        case 6:
        case 7:
        case 8:
            alert("夏季") ;
            break ; 
        case 9:
        case 10:
        case 11:
            alert("秋季") ;
            break ; 
        case 12:
        case 1:
        case 2:
            alert("冬季") ;
            break ;
        default:
            alert("非法数据") ;
            break ;
    }
}

js中如何创建数组

方式1:var 数组对象 = new Array(); //不指定长度
方式2,var 数组对象 = new Array(长度); //指定长度
方式3:arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
    简写:var 数组对象名称=  [元素1,元素2,元素3,.....] ;

js中的for-in语句

for-in语句的格式
for(var 变量名 in 数组或者对象名称){
    使用变量名;
}

Js中的函数定义以及调用

格式1 :
    function 函数名称(参数名称1,参数名称2....){
            函数的里面业务逻辑
            直接在这输出document.write("xxx") ;
    }
    调用:
        单独调:函数名称(实际参数列表) ;
                            
                            
格式2:(推荐)
    function 函数名称(参数名称1,参数名称2....){
        函数的里面的业务逻辑
        return 结果;
    }
    调用:
        赋值调用:var 最终结果变量 = 函数名称(实际参数列表) ;
定义函数的注意事项:
    1)js是弱类型语言,定义函数的时候,参数名称不能携带var
    2)js定义时候,没有返回值类型,但是函数中可以携带return语句,代表方法结束!
    3)Js中没有函数重载的概念,如果方法名相同,后面定义的函数将前面定义的函数覆盖了   
    4)实际参数列表 < 形式参数列表,函数依然会被调用,不过是"NaN",有一个形式参数没有赋值
    实际参数列表 > 形式参数列表,将实际参数的值赋值给形式参数,多余的实际参数,直接省略不计!
    5)隐藏一个数组名称:arguments,作用:将实际参数绑定给形式参数

Js内置对象Date

Js内置对象:Date日期,String字符串,Array数组,正则表达式对象..
        浏览器在解析javascript的时候,能够识别这个对象,使用里面        的方法!
日期对象的基本使用 :dateObj = new Date()
    var date = new Date() ;
    document.write(date) ;
    Mon May 09 2022 16:40:31 GMT+0800 (中国标准时间)原生Date格式
获取年份
    getYear() :当前的年份与 1900 年之间的差距
    改用getFullYear():
        var year = date.getYear() ;
        var year = date.getFullYear() ;
获取月份
    getMonth() :返回一个处于 0 到 11 之间的整数
        var month = date.getMonth()+1 ;
月中的日期 
    getDate( ): 1 到 31 之间的整数
        var monthWithDate = date.getDate() ;
getHours() 获取小时值
    document.write(date.getHours()+":") ;
getMinutes():获取分钟值
    document.write(date.getMinutes()+":") ;
getSeconds() :getSeconds()
    document.write(date.getSeconds()) ;

面试题_innerText和innerHTML属性有什么区别

任何标签都有这俩个innerText和innerHTML
这两个属性代表设置标签的文本内容
innerHTML可以加入html标签,可以被解析 (推荐)
innerText只是普通的文本内容,不能够解析html标签,如果加入html标签就会原封不动的解析成普通文本!
<body>
    <span id="tip"></span>
</body>
<script>
    var spanObject = document.getElementById("tip") ;
    通过标签对象改变属性  :innerHTML属性
        spanObject.innerHTML = "<h2>系统时间</h2>" ;
    innerText属性
        spanObject.innerText = "<h2>系统时间</h2>";
</script>

网页时钟

<body>
    <h3>当前系统时间是:</h3>
    <span id="spanTip"></span>
</body>
<script>
    function generateDate(){
        var date = new Date() ;
        var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"+date.getDate()+"&nbsp;&nbsp;"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;
        var span=document.getElementById("spanTip") ;
        span.innerHTML ="<h3>"+dateStr+"</h3>"  ;
    }
    setInterval("generateDate()",1000) ; 
</script>

js中的字符串

var s1 = new String("hello");
var s2 = new String("hello");
s1 == s2   false 
var s3 = "hello";
var s4 = "hello";
s3 == s4   true
获取指定索引处的字符: str.charAt"(index)
字符串拼接:str.concat(otherStr)
字符串颜色标记:str.fontcolor("颜色值")
字符串截取:str.substring(starString,endString)
字符串拆分:str.split("拆分字符")   拆分后为数组
anchor 方法 | big 方法 | blink 方法 | bold 方法 | charAt 方法 | charCodeAt 方法 | concat 方法 | fixed 方法 | fontcolor 方法 | fontsize 方法 | fromCharCode 方法 | indexOf 方法 | italics 方法 | lastIndexOf 方法 | link 方法 | match 方法 | replace 方法 | search 方法 | slice 方法 | small 方法 | split 方法 | strike 方法 | sub 方法 | substr 方法 | substring 方法 | sup 方法 | toLowerCase 方法 | toUpperCase 方法 | toString 方法 | valueOf 方法

js自定义对象的四中方式

方式一:有参构造
function 对象(形参1,形参2,形参3...){
    this.1 = 1;
    this.2 = 2;
    this.3 = 3;
    ...
    //z追加的功能
    this.方法名 = function(形参1,形参2...){
        方法体;
    }
    ...
}
    方法调用:var 对象名 = new 对象(实参1,实参2,实参3...);
            对象名.方法名
            输出:document.write(对象名.属性名.....)
方式二:无参构造
function 对象(){};
var 对象名 = new 对象();
对象名.属性1 = 属性值;
对象名.属性2 = 属性值;
...
对象名.方法名 = function(形参1,形参2...){}//追加功能
...
    方法调用:
            对象名.方法名
            输出:document.write(对象名.属性名.....)
方式三:Object
var 对象名 = new Object();
对象名.属性1 = 属性值;
对象名.属性2 = 属性值1;
...
对象名.方法名 = function(形参1,形参2...){}//追加功能
...
    方法调用:
            对象名.方法名
            输出:document.write(对象名.属性名.....)
方式四:json格式---字面量值的方式 ---轻量级交互格式
var 对象名 = {
    "属性1":属性值,
    "属性2":属性值,
    "属性3":属性值,
    ...
    "方法名":function(形参1,形参2...){}//追加功能
}
    方法调用:
            对象名.方法名
            输出:document.write(对象名.属性名.....)
    复杂格式:var 对象名 = [{},{},{}...]

DOM入门

Document Object Model基于文档对象模型编程
当html页面浏览器解析运行的时候,浏览器中的内置js引擎将每一个标签在解析的过程中,被封装标签对象形成一种树状结构!就是通过获取到标签对象来改变标签对象一些特有属性,从而达到js某种效果:
document就代表整个html文档
         HTML 根节点
    HEAD       BODY
META  TITLE     INPUT IMG
.........................
特有属性:
parentNode:父节点
childNodes:所有子节点
firstChild:第一个子节点对象
lastChild:最后一个子节点对象
nextSibling:下一个兄弟节点
previouSibling:上一个兄弟节点

获取标签对象的四种方式

方式1:在标签中给定id属性值,必须唯一
    document.getElementById("id属性值")
方式2:获取的标签对象列表
    docuement.getElementsByClassName("class属性值") ; 
方式3:获取的标签对象列表
    docuement.getElementsByName("name属性值") 象列表
方式4:通过标签名称获取标签对象    返回的标签对象列表
    docuement.getElementsByTagName("同名的标签名称")

js中的常见事件

点击相关的 
    单击事件 (重点)  onclick
    双击事件        ondbclick
焦点事件 (重点)
    获取焦点      onfocus
    失去焦点      onblur
选项卡发生变化的事件 (重点)        
        select标签 下拉菜单                  
        option 下拉选项
        onchange  
鼠标经过事件 :onmouseover
鼠标移出事件:onmouseout
页面载入事件 (重点):
    onload

js中的正则表达式:

\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\\' 匹配 "\" 而 "\(" 则匹配 "("。 
^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '\n' 或 '\r' 之后的位置。 
$ 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '\n' 或 '\r' 之前的位置。 
* 匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。 
+ 匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。 
? 匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。 
{n} n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。 
{n,} n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。 
{n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。刘， "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。 
? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。 
. 匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用象 '[.\n]' 的模式。 
(pattern) 匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '\(' 或 '\)'。 
(?:pattern) 匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。 
(?=pattern) 正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如， 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。 
(?!pattern) 负向预查，在任何不匹配Negative lookahead matches the search string at any point where a string not matching pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始  
x|y 匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。  
[xyz] 字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。  
[^xyz] 负值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'。  
[a-z] 字符范围。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。  
[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。  
\b 匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。  
\B 匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。 
\cx 匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。  
\d 匹配一个数字字符。等价于 [0-9]。  
\D 匹配一个非数字字符。等价于 [^0-9]。  
\f 匹配一个换页符。等价于 \x0c 和 \cL。 
\n 匹配一个换行符。等价于 \x0a 和 \cJ。 
\r 匹配一个回车符。等价于 \x0d 和 \cM。 
\s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。 
\S 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。 
\t 匹配一个制表符。等价于 \x09 和 \cI。 
\v 匹配一个垂直制表符。等价于 \x0b 和 \cK。 
\w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。  
\W 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。  
\xn 匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如， '\x41' 匹配 "A"。'\x041' 则等价于 '\x04' & "1"。正则表达式中可以使用 ASCII 编码。. 
\num 匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)\1' 匹配两个连续的相同字符。  
\n 标识一个八进制转义值或一个后向引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。 
\nm 标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有is preceded by at least nm 个获取得子表达式，则 nm 为后向引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若  n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。 
\nml 如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。 
\un 匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， \u00A9 匹配版权符号 (?)。

js中的表单校验

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            body,html{
                width: 10%;
                height: 100%;
                position: absolute;
                background-color: gray;
            }
            #top{
                width: 400px;
                height:550px;
                position: absolute;
                top:100px;
                left:550px;
                border: 0px;
                background-color: ghostwhite;
            }
            #b_1{
                position: relative;
                top: 60px;
                left: 100px;
                width: 100%;
                height: 50px;
                line-height: 50px;
                
            }
            #b_2{
                position: relative;
                top: 90px;
                left: 100px;
                width: 100%;
                height: 50px;
                line-height: 50px;
                
            }
            #b_3{
                position: relative;
                top: 120px;
                left: 100px;
                width: 100%;
                height: 50px;
                line-height: 50px;
            }
            #b_4{
                position: relative;
                top: 150px;
                left: 100px;
                width: 100%;
                height: 50px;
                line-height: 50px;
            }
            #b_5{
                position: relative;
                top: 180px;
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <form action="demo4.html" id="top" onsubmit="return testAll()" method="get">
            <div id="b_1">
                <font id="d_1">用&nbsp;&nbsp;户&nbsp;&nbsp;名:</font>
                <input type="text" id="a_1" value="" placeholder="请输入用户名" onblur="testUse()"/>
                <span id="c_1"></span>
            </div>
            <div id="b_2">
                <font id="d_2">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</font>
                <input type="password" id="a_2" value="" placeholder="请输入密码" onblur="testPs()"/>
                <span id="c_2"></span>
            </div>
            <div id="b_3">
                <font id="d_3">确认密码:</font>
                <input type="password" id="a_3" value="" placeholder="请确认密码" onblur="testRps()"/>
                <span id="c_3"></span>
            </div>
            <div id="b_4">
                <font id="d_4">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:</font>
                <input type="text" id="a_4" value="" placeholder="请输入邮箱" onblur="testEmil()"/>
                <span id="c_4"></span>
            </div>
            <div id="b_5">
                <input type="submit" id="a_5" value="注册"/>
            </div>
            <br/>
        </form>
    </body>
    <script>
        function testUse(){
            var input1 = document.getElementById("a_1").value;
            var span1 = document.getElementById("c_1");
            var reg = /^[a-zA-Z0-9]{4,14}$/
            if(reg.test(input1)){
                span1.innerHTML = "√".fontcolor("red");
                return true;
            }else{
                span1.innerHTML = "×".fontcolor("green");
                return false;
            }
        }
        function testPs(){
            var input2 = document.getElementById("a_2").value;
            var span2 = document.getElementById("c_2");
            var reg = /^[a-zA-Z0-9]{6,10}$/
            if(reg.test(input2)){
                span2.innerHTML = "√".fontcolor("red");
                return true;
            }else{
                span2.innerHTML = "×".fontcolor("green");
                return false;
            }
        }
        function testRps(){
            var input2 = document.getElementById("a_2").value;
            var input3 = document.getElementById("a_3").value;
            var span3 = document.getElementById("c_3");
            if(input2 == input3){
                span3.innerHTML = "√".fontcolor("red");
                return true;
            }else{
                span3.innerHTML = "×".fontcolor("green");
                return false;
            }
        }
        function testEmil(){
            var input4 = document.getElementById("a_4").value;
            var span4 = document.getElementById("c_4");
            var reg = /^[0-9]{8,11}@q{2}(\.com){1}$/
            if(reg.test(input4)){
                span4.innerHTML = "√".fontcolor("red");
                return true;
            }else{
                span4.innerHTML = "×".fontcolor("green");
                return false;
            }
        }
        function testAll(){
            if(testEmil() && testPs() && testRps() && testUse()){
                return true;
            }else{
                return false;
            }
        }
    </script>
</html>