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

2018年6月26日 星期二

重新載入.JS檔

如何在修改.JS後,能夠讓頁面更新,不要使用 cache 資料

[Chrome]
按下 [F5] 是重新整理但使用cache
按下 [Ctrl] + [F5] 是全部重新載入

其他解決方法
chrome 還可以直接用滑鼠在網址列左邊的重新整理按鈕,按右鍵,選擇[清除快取並強制重新載入],點選執行即可。

[Firefox]
與 Chrome 相同
按下 [F5] 是重新整理但使用cache
按下 [Ctrl] + [F5] 是全部重新載入

另一個方法
選擇[所有歷史記錄]-->選[快取] 打勾其他,不要勾[保證有效]

如果要確定每次使用者都是載入新的內容則可以使用隨機參數:
src="/css/styles.css?v={隨機製造一個亂數或字串}"

參考資料

[1] How to force Chrome browser to reload .css file while debugging in Visual Studio?

[2] http://superuser.com/questions/220179/how-can-i-do-a-cache-refresh-in-google-chrome

2018年3月27日 星期二

jQuery 事件

資料引用來源:jQuery 事件

jQuery 事件函數
jQuery 事件處理方法是 jQuery 中的核心函數。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
術語由事件“觸發”(或“激發”)經常會被使用。

通常會把 jQuery 代碼放到 <head> 部分的事件處理方法中:

實例:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>
 在上面的例子中,當按鈕的點擊事件被觸發時會調用一個函數:
$("button").click(function() {..some code... } )
 該方法隱藏所有 <p> 元素:
$("p").hide();
單獨文件中的函數
如果您的網站包含許多頁面,並且您希望您的 jQuery 函数易于维護,那麼請把您的 jQuery 函数放到獨立的 .js 文件中。

當我們在教程中演示 jQuery 時,會將函數直接添加到 <head> 部分中。不過,把它們放到一個單獨的文件中會更好,就像這样(通過 src 屬性來引用文件):
實例:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 名稱沖突
jQuery 使用 $ 符号作為 jQuery 的簡介方式。

某些其他 JavaScript 庫中的函数(比如 Prototype)同样使用 $ 符號。

jQuery 使用名为 noConflict() 的方法來解決該問題。

var jq=jQuery.noConflict(),幫助您使用自己的名稱(比如 jq)來代替 $ 符號。

jQuery 事件
下面是 jQuery 中事件方法的一些例子:

Event 函數 绑定函數至
$(document).ready(function) 將函數绑定到文檔的就續事件(當文檔完成加載時)
$(selector).click(function) 觸發或将函數绑定到被選元素的點擊事件
$(selector).dblclick(function) 觸發或将函數绑定到被選元素的雙擊事件
$(selector).focus(function) 觸發或将函數绑定到被選元素的獲得焦点事件
$(selector).mouseover(function) 觸發或将函數绑定到被選元素的鼠標懸停事件

