标签 jQuery 下的文章

完全理解jQuery源代码,在前端行业算什么水平?
如何学习jQuery?
逐行分析 jQuery 源码的奥秘
逐行分析jQuery源码
jQuery源码解析(架构与依赖模块)
jQuery源码分析系列
jQuery1.6.1源码分析系列(停止更新)

https://github.com/mumuy/widget
A set of widgets based on jQuery&&javascript.
一套基于jquery或javascript的插件库 :

轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等 

https://jquerywidget.com/

妙味课堂 jQuery集训营课程大纲

插件

jQuery插件开发模式
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
https://segmentfault.com/a/1190000007076651
jQuery One Page Nav

Owl Carousel 2 -支持触摸屏的响应式jQuery旋转木马插件
http://www.htmleaf.com/jQuery/Slideshow-Scroller/201502161387.html

动态加载无法绑定事件处理

$('body').on("input",'tags',function(e){});

动态添加事件后绑定此事件

让jquery:contains选择器 忽略大小写

使用前重写覆盖一下contains方法即可:

此处优化:contains不再区分大小写

jQuery.expr[':'].Contains = function(a, i, m) {
    return jQuery(a).text().toUpperCase()
    .indexOf(m[3].toUpperCase()) >= 0;
};
 
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
  .indexOf(m[3].toUpperCase()) >= 0;
};

$("#statisticsViewList li").hide().find(".name").filter(":contains('"+name+"')").parents("li").show();

让jquery:contains选择器 忽略大小写
使用前重写覆盖一下contains方法即可:

<%--此处优化:contains不再区分大小写--%>

jQuery.expr[':'].Contains = function(a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; }; jQuery.expr[':'].contains = function(a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; };
$("#statisticsViewList li").hide().find(".name").filter(":contains('"+name+"')").parents("li").show();



防重复提交

怎样防止重复发送 Ajax 请求?

jQuery的 $.ajax防止重复提交的两种方法(推荐)
依赖jQ

$.ajax({
    type: 'POST',
    url: 'url',
    cache:false,
    dataType: 'json',
    data: {},
    async: false,
    beforeSend:function(){ 
        //触发ajax请求开始时执行
        //改变提交按钮上的文字并将按钮设置为不可点击
        //加判断条件,使得不能提交
    }, 
    success: function (msg, textStatus) 
    {
        //对上面的判断条件处理,使得能提交
    },
    error: function (textStatus) 
    {
        
    },
    complete: function(msg, textStatus)
    { 
    
    } 
});

Prefilters是一个预过滤器,在每个请求之前被发送和$.ajax()处理它们前处理。
options 是请求的选项
originalOptions 值作为提供给Ajax方法未经修改的选项,因此,没有ajaxSettings设置中的默认值
jqXHR 是请求的jqXHR对象
以上内容的核心思想是维护一个队列,发送请求时,将请求加入队列,请求响应后,从队列中清除,这就保证了在任一时刻只能有一个同样的请求发送.
局限性:仅仅是前台防止jQuery的ajax请求。对于非jquery的ajax请求,不起作用。因为使用的是jquery的ajaxPreFilter函数,仅仅对jquery的ajax请求有作用。
2)按钮每次点击都会向后端发送请求,下面的demo实现了多次点击按钮之后,只保证最后一次点击的请求能够成功。

var pendingRequests = {};
jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
    var key = options.url;
    console.log(key);
    if (!pendingRequests[key]) {
    pendingRequests[key] = jqXHR;
    }else{
    //jqXHR.abort(); //放弃后触发的提交
    pendingRequests[key].abort(); // 放弃先触发的提交
    }
    var complete = options.complete;
    options.complete = function(jqXHR, textStatus) {
    pendingRequests[key] = null;
    if (jQuery.isFunction(complete)) {
    complete.apply(this, arguments);
    }
    };
});


请输入图片描述
以上图来自这里
各位程序猿们,如果你觉得老板 10 天要你们上线一个 App 是一个丧心病狂的事情,
那么可以多想想这位哥。
Youtube 上有位哥的采访,你可以听听大神当年的故事。
https://www.youtube.com/watch?v=IPxQ9kEaF8c
当然,码农和大神的区别在于:遇到这种事情,10 天以后码农死掉了,而大神成功了。
只是但凡这种极速上线的事情,都会留下一堆的坑,大神和码农的的区别,也就是水洼和天坑的区别。

