(Web前端)H5新增属性和标签、Web Work、jQuery

autocomplete属性和list属性

类似自动补全的功能属性（可以指定"on",“off”,""不指定）

<input autocomplete="on" list="list">
<datalist id="list">
    <option label="1文字描述" value="春季男装"></option>
    <option label="2文字描述" value="夏季男装"></option>
    <option label="3文字描述" value="冬季男装"></option>
    <option label="4文字描述" value="秋季男装"></option>
</datalist>

在这里插入图片描述

autofocus自动获得焦点

网页中原则只允许一个元素使用该属性

placeholder未输入时提示信息

<input type="text" placeholder="快tm写我">

在这里插入图片描述

required属性必须写不然不能提交

pattern属性，属性值为正则表达式，提交的时候会检测是否符合指定格式

from属性外部input就属于表单的提交范围

<form id="search">
<input >
</form>
<input type="text" placeholder="快tm写我" from="search">

novalidate验证属性（from原生校验就会忽略）

checkValidity方法以boolean的形式返回验证结果

Web Worker

原本js执行时间很长的程序，页面就变得不可操作了
例如：

<body>
<div id="num"></div>
<input>
</body>
<script onload="true">
    window.onload=function (){
    var num=document.getElementById("num");
    var n= 1;
    var start=new Date();
    while(true){
        if(n>5000000000)
            break;
        n++;

    }
    var end = new Date();
        num.innerText=end-start+"ms";
    }

</script>

在这里插入图片描述
一直旋转而且不能使用input输入框
使用Web Worker后
例如：

<body>
<div id="num"></div>
<input>
</body>
<script>
    var worker=new Worker("jsHard.js");
    var num=document.getElementById("num");
    worker.onmessage=ev => {
        num.innerText=ev.data;
    }
</script>

//js文件
var n= 1;
var start=new Date();
while(true){
    if(n>500000000)
        break;
    n++;

}
var end = new Date();
var mss=end-start+"ms"


self.postMessage(mss);

在这里插入图片描述

jQuary

jQuery监听网页onload方法

 <script>
        $( function (){
            alert("页面加载完成");
        })
    </script>

jQuery获取元素简单操作

<input id="in">
<div id="text"></div>
<script>
    $("#text").text("我想显示啥就显示啥");
    $("#in").blur(function () {
        $("#text").text("接着写呀");
    });
</script>

$("#id") 根据id获取
$(“div”) 根据标签获取
$(".class") 返回的时数组
$("*") 返回所有元素

jQuery转换为Dom对象

  $("#text").get(0).innerText="写呀";

自己写的一个弹窗广告展示

<body>
<style type="text/css">
    #ad{
        width: 300px;
        height: 400px;
        background: #007aff;
        position: fixed;
        bottom: 0;
        right: 0;
        display: none;
    }
    #close{
        width: 60px;
        height: 30px;
        margin:5px ;
    }
</style>
<div id="ad">
    <button id="close">关闭</button>
</div>
</body>
<script>
    setTimeout(function () {
        $("#ad").slideDown("slow",function (){

        })
    },3000)
    $("#close").click(function () {
        $("#ad").slideUp("slow",function (){

        })
    })
</script>

在这里插入图片描述
还可以设置动画的时间和播放后执行的程序

<body>
<div id="show" style="width: 120px;height:20px;background-color: #A2B2BD ">显示或者消失</div>
<div id="box" style="width: 300px;height: 300px;background-color: #007aff"></div>
</body>
<script>
    $(function (){
        $("#show").click(function (){
            $("#box").slideToggle(3000,function () {
                $("#show").text("再点还有反应")
            })
        })
    })
</script>

在这里插入图片描述

.fadeIn() 变为不透明
fadeOut() 变为透明
fadeTo() 设置透明度
fadeToggle()

  setTimeout(function () {
            $("#fade").fadeTo(3000,0.5) //0完全透明，1不透明
        },3000)

在这里插入图片描述
隔行变色

   <table id="table1" border="1">
        <thead>  <tr><td>id</td><td>姓名</td><td>手机号</td></tr> </thead>
       <tbody>
    <tr><td>1</td><td>王一</td><td>13271323981</td></tr>
    <tr><td>2</td><td>李二</td><td>13271323981</td></tr>
    <tr><td>3</td><td>张三</td><td>13271323981</td></tr>
    <tr><td>4</td><td>刘四</td><td>13271323981</td></tr>
       </tbody>
    </table>
</body>
<script>
    $(function () {
        $("#table1 tbody tr:even").css("background-color","blue")
        $("#table1 tbody tr:odd").css("background-color","yellow")

    })
</script>

在这里插入图片描述
全选功能

 $("#table1 thead input").click(function () {
            $("#table1 tbody input").prop("checked",this.checked)
        })

属性选择

 $("#table1 thead input"[name ='select'])

