亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

jQuerify Bookmarklet

標簽:
JQuery

Reference: jQuerify
Bookmarklet,
Updated jQuery Bookmarklet and
Better, Stronger, Safer jQuerify Bookmarklet

What is jQuerify Bookmarklet?

A jQuerify Bookmarklet is a hyperlink that can be dragged into your bookmarks (or
favorites) toolbar. Then, when you’re on a page that doesn’t have jQuery, all you
have to do is click on the bookmarklet and you’ll be ready to play around with jQuery
on that page through the browser’s console.

This a simple jQuerify from the first article:

    <a href="javascript:var%20s=document.createElement('script');s.setAttribute('src',%20'http://jquery.com/src/jquery-latest.js');document.getElementsByTagName('body')[0].appendChild(s);alert('thank you for using jquery!');void(s);">        jQuerify</a>

The source code:

    <a href="javascript:var%20s=document.createElement('script');    s.setAttribute('src',%20'http://jquery.com/src/jquery-latest.js');    document.getElementsByTagName('body')[0].appendChild(s);    alert('thank you for using jquery!');void(s);">jQuerify</a>

Note: %20 here is the encode value of white space:

    decodeURIComponent("%20") === " "; // true

Actually, when you click on the hyperlink or bookmarklet, you actually execute a
piece of JavaScript code:

    var s=document.createElement('script');    s.setAttribute('src', 'http://jquery.com/src/jquery-latest.js');    document.getElementsByTagName('body')[0].appendChild(s);    alert('thank you for using jquery!');

The second article jQuerify Bookemarklet:

    <a href="javascript:(function(){var%20s=document.createElement('script');s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');if(typeof%20jQuery!='undefined'){var%20msg='This%20page%20already%20using%20jQuery%20v'+jQuery.fn.jquery;}else{document.getElementsByTagName('head')[0].appendChild(s);var%20msg='This%20page%20is%20now%20jQuerified';}var%20el=document.createElement('div');el.style.position='fixed';el.style.height='30';el.style.width='200';el.style.margin='0%20auto%200%20auto';el.id='jq-kswedberg';el.style.top='0';el.style.left='40%';el.style.padding='5px%2010px%205px%2010px';el.style.backgroundColor='#f99';el.innerHTML=msg;var%20b=document.getElementsByTagName('body')[0];b.appendChild(el);window.setTimeout(function()%20{jQuery('#jq-kswedberg').fadeOut('slow',function(){jQuery(this).remove()});},2500);})();">        jQuerify</a>

The source code:

    (function() {        var s = document.createElement('script');        s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');        if (typeof jQuery != 'undefined') {            var msg = 'This page already using jQuery v' + jQuery.fn.jquery;        } else {            document.getElementsByTagName('head')[0].appendChild(s);            var msg = 'This page is now jQuerified'        }        var el = document.createElement('div');        el.style.position = 'fixed';        el.style.height = '30';        el.style.width = '200';        el.style.margin = '0 auto 0 auto';        el.id = 'jq-kswedberg';        el.style.top = '0';        el.style.left = '40%';        el.style.padding = '5px 10px 5px 10px';        el.style.backgroundColor = '#f99';        el.innerHTML = msg;        var b = document.getElementsByTagName('body')[0];        b.appendChild(el);        window.setTimeout(function() {            jQuery('#jq-kswedberg').fadeOut('slow', function() {                jQuery(this).remove()            });        }, 2500);    })();

There script code works well, but i want to improve it.

Because after we have loaded the jQuery library, we can show the message with the
help of jQuery.

My modified version:

     (function() {        function showMessage(msg) {            var msgNode = $("<span />").html(msg).css({                "background-color": "#F99",                "padding": 10,                "position": "fixed",                "top": 0            }).appendTo("body");            msgNode.css("left", ($("html, body").width() - msgNode.width()) / 2);            window.setTimeout(function() {                msgNode.fadeOut("slow", function() {                    $(this).remove();                });            }, 2000);        }        var script = document.createElement("script");        script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js");        if (typeof (jQuery) != "undefined") {            showMessage("This page already using jQuery v" + jQuery.fn.jquery);        } else {            document.getElementsByTagName("head")[0].appendChild(script);            script.onload = function() {                showMessage("This page is now jQuerified");            };        }    })();

This is my verson of jQuerify:

    <a href='javascript:(function() {function showMessage(msg) {var msgNode = $("<span/>").html(msg).css({"background-color": "#F99","padding": 10,"position": "fixed","top": 0}).appendTo("body");msgNode.css("left", ($("html, body").width() - msgNode.width()) / 2);window.setTimeout(function() {msgNode.fadeOut("slow", function() {$(this).remove();});}, 2000);}var script = document.createElement("script");script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js");if (typeof (jQuery) != "undefined") {showMessage("This page already using jQuery v" + jQuery.fn.jquery);} else {document.getElementsByTagName("head")[0].appendChild(script);script.onload = function() {showMessage("This page is now jQuerified");};}})();void(0);'>        My version of jQuerify</a>

Everything seems ok until i move to IE, the message of “This page is now jQuerified”
disappears.

The reason is that script tag doesn’t support onload event.

I have to set interval to check whether the jQuery has been loaded.

Final version:

    (function() {        function showMessage(msg) {            var msgNode = $("").html(msg).css({                "background-color": "#F99",                "padding": 10,                "position": "fixed",                "top": 0            }).appendTo("body");            msgNode.css("left", ($("html, body").width() - msgNode.width()) / 2);            window.setTimeout(function() {                msgNode.fadeOut("slow", function() {                    $(this).remove();                });            }, 2000);        }        var script = document.createElement("script");        script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js");        if (typeof (jQuery) != "undefined") {            showMessage("This page already using jQuery v" + jQuery.fn.jquery);        } else {            document.getElementsByTagName("head")[0].appendChild(script);            var timer = window.setInterval(function() {                if (typeof (jQuery) != "undefined") {                    showMessage("This page is now jQuerified");                    window.clearInterval(timer);                }            }, 200);        }    })();

 

    <a href='javascript:(function() {function showMessage(msg) {var msgNode = $("<span/>").html(msg).css({"background-color": "#F99","padding": 10,"position": "fixed","top": 0}).appendTo("body");msgNode.css("left", ($("html, body").width() - msgNode.width()) / 2);window.setTimeout(function() {msgNode.fadeOut("slow", function() {$(this).remove();});}, 2000);}var script = document.createElement("script");script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js");if (typeof (jQuery) != "undefined") {showMessage("This page already using jQuery v" + jQuery.fn.jquery);} else {document.getElementsByTagName("head")[0].appendChild(script);var timer = window.setInterval(function() {if (typeof (jQuery) != "undefined") {showMessage("This page is now jQuerified");window.clearInterval(timer);}}, 200);}})();void(0);'>        My Final version of jQuerify (support IE and Firefox)</a>

How to use it?

Just drag the link to your bookmark or favorites list. When you want to add jQuery support to a page, click the bookmarklet.

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 1
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消