!!!常用jquery代码 - bjhhh

公告

!!!常用jquery代码

http://api.jquery.com 　　jQuery API

http://www.css88.com/jquery-ui-api 　　jQuery API 中文

http://www.cnblogs.com/onepixel/p/5097584.html　　大道至简—— 谈 jQuery 核心架构设计　　2016-1-4

http://www.cnblogs.com/qq21270/p/5128073.html　　jquery 自定义插件demo（只是一个简易的示例的 demo）　　2016-1-13

http://blog.csdn.net/u011225629/article/details/50883611　　Jquery需要掌握的技巧　　2016-3-16

http://www.cnblogs.com/jikey/p/4039740.html　　网页插件学javascript还是jquery好（图很给力）　　2016-4-12

http://www.codeceo.com/article/10-jquery-snippets-web-dev.html　　高效Web开发的10个jQuery代码片段　　2017-9-22

https://juejin.im/post/595dfa1a5188250d852fcb36　　jQuery使用最广泛的javascript函数库　　2017-9-22

判断是否存在： 　　2016-4-5

//判断方法是否存在
if(typeof ($(window).scrollLoading)=='function'){
    $(".lazy").scrollLoading({
        attr:'dynamic-src'
    });
}
//判断变量是否存在
if(typeof(GP)!=="undefined"){
    offerIndex.dropArea(GP,GC1);//省市下拉菜单初始化
}
//判断页面DOM元素是否存在
if( $('.box').length>0 ){
}

DOM节点选取： 　　2016-2-29

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("li").click(function(){
        //DOM节点选取
        $(this).siblings();//兄弟
        $(this).addClass('active').siblings().removeClass('active');
        $(this).parent();//直接父元素
        $(this).parents();//祖先

        //DOM插入
        $(this).before('<li>(标签外)之前</li>');//在被选元素之前插入内容
        $(this).prepend('<b>开头</b>');//在被选元素的开头插入内容
        $(this).append('<b>结尾</b>');//在被选元素的结尾插入内容
        $(this).after('<li>(标签外)之后</li>');//在被选元素之后插入内容
    });

    $("#button").click(function(){
        //遍历
        $("ul li").each(function(){
            console.log($(this).text())
        });
        $("ul li").each(function(i,element){
            console.log($(this).text())
            console.log($(element).text());
            console.log(i);
        });
    });

});
</script>
<ul><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li></ul>
<input type="button" id="button" value="遍历">

回调函数：　　2016-3-9

var TEST123={a:'aaa',
    b:'bbb',
    show:function(){ console.log(TEST123.a);}
}
function writeCode(callback){//回调函数
    console.log("start...")
    callback();
    console.log("end...")
}
function test(){
    console.log('aa');
}
writeCode(test);
writeCode(TEST123.show);

UTF-8文件引入：

<script src="js/common.js" type="text/javascript" charset="utf-8" defer></script>
//对于带有defer的script,它们会确保按在页面中出现的顺序来执行,它们执行的时机是在页面解析完后,但在 DOMContentLoaded事件之前。 
//扩展阅读：http://www.cnblogs.com/AndyWithPassion/archive/2011/09/03/2165441.html

自用代码：（小效果）

http://www.cnblogs.com/qq21270/p/4961686.html　　返回顶部　　2015-11-12

文档：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <link href="css.css" type="text/css" rel="stylesheet" /> -->
<!-- <script src="http://www.expai.com/js/jquery-1.8.3.min.js"></script> -->
<!-- <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> -->
<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> -->
<!-- <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> -->
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#div1").click(function(){
    });
});
</script>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>

DOM对象操作:　　append、prepend、 after、before 　　　http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        // $("ul li").first().before("<li>在匹配对象标签的前面，插入</li>");
        // $("ul li").first().prepend("在匹配对象内容的开头，插入</li>");
        //$("ul li").first().append("在匹配对象内容的末尾，插入</li>");
        //$("ul li").first().after("<li>在匹配对象标签的后面，插入</li>");
        $("ul li").first().after($(this).remove());//移动元素
    });
});
</script>
<ul>
<li>xxxxxxxxx</li>
<li>yyyyyyyyyy</li>
</ul>
<button>button</button>

事件：

$(".div").click(function(){        });
$(".div").tap(function(){        });//手机事件
$(".div").mouseenter(function(){        });
$(".div").mouseleave(function(){        });

//绑定事件
$(".div1").bind("click",function(){    });
$(".div1").bind("mouseenter",function(event){    });
$(".div1").bind("mouseleave",function(event){    });
$("#button").bind('click mousemove keyup change',function(){　　});//可以绑多个方法



$(document).live("click",function(event){
    event.stopPropagation();（该方法将停止事件的传播,阻止它被分派到其他DOM节点）　　　　//event.preventDefault();（通知 Web 浏览器不要执行与事件关联的默认动作）
});

