js小积累
2015-06-18 12:17
579 查看
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
</head>
<script type="text/javascript">
提前加载
$(function(){
})
可以给他写多个属性
$("标签").css("属性","赋值").css("属性","赋值").css("属性","赋值")
$("标签").css({属性:赋值,属性:赋值,属性:赋值});
=============================
get方法得到DOM标签节点而不是对象，可以用来做循环的时候用
$(".box").get(0)
$(".box").size() jQuery 对象中元素的个数。
$(".box").length
==============================
$("div").find("p").css() 在div下找节点
子代选择器（IE6兼容问题）-----使用jquery运行的方法比css的写法快
$("div>p").css();======$("div").children("p").css();
$("div+p").css();======$("div").next("p").css(); 【邻近下个节点一定要是p节点】
$("div+p").css();======$("div").next().css(); 【下面节点有效果】
$("div~p").css();======$("div").nextAll("p").css(); 【同级后面的所有p节点都有效果】
$("div~p").css();======$("div").nextAll().css(); 【同级后面的所有节点都有效果】
$("div").prev().css(); 【邻近上个节点一定要是p节点】
$("div").prevtAll().css(); 【同级所有节点】
$("div").siblings().css() 【同级除本身外的所有，即上下】
==============================
过滤选择器
$("li:first").css() 所有li中的第一个
$("li:last").css()
$("li:not(.num)").css() 除了class为num的li元素
$("li:even").css 所有索引（0开始）偶数的所有li元素
$("li:odd").css 所有索引（0开始）奇数的所有li元素
$("li:eq(n)").css 选择索引第n个li元素（0开始）
$("li:gt(n)").css 选择索引大于第n个li元素（0开始）
$("li:lt(n)").css 选择索引小于第n个li元素（0开始）
$("li:hidden").css 选择隐藏的li元素
$("li:visible").css 选择可见的li元素
==================================
子元素过滤器
$("li:first-child").css() 所有父元素下面的第一个li元素
$("li:last-child").css() 所有父元素下面的最后一个li元素
$("li:nth-child(n)").css() 所有父元素下面的第n个li元素
$("li:nth-child(even)").css() 所有父元素下面的第偶数个li元素(从1个开始)
$("li:nth-child(odd)").css() 所有父元素下面的第奇数个li元素(从1个开始)
【$("li:nth-child(3n)").css() 所有父元素下面的3的倍数个li元素(从1个开始)】
【$("li:nth-child(3n+1)").css() 也可以得到想要的数字1、4、7....】
$("li").slice(0,2) 从第0个选到索引为2的所有li元素
$("li").parent() 返回父级节点
$("li").filter(".red, :first, :last").css() 返回filter中选中的元素节点
【$("li").filter(function(){}).css() 】 可以传入一个函数方法来判断要选中的li节点
$("li").filter(function(){
return $(this).attr('class')=='red' && $(this).attr('litte')=='列表3';
}).css('color','red'); 【判断符合函数要求的返回，再添加css效果】
$("li:eq(n)").is(".red").css() 判断第n个li是否含有class为red属性，返回值为true和false
【$("li").is(function(){}).css() 】 可以传入一个函数方法来判断是否符合的li节点
========================================================
DOM和CSS操作（没有兼容问题）
$("div")html([参数]); 没参数为获取div里面所有内容,包括标签，有参数是赋值
$("div")text([参数]); 没参数为获取div里面文本内容，标签会自动被清除，有参数是赋值
$("input").val([参数]); 没参数为获取input里value值，有参数是赋值
$("input").val(["check1","check2","radio1"])【只要把type为radio、checkbox属性的value值写入，就能有选中效果】
$('div').attr("title") 得到div标签的title属性值
$('div').attr("title","美女") 可以接给div该属性赋值
$('div').removeAttr("title") 移除div标签的title属性值
================================================
获取标签样式属性
$('div').each(function(index,element){
alert(index+":"+element); 【可以得到所有属性值】
})
================================================
$('div').addClass('aaa bbb') 添加class样式aaa和bbb
$('div').removeClass('aaa bbb') 删除class样式aaa和bbb
<style >
.aaa{background:red;}
</style>
$('div').click(function(){
$(this).toggleClass('aaa'); 【两个样式之间的切换，默认样式和指定样式】
})
==================================================
$("div").css.("width") 得到字符串类型 100px
$("div").width() 得到数字类型 100
$("div").width('500') 可以直接设置值，并得到的是有单位的500px
$('div').outerWidth(function(index.width){
return outerWidth - 500 + "px"; 【可以直接计算赋值】
})
===================================================
$('div').offset().top 计算距离上面的距离
$('div').offset().left 计算距离左边的距离
$('div').position().top 计算距离父级上的距离
$('div').position().left 计算距离父级左边的距离
$(window).scrollTop(); 滚动条的滚动距离
================================================
节点的创建和删除
$("ul").append("<li>"+创建+"</li>") 【在ul内部最后面添加一个li节点】
$("<li>"+创建+"</li>").appendTo("ul") 【在ul内部最后面添加一个li节点】
$("ul").prepend("<li>"+创建+"</li>") 【在ul内部最前面添加一个li节点】
$("<li>"+创建+"</li>").prependTo("ul") 【在ul内部最前面添加一个li节点】
$("ul").after("<li>"+创建+"</li>") 【在ul外部后面添加一个li节点】
$("<li>"+创建+"</li>").insertAfter("ul") 【在ul外部后面添加一个li节点】
$("ul").before("<li>"+创建+"</li>") 【在ul外部前面添加一个li节点】
$("<li>"+创建+"</li>").insertBefore("ul") 【在ul外部前面添加一个li节点】
===================================================
1、【例如：<div>aaaa</div> ====> <strong><div>aaaa</div></strong>】
$("div").wrap('<strong></strong>') 在div标签的外面添加<strong>标签
$('div').clone([true],[false]).appendTo('body')
【 在body里面最后边克隆div，参数是true则克隆div的事件(比如点击)，false为只克隆标签内容，默认false】
$('div').empty(); 清空div里面所有内容，保留下div标签
$('div').replaceWith('<span><span>') ; 用span标签替换div标签和里面的内容，完全替换
=====================================================
表单选择器的value值
$("input").eq(1).val() 可以选到input里面的第二个的value值
$("input[type=text]").val() 选择类型为text的的value值
$("input[name=user]").val() 选择input里面name=user的value值
【$('input')只能选择input类型的】
【$(':input[name=""]')可以选择所有的input、select、button、textarea表单元素,这样选则起来特别方便】
【$(':text[name='']') 选择出所text类型的】【$(':radio[name=''].eq(n)') 选择出所radio类型的第n个】
【$(':checked')所有被选中的标签】
$(function(){
var dd = $('#myform input[name="like[]"]:checked');
for(var i=0;i<dd.length;i++){
alert(dd.eq(i).val());
// $('#myform input[name="like[]"]:checked').each(function(){
// alert($(this).val());
}
});
</head>
<body> 【只选中myform表单里面的所有name="like[]"中checked的选项】
<form id="myform" action="">
<input type="text" value="aaa">
<input type="radio" value="nan" checked>男
<input type="checkbox" name="like[]" value="bbb" checked>bbbb
<input type="checkbox" name="like[]" value="ccc" checked>cccc
</form>
=================================================<pre name="code" class="php">获取父级节点
$('#a').parent() 获取父级节点</span>
$('#a').parent().pareat() 获取父级的父级节点</span>
$('#a').parent('.aa') 获取父级class为aa节点</span>
$('#a').parents('.aa') 获取所有父级中class为‘aa’节点 （无限父级层去获取<pre name="code" class="php">=================================================
基础事件
时间绑定 ：
$("input").bind("click",function(){}) 绑定一个事件
$("input").bind(click:function(){},mouseover:function(){}) 绑定多个事件
$("input").unbind() 删除input所有的绑定一个事件
$("input").unbind('click') 只删除input的click事件
mouseover mouseout 触发子节点【移入的时候触发时间，但移入自身的子节点再移回本节点时会再次触发】
mouseenter mouseleave 不触发子节点【当做移出移入效果时，div里面有子div的，用这个方法不会在点击子div时算div已经移出】
$('span').bind('mouseover',function(e){
alert(e.relatedTarget); 【监听的元素DOM，绑定元素本身】
})
$('span').bind('mouseover',function(e){
alert(e.relatedTarget); 【点击的元素DOM】
})
$('input').bind('click',"abc",function(e){
alert(e,date;) 【data可以得到传入的数据，可以是字符串，数组，数字，对象】
})
pageX/pageY 获取相对于页面原点的水平、垂直坐标
clientX/clientY 获取相对于显示窗口的水平、垂直坐标
$('input').bind('click',function(e){
alert(e.timeStamp); 【获取时间戳】
})
======================================
阻止冒泡行为
$('input').click(function(e){
alert('aaaaaaaaa');
e.stopPropragation(); 【阻止往下冒泡】
})
$('a').click(function(e){
e.prevertDefault();
【阻止默认行为，a链接无效，右键菜单也是默认行为，可以阻止】
})
======================================
高级事件
$('input').click(function(){
alert('点击');
})
$('input').trigger('click') 【模拟用户操作，打开网页自动操作】
$('input').click(function(){
alert('点击'); 【可以连在一起写】
}).trigger('click')
【模拟用户自发操作事件，可以传参数】
$('input').click(function(e,data1,data2,data3){
alert('第一个参数:'+data1+'第二个参数:'+data2+'第三个参数:'+data3);
}).trigger('click',['123','abc','eee'])
【可以传人多个参数，e是事件本身，data1、data2、data3是分别传入的参数】
$('input').click(function(e,data1,data2,data3){
alert('第一个参数:'+data1+'第二个参数:'+data2+'第三个参数:'+data3);
}).trigger('click',['123','abc',['a'],['b'],['c']],{user:'lee'})【参数也可以是对象、数组】
==========================================
事件委托
// $('div').delegate('input','click',function(){
// $(this).clone().appendTo('div');
// })
// 【delegate将所有input便签绑定在它的父级元素上，所有input的所有click事件会在父级上找是否符合要求的然后执行，而不是像bind一样将所有的input都去一一分别绑定，这样可以节省空间，提高效率】
高版本1.7以上
on、off、one事件绑定，替代旧版本的bind和delegate
$('input').on('click'.function(){
alert('点击'); 【单事件绑定写法】
return false; 【阻止事件冒泡】
})
$('input').off('click') 【单事件解除委托绑定】
$('div[父级]').('click','input[本身]',function(){
$(this).clone().appendTo('div')
【在父级上直接一次性绑定所有input的click事件,注意参数写法】
})
$('div[父级]').off('click','input[本身]') 【多事件解除委托绑定】
仅一次事件触发one
$('input').one('click',function(){
alert('只能执行一次');
})
===========================================
动画效果
show()【显示】 hide()【隐藏】 toggle()【自动切换显示、隐藏】
自调用递归函数动画效果
$('button').click(function(){
$('div').first().show(1000,function testShow(){
$(this).next.show(1000,textShow);
})
})【后面的自动调用之前的函数方法】
$('button').click(function(){
$(this).toggle('show');
})
=========================================
slideUp() 【卷上】 slideDown()【卷下】 slideToggle()【自动切换卷上、卷下】
=========================================
fadeIn()【淡入】 fadeOut()【淡出】 fadeToggle() 【自动切换】fadeTo([速度][透明参数])
=================================================
自定义动画
$('button').click(function(){
$('div').animate({
width:'300px',
height:'300px',
opacity:0.5,
top:400px; 【div走到400的位置，在click也不能执行运动】
left:400px; 【所有效果同步实行】
},2000,function(){
alert('动画执行完成！');
})
})
$('button').click(function(){
$('div').animate({
top:'+=200px'; 【每次点击click都能走200的距离】
left:400px; 【所有效果同步实行】
},2000,function(){
alert('动画执行完成！');
})
})
================================
$('button').click(function(){
$('div1').animate({
width:'300px',
},2000,function(){
$('div2').animate({
height:'300px',
},2000,function(){ 【顺序执行，效果不一样】
$('div3').animate({ 【多个标签要顺序执行的时候用】
opacity:0.5, 【当执行css样式也需要这样调用，不然css会第一时间执行】
},2000,function(){
$('div3').animate({
height:'300px'
})
}).delay(3000)【这里加入的的延迟执行必须上下两个运动是同一标签，例如都是id=div3】
})
})
})
$('button').click(function(){
$('div1').animate({width:300px});
$('div2').animate({height:300px});
$('div3').animate({opacity:300px}); 【不同标签会同时执行】
$('div4').animate({top:300px});
});
==================================
$('button').click(function(){
$('div').animate({width:300px})
.animate({height:300px}) 【同一标签顺序执行，执行完一个在执行下一步】
.animate({opacity:300px})
.animate({top:300px});
});
$('button').click(function(){
$('div1').animate({width:300px});
$('div1').animate({height:300px}); 【同一标签顺序执行，效果不一样】
$('div1').animate({opacity:300px}); 【顺序执行，不是同步】
$('div1').animate({top:300px}); 【不同元素，则同步执行】
});
======================================
.queue使用【当动画遇到要改变css颜色属性的时候】
$('button').click(function(){
$('div').slideUp('slow')
.slideDown('slow')
.queue(function(next){
$(this).css('background','red');
next();
}) 【添加一个函数，参数是next，后面可以接着调用动画属性】
.hide('slow');
})
.queue('fx').length 可以得到当前动画列队的长度（多少个）
clearQueue() 清楚动画队列要执行的动画
=====================================
运动停止
$('button').click(function(){
$('div').animate({
left:'800px';
})
})
$('button').click(function(){
$('div').stop();
【在div运动中点击，会停止其运动，在点击运动它会在停止的地方接着运动】
})
====
$('button').click(function(){
$('div').animate({width:300px})
.animate({height:300px})
.animate({opacity:300px})
.animate({top:300px});
});
$('button').click(function(){
$('div').stop([true],[true]); 列队动画的时候会只停止当前动作，其他动作继续
【第一个true参数会同时停止后面所有动作】
【第二个true参数会立马显示指定动作位置，停止后面所有动作】
======
时间动画延迟效果
$('button').click(function(){
$('div').animate({width:300px}).delay(2000)
.animate({height:300px}) 【delay运动停止指定时间，然后继续执行】
.animate({opacity:300px}).delay(2000)
.animate({top:300px});
})
========
:animated 【可以找到所有运动的动画，去停止或者控制它】
$.fx.interval = 13; 【全局变量，控制动画的帧数，越小越流畅】
$.fx.off=true; 【全局变量，关闭动画，直接到达指定效果】
运动参数
$('button').click(function(){
$('div1').animate({
lift:'800px';
},3000,'swing',function(){});【swing，先慢->快->慢->停止】
$('div1').animate({
lift:'800px';
},3000,'linear',function(){});【linear，根据时间计算速度一直匀速运动停止】
})
=====================================
Ajax使用
异步加载数据load方法(适合做静态文件异步加载获取)
$('button').click(function(){
$('div').load('test.html?uasername=aaa&password=123456');
}) 【默认get方式提交，后面是参数写法】
$('button').click(function(){
$('div').load('test.html',{username:'aaa',
password:'123456'
});
})【默认post方式提交，后面是参数写法】
===
$('button').click(function(){
$('div').load('test.html',{username:'aaa',},function(response,status,[xhr]){
$('div').html(response+123); 【response得到返回来的值】
if(status=='success'){alert('成功处理')}; 【有两个参数success和error】
alert(xhr.status==200); 【用的比较少，查手册】
});
})
=======================================
异步加载数据全局方法$.get、$.post(做动态文件异步加载获取)
$('button').click(function(){
$.get('text.php',{ 【get提交方式】
name:'aaa', 【传过去的数据】
},function(response,status,[xhr){
$('div').html(response); 【获取回来的信息】
})
})
========
$('button').click(function(){
$.post('text.php',{ 【post提交方式】
name:'aaa', 【传过去的数据】
},function(response,status,[xhr){
$('div').html(response); 【获取回来的信息】
},[html\text\json]) 【传回来的信息格式，自动转换】
})
==========================================
$.ajax对象方式传输加载【重点使用】
$('button').click(function(){
$.ajax({
type:'POST', 【提交方式】
url:'text.php', 【接收地址】
data:{
username:'aaa', 【提交数据】
password:'123456',
},
seccess:function(response,status,xhr){
$('div').html(response); 【成功返回数据】
}
});
})
=============================================
=========@【serialize()提交全部表单里的数据，重点使用，会转码】
$('button').click(function(){
$.ajax({
type:'POST', 【提交方式】
url:'text.php', 【接收地址】
data:$('form').serialize(), ====>@【提交全部表单里的数据，重点使用】
seccess:function(response,status,xhr){
$('div').html(response); 【成功返回数据】
}
error:function(xhr){
alert(xhr.status); 【失败返回原因，例如：404】
alert('加载错误！'); 【失败返回执行】
},
timeout:30000, 【加载事件设置，加载30秒得不到数据就停止加载】
global:false;, 【设置是否促发document上的ajaxStart和ajaxStop】
});
})
=======
serialize()不传数据decodeURIComponent解码
$('form input[name=sex]').click(function(){
$('div').html(decodeURIComponent$(this));
}) 【把编码后的数据直接解码回来】
================================================
Ajax高级---在网速较慢的时候提高用户体验
【全局加载提示---正在加载（这里设置的都是全局，所有事件都自动生效）】
<div>正在加载...</div>
$(document).ajaxStart(function(){
$('div').show(); 【ajax开始加载时候触发事件】
}).ajaxStop(function(){
$('div').hide(); 【ajax开始加载完成时候触发事件】
});
$(document).ajaxSend(function(){
alert('请求发送之前执行'); 【第1执行】
}).ajaxComplete(function(){
alert('请求完成之前执行'); 【第3执行】
}).ajaxSuccess(function(){ 【这里所有function都有参数，查手册】
alert('请求成功之前执行'); 【第2执行】
}).ajaxError(function(){ 【这里设置的都是全局，所有事件都自动生效】
alert('请求失败执行'); 【第2执行】
})
global:false; 【设置是否促发document上的ajaxStart和ajaxStop】
timeout:30000; 【在事件上设置加载的时间，加载30秒得不到数据就停止加载】
========
设置全局错误报告提示
$(document).ajaxError(function(event,xhr,settings,info){
for(var i in settings){
alert(i); 【有四个参数，需要用到可以查手册或遍历出来看看】
} 【一切错误信息都能得到】
})
============================================
jqXHR格式【(jqXHR主要运用可以去看视频30章节)】
var jqXHR=$.ajax('t1.php'); 【得到jqXHR是对象】
var jqXHR2=$.ajax('t2.php'); 可以直接执行连缀操作，方便快捷
jqXHR.done(function(response){
alert(response);
}).done(function(){}).done(function(){}) 【可以连缀合起来执行】
jqXHR2.done(function(response){
alert(response);
}).done(function(){}).done(function(){})
【合并一起写】
$.when(jqXHR,jqXHR2).done(function(r1,r2){
alert(r1[0]); 【得到对象，第一索引就是值】
alert(r2[0]);
})
========================================
工具函数操作---字符串操作
$.trim(str); 删除字符串两边的空格
======
var arr=[4,2,9,11,25,38]; 【处理数组函数】
var arrGrep=$.grep(arr,function(element,index){
return index<5 && element<6; 【elemtnt参数是值，index是数组的索引】
})
alert(arrGrep); ---------------------输出4,2
=======
$.inArray(str,arr); 【得到想要值在数组里的索引下标】
var arr=[4,2,9,11,25,38];
alert($.inArray(11,arr)); ------------输出3
=======
$.merge(arr1,arr2); 【合并两个数组】
var arr1=['aaa','bbb'];
var arr2=['ccc','ddd'];
alert($.merge(arr1,arr2));--------输出aaa,bbb,ccc,ddd
==========
$.isArray() 【判断是否是数组】
$.isFunction() 【判断是否是函数】
$.isEmptyObject() 【判断是否是对象】
$.contains($('div'),$('span')) 【判断span是否在div标签里面】
$.type(); 【得到数据的类型】
$.isNumeric() 【判断是否是数值】
=========
var obj={name:'lee',age:100}; 【把对象键值对转成URL字符串键值对】
alert($.param(obj));--------------输出name=lee&age=100
====================================================
弹窗功能设置
$('input').click(function(){
$('div').dialog(); 【input点击弹出div】})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 浅析js绑定同一个事件依次触发问题系列（一）
- JavaScript探秘：强大的原型和原型链
- JavaScript 闭包究竟是什么
- extjs-->grid
- javascript 当前日期加(天、周、月、年)
- javascript背景时钟实现方法
- js深拷贝和浅拷贝
- 移动Web中图片自适应的两种JavaScript解决方法
- 中国省市区json数据 三级联动
- javascript随机显示背景图片的方法
- 网页添加飘动窗口（图片链接）+ IE8下js解析错误
- [JSON] Validating/Asserting JSON response with Jsonlurper
- javascript实现根据时间段显示问候语的方法
- javascript显示中文日期的方法
- JSTL的使用
- silverlight与js交互以及复杂对象传输 用于记录
- JS金额大小写转换
- ashx ajax 与 自定义javascript函数
- Modernizr.js入门指南(HTML5&CSS3浏览器兼容插件)
- json相关的数据处理