属性选择要么和value相等要么value-…
获取属性值和设置属性值
.attr()获取属性值
prop（）设置属性对应的值

省市联动

<body>
    <select id="province">
        <option value="-1">请选择</option>
        <option value="0">北京市</option>
        <option value="1">河南省</option>
        <option value="2">河北省</option>
        <option value="3">陕西省</option>
        <option value="4">山东省</option>
    </select>
<select id="city">
    <option value="-1">请选择</option>
</select>
</body>
<script>
    var arr=new Array(5);
    arr[0]=new Array("北京市")
    arr[1]=new Array("郑州市","南阳市","驻马店市","濮阳市")
    arr[2]=new Array("石家庄市","唐山","秦皇岛")
    arr[3]=new Array("西安市","宝鸡市")
    arr[4]=new Array("菏泽市","济南市","青岛")
    $(function () {
        $("#province").change(function () {
            $("#city").empty()
            var id=this.value
            if (id==-1){
                $("#city").html(" <option value=\"-1\">请选择</option>")
            }else{
            for(var i=0;i<arr[id].length;i++){
            var e=document.createElement("option")
                e.innerText=arr[id][i]
                $("#city").append(e)
            }
            }
        })
    })
</script>

jQuery常见插件

Validation常用插件
pickadte选择日期插件
echarts图表插件
chosen单选多选插件
ckeditor文本编辑器

<div id="mess"></div>
    <script>
        $(function (){
            $.ajax(
                {
                    type:"get",//请求方式
                    url:"data.json",//请求地址
                    data:{ //请求数组，json对象
                        // uname:"zhangsan"//如果没有参数就不需要设置
                    },
                    dataType:"json",//预期返回的数据类型
                    success:function (data){//data是形参，则不需要设置
                        console.log(data)
                        for (m in data["mess"]){
                            $("#mess").append("<p>"+data["mess"][m]+"</p>")
                        }
                    }
                }
            )
        $("p:even").css("background-color","yellow");
        })

    </script>

jQuery Growl 插件(消息提醒)
jQuery Treeview 简单实例
实战代码：

<head>
    <meta charset="UTF-8">
    <title>学习树形菜单</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <!-- jQuery 树型菜单插件(Treeview) -->
    <script src="https://static.runoob.com/assets/js/jquery-treeview/jquery.cookie.js"></script>
    <script src="https://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.css" />
    <link rel="stylesheet" href="https://static.runoob.com/assets/js/jquery-treeview/screen.css" />
    <!-- jQuery Growl 插件(消息提醒)-->
    <script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
    <link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <h1>模仿练习树形菜单</h1>
    <div>
        <ul id="tree" class="filetree treeview-famfamfam">
            <li >
                <span class="folder">根目录</span>
                <ul>
                    <li class="folder">
                        <span class="folder">一号文件夹</span>
                        <ul>
                            <li id="warning">
                                <span class="file">警告文件.exe</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span class="folder">二号文件夹</span>
                        <ul>
                            <li id="error"> <span class="file" >错误文件.exe</span></li>
                            <li id="notice"> <span class="file">提醒文件.exe</span></li>

                        </ul>
                    </li>
                    <li>
                        <span class="folder">三号文件夹</span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
<button id="add" value="添加文件"></button>
</body>
<script>
    //树形菜单
   $("#tree").treeview( {
       toggle: function(){
       console.log("%s was toggled.", $(this).find(">span").text());
   }}
   );
   $("#add").click(function (){
       var branches = $("<li><span class='folder'>新建文件夹</span><ul>" +
           "<li><span class='file'>新建文件1</span></li>" +
           "<li><span class='file'>新建文件2</span></li></ul></li>").appendTo("#tree");
       $("tree").treeview({
           add: branches
       });
   })
   //消息提示
    $.growl({
        title:"消息提示",
        message:"消息内容"
    });
    $("#error").click(function (event){
        event.preventDefault();
        event.stopPropagation();
        return $.growl.error({
            title: "错误信息",
            message: "您主动运行了错误文件"
        })
    })
    $("#warning").click(function (event){
        event.preventDefault();
        event.stopPropagation();
        return $.growl.warning({
            title: "警告信息",
            message: "您主动运行了警告文件"
        })
    })
    $("#notice").click(function (event){
        event.preventDefault();
        event.stopPropagation();
        return $.growl.notice({
            title: "提示信息",
            message: "您主动运行了提示文件"
        })
    })
</script>

运行效果
在这里插入图片描述

seajs（解决冲突、依赖、性能问题）

引入sea.js库
变成模块 - define
调用模块 - exports - seajs.use
依赖模块 - require

根目录默认是相对sea.js位置
使用案例

test1.js文件
define(function (require,exports,module){
    //exports对外接口
    //require依赖接口
   var text= require("test2.js").text;
    function tab() {
        alert("输出测试"+text);
    }
    exports.tab=tab;
})

