jQuery $.each 迴圈 continue 與 break 替代方式

在PHP中或某些語言中,可以在迴圈中使用 continue 及 break 來進行更靈活的迴圈

  • continue :跳過目前動作,繼續執行迴圈的下一個動作
  • break:跳出迴圈,停止迴圈之後的動作

在 jQuery 中迴圈是用 $.each(),但使用 continue 及 break 是不起作用的,可改用下列替代方式,可以達成相同目的。

 
$.each(data, function(index, obj){

    if ($(img).empty()) {

        return; // 等於 continue

    } else {

        return false; // 等於 break

    }

});

[……]

Read more

HTML 錨點偏移 CSS and JS 兩種方法 (offset anchor tag link)

HTML提供了一個錨點連結的功能 (anchor tag link),換頁或不換頁,都可以把瀏覽器卷軸自動捲到錨點位置,但如果網頁上方有一個黏頭的Header (sticky header),RWD手機版本則習慣使用(sticky header),Header 懸浮本文之上,可能會把錨點的元素內容遮蔽,這時我們則需要偏移(sticky header)的高度,避免錨點元素被遮蔽。[……]

Read more

javascript list all the plugins installed in the browser

取得瀏覽器安裝的所有插件

有時需要判斷瀏覽器安裝那些第三方插件,比如:VLC、Flash Player、PDF Viewer等等,藉以作後續的動作,比如說沒有Flash Player引導user安裝,下面這程式就非常有用:

navigator.plugins

會返回一個已安裝plugin的數組

<!doctype html>
<html>
<body>
<div id="example"></div>
<script type="text/javascript">
var x=navigator.plugins.length; // store the total no of plugin stored 
var txt="Total plugin installed: "+x+"<br/>";
txt+="Available plugins are->"+"<br/>";
for(var i=0;i<x;i++)
{
  txt+=navigator[......]

Read more

javascript get query values from url 取網址參數

本篇使用 Javascript , 若想用jQuery的方法,可參考本站另一篇

jQuery get query values from url 取網址參數 

本篇提供兩種方法,擇一使用

方法一:

/*
    VECTOR COOL
    https://vector.cool
*/
function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === s[......]

Read more

Drop and drag

Drag and drop so simple it hurts
https://github.com/bevacqua/dragula

angular-drag-and-drop-lists
http://marceljuenemann.github.io/angular-drag-and-drop-lists/

GRIDSTACK.JS
http://troolee.github.io/gridstack.js/[……]

Read more

解決 WordPress 無法使用 jQuery 問題

設計WordPress主題或插件開發時,常會需要使用jQuery,WordPress其實很貼心的已經載入jQuery,但實際使用時發現,原本可以跑的jQuery程式,放進WordPress卻不能跑了,才知道原來WordPress的jQuery要這樣寫。

 

WordPress 頁面中,確實看到 jQuery 已載入

<script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

頁面中加入一段測試碼

<script>
$( document ).ready(function() {[......]

Read more

Javascript 常用取網址 window.location

// ‘http://127.0.0.1/osac.com.tw/zh-tw/tag_page.php?aaa=1&bbb=2’

// 當前頁面的 URL
window.location.href
// output : ‘http://127.0.0.1/osac.com.tw/zh-tw/tag_page.php?aaa=1&bbb=2’

// 域名
window.location.hostname;
// output : ‘127.0.0.1’

//當前頁的路徑和文件名
window.location.pathname;            
// output : ‘/osac.com.tw/zh-tw/tag_page.php’

//所使用的網絡協議(http://或https://)
console.log(‘location.protocol=’+window.location.protocol);
// output : ‘http:’

//取URL參數
urlParam = decodeURIC[……]

Read more

Javascript for each in 做到跟PHP foreach 一樣的使用方式

//先宣告物件
var myobj = new Object();

//給物件的屬性值
myobj.color = ‘red’;
myobj.name = ‘hsin’;
myobj.nation = ‘taiwan’;

//這邊展現如何用for – in 取出。
var content=”;
for(var key in myobj){
       content +=”屬性名稱:”+ key+” ; 值: “+myobj[key]+”n”;
}

alert(content);

出處:四處流浪的阿基[……]

Read more