标签： jQuery

jquery css 实现网页下滑时，某个div保持页面为止不动

最近在学seo，发现很多网站中都有这种的，页面下拉时某个div保持在页面的位置不动的效果，实现起来其实很简单，这边我们记录一下简单的代码

jquery方法定义

    $.fn.smartFloat = function () {
        var position = function (element) {
            console.log(element);
            var top = element.position().top, pos = element.css("position");
            $(window).scroll(function () {
                var scrolls = $(this).scrollTop();
                if ((scrolls - 30) > top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0,
                            width: "100%",
                            "background-color": "#FFF",
                            "z-index": 1
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                } else {
                    element.css({
                        position: pos,
                        top: top
                    });
                }
            });
        };
        return $(this).each(function () {
            position($(this));
        });
    };

调用方法

$(".post-view-ranking-wrap").smartFloat();

2023-07-29

WordPress主题使用Google PageSpeed Insights 提示：未使用被动式监听器来提高滚动性能的警告的解决办法
在使用 PageSpeed Insights 测试我们的WordPress站点的使用，如果前端加载了jQuery库，我们往往会收到一条「未使用被动式监听器来提高滚动性能」的警告，谷歌建议我们将触摸和滚轮事件监听器标记为 `passive`，以提高页面的滚动性能。
为什么出现未使用被动式监听器的警告
在浏览器渲染网页的过程中，默认情况下，浏览器会主动监听绑定到触摸和滚动事件，根据该事件的运行结果和是否阻止浏览器的默认行为来判断是否执行默认操作。比如我们可以在 touchstart 事件调用 preventDefault ，这时，浏览器会禁用该事件的默认操作，不会滚动或缩放。
而浏览器无法预先知道一个监听器会不会调用 preventDefault()，它需要等监听器执行完后，再去执行默认行为，而监听器执行是要耗时的，这样就会导致页面卡顿。更深入的解释参考：移动Web滚动性能优化: Passive event listeners。
让WordPress内置的jQuery使用被动式监听器的办法
如果我们把监听器的监听方式改为被动的，就可以消除掉这个延时，提高网页的触摸和滚动性能。虽然这个警告不会直接影响PageSpeed Insights的评分，解决掉这个延时后，对提高网页的用户体验还是有一些帮助的。
截止本文发布之日，WordPress内置的jQuery尚不支持这个操作。很幸运的是，我们可以通过一段简单的代码来为jQuery加上这个支持。
```
add_action('wp_enqueue_scripts', function ()
{
    wp_add_inline_script('jquery', '
    jQuery.event.special.touchstart = {
        setup: function( _, ns, handle ) {
                this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
            }
        };
        jQuery.event.special.touchmove = {
            setup: function( _, ns, handle ) {
                this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
            }
        };
        jQuery.event.special.wheel = {
            setup: function( _, ns, handle ){
                this.addEventListener("wheel", handle, { passive: true });
            }
        };
        jQuery.event.special.mousewheel = {
            setup: function( _, ns, handle ){
                this.addEventListener("mousewheel", handle, { passive: true });
            }
        };'
    );
}, 999);
```
如果您的网站中没有使用jQuery，依然出现了未使用被动式监听器来提高滚动性能的警告，可以参考以上代码中的this.addEventListener 部分修改您的代码，来实现被动式监听。
2023-07-04

jQuery Dialog 插件 jquery-ui 无法关闭对话只允许一个会话

我们在使用jquery-ui插件dialog时注意到默认允许可以弹出多个会话，如果弹出多个之后，关闭要关好几次。

我们的应用场景只允许一个对话的话就比较麻烦，下面我们给出Javascript的代码段，当关闭dialog会话时直接销毁该会话。

$(".deleteLinkDiag a").livequery('click',function() {
            $("#xxxx").dialog({
                    bgiframe: true,
                            resizable: false,
                            height:140,
                            modal: true,
                            autoOpen: false,
                            overlay: {
                                    backgroundColor: '#000',
                                    opacity: 0.5
                            },
                    buttons: {
                                    "Confirm":function()
                                    {
                                            myParent.load(urlLoad, function() { });
                                            $(this).dialog("close");
                                     },
                                    Cancel: function()
                                    {
                                            $(this).dialog("close");
                                    }
                              },
                    close: function(ev, ui) {
                            $(this).dialog("destroy");
                    }
      });
     $("#" + myDiag).dialog('open');
    return false;
    });

注意，这里有 close 动作，关闭之后直接销毁掉会话。

2022-05-14

javascript代码实现随机漂浮的广告图片代码实例

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>js随机飘动的广告图片代码</title>
    </head>
    <body> 
       <div id="main" style="position:absolute;">
            <div style="text-align:right;cursor:pointer;" id="close">关闭</div>
            <a href="" target="_blank"><img src="图片地址.jpg" border="0" width="214" height="73" /></a>
        </div>
    </body>
