js小积累

来源：互联网发布：meli melo 知乎编辑：程序博客网时间：2024/05/22 20:10

<!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】

})

0 0