JavaScript相关
前端页面的简单编写是Java后端开发不可或缺的技能。以下总结了部分常用的JS语法,以备使用。
部分语法
- 判断是否是 非数字: isNaN( )
true 不是数字;false 是数字
定义一个对象
: var obj = {属性名:属性值,…}遍历一个对象
: for (自定义变量名 in 集合){ }数组创建
: var 自定义数组名 = [1,… ]- 遍历数组:for(var i =0; i<数组名.length;I++) { }
- 对数组自然排序: .sort( )
- 数组末尾插入一个元素:. push( )
- 删除末尾元素(
长度减一
):.prop( ) - 删除指定位置元素(
长度不变
):delete 数组名 [下标] - 删除数组的第一个元素,并返回第一个元素的值::
shift( )
事件相关
- 页面加载完触发: onload
- 窗口离开时触发: onunload
表单相关 - 当前元素失去焦点:onblur
- 当前元素获得焦点:onfocus
- 取消事件冒泡:cancelBubble =true
DOM相关
- 操作标签体内容:innerText
- 操作包含各种标签:innerHTML
- 当前时间的标签对象:this
BOM相关
BOM :一组浏览器相关的内置对象以及他们的函数和属性
- 打开新窗口:window.open(" url ")
- 关闭窗口:close()
- 警告框:alert("…")
- 确认框:confirm("…")
- 提示输入框:prompt("…")
定时器
:setTimeout(fun,time)
在time毫秒后,执行一次fun函数
- 移除定时器:clearTimeout(
引用名
) 周期定时器
:setInterval(fun,time)
每隔time毫秒,执行一次fun函数
- 移除周期定时器:clearInterval(
引用名
) 跳转
:location.href = "url"
history特性- 退回上一页:history.back( )
- 前进:history.forward( )
- 通用:
history.go(num)
num 为负数 表示后退
num 为0 表示刷新
num 为正数表示前进
jQuery相关
https://www.w3school.com.cn/jquery/jquery_ref_events.asp
部分语法
- 通用: $(DOM对象)
遍历数组
:.each(function(idx){ });- 操作属性:
.prop("属性名",“值”)
- 操作属性:
.attr(同上)
- 隐藏:.hide(1000) 参数为 毫秒
- 显示:show(1000)
- JS页面加载完执行:window.onload = function( ){ }
- JQ页面加载完执行:$(document).ready(function( ){ })
等价于
$(function( ){ })
- 复合单击事件:toggle(fun1,fun2,fun3)
- 复合鼠标移动事件:hover(fun1,fun2)
- 彻底删除,包含自身标签:.remove( )
- 保留标签,删除文本:.empty( )
- 被选元素添加一个或多个事件处理程序:.bind(event,data,function )
- 被选元素附加数据,或者从被选元素获取数据: .data(name,value )
插件定制
http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html
jQuery为开发插件提拱了两个方法
,分别是:
- jQuery.extend();
$.extend()
为jQuery类添加类方法,可以理解为添加静态方法
- jQuery.fn.extend();
$.fn.extend()
jQuery.fn = jQuery.prototype
对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”
- 总结:
jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,