</html>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    <!--//公共脚本文件 main.js
    function addEvent(obj, evtType, func, cap) {
        cap = cap || false;
        if (obj.addEventListener) {
            obj.addEventListener(evtType, func, cap);
            return true;
        } else if (obj.attachEvent) {
            if (cap) {
                obj.setCapture();
                return true;
            } else {
                return obj.attachEvent("on" + evtType, func);
            }
        } else {
            return false;
        }
    }
    function removeEvent(obj, evtType, func, cap) {
        cap = cap || false;
        if (obj.removeEventListener) {
            obj.removeEventListener(evtType, func, cap);
            return true;
        } else if (obj.detachEvent) {
            if (cap) {
                obj.releaseCapture();
                return true;
            } else {
                return obj.detachEvent("on" + evtType, func);
            }
        } else {
            return false;
        }
    }
    function getPageScroll() {
        var xScroll, yScroll;
        if (self.pageXOffset) {
            xScroll = self.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollLeft) {
            xScroll = document.documentElement.scrollLeft;
        } else if (document.body) {
            xScroll = document.body.scrollLeft;
        }
        if (self.pageYOffset) {
            yScroll = self.pageYOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {
            yScroll = document.documentElement.scrollTop;
        } else if (document.body) {
            yScroll = document.body.scrollTop;
        }
        arrayPageScroll = new Array(xScroll, yScroll);
        return arrayPageScroll;
    }
    function GetPageSize() {
        var xScroll, yScroll;
        if (window.innerHeight && window.scrollMaxY) {
            xScroll = document.body.scrollWidth;
            yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight) {
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else {
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
        var windowWidth, windowHeight;
        if (self.innerHeight) {
            windowWidth = self.innerWidth;
            windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) {
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }
        if (yScroll < windowHeight) {
            pageHeight = windowHeight;
        } else {
            pageHeight = yScroll;
        }
        if (xScroll < windowWidth) {
            pageWidth = windowWidth;
        } else {
            pageWidth = xScroll;
        }
        arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)
        return arrayPageSize;
    }
    var AdMoveConfig = new Object();
    AdMoveConfig.IsInitialized = false;
    AdMoveConfig.AdCount = 0;
    AdMoveConfig.ScrollX = 0;
    AdMoveConfig.ScrollY = 0;
    AdMoveConfig.MoveWidth = 0;
    AdMoveConfig.MoveHeight = 0;
    AdMoveConfig.Resize = function () {
        var winsize = GetPageSize();
        AdMoveConfig.MoveWidth = winsize[2];
        AdMoveConfig.MoveHeight = winsize[3];
        AdMoveConfig.Scroll();
    }
    AdMoveConfig.Scroll = function () {
        var winscroll = getPageScroll();
        AdMoveConfig.ScrollX = winscroll[0];
        AdMoveConfig.ScrollY = winscroll[1];
    }
    addEvent(window, "resize", AdMoveConfig.Resize);
    addEvent(window, "scroll", AdMoveConfig.Scroll);
    function AdMove(id, addCloseButton) {
        if (!AdMoveConfig.IsInitialized) {
            AdMoveConfig.Resize();
            AdMoveConfig.IsInitialized = true;
        }
        AdMoveConfig.AdCount++;
        var obj = document.getElementById(id);
        obj.style.position = "absolute";
        var W = AdMoveConfig.MoveWidth - obj.offsetWidth;
        var H = AdMoveConfig.MoveHeight - obj.offsetHeight;
        var x = W * Math.random(), y = H * Math.random();
        var rad = (Math.random() + 1) * Math.PI / 6;
        var kx = Math.sin(rad), ky = Math.cos(rad);
        var dirx = (Math.random() < 0.5 ? 1 : -1), diry = (Math.random() < 0.5 ? 1 : -1);
        var step = 1;
        var interval;
        if (addCloseButton) {
            var closebtn = document.createElement("div");
            obj.appendChild(closebtn);
            closebtn.onclick = function () {
                obj.style.display = "none";
                clearInterval(interval);
                closebtn.onclick = null;
                obj.onmouseover = null;
                obj.onmouseout = null;
                obj.MoveHandler = null;
                AdMoveConfig.AdCount--;
                if (AdMoveConfig.AdCount <= 0) {
                    removeEvent(window, "resize", AdMoveConfig.Resize);
                    removeEvent(window, "scroll", AdMoveConfig.Scroll);
                    AdMoveConfig.Resize = null;
                    AdMoveConfig.Scroll = null;
                    AdMoveConfig = null;
                }
            }
        }
        obj.MoveHandler = function () {
            obj.style.left = (x + AdMoveConfig.ScrollX) + "px";
            obj.style.top = (y + AdMoveConfig.ScrollY) + "px";
            rad = (Math.random() + 1) * Math.PI / 6;
            W = AdMoveConfig.MoveWidth - obj.offsetWidth;
            H = AdMoveConfig.MoveHeight - obj.offsetHeight;
            x = x + step * kx * dirx;
            if (x < 0) { dirx = 1; x = 0; kx = Math.sin(rad); ky = Math.cos(rad); }
            if (x > W) { dirx = -1; x = W; kx = Math.sin(rad); ky = Math.cos(rad); }
            y = y + step * ky * diry;
            if (y < 0) { diry = 1; y = 0; kx = Math.sin(rad); ky = Math.cos(rad); }
            if (y > H) { diry = -1; y = H; kx = Math.sin(rad); ky = Math.cos(rad); }
        }
        this.SetLocation = function (vx, vy) { x = vx; y = vy; }
        this.SetDirection = function (vx, vy) { dirx = vx; diry = vy; }
        this.Run = function () {
            var delay = 10;
            interval = setInterval(obj.MoveHandler, delay);
            obj.onmouseover = function () { clearInterval(interval); }
            obj.onmouseout = function () { interval = setInterval(obj.MoveHandler, delay); }
        }
    }
    //-->
</script>
<script type="text/javascript">
    $(function() {
        $("#close").click(function() {
            $("#main").hide();
        });
    })
    var ad1 = new AdMove("main", true);
    ad1.Run();
</script>

2022-02-15

swiper修改轮播图箭头的大小和颜色
遇到的问题
写响应式页面时需要将swiper的箭头按需要缩小到一定的比例。
解决
修改箭头的大小
划重点：一定要在原css中就写上去，不然单独写到媒体查询里没有用。
```
.swiper-button-prev:after, .swiper-button-next:after{
        font-size: 25px!important;
}
```
写到原css样式中，再写到媒体查询对应的地方，即可。
修改箭头的颜色
这个不用写到原生css样式中，直接在style中写就可以。
```
.swiper-button-next, .swiper-button-prev{
        color: #FFFF00!important;
}
```
2021-09-29
jQuery判断当前元素是第几个元素&获取第N个元素
假设有下面这样一段HTML代码：
```
<ul>
    <li>jQuery判断当前元素是第几个元素示例</li>
    <li>jQuery获取第N个元素示例</li>
    <li>jQuery选择器示例</li>
</ul>
```
jQuery判断当前元素是第几个元素
如果我们点击任何一个li标签，想知道当前点击的是第几个li标签，可以使用下面的代码：
```
$("ul li").click(function () {
    var index = $("ul li").index(this);
    alert(index);
 });
```
jQuery 获取第N个元素
同理，如果我们要获取第二li标签元素，可以使用下面的代码
```
var element=$("ul li").eq(1);
alert($(element).html());
```
2021-07-27
jquery中arrt()和prop()的区别
在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。
但不得不说的是，这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。
操作对象不同
很明显，attr和prop分别是单词attribute和property的缩写，并且它们均表示”属性”的意思。
不过，在jQuery中，attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性。
```

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
// 这里的name、age是Person的property
var Person = { name: "小明", age: 18};
</script>
```
在jQuery中，prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)；attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。
应用版本不同
attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。
用于设置的属性值类型不同
由于attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。
prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。
其他细节问题
在jQuery 1.6之前，只有attr()函数可用，该函数不仅承担了attribute的设置和获取工作，还同时承担了property的设置和获取工作。例如：在jQuery 1.6之前，attr()也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。
直到jQuery 1.6新增prop()函数，并用来承担property的设置或获取工作之后，attr()才只用来负责attribute的设置和获取工作。
此外，对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之前，attr()获取这些属性的返回值为Boolean类型：如果被选中(或禁用)就返回true，否则返回false。
但是从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。
因为jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。
因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。
```
<button>按钮</button>
    <input type="checkbox" name="" id="" checked="checked">
    <script src="jquery.js"></script>
    <script>
        // $('button').on('click',function(){
        // });
        // var r = $('input');
        $('button').on('click',function(){
            console.log(11)
            if ($('input').prop('checked')) {
                $('input').prop('checked',false);
            }else{
                $('input').prop('checked',true);
            }
        })
    </script>
```
// attr / prop
// attr ==> getAttribute() / setAttribute()
// 用于操作自定义的属性，对于DOM对象自身的布尔值类型的属性，只能
// 通过这个两个方法来设置或者读取默认值，而不能动态改变值
//
// prop ==> dom.checked = true;
// 对于布尔值的属性（selected/checked/diabled）都需要通过直接访问属性
// 方式来操作（点语法、[]）
大家都知道原生js可以获取匹配元素的内部html和外部html，内部是innerHTML，外部是outerHTML，原生js的dom对象是存在这两个属性的，
document.getElementById(“linkType”).outerHTML；
如果用jQuery如何获取匹配元素（包括自身元素的html）呢？
既然存在这个属性，我们就可以用$(“#linkType”).prop(“outerHTML”)来获取；
可以通过$(“#linkType”).prop(“outerHTML”,outerHTML)赋值来改变outerHTML的内容；
值得注意的是jQuery的attr是获取不到这个属性值的。
2021-07-09
WordPress 开发中出现 Uncaught ReferenceError: jQuery is not defined TypeError: $ is not a function
问题描述
WordPress在主题、插件开发中，如果我们直接使用 ` $(‘#ID’) ` 这种写法就会报错：
Uncaught ReferenceError: jQuery is not defined
TypeError: $ is not a function
解决方法
```
jQuery(function($) { 
   // use $
});
```
2021-05-26
jQuery 添加 required 必填属性图文教程
现在大部分主流浏览器均已支持required属性，那么我们如何使用javascript添加required属性呢，下面我们记录一下jQuery的代码
```
$('#id').attr("required", "true");
```
2020-12-14

使用jquery获取url及url参数修改某个参数代码实例

使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作，这里我们做一下记录

jQuery获取url代码实例

console.log(window.location.href);

jQuery修改url中的某个参数代码示例

// 修改url中的某个参数
function changeURLArg(url,arg,arg_val){
    var pattern=arg+'=([^&]*)';
    var replaceText=arg+'='+arg_val;
    if(url.match(pattern)){
        var tmp='/('+ arg+'=)([^&]*)/gi';
        tmp=url.replace(eval(tmp),replaceText);
        return tmp;
    }else{
        if(url.match('[\?]')){
            return url+'&'+replaceText;
        }else{
            return url+'?'+replaceText;
        }
    }
    return url+'\n'+arg+'\n'+arg_val;
}

使用方法

window.location = changeURLArg('当前地址或url字符串','参数名','参数值');

jQuery获取url中的某个参数的值

//获取url中的参数
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]); return null; //返回参数值
}

