尚硅谷JS笔记

最新推荐文章于 2022-10-16 20:00:16 发布

全糖长岛冰茶

最新推荐文章于 2022-10-16 20:00:16 发布

阅读量494

点赞数

文章标签： javaweb javascript 前端

本文链接：https://blog.csdn.net/m0_52585836/article/details/121592382

版权

javascript语言主要是完成页面的数据验证（弱类型可变）

JS与HTML结合的方式：

1.在head标签中，或者在body标签中，使用script标签来写JS代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //  alert是js语言提供的一个警告框函数
        //  它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("hello world");
    </script>
</head>

效果图如下：

2.使用script标签引入单独的js文件

JS文件命名为：Day1Import

alert("123455");

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //  src属性专门用来引入js文件路径（相对路劲或者是绝对路劲）
    //  script标签只能用来引入Js文件或者定义Js代码（二选一）
    <script type="text/javascript" src="Day1Import.js">

    </script>
</head>

js的变量类型：

数值类型（number）字符串类型（string）

对象类型（object）布尔类型（boolean）函数类型（function）

特殊的值如下：

undefined（未定义，所有js变量未赋予初始值时，默认值都为此）

null（空值）

NAN（全称：Not a Number，非数字，非数值）

定义变量格式：

var 变量名; var 变量名 = 值;

（typeof可以获取变量的类型并返回）

var i = 12;
alert(typeof(i));

==：简单数字面值的比较（“12”=12）

===:除简单数字面值的比较外，还会比较两个变量的数值类型

且运算&& 或运算|| 取反运算！

js中数组格式：

var 数组名=[]; //定义空数组

var 数组名=[1,'abc',true]; //定义数组同时赋值元素

通过数组下标赋值，最大的下标值会自动给数组做扩容处理（arr[2]=1,则arr.length=3）

函数定义的两种方式：

一：使用function关键字来定义函数

function 函数名（形参列表）{ 函数体 }

二：var 函数名 = function（形参列表）{ 函数体 }

//同样通过return进行返回

//js中不允许重载，重载会覆盖掉上一次的定义

函数的arguments隐形函数（只在function函数内）

在function函数中不需要定义，却可以直接用来获取所有参数的变量，称为隐形函数

        function fun(){
            alert(arguments[1]);
        }
        fun(1,"ad");

上图输出则为：ad

Object形式的自定义对象：

对象的定义：

var 变量名 = new Object(); //对象实例（空对象）

变量名.属性名 = 值； //定义一个属性

变量名.函数名 = function(){}; //定义一个函数

对象的访问：

变量名.属性 / 函数名（）；

    <script type="text/javascript">
        var obj = new Object();
        obj.name= "华仔";
        obj.age = 19;
        obj.fun = function (){
            alert("姓名："+this.name+",年龄"+this.age);
        }
        obj.fun();
    </script>

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

var 变量名 = {

属性名：值；

函数名：function(){} //定义一个函数

}；

访问：变量名.属性 / 函数名（）；

JS事件：电脑输入设备与页面进行交互的响应

常用事件：

onload加载完成事件页面加载完成后，页面js代码的初始化

onclick单击事件常用于按钮的点击响应事件

onblur失去焦点事件用于输入框失去焦点后验证期输入内容是否合法

onchange内容发生改变事件用于下拉列表和输入框内容发生改变后操作

onsubmit表单提交事件用于表单提交前，验证所有表单项是否违法

事件注册：告诉浏览器当事件响应后要执行那些操作代码

静态注册：通过HTML标签的事件属性直接赋于事件相应后的代码

动态注册：先通过js代码得到标签的dom对象，通过dom对象.事件名=function(){}，赋于事件响应后的代码（获取标签对象、标签对象.事件名=function(){}）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onload事件方法
        function onloadfun(){
            alert('静态注册onload事件');
        }
    </script>
</head>
<body onload="onloadfun()">
    <!--onload事件是浏览器解析完页面后自动触发的页面-->

</body>

onclick事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickfun(){
            alert("静态注册onclick事件");
        }

        //动态注册onclick事件
            window.onload=function (){
                /**1.获取标签对象
                 * document是jsp提供的一个对象（文档）
                 * getElementById通过id属性获取对象标签
                 * @type {HTMLElement}
                 */
            var btnobj = document.getElementById("btn01");
            alert(btnobj);
            btnobj.onclick = function (){
                alert("动态注册的onclick事件");
            }
        }
    </script>
