前端琐碎汇总

前端琐碎汇总

一、jQuery

数字相关

1. 向下取整: Math.floor()
2. 向上取整: Math.ceil()
3. 四舍五入: number.toFix(n) 其中number为要处理的数, n为保留小数的位数
4. 字符串转数字: Number() 括号中写要转换的字符串
5. 求最小值: Math.min.apply(null,数组) ,数组为要取最小值的数组,最大值同理(min换成max)
6. 删掉数组中的元素 : arr.splice(index,number) arr:目标数组, index:下标, number:删除数量

方法

1. 获取/赋予 属性值: $("#id").attr(x,y) x为属性名, y为属性值, 如果只写x为获取
2. 清空内容: $("#id").empty();
3. 输出到控制台: console.log()
4. 添加子页面到 : $("#id").append(html)
5. 刷新页面 : location.reload()
6. 存cookie:$.cookie("name", value,{"expires":days}) name:cookie名, value:cookie值, days: 有效期(天)
7. 取cookie: $.cookie("avatar")
8. form表单数据: $("#id").serialize() name相关
9. 在url中取参数: $.getUrlParam("参数名")
10. 网页跳转: location.href = "网页地址"
11. 页面加载完成: $(function(){ }) 等同于 $(document).ready(function() { })
12. 页面传参: $(location).attr("href", "网址?参数名=参数值")
13. 页面传参乱码: 传递方:encodeURI("网址?参数名=参数值") ,接收方:decodeURI(获取的参数值)
14. 获取dom内的内容: $("#id").val(), $("#id").text() 括号中填写值为赋值操作
15. 禁用按钮: $("#id").attr('disabled',true)
16. 自动刷新 <meta http-equiv="refresh" content="5"> 每5秒刷新一次
17. 获取下拉框选中的文本 $("#id").find("option:selected").text()
18. 表格td可编辑, 加属性 contentEditable = "true"
19. 关于 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对象
}

事件

1. input获得焦点时:$("input").focus(function(){获取焦点时触发的事件(或方法)}
2. input失去焦点时:$("input").blur(function(){失去焦点时触发的事件(或方法)})
3. input改变事件(实时): $("input").on('input',function(){ }) 值改变
4. input改变事件(实时): $("input").on('propertychange',function(){ }) 属性改变(可与input同时使用)
5. 鼠标点击事件:$("id").on('click',function(){ })
6. 回车键监控: $("body").keyup(function(event){ if(event.keyCode == 13){ } })

回车键 键号13

7. 鼠标移入事件 : $("id").mouseover(function(){ })
8. 鼠标移出事件 : $("id").mouseout(function(){ })
9. 返回上一页: window.history.back(-1);
10. 关于点击事件(此处值写在标签里的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>

函数

1. 遍历:$("选择器").each(function(){ alert($(this).text()) }); 遍历输出每一个元素可用$(this)获取当前元素
2. setTimeout(function(){ 延时后执行的操作 },毫秒时间) 延时

3. setInterval(function(){ 周期执行的操作 },毫秒时间) 周期执行
   可以有返回值, 将返回值给window.clearInterval(返回值)可以停止循环

元素操作

1. 元素获取添加
   获取一个元素填加到另一个元素中, 直接用

var dom1 = $("dom1");
$("#dom2").append(dom1);

会将dom1元素移动到dom2,而不是复制一份到dom2
如果想复制一份 在dom1后面加 clone() (克隆) 方法

二、CSS样式

1. 鼠标样式 :
   属性名:cursor
   属性值:
   – default : 默认指针
   – text : 编辑指针
   – move : 移动
   – pointer : 小手手
   – wait : 等待
   
   图片来自 : http://www.divcss5.com/rumen/r427.shtml

2. 添加圆角: border-radius

3. 去掉input搜索历史 : autocomplete="off"

4. 伪类 :

• :hover - 选择鼠标指针浮动在上面的元素
• :link - 指针指向的未被访问的链接
• :visited - 指针指向已被访问的链接
• active - 鼠标点下时

5. 层级
   z-index: 设置了该属性的覆盖未设置的,都设置了的数越大越靠上层

自我笔记,不做官方参考~欢迎补充