Follow Fang!: jQuery

顯示具有 jQuery 標籤的文章。顯示所有文章

2020/09/20

不透過IG API Key get images comment

客戶網站需要連動IG發文功能，API申請太麻煩，只好自幹了

IG再網頁執行時透過js取得到JSON格式的資料

程式碼如下：

ASP.Net Core Razor ajax get result

這篇廢文是用於練功並記錄下來，實作線上編譯Java並輸出結果
透過Process的方式去掉用java及javac，並且將結果透過async方式取得避免線程賭塞
關於CSRF的介紹可以參考這篇「讓我們來談談 CSRF」

Startup.cs
這邊要在ConfigureServices加入

services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

要設定這個主要是因為XSRF/CSRF



using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace WebOnlineEditorApplication
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure<CookiePolicyOptions>(options =>
            {
                // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });


            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
            services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }
            
            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseCookiePolicy();
            app.UseMvc();
        }
    }
}

2014/05/22

透過Youtube API V2.0 取得影片資訊

Youtube有提供API可以取得影片資訊，那我們可以透過該API做一些事情
那這個範例我們就拿周杰倫【愛你沒差官方完整MV】影片當作範例
可以直接透過底下的網址取得影片資訊以及影音檔的來源，也可以取得圖片得大小

http://gdata.youtube.com/feeds/api/videos/Videoid?v=2&alt=json

Videoid是Youtube影片URL v=之後的編碼

把該Videoid改為miBGaUagOz8，再將該網址貼到url即可得到JSON檔案

jQuery與input tag的一些應用

最近被狗幹才需要用到，有用到在更新XD

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf8">
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 <script type="text/javascript">
  $(function (){
   $("input[type=radio]").each(function(){
    console.debug($(this).val());
   });

   $("input[type=text]").each(function(){
    $(this).val("C.Y. Fang") ;
   });
  });

  function MyClean(){
   $("input[type=radio]:checked").each(function(){
    $(this).prop("checked", false)
   });

   $("input[type=text]").each(function(){
    $(this).val('') ;
   });
  }
 </script>
</head>
<body>
 <div>
  <input type="radio" value="男">男
  <input type="radio" value="女">女
  <input type="text">
 </div>
 <button onclick="MyClean()">Clean</button>
</body>
</html>

參考資料：
https://api.jquery.com/jQuery.each/
http://stackoverflow.com/questions/18659726/jquery-find-all-the-visible-required-fields
http://stackoverflow.com/questions/1280499/jquery-set-select-index
http://stackoverflow.com/questions/3165413/how-to-get-input-type-using-jquery
http://stackoverflow.com/questions/306583/this-selector-and-children
http://stackoverflow.com/questions/4088467/get-value-in-input-text-box

2013/11/17

jQuery 修改z-index達成置頂廣告效果

平常看ETtoday新聞，閒置三分鐘後會出現廣告

廣告通常置頂於最上層，作法可能是去調整z-index

以下是我的程式碼：

<html>
 <head>
  <meta charset="utf8">
  <title>Demo</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script type="text/javascript">
   $(function () {
    $("#test2").position({
     left: 0,
     top:0
    });
   });

   function Hide () {
    $("#test2").hide();
   }
  </script>
  <style type="text/css">
   #test2{
    position: absolute;
    z-index: 1;
    left: 120px;
    top: 100px;
   }
   
   #test2 img{
    margin: 0 auto;
    width: 640px;
    height: 480px;
   }
  </style>
 </head>
 <body>
  <div id="test1">
   testdsadasdsad<br>
   eqwewqe<br>
   qewqeqwe<br>
   wqewqewqe<br>
   wqewqe<br>
  </div>
  <div id="test2">
   <img src="1.jpg" onclick="Hide();">
  </div>
 </body>
</html>

開啟範例網頁會出現假廣告

點擊時，會將廣告隱藏起來，或將廣告直接刪除

參考資料：
http://api.jquery.com/offset/

圖片來源：
http://www.wired.com/wiredenterprise/wp-content/uploads/2013/07/ff_googleinfrastructure_large.jpg

2013/10/28

利用jQuery 顯示或隱藏欄位

如何在點擊時能夠顯示或隱藏，我的想法很簡單，當點即時就隱藏欄位就好了，當隱藏之後被點擊就能顯示

這意謂著，我只要知道物件當前是處於隱藏或顯示的狀態就好了
要知道物件狀態，可以透過『is()』取得

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
   <script type="text/javascript">
    $(function () {
     $('.bar').click(function() {

      var hidden = $('.bar').children().is(":visible");
      
      if(hidden) 
       $('.bar').children().hide(); 
      else 
       $('.bar').children().show();
      
     });
    });
   </script>
   <style type="text/css">
   .bar{
    width: 300px;
    height: 50px;
    background-color: #758FEA;
   }
   </style>
 </head>
 <body>
  <div class="bar">
   bar
   <div>
    test
   </div>
  </div>
 </body>