作者:罗志宇
链接:https://www.zhihu.com/question/31415286/answer/58022648
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

js混淆

https://javascriptobfuscator.herokuapp.com/
http://www.jsfuck.com/
移动时代的前端加密
从零开始的webpack生活-0x004:js压缩混淆
https://www.v2ex.com/t/381946
https://www.v2ex.com/t/392624
https://www.v2ex.com/t/363167

JavaScript

前端程序员经常忽视的一个JavaScript的面试试题
妙味课堂 JS 实战开发课程大纲
JavaScript (脚本之家)
JavaScript教程 (廖雪峰)
React.js-demo (阮一峰)(GitHub)
webpack-demos (阮一峰)
react-babel-webpack-boilerplate (阮一峰)
ECMAScript的兼容 && 兼容包
ECMAScript5.1中文版 + ECMAScript3 + ECMAScript(合集) && 英文版
30分钟掌握ES6/ES2015核心内容(上)
30分钟掌握ES6/ES2015核心内容(下)
ECMAScript 6 入门 (阮一峰)(GitHub)
ES6 全套教程 ECMAScript6 (原著:阮一峰)
JavaScript 标准参考教程(alpha) (阮一峰)(GitHub) 新地址 https://wangdoc.com/
悟透JavaScript
原生态纯JavaScript 100大技巧大收集
前端日常:JavaScript验证
JS实战实例教程
前端代码异常日志收集与监控
stylus中文版参考文档之综述
JavaScript深入系列(15篇)、JavaScript专题系列、ES6系列、React系列
Awesome JavaScript

递归

js 递归、非递归生成树
https://www.cnblogs.com/ygunoil/p/12524806.html

浮点型数据使用注意事项
JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

所有的编程语言,包括 JavaScript,对浮点型数据的精确度都很难确定:
var x = 0.1;
var y = 0.2;
var z = x + y // z 的结果为 0.3
if (z == 0.3) // 返回 false
为解决以上问题,可以用整数的乘除法来解决:
var z = (x 10 + y 10) / 10; // z 的结果为 0.3

不推荐使用 TAB 键来缩进,因为不同编辑器 TAB 键的解析不一样。

关于js三元表达式,多个判断条件的写法
以两个判断条件为例,直接上代码:

var a = 3;
var b = a === 1 ? '是1' : (a === 2 ? '是2' : '不是1也不是2')
console.log(b); //不是1也不是2

Bridge

https://github.com/wendux/DSBridge-Android
https://github.com/wendux/DSBridge-IOS
原生与 JS 交互,里面有demo 例子

模块化规范

js模块化编程之彻底弄懂CommonJS和AMD/CMD!
CommonJS、requirejs、ES6的对比
Js apply call方法 详解
javascript 六种数据类型(一)
10 个技巧,让你更专业地使用 console 进行 JS 调试
High performance JavaScript templating engine

零碎

从谷歌的JavaScript编写风格中,13 点值得我们注意的! && google jsguide
不会Object.defineProperty你就out了 && MDN

聊聊函数节流(throttle)和函数去抖(debounce)

https://unpkg.com/browse/vue@2.6.10/
https://cdn.jsdelivr.net/npm/vue/
在 unpkg 和 cdnjs 上获取

https://github.com/lodash/lodash/ && 中文文档地址 && 中文文档2
https://www.npmjs.com/package/ramda && 中文
Lodash,你正在使用的JavaScript库
轻量高效的开源JavaScript插件和库

http://www.freejs.net/

节流 (throttle) 让一个函数不要执行的太频繁,减少执行过快的调用,叫节流
去抖 (debounce) 去抖就是对于一定时间段的连续的函数调用,只让其执行一次
https://segmentfault.com/a/1190000025137536
防抖与节流 ,优化

屏蔽F12