</head>
<body>
    <button onclick="onclickfun()">按钮1</button>
    <button id="btn01">按钮2</button>
</body>

onblur失去焦点事件：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onblurfun(){
            //静态注册失去焦点事件
            //console是控制台对象，由JSP提供，专门用来向浏览器的打印台打印输出，用于测试
            //log()是打印的方法
            console.log("静态注册失去焦点事件");
        }
        //动态注册onblur事件
        window.onload=function (){
            var passwordobj = document.getElementById("password");
            passwordobj.onblur = function (){
                console.log("动态失去焦点事件");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" onblur="onblurfun()"><br/>
    密码:  <input id = "password" type="text">
</body>

onchange内容发生改变事件：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangefun(){
            alert("女神已经run了")
        }

        //动态注册onchange事件
        window.onload = function (){
            var selobj = document.getElementById("sel01");
            selobj.onchange = function (){
                alert("男神已经run了");
            }
        }
    </script>
</head>
<body>
    请选择你心目中的女神：
    <!--静态注册charge事件-->
    <select onchange="onchangefun()">
        <option>--女神--</option>
        <option>芳芳</option>
        <option>美美</option>
        <option>佳佳</option>
        <option>滴滴</option>
    </select>

    <select id="sel01">
        <option>--男神--</option>
        <option>杰杰</option>
        <option>傻傻</option>
        <option>哈哈</option>
        <option>人人</option>
    </select>
</body>

（两次选择相同的标签事件不会触发）

onsubmit表单提交事件：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onsubmitfun(){
            //要验证所有表单是否合法，若有一个不合法则阻止表单提交
            alert("静态注册表单提交事件-----发现不合法")

            return false;
        }

        //动态注册
        window.onload=function (){
            var onsubmitobj = document.getElementById("form01")
            onsubmitobj.onsubmit = function () {
                alert("动态注册表单提交事件-----发现不合法");
                return false;
            }
        }
    </script>
</head>
<body>
    <!--return false 可以阻止表单提交-->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun()">
        <input type="submit" value="静态注册">
    </form>
    <form action="http://localhost:8080" method="get" id="form01">
        <input type="submit" value="动态注册">
    </form>
</body>

DOM模型:将文档中的标签、属性、文本、转换为对象来管理

一：Document管理了所有的HTML文档内容

二：document是一种树结构的文档，有层级关系

三：能把所有的标签对象化

四：可以通过document访问所有的标签对象

Document方法介绍：

document.getElementById（通过标签的id属性查找标签dom对象，elementId是标签的id值属性）

document.getElementsByName（通过标签的name属性查找标签的dom对象，elementName是标签的name属性）

document.getElementsByTagName（通过标签名查找标签dom对象，tagname是标签名）

document.createElement（方法，通过给定的标签名，创建一个标签对象，tagName是要创建的标签名）

注意：

一:如果有id属性，优先使用getElementById方法进行查询

二：如果没有id属性，优先使用getElementsByName方法来查询

如果id属性和name属性都没有最后按标签名查getElementsByTagName

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
         *需求：当用户点击了校验按钮，熬获取输出框中的内容，然后验证其是否合法。
         * 验证的规则是：必须有字母、数字、下划线组成，并且长度是5到12位
         */
        function onclickfun(){
            //1.当我们要操作一个标签时，一定要先获取这个id对象
            var usernameobj = document.getElementById("username");
            //2.[object HTMLInputElement],它就是dom对象
            var usernameText = usernameobj.value;
            //3.如何验证字符串，需要用到正则表达式
            var patt = /^\w{5,12}$/;
            /*
             *test（）方法用于测试某个字符串，是不是匹配我的字符
             * 匹配则返回true,否则返回false
             */
            if(patt.test(usernameText)){
                alert("用户名合法");
            }
            else{
                alert("用户名不合法");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg">
    <button onclick="onclickfun()">校验</button>
</body>

正则表达式

实例：

     //表示字符串中，是否含有字母e
        //var patt = new RegExp("e");
        //var patt = /e/; //也是正则表达式对象
        //表示字符串中，是否含有字母a或b或c
        //var patt = /[abc]/;
        //表示字符串是否包含字母，数字，下划线
        //var patt = /\w/;

两种常用的验证方式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
         *需求：当用户点击了校验按钮，熬获取输出框中的内容，然后验证其是否合法。
         * 验证的规则是：必须有字母、数字、下划线组成，并且长度是5到12位
         */
        function onclickfun(){
            //1.当我们要操作一个标签时，一定要先获取这个id对象
            var usernameobj = document.getElementById("username");
            //2.[object HTMLInputElement],它就是dom对象
            var usernameText = usernameobj.value;
            //3.如何验证字符串，需要用到正则表达式
            var patt = /^\w{5,12}$/;
            /*
             *test（）方法用于测试某个字符串，是不是匹配我的字符
             * 匹配则返回true,否则返回false
             */

            var usernamespanobj = document.getElementById("usernamespan");
            //innerHTML 表示起始标签和结束标签中的内容
            //innerHTML 这个属性可读，可写
            if(patt.test(usernameText)){
                //alert("用户名合法");
                usernamespanobj.innerHTML = "用户名合法";
                //采用图片方式，语法如下：
                //usernamespanboj.innerHTML = "<img src = "\...\" width = \"18\" height=\"18\">";
            else{
                //alert("用户名不合法");
                usernamespanobj.innerHTML = "用户名不合法";

            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg">
    <span id="usernamespan" style="color:red"></span>
    <button onclick="onclickfun()">校验</button>
</body>

以上验证方式不再通过alert输出提示信息（提示框），而是在HTML页面直接给出反馈。

getElementByName方法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkall(){
            //让所有复选框都选上
            //document.getElementByName()是根据指定的name属性查询返回多个标签对象集合
            //这个集合的操作和数组一样
            //集合中每个对象都是dom对象
            //这个集合的元素顺序是他们在html页面从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            //checked表示复选框的选中状态，如果选中是true，否则为false
            //checked属性可读，可写
            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;
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">C++;
    <input type="checkbox" name="hobby" value="java" checked="checked">Java;
    <input type="checkbox" name="hobby" value="js" checked="checked">JavaScript;
    <br/>
    <button onclick="checkall()">全选</button>
    <button onclick="checkno()">全不选</button>
</body>

getElementsByTagName方法

    <script type="text/javascript">
        function checkall(){
            var inputs = document.getElementsByTagName("input");
            for(var i=0; i<inputs.length;i++)
            {
                inputs[i].checked = true;
            }
        }
    </script>

上文中全选的方法改写如上：

节点的常用属性和方法：（节点就是标签对象）

方法：

通过具体的元素节点调用

getElementsaByTagName()方法，获取当前节点的指定标签名孩子节点

appendChild（oChildNode）方法，可以添加一个子节点，oChildNode是要添加的孩子节点

其余补充：（使用JS代码来创建HTML标签并显示在页面上）

    <script type="text/javascript">
        window.onload = function(){
            //使用Js代码来创建HTML标签，并显示在页面上
            //标签内容是<div>“滴滴滴”</>div>
            var divobj = document.createElement("div");//在内存中
            divobj.innerHTML="滴滴滴";                     //依然在内存中
            document.body.appendChild(divobj);
        }
    </script>

jQuery（辅助javascript开发的js类库）

<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
     <script src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $btnobj = $("#btnId");
            $btnobj.click(function(){
                alert("jquery的单击事件");
            })
        })
    </script>

src为在线导入jQuery，上述代码含义为jquery的单击事件

为按钮添加相应函数步骤：使用jquery查询到标签对象，使用标签对象.click（function(){}）

$为jquery的核心函数：

传入参数为【函数】时：表示页面加载完成之后，相当于window.onload = function(){}

传入参数为【HTML字符串】时：根据这个字符串创建元素节点对象

传入参数为【选择器字符串】时：根据这个字符串查找元素节点对象

（$（“#id属性值”））； id选择器，根据id查询标签内容

（$（“标签名”））；标签名选择器，根据指定的标签名查询标签对象

（$（“.class属性值”））类型选择器，可以根据class属性值查询标签对象

传入参数为【dom对象】时，将dom对象包装成jquery对象返回。

jquery对象和dom对象的区分

dom对象：

通过getElementById()、getElementsByName()、getElementsByTagName、createElement（）方法创建的对象 alert效果（object HTMLXXXXXXElement）

jquery对象：

通过jquery提供的API对象、包装的Dom对象、提供的API查询到的对象

alert效果（object object）

jquery对象是dom对象的数组+jquery提供的一系列功能函数

jquery对象不能使用dom对象的属性和方法

dom对象也不能使用jquery对象的属性和方法

dom对象转jquery对象：$（DOM对象）

jquery对象转dom对象：jquery对象【下标】取出相应的DOM对象

jquery选择器

基本选择器：

#ID 选择器：根据id查找标签对象

.class 选择器：根据class查找对象

element 选择器：根据标签名查找标签对象

* 选择器：表示任意的，所有的元素

selector1,selector2 组合选择器：合并选择器1，选择器2的结果并返回

层次选择器：

ancestor descendant 后代选择器：在给定的祖先元素匹配所有的后代元素

parent > child 子元素选择器：在给定的父元素下匹配所有的子元素

prev+next 相邻元素选择器：匹配所有紧邻在prev元素后的next元素

prev~siblings 之后的兄弟元素选择器：匹配prev元素之后的所有siblings元素

基本过滤器：

内容过滤器：

:contains(text) 匹配包含给定文本的元素

:empty 匹配所有的不包含子元素或者文本的空元素

:parent 匹配含有子元素或者文本的元素

:has（selector）匹配含有选择器所匹配的元素的元素

属性过滤器：

表单过滤选择器：

:input 匹配所有的input，textarea，select和button元素

:text 匹配所有文本输入框

:password 匹配所有的密码输入框

:radio 匹配所有的单选框

:checkbox 匹配所有的复选框

:submit 匹配所有的提交按钮

jQuery元素筛选

jquery属性操作

html() 可以设置和获取起始标签和结束标签中的内容跟dom属性innerHTML一样

text() 可以设置和获取起始标签和结束标签中的文本跟dom属性innerText一样

val() 可以设置和获取表单项的value属性值跟dom属性value一样

attr() 可以设置和获取属性值

prop() 可以设置和获取属性值

    <script type="text/javascript">
         $(function(){
             //不传参数是获取，传递参数是设置
           alert($("div").html)     //获取 
           $("div").html("<h1>我是div的标题</h1>");  //设置
         })
        //1.选择id
    </script>

DOM的增伤改

内部插入：

appendTo() a.append(b) 把a插入到b子元素末尾，成为最后一个子元素

prependTo() a.prependTo(b) 把a插到b所有子元素前面，成为第一个子元素

    <script type="text/javascript">
        $(function(){
            $("<h1>标题</h1>").appendTo("div");
        })
    </script>

CSS样式操作

addClass() 添加样式

removeClass 删除样式

togggleClass() 有就删除，没有就添加样式

offest() 获取和设置元素的坐标

jquery动画

show() 将隐藏的元素显示

hide() 将可见的元素隐藏

toggle() 可见就隐藏，不可见就显示

（以上方法可以添加参数，第一个参数是动画执行的时长，以毫秒为单位）

（第二个参数是动画的回调函数（动画完成后自动调用的函数））

fadeIn() 淡入（慢慢可见）

fadeOut 滚出（慢慢消失）

fadeTo() 在指定时长内慢慢地将透明度修改到指定的值，0透明，1完全可见，0.5半透明

fadeToggle() 淡入/淡出切换

jquery事件操作

$(fuction(){})和window.onload = function(){}

jquery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后马上执行

原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成

jquery页面加载完成之后先执行，原生js的页面加载完成之后

原生js的页面加载完成之后，只会执行最后一次的赋值函数

jquery的页面加载完成之后是全部把注册的function函数，依次全部执行

jquery中其他的事件处理方法：

事件的冒泡

事件的冒泡是指，父子元素同时监听同一个事件，当触发子元素的事件时，同一个事件也被传递到了父元素的事件里去响应

阻止事件的冒泡：在事件函数体内，return false可以阻止事件的冒泡传递

javascript事件对象

全糖长岛冰茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
尚硅谷JS笔记

javascript语言主要是完成页面的数据验证（弱类型可变）JS与HTML结合的方式：1.在head标签中，或者在body标签中，使用script标签来写JS代码<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // alert是js语言提供的一个警告框函数 /
复制链接

扫一扫