</html>

尚未點擊前，test文字還在

點擊後，bar的子區塊已經被隱藏了

參考資料：
http://api.jquery.com/children/
http://api.jquery.com/is/

2013/09/13

最近需要去擷取到別人網頁的內容，並且分析裡面資料
在這邊以『Yahoo！』作為範例，單純擷取不分析

在分析別人網頁時常會遇到『Cross Domain』的問題，用Chrmoe開發者還會遇到『Access-Control-Allow-Origin』的問題

在此已經知道一些解決方式，不過這邊是參考『洪朝貴』老師的部落格『"資訊人權貴" 之家』所寫得『Cross Domain AJAX 抓網頁撈過界以及如何整合兩個部落格的標籤』

提到有一個套件是由James Padolsey本人寫所的『xdomainajax』套件，我那時在找套件的時候發現老師貼的網址都已經失連了

由老師的連結才知道開發者已經將Github名稱從『jamespadolsey』改為『padolsey』，算是一段蠻有趣的事情

對他有興趣的人可以直接到他網站『JAMES PADOLSEY』觀看，他不只xdomainajax一個作品而已，蠻厲害的開發者

有稍微看一下xdomainajax內容，對方用YQL實現跨站擷取的功能

YQL是什麼？YQL是由Yahoo!提供的Yahoo! Query Language，可以用SQL的方式去查詢，也能跨越去查詢其他網頁

使用 jQuery 動態新增表單及動態移除表單

有一個很好得學長求助，他的問題是希望能夠透過下拉式選單去動態新增表單
表單的數量則是由選取的數字去決定，特別的一點式選擇5個表單，則增加6個表單
其他則是照選取的數字而新增幾個

我這個範例呢，用文字方塊取代表單作為說明；範例程式碼包含著一個下拉式選擇以及一個div區塊，id為form

選取下拉式選單時，會觸發onchange事件，事件對應的動作為change (num)

可以由下面程式碼得知，我用index去取得使用者選取的值
從值去判斷選取數值，超過5，則必須執行六次
透過JQuery的append去新增至form id內的文字方塊，id為test+i

function change (num) {
    reload ();

    index = num.options[num.selectedIndex].value;

    switch(parseInt(index)){
     case 1:
     case 2:
     case 3:
     case 4:
      addTextArea ();
      break;
     case 5:
      index = parseInt(index) + 1;
      addTextArea ();
      break;
     default:
      break;
    }
   }

jQuery Cycle 文字輪播器

之前有用JQuery實做過照片輪播『HTML5 使用 JQuery Cycle Plugin』，這次用途主要是拿來當跑馬燈用的，不過希望能夠作成輪播的方式，可能會比較漂亮吧XD

這次有用ClearType的效果，ClearType是提昇文字的解析度，並且讓R, G, B像素更亮
每三秒鐘切換一次，0.4秒會切換到一個文字

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JS輪播範本</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
  </head>
  
  <body>

  <style type="text/css">
    body{
      background-color: #808080;
    }
 
    #slideshow {   
      color: #FF80C0;
      font-size: 20pt;
      margin-left: 40%;
      margin-top: 30%;
    }
  </style>
  
  <script type="text/javascript">
    $(function() {
      $('#slideshow').cycle({ timeout: 3000, cleartype: 1, speed: 400, cleartypeNoBg = true  });
    });
  </script>
 
  <div id="slideshow">
    <div>這是一個輪播的範本</div>
    <div>會根據目前的排序去輪播</div>
    <div>時間間格大概就是3秒鐘</div>
  </div>
 
  </body>
</html>

參考資料：
http://jquery.malsup.com/cycle/cleartype.html
http://blog.yam.com/hanasan/article/35806444
http://www.1keydata.com/css-tutorial/tw/div-span.php

2013/06/02

使用 jQuery Cycle Plugin

學期初跟同學一起去修HTML5，我們都是對於HTML5有高度興趣的學生
但是上完這堂課後覺得好失敗Orz，都照著W3School範例念…
不過另一位講師『小朱』有提到一些比較重要觀念，但這些似乎都不是本文重點XD

其實是因為下禮拜要交期末作業了，老師要整體組員的介紹網頁
應該不用做其他一些應用，所以我就設計出如下圖的版面

訂閱：文章 (Atom)

Follow Fang!

2020/09/20

不透過IG API Key get images comment

2019/03/12

ASP.Net Core Razor ajax get result

2015/09/08

jQuery 修改id或名稱