<script type="text/javascript">
window.onload = function() {
    document.onkeydown = function() {
       var e = window.event || arguments[0];
       //屏蔽F12
       if(e.keyCode == 123) {
           return false;
           //屏蔽Ctrl+Shift+I
       } else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)) {
           return false;
         //屏蔽Ctrl+Shift+J
       } else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 74)) {
           return false;
           //屏蔽Shift+F10
       } else if((e.shiftKey) && (e.keyCode == 121)){
           return false;
       } else if(event.ctrlKey  &&  window.event.keyCode==83 ){
           return false;
       }
   };
   //屏蔽右键单击
   document.oncontextmenu = function() {
       return false;
   }

   //debugger
   var hasDebugger = false;
    var start = new Date();
    try {
    // 新建一个匿名函数,这样 debugger 得不到任何信息
        (function() {}).constructor('debugger')()
        if (new Date() - start > 200) {
            hasDebugger = true;
            window.close(); //关闭当前窗口(防抽)
            window.location="about:blank"; //将当前窗口跳转置空白页
        }
    } catch(e) {
        //alert(hasDebugger)
        window.close(); //关闭当前窗口(防抽)
        window.location="about:blank"; //将当前窗口跳转置空白页
    }
}
</script>

语言排名

排名

总结

EventUtil——跨浏览器的事件对象
JavaScript 的 this 原理
JS前端开发联盟群
javascript学习思维导图(收藏)
[转] js async await 终极异步解决方案

显示多少帧
https://www.testufo.com/

const showFPS = (function () {

// noinspection JSUnresolvedVariable, SpellCheckingInspection
const requestAnimationFrame =

window.requestAnimationFrame || // Chromium window.webkitRequestAnimationFrame || // Webkit window.mozRequestAnimationFrame || // Mozilla Geko window.oRequestAnimationFrame || // Opera Presto window.msRequestAnimationFrame || // IE Trident? function (callback) { // Fallback function window.setTimeout(callback, 1000 / 60); };
let dialog;
let container;
let fps = 0;
let lastTime = Date.now();
function setStyle(el, styles) {

for (const key in styles) { el.style[key] = styles[key]; }
}

function init() {

dialog = document.createElement('dialog'); setStyle(dialog, { display: 'block', border: 'none', backgroundColor: 'rgba(0, 0, 0, 0.6)', margin: 0, padding: '4px', position: 'fixed', top: 0, right: 'auto,', bottom: 'auto', left: 0, color: '#fff', fontSize: '12px', textAlign: 'center', borderRadius: '0 0 4px 0' }); container.appendChild(dialog);
}

function calcFPS() {

let offset = Date.now() - lastTime; fps += 1; if (offset >= 1000) { lastTime += offset; displayFPS(fps); fps = 0; } requestAnimationFrame(calcFPS);
}

function displayFPS(fps) {

const fpsStr = `${fps} FPS`; if (!dialog) { init(); } if (fpsStr !== dialog.textContent) { dialog.textContent = fpsStr; }
}
return function (parent) {

container = parent; calcFPS();
};
}());
showFPS(document.body);


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>demo</title>
    <script type="text/javascript" src="jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
            <input name="button" type="button" class="list-button" value="提交" />
            <input name="button" type="button" class="list-button" value="more" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
            <input name="button" type="button" class="list-button" value="提交" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
        </li>
    </ul>
</body>
<!-- 动态获取 -->
<script>
    var ww=[];
    console.log('wo');
    var showCZ=$('.czbtn');
    for (i=0;i<showCZ.length;i++) {
        console.log($('.czbtn').eq(i).children("input").length);
        var total=$('.czbtn').eq(i).children("input").length;
        ww.push(total);
    }
    console.log(ww);
    console.log("Max:"+Math.max.apply(null, ww));//最大值
    console.log("Min:"+Math.min.apply(null, ww));//最小值
    
</script>
</html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script>
    var arr   = ["a","x","b","d","m","a","k","m","p","j","a"];
    var count = {};
    var pos   = {};
    //遍历arr,统计每个字母出现次数且记录位置
    arr.forEach(function(value, index){
        if(count[value]){
            count[value] ++;
            pos[value] += ","+index; 
        } else {
            count[value] = 1;
            pos[value]   = ""+index;
        }
    });
    console.log(count);
    console.log(pos);
    
    //获取出现最多的字母
    var max = 0;
    var letter;
    for(i in count){
        if(count[i] > max ){
            max    = count[i];
            letter = i; 
        }
    }
    
    console.log("最多的是:" + letter);
    console.log("位置分布:" + pos[letter]);
</script>
</body>
</html>

html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title>jquery右侧固定数字显示隐藏导航菜单</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link href="css/default.css" rel="stylesheet" type="text/css">
</head>
<body style="height:600px;">
<div id="header">
  <div id="top">
    <div id="warp">
      <div class="topleft fl">

      </div>
      <div class="topright fr"><a href="/">返回首页</a></div>
    </div>
  </div>
