jQuery selector + each()

Tweet



最近開始摸索 selector 跟 each() 方法
我只能說，真是太神奇了，傑克。
舉例來說，有個錯綜複雜的HTML，但是必須把所有的圖片網址抓出來該怎麼做

<head runat="server">

    <title></title>

    <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#Button1').click(function () {

                var imgurl = "";

                $('html img').each(function () {

                    imgurl += this.src + "<br/>";

                });

                this.document.write(imgurl);

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input id="Button1" type="button" value="button" />

        <span>

            <img src="pic/0.jpg" /></span>

        <ul>

            <li>

                <img src="pic/8.jpg" /></li>

            <li>

                <img src="pic/1.jpg" /></li>

            <li>

                <img src="pic/10.jpg" /></li>

        </ul>

        <div>

            <img src="pic/11.jpg" />

            <div>

                <img src="pic/12.jpg" />

                <div>

                    <img src="pic/13.jpg" />

                </div>

                <img src="pic/15.jpg" />

            </div>

            <img src="pic/16.jpg" />

        </div>

        <img src="pic/9.jpg" style="display: none" />

    </div>

    </form>

</body>

連 display: none 的圖也抓的到。
很神奇吧，羅絲。

JQuery iframe 操作 趴兔

Tweet

誠如先前(JQuery iframe 操作)所說，透過J蛞蝓可以進行主頁跟 iframe 兩端的 DOM 操作

但是如果你的主頁根本沒引用J蛞蝓勒？

很簡單，你會失敗。

parent.$("#哀低") 在 iframe 裡是有用的，但是你的主頁並不認識他，所以白搭。

怎麻半？人家只會用J蛞蝓，沒了他，人家就像個殘廢。

那就想辦法讓主頁引用J蛞蝓就好了。

雖然這回J蛞蝓行不通，但別忘了還有第一百零一招

Kumakichi表示：J蛞蝓也只不過是被 Javascript Frameworks 玩弄於股掌之間的一名犧牲者而已

悄悄地在 iframe 頁的head裡加入這個

    <script type="text/javascript">

        var js = window.parent.document.createElement("script");

        js.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';

        window.parent.document.getElementsByTagName("head")[0].appendChild(js);

    </script>

 

as your wish & enjoy it

JQuery iframe 操作

Tweet

參考：jquery 與 iframe

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#A_btn1').click(function () {

                $('#A_txt').val($('#iframe1').contents().find('#B_txt').val());

            });

            $('#A_btn2').click(function () {

                $('#iframe1').contents().find('#B_txt').val($('#A_txt').val());

            });

        });

    </script>

    <style type="text/css">

        body {

            background: pink;

        }

        #iframe1 {

            width: 300px;

            height: 200px;

            border: 0;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <span>A</span><br />

        <input type="text" id="A_txt" />

        <input type="button" id="A_btn1" value="B to A" />

        <input type="button" id="A_btn2" value="A to B" /><br />

        <iframe id='iframe1' src="Default2.aspx"></iframe>

    </div>

    </form>

</body>

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#B_btn1').click(function () {

                parent.$("#A_txt").val($("#B_txt").val());

                //$("#A_txt", parent.document.body).val($("#B_txt").val());

            });

            $('#B_btn2').click(function () {

                $("#B_txt").val(parent.$("#A_txt").val());

                //$("#B_txt").val($("#A_txt", parent.document.body).val());

            });

        });

    </script>

    <style type="text/css">

        body {

            background: yellow;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <span>B</span><br />

        <input type="text" id="B_txt" />

        <input type="button" id="B_btn1" value="B to A" />

        <input type="button" id="B_btn2" value="A to B" />

    </div>

    </form>

</body>

 

JQuery querystring 取值

ASP.NET使用querystring如吃飯喝水

後端接值就用 Request.QueryString["id"]

那前端勒？

說穿了就不神秘，自己從location.href字串切割自然可得

但是十大叩頂守則第一條有說

在自己寫之前...

先借助網路力量!!

透過 jQuery 抓取網頁 URL 的參數

效果

程式碼備忘

把jquery.url.js丟上網頁link 使用時用下面這句

$.url.param("id")

jquery.url.js

/*
jQuery Url Plugin
 * Version 1.0
 * 2009-03-22 19:30:05
 * URL: http://ajaxcssblog.com/jquery/url-read-get-variables/
 * Description: jQuery Url Plugin gives the ability to read GET parameters from the actual URL
 * Author: Matthias Jäggli
 * Copyright: Copyright (c) 2009 Matthias Jäggli under dual MIT/GPL license.
*/
(function ($) {
 $.url = {};
 $.extend($.url, {
  _params: {},
  init: function(){
   var paramsRaw = "";
   try{
    paramsRaw = 
     (document.location.href.split("?", 2)[1] || "").split("#")[0].split("&") || [];
    for(var i = 0; i< paramsRaw.length; i++){
     var single = paramsRaw[i].split("=");
     if(single[0])
      this._params[single[0]] = unescape(single[1]);
    }
   }
   catch(e){
    alert(e);
   }
  },
  param: function(name){
   return this._params[name] || "";
  },
  paramAll: function(){
   return this._params;
  }
 });
 $.url.init();
})(jQuery);

N 年後的今天(2015/01/08)發現 中文 TMD 會亂碼耶

把 unescape 改成 decodeURIComponent 即可

另一種選擇：js-url

AJAX Client Script Callback with JQuery

原本Javascript改成JQuery，其他沒變