$(window).scroll(function() {//滚屏
    var scrollTop = $(document.body).scrollTop();//滚动高度
    var windowH = $(window).height();//页面高度
});
$(window).resize(function() {        });//窗口改变尺寸
$(window).trigger("resize");//模拟事件

延时函数： setTimeout 、 setInterval、 requestAnimationFrame

var timer = setTimeout(function(){},1000);//延时执行1次
clearTimeout(timer);
var timer = setInterval(function(){},1000);//定时循环n次
clearInterval(timer);

例子：requestAnimationFrame （当前屏幕激活状态下，播放动画。非激活状态下，停止播放）2016-2-1

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var TIMER;
    var progress=0;
    function step(timestamp) {
        progress += 1;
        console.log(progress);
        if (progress < 500) {
          TIMER = requestAnimationFrame(step);
        }
    }
    $("#close").click(function(){
        cancelAnimationFrame(TIMER);
    });
    $("#open").click(function(){
        TIMER = requestAnimationFrame(step);
    });
});
</script>
<div id="close">close</div>
<div id="open">open</div>

scroll事件，避免代码被多次调用：2016-1-14

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var TIMER;//定义全局变量
    $(window).scroll( function() {
        clearTimeout(TIMER);//必须要有这句
        TIMER = setTimeout(function(){
            console.log("scroll事件延时函数  ---- "+$(document).scrollTop());
        },100);
    });
});
</script>

定时器，循环n次：

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var ALERT={
        counter:0,//计数器
        timer:0,//定时器
        stopwatch:function(){//秒表
            console.log("已开始");
            ALERT.timer = setInterval(function(){
                ALERT.counter++;
                console.log(ALERT.counter);
            },100);
        },
        clear:function(){
            clearInterval(ALERT.timer);
            console.log("已关闭");
        },
    }
    $("#button1").click(function(){        ALERT.stopwatch();    });
    $("#button2").click(function(){        ALERT.clear();    });
});
</script>
<input type="button" value="start" id="button1">
<input type="button" value="end" id="button2">

用delay延时：2015-11-18

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var me = $("#button"); //var me = $(this);
    me.queue("fx", []);
    me.delay(1111).queue (function ()    {
        me.css("background","red");
    });
});
</script>
<div id="button">aaa</div>

这是个小例子，多次回调。2015-12-17

$("#button1").click(function(){
    $(".img201512ad-min").hide();
    $(".img201512ad-max").slideDown(200);
    setTimeout(function showImage(){
        $(".img201512ad-max").slideUp(1000,function(){
            $(".img201512ad-min").slideDown(800);
        });
    },2000);
});

常用动画：

$(".div").show();//显示
$(".div").hide();//隐藏
$(".div").toggle();//切换

$(".div").fadeIn();//淡入（显示）
$(".div").fadeOut();//淡出（隐藏）
$(".div").fadeToggle();//切换
//$(".div").fadeTo("slow",0.15);//到某种状态(不常用)

$(".div").slideDown();//向下滑动（显示）
$(".div").slideUp();//向上滑动（隐藏）
$(".div").slideToggle();//切换

$("div").animate({left:'250px'},500);//动画
//$(selector).animate({params},speed,callback);

强制停止所有动画：

$(".dot0").stop(true,true).show();

判断是否显示：（判断元素：　　是否隐藏 is(":hidden") 、是否显示 .is(":visible") ）

注意，如果是zepto.js的话，这里有个坑：

要写为：

if( _pop.css("display") == "block" ){}

if( _pop.css("display") == "none" ){}

//jquery的写法：
var _pop = $(".list-pop[data-pop="+_index+"]");
if( _pop.is(":hidden") == false ){//已显示的关闭
    _pop.hide();        
}else{
    _pop.show();
}
//zepto支持的写法：
var _pop = $(".list-pop").eq(_index);
if( _pop.css("display") == "none" ){//已显示的关闭
    _pop.show();
}else{
    _pop.hide();
}

遍历、及显隐判断：

$("li").each(function(){
    alert($(this).html())
});

var ee=$("li");
var len=ee.length;
for(var i=0;i<len;i++)
    if(    $("li").eq(i).is(":visible")==true  ){
        alert("显示");
    }else{
        alert("none");
    }
}

定位: （及鼠标定位）

.offset()返回的是相对于document的位置

.position()返回的是相对于父元素的位置

//var offsetX=_this.offset().left;//相对于文档
//var offsetY=_this.offset().top;
var offsetX=_this.position().left;//相对于父元素
var offsetY=_this.position().top;

var mouseX=event.pageX;//鼠标
var mouseY=event.pageY;

var offsetX = $("#abc").offset().left;
var offsetY = $("#abc").offset().top;

jquery插件开发：　　2016-3-1

http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html　　讲解

