前端琐碎汇总
前端琐碎汇总
一、jQuery
数字相关
- 向下取整:
Math.floor()
- 向上取整:
Math.ceil()
- 四舍五入:
number.toFix(n)
其中number为要处理的数, n为保留小数的位数- 字符串转数字:
Number()
括号中写要转换的字符串- 求最小值:
Math.min.apply(null,数组)
,数组为要取最小值的数组,最大值同理(min换成max)- 删掉数组中的元素 :
arr.splice(index,number)
arr:目标数组, index:下标, number:删除数量
方法
- 获取/赋予 属性值:
$("#id").attr(x,y)
x为属性名, y为属性值, 如果只写x为获取- 清空内容:
$("#id").empty();
- 输出到控制台:
console.log()
- 添加子页面到 :
$("#id").append(html)
- 刷新页面 :
location.reload()
- 存cookie:
$.cookie("name", value,{"expires":days})
name:cookie名, value:cookie值, days: 有效期(天)- 取cookie:
$.cookie("avatar")
- form表单数据:
$("#id").serialize()
name相关- 在url中取参数:
$.getUrlParam("参数名")
- 网页跳转:
location.href = "网页地址"
- 页面加载完成:
$(function(){ })
等同于$(document).ready(function() { })
- 页面传参:
$(location).attr("href", "网址?参数名=参数值")
- 页面传参乱码:
传递方:encodeURI("网址?参数名=参数值")
,接收方:decodeURI(获取的参数值)
- 获取dom内的内容:
$("#id").val()
,$("#id").text()
括号中填写值为赋值操作- 禁用按钮:
$("#id").attr('disabled',true)
- 自动刷新
<meta http-equiv="refresh" content="5">
每5秒刷新一次- 获取下拉框选中的文本
$("#id").find("option:selected").text()
- 表格td可编辑, 加属性
contentEditable = "true"
- 关于
onclick()
方法中本元素this
的获取//function中直接用this会指向window <div onclick="a()"> </div> function a(){ $(this) //该this指向window } //需要在元素的onchick()方法中添加this ,然后以参数接收 <div onclick="a(this)"></div> function a(this){ $(this) //此时的this是js对象, 需要$()转化为jQuery对象 }
事件
- input获得焦点时:
$("input").focus(function(){获取焦点时触发的事件(或方法)}
- input失去焦点时:
$("input").blur(function(){失去焦点时触发的事件(或方法)})
- input改变事件(实时):
$("input").on('input',function(){ })
值改变- input改变事件(实时):
$("input").on('propertychange',function(){ })
属性改变(可与input同时使用)- 鼠标点击事件:
$("id").on('click',function(){ })
- 回车键监控:
$("body").keyup(function(event){ if(event.keyCode == 13){ } })
回车键 键号13
- 鼠标移入事件 :
$("id").mouseover(function(){ })
- 鼠标移出事件 :
$("id").mouseout(function(){ })
- 返回上一页:
window.history.back(-1);
- 关于点击事件(此处值写在标签里的onclick属性)
<!--html--> <input type="button" value="modify" οnclick="changeContent()"> <!--js--> <script type="text/javascript"> //obj 是js对象, $(obj)变为jQurey对象 function ct(obj) { console.log($(obj)); //是当前的对象 形参实参都要有 console.log($(this)); //还是window对象 不变化 就是这么任性啊 console.log($(obj).attr("name")); console.log($(obj).html()); } </script>
函数
- 遍历:
$("选择器").each(function(){ alert($(this).text()) });
遍历输出每一个元素可用$(this)获取当前元素setTimeout(function(){ 延时后执行的操作 },毫秒时间)
延时
setInterval(function(){ 周期执行的操作 },毫秒时间)
周期执行
可以有返回值, 将返回值给window.clearInterval(返回值)可以停止循环
元素操作
- 元素获取添加
获取一个元素填加到另一个元素中, 直接用var dom1 = $("dom1"); $("#dom2").append(dom1);
会将dom1元素移动到dom2,而不是复制一份到dom2
如果想复制一份 在dom1后面加clone()
(克隆) 方法
二、CSS样式
- 鼠标样式 :
属性名:cursor
属性值:
–default
: 默认指针
–text
: 编辑指针
–move
: 移动
–pointer
: 小手手
–wait
: 等待
图片来自 : http://www.divcss5.com/rumen/r427.shtml
- 添加圆角: border-radius
- 去掉input搜索历史 :
autocomplete="off"
- 伪类 :
:hover
- 选择鼠标指针浮动在上面的元素:link
- 指针指向的未被访问的链接:visited
- 指针指向已被访问的链接active
- 鼠标点下时
- 层级
z-index:
设置了该属性的覆盖未设置的,都设置了的数越大越靠上层
自我笔记,不做官方参考~欢迎补充