標籤: jquery

jQuery IE8 $(document).ready() not working

因為網站需要~jQuery需要向下相容IE8~
卻發現在IE8中無法正常運作某些語法~
最後發現關鍵在下列紅色文字 type這屬性~
若type使用application/javascript IE8 運作就會不正常~
要使用type=”text/javascript”便可解決問題~

<script type=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js”></script>
<!– IE8 可運作 –>
<script type=”text/javascript”>
    $(document).ready(function(e) {
        alert(‘test1’);
    });
</script>
<!– IE8 不可運作 –>
<script type=”application/javascript”>
    $(document).ready(function(e) {
        alert(‘test2’);
    });
</script>[……]

閱讀更多

jQuery 模擬滑鼠Click事件，觸發綁定事件

trigger 模擬user動作，觸發click事件

$(document).ready(function(e) {
    $('#test').click(function(e){
       alert('觸發綁定事件');
    });
    $('#test').trigger("click");
    $('#test')[0].click;
});

http://www.pureexample.com/tw/jquery/custom-event.html[……]

閱讀更多

jQuery get all form values 取表單所有的值

// 方法1
var datastring = $("#form").serialize();
$.ajax({
    type: "POST",
    url: "test.php",
    data: datastring,
    success: function(data) {
        alert('Data send');
    }
});

//方法2
var form = $(this).closest('form');
var data = form.serializeArray();
data.push({name: "fun", value: 'img_edit'}); //增加自訂的值
data.push({name: "time", value: $.now()});   //增加自訂的值
data = $.param(data);
$.ajax({
    type: "POST",
    url: "test.php",
    data: data,
    success: function(data) {
        alert('Data send');
    }
});

test.php 測試
<?php
  print_r($_POST);
  exit;
?>

結果
Array (
  [mail] => ann71727@test.com.tw 
  [password] => asdfasdf
  [name] => test
  [sex] => 1
)

 
https://api.jquery.com/serialize/



[……]
閱讀更多
jQuery disable 元素，啟用、停用
   
// 元素停用
$(‘.select’).attr(‘disabled’, true);
$(‘.select’).attr(‘disabled’, ‘disabled’);
// 元素啟用
$(‘.select’).attr(‘disabled’, false);
$(‘.select’).attr(‘disabled’, ”);
$(‘.select’).removeAttr(‘disabled’);[……]
閱讀更多
fancybox plugin 自適應iframe內容尺寸  fancybox iframe auto  width height
   
fancybox plugin 自適應iframe內容尺寸  fancybox iframe auto  width height
本篇使用 jquery-1.11.0 & fancyBox-v2.0.6  請先確認您的版本
jQuery代碼如下，主要是為fancybox加上beforeShow事件的callback，在iframe頁面載入後去抓其內容的寬度及高度。
重點在這 – iframe中的頁面一定要定義其 <html>及<body>的寬度、高度，高度可設為auto
範例如下，將下列代碼置於<head>及<body>中間，父頁面才有辦法去抓到頁面的寬度，以設定ifreme的尺寸
<style type=”text/css”>
/* iframe 頁面 */
html,body{
 margin:0;
 padding:0;
 width:700px;
 height:auto;
}
</style>[……]
閱讀更多
jQuery 繁體中文參考手冊 – 非常詳細 – 學jQuery必備 – 教學必備
   
jQuery 誰記得那麼多用法呀，當然要有一本參考手冊呀，
不管新手、老手都需要這玩意兒，快加入書籤吧
[……]
閱讀更多
jQuery 取物件座標 X,Y 相對位置&絕對位置
   
//絕對位置
$(‘.nav li > a’).hover(function(){
        var position = $(this).offset();
        var x = parseInt(position.left);
        var y = parseInt(position.top);
})

//相對位置
$(‘.nav li > a’).hover(function(){
        var position = $(this).position();
        var x = parseInt(position.left);
        var y = parseInt(position.top);

})[……]
閱讀更多