方法描述
bind()向匹配元素附加一個或更多事件處理器
blur()觸發、或将函數绑定到指定元素的 blur 事件
change()觸發、或将函數绑定到指定元素的 change 事件
click()觸發、或将函數绑定到指定元素的 click 事件
dblclick()觸發、或将函數绑定到指定元素的 double click 事件
delegate()向匹配元素的當前或未來的子元素附加一個或多個事件處理器
die()移除所有通過 live() 函数添加的事件處理程序。
error()觸發、或将函數绑定到指定元素的 error 事件
event.isDefaultPrevented()返回 event 對象上是否調用了 event.preventDefault()。
event.pageX相對於文檔左邊緣的鼠標位置。
event.pageY相對於文檔上邊緣的鼠標位置。
event.preventDefault()阻止事件的默認動作。
event.result包含由被指定事件觸發的事件處理器返回的最后一個值。
event.target觸發該事件的 DOM 元素。
event.timeStamp該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。
event.type描述事件的類型。
event.which指示按了哪個键或按钮。
focus()觸發、或将函數绑定到指定元素的 focus 事件
keydown()觸發、或将函數绑定到指定元素的 key down 事件
keypress()觸發、或将函數绑定到指定元素的 key press 事件
keyup()觸發、或将函數绑定到指定元素的 key up 事件
live()為當前或未來的匹配元素添加一個或多個事件處理器
load()觸發、或将函數绑定到指定元素的 load 事件
mousedown()觸發、或将函數绑定到指定元素的 mouse down 事件
mouseenter()觸發、或将函數绑定到指定元素的 mouse enter 事件
mouseleave()觸發、或将函數绑定到指定元素的 mouse leave 事件
mousemove()觸發、或将函數绑定到指定元素的 mouse move 事件
mouseout()觸發、或将函數绑定到指定元素的 mouse out 事件
mouseover()觸發、或将函數绑定到指定元素的 mouse over 事件
mouseup()觸發、或将函數绑定到指定元素的 mouse up 事件
one()向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。
ready()文檔就緒事件(當 HTML 文檔就緒可用時)
resize()觸發、或将函數绑定到指定元素的 resize 事件
scroll()觸發、或将函數绑定到指定元素的 scroll 事件
select()觸發、或将函數绑定到指定元素的 select 事件
submit()觸發、或将函數绑定到指定元素的 submit 事件
toggle()綁定兩個或多個事件處理器函數,當發生輪流的 click 事件時執行。
trigger()所有匹配元素的指定事件
triggerHandler()第一個被匹配元素的指定事件
unbind()從匹配元素移除一個被添加的事件處理器
undelegate()從匹配元素移除一個被添加的事件處理器,现在或将来
unload()觸發、或将函數绑定到指定元素的 unload 事件


jQuery 基本用法~選擇器

資料引用來源:jQuery 参考手册
選擇器實例選取
*$("*")所有元素
#id$("#lastname")id="lastname" 的元素
.class$(".intro")所有 class="intro" 的元素
element$("p")所有 <p> 元素
.class.class$(".intro.demo")所有 class="intro" 並且 class="demo" 的元素
:first$("p:first")第一個 <p> 元素
:last$("p:last")最后一個 <p> 元素
:even$("tr:even")所有偶數 <tr> 元素
:odd$("tr:odd")所有奇數 <tr> 元素
:eq(index)$("ul li:eq(3)")列表中的第四個元素(index 從 0 開始)
:gt(no)$("ul li:gt(3)")列出 index 大於 3 的元素
:lt(no)$("ul li:lt(3)")列出 index 小於 3 的元素
:not(selector)$("input:not(:empty)")所有不為空的 input 元素
:header$(":header")所有標题元素 <h1> - <h6>
:animated所有动画元素
:contains(text)$(":contains('W3School')")包含指定字符串的所有元素
:empty$(":empty")無子(元素)節點的所有元素
:hidden$("p:hidden")所有隐藏的 <p> 元素
:visible$("table:visible")所有可見的表格
s1,s2,s3$("th,td,.intro")所有带有匹配選擇的元素
[attribute]$("[href]")所有带有 href 属性的元素
[attribute=value]$("[href='#']")所有 href 属性的值等于 "#" 的元素
[attribute!=value]$("[href!='#']")所有 href 属性的值不等于 "#" 的元素
[attribute$=value]$("[href$='.jpg']")所有 href 属性的值包含以 ".jpg" 结尾的元素
:input$(":input")所有 <input> 元素
:text$(":text")所有 type="text" 的 <input> 元素
:password$(":password")所有 type="password" 的 <input> 元素
:radio$(":radio")所有 type="radio" 的 <input> 元素
:checkbox$(":checkbox")所有 type="checkbox" 的 <input> 元素
:submit$(":submit")所有 type="submit" 的 <input> 元素
:reset$(":reset")所有 type="reset" 的 <input> 元素
:button$(":button")所有 type="button" 的 <input> 元素
:image$(":image")所有 type="image" 的 <input> 元素
:file$(":file")所有 type="file" 的 <input> 元素
:enabled$(":enabled")所有激活的 input 元素
:disabled$(":disabled")所有禁用的 input 元素
:selected$(":selected")所有被選取的 input 元素
:checked$(":checked")所有被選中的 input 元素

jQuery 元素選擇器
jQuery 使用 CSS 選擇器来選取 HTML 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。

jQuery 属性選擇器
jQuery 使用 XPath 表達式来選擇帶有给定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景颜色更改为红色:
$("p").css("background-color","red");