</div>
<!-- 左侧导航 -->
<div class="leftNav">
    <a href="#" style="left: -110px;">站长素材<em>0</em></a>
    <a href="#" style="left: -110px;">书签切换<em>1</em></a>
    <a href="#" style="left: -110px;">幻灯片<em>2</em></a>
    <a href="#" style="left: -110px;">图片滚动-左<em>3</em></a>
    <a href="#" style="left: -110px;">图片滚动-上<em>4</em></a>
    <a href="#" style="left: -110px;">图片无缝滚动-左<em>5</em></a>
    <a href="#" style="left: -110px;">图片无缝滚动-上<em>6</em></a>
    <a href="#" style="left: -110px;">文字滚动-左<em>7</em></a>
    <a href="#" style="left: -110px;">文字滚动-上<em>8</em></a>
    <a href="#" style="left: -110px;">文字无缝滚动-左<em>9</em></a>
    <a href="#" style="left: -110px;">文字无缝滚动-上<em>10</em></a>
    <a href="#" style="left: -110px;">其它基础效果<em>11</em></a>
</div>
<script type="text/javascript">
    var btb=$(".leftNav");
    var tempS;
    $(".leftNav").hover(function(){
            var thisObj = $(this);
            tempS = setTimeout(function(){
            thisObj.find("a").each(function(i){
                var tA=$(this);
                setTimeout(function(){ tA.animate({left:"0"},300);},50*i);
            });
        },200);

    },function(){
        if(tempS){ clearTimeout(tempS); }
        $(this).find("a").each(function(i){
            var tA=$(this);
            setTimeout(function(){ tA.animate({left:"-110"},300,function(){
            });},50*i);
        });

    });
    var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
    if( isIE6 ){ $(window).scroll(function(){ btb.css("top", $(document).scrollTop()+100) }); }
</script>
<!-- 右侧导航 -->
<div class="rightNav">
    <a href="#" style="right: -110px;"><em>0</em>站长素材</a>
    <a href="#" style="right: -110px;"><em>1</em>书签切换</a>
    <a href="#" style="right: -110px;"><em>2</em>幻灯片</a>
    <a href="#" style="right: -110px;"><em>3</em>图片滚动-左</a>
    <a href="#" style="right: -110px;"><em>4</em>图片滚动-上</a>
    <a href="#" style="right: -110px;"><em>5</em>图片无缝滚动-左</a>
    <a href="#" style="right: -110px;"><em>6</em>图片无缝滚动-上</a>
    <a href="#" style="right: -110px;"><em>7</em>文字滚动-左</a>
    <a href="#" style="right: -110px;"><em>8</em>文字滚动-上</a>
    <a href="#" style="right: -110px;"><em>9</em>文字无缝滚动-左</a>
    <a href="#" style="right: -110px;"><em>10</em>文字无缝滚动-上</a>
    <a href="#" style="right: -110px;"><em>11</em>其它基础效果</a>
</div>
<script type="text/javascript">
    var btb=$(".rightNav");
    var tempS;
    $(".rightNav").hover(function(){
            var thisObj = $(this);
            tempS = setTimeout(function(){
            thisObj.find("a").each(function(i){
                var tA=$(this);
                setTimeout(function(){ tA.animate({right:"0"},300);},50*i);
            });
        },200);

    },function(){
        if(tempS){ clearTimeout(tempS); }
        $(this).find("a").each(function(i){
            var tA=$(this);
            setTimeout(function(){ tA.animate({right:"-110"},300,function(){
            });},50*i);
        });

    });
    var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
    if( isIE6 ){ $(window).scroll(function(){ btb.css("top", $(document).scrollTop()+100) }); }
