`

一些实用的jQuery代码片段

 
阅读更多

1.jQuery得到用户IP:

$.getJSON("http://jsonip.appspot.com?callback=?", function (data) {
    alert("Your ip: " + data.ip);
});

2.jQuery查看图片的宽度和高度:

var theImage = new Image();
theImage.src = $('#imageid').attr("src");
alert("Width: " + theImage.width);
alert("Height: " + theImage.height);

3.jQuery查找指定字符串:

var str = $('*:contains("the string")');

4.js 判断浏览器是否启用cookie:

$(document).ready(function () {
    document.cookie = "cookieid=1; expires=60";
    var result = document.cookie.indexOf("cookieid=") != -1;
    if (!result) {
        alert("浏览器未启用cookie");
    }
});

5.jQuery检测键盘按键:

$(document).ready(function () {
    $(this).keypress(function (e) {
        switch (e.which) {
            case 13:
                alert("您按下了回车键");
                break;
            //more detect
        }
    });
});

好了,本篇就小结到这里,希望本篇jQuery代码片段文章能对大家起到帮助作用

1.jQuery 滚动到顶部/底部

关于jQuery滚动,本站在之前已经发过类似文章,如:jQuery 回到顶部,下边将它们再次整理一下:

//滚动到顶部
$("html, body").animate({ scrollTop: "0px" }, 1000);
//滚动到底部
//$("#container"):要滚动的元素
$("html, body").animate({
    scrollTop: $("#container").height()
}, 1000);

2.jQuery 判断元素是否存在

怎么使用 jQuery 判断元素是否存在,相信不少 jQuery 学习者都会问这个问题,方法很简单,如下:

if ($(" #elementid").length) {
    //元素存在
}

3.使用 abort() 方法取消 Ajax 请求

使用 abort() 方法在执行 js 异步请求的时候可以取消上一次的请求,方法如下:

var req = $.ajax({
    type: "post",
    url: "/article/form/comment.aspx",
    data: { "id": 1 },
    success: function() {
        //handle
    }
});
//取消 Ajax 请求
if (req) {
    req.abort()
}

jQuery Ajax 是使用 jQuery 比较重要的一块,如果你是 jQuery 初学者,可能会对上边的代码感觉到陌生,或许你可以看看 jQuery学习大总结(五)jQuery Ajax

4.jQuery 禁用鼠标右键

$(document).ready(function() {
    $(document).bind("contextmenu", function() {
        return false;
    });
});

5.向由setTimeout()调用的方法中传参

$(document).ready(function() {
    timeout = setTimeout(function() {
        showMess("succeed")
    }, 2000);
});
function showMess(m) {
    alert(m);
}


1.jQuery 倒计时

$(document).ready(function () {
    var count = 10;
    countdown = setInterval(function () {
        $("p.countdown").html(count + " 秒后将跳转!");
        if (count == 0) {
            clearInterval(countdown)
            window.location = 'http://google.com';
        }
        count--;
    }, 1000);
});

2.jQuery 判断浏览器类型及版本号

jQuery 判断浏览器类型及版本号非常简单,可以直接使用 $.browser 方法进行判断。但我自己试验时发现在判断 Chrome 浏览器时,返回的是 Safari,在网上找了下,于是有了下边的代码:

var browserName = navigator.userAgent.toLowerCase();
mybrowser = {
    version: (browserName.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [0, '0'])[1],
    safari: /webkit/i.test(browserName) && !this.chrome,
    opera: /opera/i.test(browserName),
    firefox: /firefox/i.test(browserName),
    msie: /msie/i.test(browserName) && !/opera/.test(browserName),
    mozilla: /mozilla/i.test(browserName) && !/(compatible|webkit)/.test(browserName) && !this.chrome,
    chrome: /chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)
}
$(document).ready(function () {
    if (mybrowser.msie) {
        alert("浏览器为:Internet Explorer 版本号为:" + $.browser.version);
    }
    else if (mybrowser.mozilla) {
        alert("浏览器为:Firefox 版本号为:" + $.browser.version);
    }
    else if (mybrowser.opera) {
        alert("浏览器为:Opera 版本号为:" + $.browser.version);
    }
    else if (mybrowser.safari) {
        alert("浏览器为:Safari 版本号为:" + $.browser.version);
    }
    else if (mybrowser.chrome) {
        alert("浏览器为:Chrome 版本号为:" + mybrowser.version);
    }
    else {
        alert("神马");
    }
});

3.jQuery 元素居中显示

关于元素居中你可以先参考下css实现对象完全居中,了解下其中的原理,之后再看下边使用jQuery 实现元素居中就比较简单了。

//写成了插件形式
(function ($) {
    jQuery.fn.center = function () {
        this.css('position', 'absolute');
        this.css('top', ($(window).height() - this.height()) /2 +$(window).scrollTop() + 'px');
        this.css('left', ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + 'px');
        return this;
    }
})(jQuery);
$(document).ready(function () {
    //调用
    $("#somediv").center();
});

4.jQuery 判断图像是否被完全加载进来

$("#demoImg").attr("src", "demo.jpg").load(function() {  
    alert("图片加载完成");  
}); 

如果你有什么实用的 jQuery 代码片段,欢迎在 jQuery学习上和大家分享!

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    50个jquery代码片段

    从给定的文件信息中,我们可以提炼出一系列关于jQuery的重要知识点,这50个代码片段不仅展示了jQuery的强大功能,还提供了实用的编程技巧,适用于各种JavaScript项目。以下是对部分代码片段的详细解释: ### 1. ...

    直接拿来用的15个jQuery代码片段

    标题中提到的是“直接拿来用的15个jQuery代码片段”,这表明本文将分享十五个可以直接应用于项目中的实用jQuery代码片段。jQuery是广泛使用的一个JavaScript库,它简化了HTML文档遍历、事件处理、动画以及AJAX交互...

    45个实用的jquery代码片段

    这个“45个实用的jquery代码片段”集合为开发者提供了丰富的资源,可以帮助他们更高效地开发网页应用。下面,我们将详细讨论这些jQuery代码片段中的关键知识点。 1. **选择器**:jQuery提供了丰富且直观的选择器,...

    jquery实用代码片段集合

    ### jQuery实用代码片段集合知识点 ...以上知识点涵盖了在实际开发中常用的jQuery代码片段,它们可以提高开发效率,增强用户体验。通过这些实用的代码片段,开发者可以更灵活地处理常见的前端开发场景。

    jQuery常用代码片段

    这篇博文"jQuery常用代码片段"很可能是为了分享一些实用的jQuery代码示例,帮助开发者提高工作效率。下面我们将深入探讨jQuery的一些核心功能和常见用法。 1. **选择器**: jQuery的选择器类似于CSS,可以轻松地选取...

    10 个很棒的 jQuery 代码片段

    10 个很棒的 jQuery 代码片段 - 代码分享

    60个实用的jQuery代码片段.pdf

    以下是从60个实用jQuery代码片段中提取的知识点: 1. **选择器与过滤**:`filter()`方法允许根据指定条件筛选元素集合,如`":not(:has(.selected))"`用于移除包含特定类的元素。 2. **元素引用**:存储已选择的...

    《超实用的jQuery代码段》PDF版本下载.txt

    《超实用的jQuery代码段》这本书提供了大量实用的jQuery代码片段,这些片段可以帮助开发者快速地解决实际项目中遇到的问题。通过学习本书,不仅可以提升使用jQuery的能力,还能提高开发效率。对于初学者来说,这本书...

    jquery代码片段

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2 才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成。

    超实用的JQUERY代码

    10个超实用的jQuery代码片段 jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢!

    《超实用 的jQuery代码段》 配套 源码

    《超实用的jQuery代码段》是一本专注于jQuery实践的书籍,其配套源码提供了一整套丰富的代码示例,帮助读者深入理解并掌握jQuery库在实际项目中的应用。jQuery是JavaScript的一个强大库,它简化了DOM操作、事件处理...

    常用的几个JQuery代码片段

    在本文中,我们将探讨一些常用的 jQuery 代码片段,这些片段在实际开发中非常实用。 1. **导航菜单背景切换效果** 当用户点击导航菜单项时,常常需要改变激活项的背景色。以下代码展示了如何使用 jQuery 实现这一...

    高效Web开发的10个jQuery代码片段_.docx

    以下是从"高效Web开发的10个jQuery代码片段"中提炼出的关键知识点: 1. **检测Internet Explorer版本**: 使用`navigator.userAgent`对象可以检测用户使用的浏览器类型。通过匹配字符串`msie/i`,我们可以判断是否...

    50个必备的实用jQuery代码段

    ### 50个必备的实用jQuery代码段 #### 1. 如何创建嵌套的过滤器 嵌套过滤器能够帮助我们进一步精简选择器的结果集。例如,我们需要找到所有不包含特定类(如 `selected`)子元素的元素。 ```javascript // 创建一...

    VS2010 VS2012最好用的JQuery代码段

    在Visual Studio 2010 和 2012 这两个版本中,开发人员可以利用jQuery代码片段来提高编码效率。本文将详细介绍如何在VS2010和VS2012中使用这些代码片段,以及它们为何被视为“最好用”的。** **一、安装jQuery库** ...

    一些实用的jQuery代码片段收集

    下边这些jQuery片段只是很少的一部分,如果您在学习过程中也遇到过一些常用的jQuery代码,欢迎分享。下边就让我们看看这些有代码片段。 1.jQuery得到用户IP: 代码如下: $.getJSON(...

    49个jQuery代码经典片段

    以下是从给定的“49个jQuery代码经典片段”中提炼出的一些关键知识点: 1. **修改 jQuery 默认编码**: jQuery 默认使用 UTF-8 编码,但可以通过 `$.ajaxSetup` 设置全局的 `contentType` 来改变编码,如将编码改...

    jQuery选择器大全(48个代码片段 21幅图演示)

    **jQuery选择器大全** jQuery库以其易用性和强大的选择器...结合代码片段和21幅图的演示,可以更直观地理解并掌握每个选择器的工作原理和应用场景。在实际项目中,熟练运用jQuery选择器能大大提高开发效率和代码质量。

Global site tag (gtag.js) - Google Analytics