$(this)當前 HTML 元素
$("p")所有 <p> 元素
$("p.intro")所有 class="intro" 的 <p> 元素
$(".intro")所有 class="intro" 的元素
$("#intro")id="intro" 的元素
$("ul li:first")每個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']")所有帶有以 ".jpg" 结尾的屬性值的 href 屬性
$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素




2018年3月12日 星期一

設定全頁的字型

            <div class="panel-body">

                <style type="text/css">
                    /*全部設定字體*/
                    body {
                        font-family: 微軟正黑體, 標楷體, 新細明體, verdana, Times New Roman;
                    }
                </style>

2018年3月10日 星期六

HTML5 div 標籤顯示與關閉控制


<div id="TableauViewDiv" class="col-sm-12" align="center" style="display: none">
</div>

<script>
        function TableauView_HideShow() {
            var x = document.getElementById("TableauViewDiv");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

說明:
直接在Div裡控制
關閉:<div id="1" style="display: none"></div>
顯示:<div id="1" style="display: block"></div>

在 JavaScript 裡控制
關閉:document.getElementById("TableauViewDiv").style.display = "none";
顯示:document.getElementById("TableauViewDiv").style.display = "block";




JavaScript 等待函示執行完畢,才執行下一個動作

只要在函式裡新增 async: false, 即可


        function PostTicket() {
            var tmp = '';
            $.ajax({
                type: "POST",
                async: false,
                url: "./Default.aspx/Get..........3m",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                //data: JSON.stringify(),                           //資料後傳欄位
                success: function (response) {

                    tmp = JSON.parse(response.d);
                    console.log('PostTicket_OK:' + tmp);
                },
                failure: function (response) {
                    alert(response.status + ' ' + response.statusText);
                },
                error: function (response) {
                    alert(response.status + ' ' + response.statusText);
                }
            });
            return tmp;                                            //回傳 Ticket 值
        }

如果 iframe 無法內嵌網頁,則另開網頁分頁來顯示

HTML5 裡有使用 iframe 嵌入網頁,但會顯示空白,表示該網頁有判斷不能被別的網頁嵌入
範例如下:
<iframe id="TableauView" width="90%" height="1024" ></iframe>

可以在 script 裡 判斷如果是外部網頁,則開啟新分頁顯示
<script>
function ViewUrl() {
    window.open(SubMenuUrl[i]);
}

2017年4月27日 星期四

eclipse 中文化

Eclipse for PHP Developers:
http://www.eclipse.org/downloads/packages/eclipse-php-developers/neon3

Eclipse IDE for JavaScript Web Developers:
http://www.eclipse.org/downloads/packages/eclipse-ide-javascript-web-developers/indigosr2


eclipse 語言包:http://www.eclipse.org/babel/downloads.php

Installing the language packs (安裝語言包流程)
Open the install wizard with 'Help' > 'Install new software...'
Add the Babel p2 repository: http://download.eclipse.org/technology/babel/update-site/R0.14.1/neon
Select/install your language pack of choice
Restart Eclipse and you should get a translated Eclipse

一、安裝
  Eclipse for PHP Developers (PHP 開發 IDE)
    ~目錄設為 eclipse_php
    ~工作目錄設為 C:\Users\wengw\workspace_php
  Eclipse IDE for JavaScript Web Developers (JavaScript Web 開發 IDE)
    ~目錄設為 eclipse_javascript
    ~工作目錄設為 C:\Users\wengw\workspace_javascript

二、安裝中文語言包
  點選上方工具列 Help -> Install new software...
  Work with:http://download.eclipse.org/technology/babel/update-site/R0.14.1/neon
  點選 Add...
  Name:中文語言包
  點選 OK
  稍等一下..........會列出很多語言包
  尋找 [Chinese (Traditional)],勾選此項
  點選 Next 2次
  選擇 I accept the terms of the ................
  點選 Finish
  安裝中...............
  出現警告,點選 OK
  重新啟動 Eclipse ,就是中文的了!^_^
  

cas server 一直圈圈或取得狀態異常

重點: cas server 不能開 VPN,會造成取的來源 dns 異常,會一直轉圈圈或等很久。