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
}
})