2020-08-05

JQuery 如何获取select选中的值图文教程

html代码

<select id="ddl">
<option value="100" emoney="12" >选项1</option>
<option value="200" emoney="13" >选项2</option>
<option value="300" emoney="14" >选项3</option>
</select>

Javascript代码部分

//获取属性emoney的值
var iteValue = $("#ddl").find("option:selected").attr("emoney");
console.log('emoney的值:' + iteValue);
//获取选中项的value
var itemValue1 = $("#ddl").val();
console.log('Value:' + itemValue1);
//获取选中项的文本值
var itemText = $("#ddl option:selected").text();
console.log('Text:' + itemText);
//获取选中项的文本值
var itemText1 = $("#ddl").find("option:selected").text();
console.log('Text:' + itemText1);

2020-08-04

Javascript 计算两时间差换算天时分秒

前面我们记录了使用WdatePicker日期组件时，选择日期后，执行某个方法。下面我们记录一下如何计算2个时间差，写成天小时分的格式

function time_different( date1 , date2 ){
    var date3 = new Date(date2).getTime() - new Date(date1).getTime();   //时间差的毫秒数      
    //------------------------------
    //计算出相差天数
    var days=Math.floor(date3/(24*3600*1000))
    //计算出小时数
    var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数
    var hours=Math.floor(leave1/(3600*1000))
    //计算相差分钟数
    var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
    var minutes=Math.floor(leave2/(60*1000))
    //计算相差秒数
    var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
    var seconds=Math.round(leave3/1000)
    return days+" 天 "+hours+" 小时 "+minutes+" 分钟 "+seconds+" 秒";
}

调用方法：

    $("#begin_time").click(function(){
       WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd H:m'});
    });
    $("#end_time").click(function(){
        WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd H:m',onpicked:function(){
            var date2 = $('#end_time').val();
            var date1 = $('#begin_time').val();
            $('.duration').html( time_different(date1,date2) );
        }});
    });

2020-04-22

标签： jQuery

jquery方法定义

调用方法

为什么出现未使用被动式监听器的警告

让WordPress内置的jQuery使用被动式监听器的办法

遇到的问题

解决

修改箭头的大小

修改箭头的颜色

假设有下面这样一段HTML代码：

jQuery判断当前元素是第几个元素

jQuery 获取第N个元素

操作对象不同

应用版本不同

用于设置的属性值类型不同

其他细节问题

问题描述

解决方法