</script>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td,img { padding: 0; margin: 0; }
fieldset,img { border: 0; }
address,caption,cite,code,dfn,em,strong,th,var,i { font-weight: normal; font-style: normal; }
ol,ul,li { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
q:before,q:after { content:''; }
abbr,acronym { border: 0; }
/*-- All --*/
body{ color:#333;font:12px/20px Arial,"Microsoft YaHei","宋体",sans-serif; text-align:center; background:#DCDCDC; }
a{ color:#333; text-decoration:none; outline:none;}
a:hover {color:#f00; text-decoration:underline; }
table { border-collapse: collapse; border-spacing: 0; empty-cells:show; }
table td,table th{ border:#ddd solid 1px; padding:5px 10px; }
table th{ background:#176D97; color:#fff;  }
table .new td{ color:#f60; font-weight:bold;  }
/*-- 左侧导航 --*/
.leftNav{ position:fixed; width:140px;  left:0; top:100px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank);  }
.leftNav a{ display:block; position:relative; height:30px; line-height:30px; margin-bottom:2px; background:#fff; padding-left:10px; width:130px; overflow:hidden;  cursor:pointer; left:-110px; }
.leftNav a:hover{ text-decoration:none; color:#1974A1;  }
.leftNav a:hover em{ background:#00b700}
.leftNav a em{ display:block; float:right; width:30px; background:#1974A1; color:#fff; font-size:16px; text-align:center; margin-left:10px;}

/*-- 右侧导航 --*/
.rightNav{ position:fixed; width:140px;  right:0; top:100px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank);  }
.rightNav a{ display:block; position:relative; height:30px; line-height:30px; margin-bottom:2px; background:#fff; padding-right:10px; width:130px; overflow:hidden;  cursor:pointer; right:-110px; }
.rightNav a:hover{ text-decoration:none; color:#1974A1;  }
.rightNav a:hover em{ background:#00b700}
.rightNav a em{ display:block; float:left; width:30px; background:#1974A1; color:#fff; font-size:16px; text-align:center; margin-right:10px;}

JS

<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>



来自 http://www.tabyouto.com/fixed-sidebar-with-jquery.html
现在很多主题都集成了用Jquery将侧边栏随滚动条固定在屏幕一侧的功能,提高体验度的同时放个小广告也是不错的选择,现在不用插件也可以实现,不用羡慕那些高大上的收费主题,她们有的我们也可以。

CDN引用安装JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <!--Google-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <!--Microsoft-->

侧边栏滚动结束时固定设定模块

这个代码可以自动获取侧边栏高度,当侧边栏滚动结束后,设定的模块激活并固定在屏幕中,IE6无效。
默认支持两个模块,如果需要增加模块要在第二行添加变量并参照第8行的代码为新变量添加启动的参数。

jQuery(document).ready(function (a) {
        var c = 1,d = 2; //这里设定的是第1和第2
        a.browser.msie && 6 == a.browser.version && !a.support.style || (
        e = a("#sidebar").width(), f = a("#sidebar .widget"), g = f.length, g >= (c > 0) && g >= (d > 0) && a(window).scroll(function () {
                        var b = document.documentElement.scrollTop + document.body.scrollTop;
                        b > f.eq(g - 1).offset().top + f.eq(g - 1).height() ? 0 == a(".roller").length ? (f.parent().append(''), f.eq(c - 1).clone().appendTo(".roller"), c !== d && f.eq(d - 1).clone().appendTo(".roller"), a(".roller").css({ position: "fixed", top: 50, zIndex: 0, width: 250 }), a(".roller").width(e)) : a(".roller").fadeIn(300) : a(".roller").fadeOut(300) })) });

滚动到指定模块时置顶该模块

这串代码适合侧边栏较长的用户,如有JavaScript加载的模块高度会判断出错,建议侧边栏没有JavaScript模块的用户使用。
当滚到 #suggested 时置顶该模块,可以按自己的需要修改。

jQuery(document).ready(function($) {
    $.fn.smartFloat = function() {
        var position = function(element) {
            var top = element.position().top,
            pos = element.css("position");
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                } else {
                    element.css({
                        position: "absolute",
                        top: top
                    });
                }
            });
        };
        return $(this).each(function() {
            position($(this));
        });
    };
    //绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"
    $("#suggested").smartFloat();
});

滚动到一定像素后固定显示

通过设定固定的高度,卷动到该高度时显示置顶的模块。默认给出的是卷动368像素后侧边栏 #sidebar 整体跟随滑动,适合侧边栏少的网站。

var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $("#sidebar").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $("#sidebar").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 368);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#sidebar").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});

来自老赵茶馆的使用jQuery.qrcode为WordPress文章动态生成二维码

jQuery.qrcode地址:link
在线生成器:link

网上流传的方法是采用外网的API方式生成,好处是简单粗暴,缺点是自定义不够;我主题使用的是jQuery.qrcode,好处是自定义功能丰富,缺点是要加载额外js。
首先是载入jQuery,载入jQuery.qrcode,然后在single.php里加入以下代码:

<script>
jQuery(window).load(function() {
    jQuery("#qrcode").qrcode({
        text: "<?php the_permalink(); ?>"
    });
});
</script>

当然,这是最简单的配置,再加些css美化下就OK了,下面说说所有配置的,可按需添加。

{
    // 渲染方式默认有html5的画布canvas,还有image、div
    render: 'canvas',
 
    // 版本version范围为1到40,就是格子的密度
    minVersion: 1,
    maxVersion: 40,
 
    // 容错率从低到高四种模式: 'L', 'M', 'Q' or 'H'
    ecLevel: 'L',
 
    // 如果画布渲染时的上像素偏移
    left: 0,
    top: 0,
 
    // 像素大小
    size: 200,
 
    // 填充颜色
    fill: '#000',
 
    // 背景颜色
    background: null,
 
    // 内容,可以使文本或者网址
    text: 'no text',
 
    // 圆角: 0.0 到 0.5
    radius: 0,
 
    // 空白的边界
    quiet: 0,
 
    //模式
    // 0: normal,正常模式即最简洁模式
    // 1: label strip,可插入标签条
    // 2: label box,可插入标签盒子
    // 3: image strip,可插入图像条
    // 4: image box,可插入图像盒子
    mode: 0,
 
    // 分别是标签或图像的缩放,x偏移,y偏移
    mSize: 0.1,
    mPosX: 0.5,
    mPosY: 0.5,
 
    // 标签文字、字体、颜色
    label: 'no label',
    fontname: 'sans',
    fontcolor: '#000',
 
    // 图像的地址
    image: null
}

就这么简单,就是有一个难点,就是模式3和模式4的插入图像问题,你不能直接在image选项后面直接填入图像地址,那样会报错。作者解释说道,在运行生成二维码之前,图像必须先载入,然后通过选择器填入image选项。
就是说,图像必须在二维码之前载入,那就简单,我把图像载入但是通过css把它隐藏掉

<div id="qrcode">
     <img id="qrcode_img" style="display:none" src="/images/qr-img.png">
</div>
 
 
...
 
<script>
jQuery(window).load(function() {
    jQuery("#qrcode").qrcode({
        mode: 4,
    image: jQuery('#qrcode_img')[0],
        text: "<?php the_permalink(); ?>"
    });
});
</script>
 
...





















<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加两个方法到jQuery原型($.fn)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
    label {
        display: block;
        margin: .5em;
    }
</style>
</head>
<body>
 
<label><input type="checkbox" name="foo"> Foo</label>
<label><input type="checkbox" name="bar"> Bar</label>
<script>
$(function () { 
    $.fn.extend({
        check: function() {
            return this.each(function() {
                this.checked = true;
            });
        },
        uncheck: function() {
            return this.each(function() {
                this.checked = false;
            });
        }
    });
    // 使用新创建的.check() 方法
    $( "input[type='checkbox']" ).check();
})
</script>
 
</body>
</html>

使用 function 参数处理来自 AJAX 请求的数据结果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 function 参数处理来自 AJAX 请求的数据结果</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").load("demo_cd_catalog.xml",function(response,status){
            if (status=="success"){
                $("div").html("<ol></ol>");
                $(response).find("artist").each(function(){
                    var item_text = $(this).text();
                    $('<li></li>').html(item_text).appendTo('ol');
                });
                //alert("总共有 "+$(response).find("cd").size()+" 张 CD")
            }else{
                $("div").html("错误信息: <br/>" + xhr.status + " " + xhr.statusText)
            }
        });
    });
});
</script>
</head>
<body>

<p>艺术家</p>
<div></div>
<button>获取 CD 信息</button>
<p> XML 文件实例为 <a href="demo_cd_catalog.xml" target="_blank">demo_cd_catalog</a></p>

</body>
</html>

demo_cd_catalog.xml


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取 JSON 数据</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("demo_ajax_json.js",function(result){
            $.each(result,function(i,field){
                $("div").append(field+"<br>");
            })
        })
    })
})

</script>
</head>
<body>

<button>获取 JSON 数据</button>
<div></div>

</body>
</html>

demo_ajax_json.js

{ 
  "firstName": "Bill",
  "lastName": "Gates",
  "age": 60
}