//参考
jQuery.fn.aPosition = function() {
    thisLeft = this.offset().left;
    thisTop = this.offset().top;
    thisParent = this.parent();

    parentLeft = thisParent.offset().left;
    parentTop = thisParent.offset().top;

    return {
        left: thisLeft-parentLeft,
        top: thisTop-parentTop
    };
};

Jquery中 $ 与 $.fn 的区别是什么？　　2017-9-14 　　http://www.cnblogs.com/sharpest/p/6271039.html

$拓展的方法是静态方法，可以使用$直接调用，其拓展的方式有两种，一般使用$.extend({});；

$.fn拓展的方法是实例方法，必须由“对象”$("")来调用，其拓展的方式同样有两种，一般使用$.fn.extend({ })。

jQuery.fn = jQuery.prototype

检测浏览器：

EpBrowser = {
    version: 0,
    core: "",
    userAgent: "",//userAgent
    init:function() {
        var ua = navigator.userAgent.toLowerCase();
        var s;
        var name ='';
        var ver = 0;
        this.userAgent=ua;
        (s = ua.match(/msie ([\d.]+)/)) ? this._set("ie", this._setVersion(s[1])):
        (s = ua.match(/firefox\/([\d.]+)/)) ? this._set("firefox", this._setVersion(s[1])) :
        (s = ua.match(/chrome\/([\d.]+)/)) ? this._set("chrome", this._setVersion(s[1])) :
        (s = ua.match(/opera.([\d.]+)/)) ? this._set("opera", this._setVersion(s[1])) :
        (s = ua.match(/version\/([\d.]+).*safari/)) ? this._set("safari", this._setVersion(s[1])) : 0;
    },
    _setVersion:function(ver,floatLength) {
        ver = ('' + ver).replace(/_/g, '.');
        ver = String(ver).split('.');
        return parseInt(ver[0]);
    },
    _set:function(bname,bver) {
        this.core=bname;
        this.version=bver;
    }

　　log:function(msg) {

	if(  (EpBrowser.core=="chrome")  ){//chrome
		console.log("log>>    "+msg);
	}
　　}

};

AJAX:

http://www.cnblogs.com/qq21270/p/4012647.html

jQuery插件格式：

(function($){  
$.fn.test111=function(){  
       return "mmmmmmmmmmmm";  
   }  
})(jQuery);

定位：

2015-10-10

$(window).height();//获取浏览器显示区域（可视区域）的高度
$(window).width();//获取浏览器显示区域（可视区域）的宽度

$(document).height();//获取页面的文档高度
$(document).width();//获取页面的文档宽度

$(document.body).height();//浏览器当前窗口文档body的高度
$(document.body).width();//浏览器当前窗口文档body的宽度

$(document.body).scrollTop();//获取滚动条到顶部的垂直高度(即网页被卷上去的高度)
$(document.body).scrollLeft();//获取滚动条到左边的垂直宽度

$(obj).width();//获取或设置元素的宽度：
$(obj).height();//获取或设置元素的高度：

obj.offset().top;//某个元素的上边界到body最顶部的距离：（在元素的包含元素不含滚动条的情况下）
obj.offset().left;//某个元素的左边界到body最左边的距离：（在元素的包含元素不含滚动条的情况下）
obj.offset().top;//返回当前元素的上边界到它的包含元素的上边界的偏移量：（在元素的包含元素含滚动条的情况下）
obj.offset().left;//返回当前元素的左边界到它的包含元素的左边界的偏移量：（在元素的包含元素含滚动条的情况下）

js变更浏览器地址栏的地址：2015-10-21

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#button").click(function(){
        var _counter = $(this).attr("data-counter");
        _counter++;
        $(this).attr("data-counter",_counter);
        console.log(_counter);

        var thisurl = "http://"+window.location.host+"/test/" + _counter + ".html";
        if (window.history.pushState) {
            window.history.pushState({ pageIndex: 1 },"aaaa", thisurl);
            return true;
        }

    });
});
</script>
<input type="button" value="变更浏览器地址栏的url" id="button" data-counter="0">

http://info.9iphp.com/10-jquery-tips-everyone-should-know/ 　　人人必知的10个 jQuery 小技巧　　2015-10-20

ON的用法：　　2016-6-8 　　小鲍鲍

http://www.runoob.com/jquery/event-on.html

已存在的父元素.on("click","未来元素",function(){})

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("div").on("click","p",function(){    //P是未来元素。这样的写法可满足delegate、live、bind这三种老写法
        alert($(this).html()+$(this).index());
    });
    $("button").click(function(){
        $("<p>aaaaaa</p>").insertAfter("button");
    });
});
</script>
<div>
<button>test</button>
</div>

...

posted on 2014-06-16 13:54 bjhhh 阅读(1843) 评论(0) 编辑收藏举报

刷新页面返回顶部