test2.js文件
define(function (require,exports,module) {
    var text = "测试连接";
    exports.text=text;
})

html
<head>
    <meta charset="UTF-8">
    <title>seajs</title>
    <script type="text/javascript" src="sea.js"></script>
</head>
<body>
<h1>Seajs测试</h1>
<script>
    seajs.use('test1.js',function (ex){//回调的参数，就是模块中的exports
       ex.tab();
    });
</script>
</body>

实战案例：
drag.html

<head>
    <meta charset="UTF-8">
    <title>拖拽等技术</title>
    <script type="text/javascript" src="sea.js"></script>
</head>
<body>
    <div id="div1" style="width: 200px;height: 200px;background-color: red;position: absolute">
        <div id="div2" style="width: 30px;height: 30px;background-color: yellow;position: absolute;right: 0;bottom: 0"></div>
    </div>

     <div id="div3" style="width: 100px;height: 100px;background-color: red;position: absolute;right:0;top: 0 "></div>
</body>
<script>
    seajs.use("main.js")
</script>

main.js

define(function (require,exports,module){
    var div1=document.getElementById("div1");
    var div2=document.getElementById("div2");
    var div3=document.getElementById("div3");


    require("B.js").drag(div3);

    require("C.js").scale(div1,div2);
})

B.js 移动方块

define(function (require,exports,module){
    //拖拽移动的js
    function drag(obj){
            var disX = 0;
            var disY = 0;
            obj.onmousedown =function (ev){
                var ev = ev || window.event;
                disX = ev.clientX -obj.offsetLeft;
                disY = ev.clientY -obj.offsetTop;
                document.onmousemove=function (ev){
                    var ev = ev ||window.event;
                    //限制不能出框
                    var L=require("D.js").range(ev.clientX -disX,document.documentElement.clientWidth-obj.offsetWidth,0);
                    var T=require("D.js").range(ev.clientY -disY,document.documentElement.clientWidth-obj.offsetHidth,0);
                    obj.style.left=L +"px";
                    obj.style.top = T+ "px";
                };
                document.onmouseup = function (){
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
    }
    exports.drag=drag;
})

C.js 拖拽改变大小

define(function (require,exports,module){
    //移动改变大小
    function scale(obj1,obj2){
        var disX=0;
        var disY=0;
        var disW=0;
        var disH=0;
        obj2.onmousedown = function (ev) {
            var ev = ev || window.event;
            disX=ev.clientX;
            disY=ev.clientY;
            disW=obj1.offsetWidth;
            disH=obj1.offsetHeight;
            document.onmousemove = function (ev) {
                var ev = ev || window.event;
                obj1.style.width= ev.clientX -disX +disW +"px";
                obj1.style.height=ev.clientY -disY +disH + "px";
            }
            document.onmouseup = function (){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    }

    exports.scale=scale;
})

D.js 限制方块不出浏览器

define(function (require,exports,module) {
    //限制模块范围
    function range(iNum,iMax,iMin){
        if (iNum>iMax){
            return iMax;
        }else if(iNum<iMin){
            return iMin;
        }else{
            return  iNum;
        }
    }
        exports.range=range;
})

运行效果
在这里插入图片描述
seajs加载多个模块seajs.use(["./main.js","./main2.js"],function(ex,ex2){})
seajs.config -alias(如果名字很长修改成很短的名字) -preload（提前加载）-debug

requireJS

   <script src="require.js" async="true" defer data-main="main"></script>

defer async = “true” 映入的所有.js文件都是异步加载
data-main="" 设置入口文件
【注】：每一个.html文件都要有一个入口文件，入口文件：管理当前.html页面所使用所有的.js代码（后缀引入的所有.js，后缀都可以省略）
例如：
html文件

<title>jquirejs学习</title>
    <script src="require.js" async="true" defer data-main="main"></script>

main.js

console.log("加载完成")
//引入模块
//第一个参数必须是数组
require(["add"],function (addObj){
    var result = addObj.outAdd(10,20);
    alert(result);
    addObj.outShow();
})

add.js

define(function (){
    function add(x,y) {
        return x+y;
    }
    function show() {
        console.log("执行了add.js文件")
    }
    //对外暴露
    return{
            outAdd:add,
            outShow:show
    }
})

引入多个
main.js

//我们可以配置路径，没必要在引入模块时候再写路径
require.config({
    paths:{
        //自定义模块名字：引入模块的路径
        add:"add",
        mul:"mul"
    }
})

require(["add","mul"],function (addObj,mul){
    alert(mul.mul(2,6));
    addObj.outShow();
})

其他模块引入依赖

define(["add"],function (add){
    
    function mul(x,y) {
        return x*y;
    }
    function add(x,y){
        return add.outAdd(x,y);
    }
    return {
        mul : mul,
        add : add
    }
})