jQuery 使用收集

jQuery - 中文輸入法與KeyDown/KeyPress事件

JavaScript数组采用从0开始， eq(1)取得的是集合中的第二个元素；

CSS 则是从1开始，css选择符$('div:nth-chind(1)')取得的是作为其父元素第一个子元素的所有div

替换logo图片：

$("#blogLogo").attr("src","logo.png");

button替换成image类型： 

代码：

$("#btnZzk").hide();
$(".div_my_zzk").append($("<input />").attr("type","image").attr("src","spacer.gif").click(function(){  zzk_go();   }

原来：
<DIV class=div_my_zzk>

<INPUT type=text id=q onKeyDown="return zzk_go_enter(event);" class=input_my_zzk >&nbsp;

<INPUT id=btnZzk class=btn_my_zzk onclick=zzk_go() value=找找看 type=button>

</DIV>

效果：

<DIV class=div_my_zzk>

<INPUT type=text id=q onkeydown="return zzk_go_enter(event);"  class=input_my_zzk >&nbsp;

<INPUT style="DISPLAY: none" id=btnZzk class=btn_my_zzk onclick=zzk_go() value=找找看 type=button >

<INPUT src="spcaer.gif" width=1 height=1 type=image >

</DIV>

在div后面追加div:

var divbottom="<div class=box-bottom></div>";
  $(".mySearch").append(divbottom);
  $(".catListPostCategory").append(divbottom);
  $(".catListPostArchive").append(divbottom);
  $(".catListEssay").append(divbottom);
  $(".catListBlogRank").append(divbottom);
  $(".catListComment").append(divbottom);
  $(".catListView").append(divbottom);
  $(".catListFeedback").append(divbottom);

在每个tr里面的第二个表格 也就是表格的第二列 加一个name属性 如 <TD name=artTitle>183 </TD>

<TR>
<TD>182</TD>
<TD>183</TD>
<TD>184</TD>
</TR>

代码：

$("tr td:nth-child(2)").each(function(){ $(this).attr("name","artTitle")  });

 

line-height:0;
font-size:0;
overflow:hidden;

能完美“隐藏”掉你background之上的字体

 
//禁止提交两次

 <script>

 function autoSubmit()
 {
 <%= ClientScript.GetPostBackEventReference(btnSaveChanges, "") %>;
 }
     $(function () {

           $("#<%= btnSaveChanges.ClientID %>").click(function () {
             $(this).attr("disabled", "true");
             autoSubmit();
            
             return false;
         });
     });
</script>

jquery实现锚点跳转平滑滚动效果

<div id="control" style="position:fixed;top:0px;">
	<a rel="#top">头部</a><br/><a rel="#center">中部</a><br/><a rel="#bottom">底部</a>
</div>

$(function(){ $("#control a").click(function(){ var rel=$(this).attr("rel"); var pos=$(rel).offset().top; $("html,body").animate({scrollTop:pos}, 800); }) }) 

//仿大众点评导航
$('#G_chan-panel').delegate("li","mouseenter", function() { $(this).addClass("active") });
$('#G_chan-panel').delegate("li","mouseleave", function() { $(this).removeClass("active") });

小结：对于小于 1e-6 的数值来说，ToString 时会自动转换为科学计数法。因此 parseInt 方法，在参数类型不确定时，最好封装一层：

function parseInt2(a) {
    if(typeof a === 'number') {
        return Math.floor(a);
    }
    return parseInt(a);
}

/* 修复IE6以下版本PNG图片Alpha */

function fixpng()
{
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])

  if ((version >= 5.5) && (document.body.filters))
  {
     for(var i=0; i<document.images.length; i++)
     {
        var img = document.images[i]
        var imgName = img.src.toUpperCase()
        if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
        {
           var imgID = (img.id) ? "id='" + img.id + "' " : ""
           var imgClass = (img.className) ? "class='" + img.className + "' " : ""
           var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
           var imgStyle = "display:inline-block;" + img.style.cssText
           if (img.align == "left") imgStyle = "float:left;" + imgStyle
           if (img.align == "right") imgStyle = "float:right;" + imgStyle
           if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
           var strNewHTML = "<span " + imgID + imgClass + imgTitle
           + " style=\"" + "" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
           + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
           + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
           img.outerHTML = strNewHTML
           i = i-1
        }
     }
  }
}

 
// 功能：回车自动切换输入框焦点，如果跟在后面的是button则自动点击

function enterEventHandler(e) {
    var event = $.event.fix(e); //修正event事件
    var element = event.target; //jQuery统一修正为target
    var buttons = "button,reset,submit"; //button格式
    if (element.nodeName == "INPUT" || element.nodeName == "SELECT") {
        event.stopPropagation(); //取消冒泡
        event.preventDefault(); //取消浏览器默认行为
        var inputs = $("input[type!='hidden'][type!='checkbox'][type!='radio'],select"); //获取缓存的页面input集合
        var index = inputs.index(element); //当前input位置        
        if (buttons.indexOf(inputs[index + 1].type) >= 0) {
            inputs[index + 1].focus();
            inputs[index + 1].click();
        }
        else {
            inputs[index + 1].focus();
        }

    }
}

 

注册网站信息时一般表现形式为注册协议，外加input type=check和input type=submit，使用check是否选中来判断submit是否可用，代码如下：

<input type="checkbox" id="chk" name="chk"
 onclick="document.form.submit.disabled=(document.form.chk.checked==true)?false:true" value="1" />
同意本协议 
 <input type="submit" value="确认注册" id="submit" name="submit" disabled="true" />

javascript点亮当前页面所在导航

// 判断页面所在栏目并突出栏目导航亮 
function menuHere(menuobj) { 
var links = menuobj.getElementsByTagName(“a”); 
for(i=0; i 
<links.length; i++) { 
if(window.location.href.toLowerCase().indexOf(links[i].href.toLowerCase()) != -1)
 {
//比较导航连接地址与页面所在地址（注意大小写） 
links[i].className = ‘here’;//突出当前导航样式 
} else { 
if(window.location.href == ‘http://’ + window.location.host + ‘/’ )
 {
//处理默认首页 
for(h=0;h<1; h++) { 
                    links[h].className = ‘here’;
                 }
             }
         }
     }
 }
 window.onload=function () { 
    var menuobj = document.getElementById(‘menu’);
     if(!menuobj) return false;
     menuHere(menuobj); 
}

JQuery一行搞定当前面所对应的导航菜单变亮效果

<div class="mainnav">
    <ul class="banner">
       <li class="index"><a href=>首页</a></li>
       <li class="index"><a href=>A</a></li>
       <li class="index hover"><a href=>B</a></li>
        <li class="index"><a href=>C</a></li>
       <li class="index"><a href=>D</a></li>
      <li class="index"><a href=>E</a></li>
   </ul>
一小段Ｃ#代码，用来得到ＵＲＬ的ＨＯＳＴ的部分
    <%   string aa = Request.Url.AbsolutePath；  %>

<script type="text/javascript">
        $(function() {
$(".mainnav>.banner").find("li").find("a[href$='<%=aa%>']").closest("li")
.addClass("hover").siblings().removeClass("hover")
        });
    </script>

图片放大箱子

<script type="text/javascript">
  jQuery.noConflict();
  jQuery(function(){
        jQuery.fn.getTitle = function() {
      var arr = jQuery("a.fancybox");
      jQuery.each(arr, function() {
        var title = jQuery(this).children("img").attr("title");
        jQuery(this).attr('title',title);
      })
    }
    // Supported file extensions
    var thumbnails = 'a:has(img)[href$=".bmp"],a:has(img)[href$=".gif"],a:has(img)[href$=".jpg"],
a:has(img)[href$=".jpeg"],a:has(img)[href$=".png"],a:has(img)[href$=".BMP"],
a:has(img)[href$=".GIF"],a:has(img)[href$=".JPG"],a:has(img)[href$=".JPEG"],a:has(img)[href$=".PNG"]';
  
    jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox").getTitle();
    jQuery("a.fancybox").fancybox({
    'imageScale': true,
    'padding': 10,
    'zoomOpacity': false,
    'zoomSpeedIn': 500,
    'zoomSpeedOut': 500,
    'overlayShow': true,
    'overlayOpacity': 0.7,
    'hideOnContentClick': false,
    'centerOnScroll': true
  });
})
</script>

  

jQuery - 中文輸入法與KeyDown/KeyPress事件

http://blog.darkthread.net/post-2011-04-26-keypress-event-under-ime.aspx

Cross browser input event for jQuery

http://whattheheadsaid.com/projects/input-special-event

在iframe子页面获取父页面元素: $('#objId', parent.document);

在父页面 获取iframe子页面的元素: $("#objid",document.frames('iframename').document)

 

 

 

序列化：

$('#Select1').change(function () {
 //Example 1
 alert(  $(this).serialize());  //结果 Select3=230000
})
<select id="Select1" class="Select2"  name="Select3">
<option value="">hhh</option>
<option value="110000">北京市</option>
<option value="120000">天津市</option>
<option value="130000">河北省</option>
<option value="140000">山西省</option>
<option value="150000">内蒙古自治区</option>
<option value="210000">辽宁省</option>
<option value="220000">吉林省</option>
<option value="230000">黑龙江省</option>
<option value="310000">上海市</option>
<option value="320000">江苏省</option>
</select>

//异步验证用户名是否存在
<script type="text/javascript">
$(document).ready(function() {
    $('#usernameLoading').hide();
    $('#username').blur(function(){
      $('#usernameLoading').show();
      $.post("check.php", {
        username: $('#username').val()
      }, function(response){
        $('#usernameResult').fadeOut();
        setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);
      });
        return false;
    });
});
function finishAjax(id, response) {
  $('#usernameLoading').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
} //finishAjax
</script>
//html
<p><label for="username">Username:</label> <input type="text" name="username" id="username" />
    <span id="usernameLoading"><img src="indicator.gif" alt="Ajax Indicator" /></span>
    <span id="usernameResult"></span></p>
//后台
return '<span style="color:#f00">Username Unavailable</span>';
	
return '<span style="color:#0c0">Username Available</span>';

/*----- 單選 -----*/

//  取得被選擇項目的文字

$("#select").find(":selected").text();

//  取得被選擇項目的值

$("#select").find(":selected").val();

/*----- 多選 -----*/

//  使用迴圈取得所有被選擇的項目

$("#select").find(":selected").each(function() {

    alert(this.text);    //  文字

    alert(this.value);   //  值

});

2增加項目

$("#select").append($("").attr("value", "值").text("文字"));

3. 移除選擇的項目

//  移除選擇的項目

$("#select").find(":selected").remove();

//  移除全部的項目

$("#select option").remove();

4.移除選擇項目後，防止捲軸移到最上面

//  先取得要移除項目的 index

var selectIndex = $("#select").find(":selected").index();

//  移除選擇的項目

$("#select").find(":selected").remove();

//  判斷移除項目後，原先的index是否還有option，有的話就直接將此option設定為選取狀態

//  捲軸就不會往上跑了

if ($('#select option').get(selectIndex) != null) {

    $('#select option').get(selectIndex).selected = true;

}

else {

    //  沒有項目的話，判斷select理是否還有option

    //  有的話，表示移除的項目為最後一個，就設定上一個option為選取狀態

    if ($('#select option').length > 0) {

        $('#select option').get(selectIndex - 1).selected = true;

    }

}

$("select#CategoryFirst option[value='value2']").attr("selected", "selected");

$("select#CategorySecond option[value='value2']").attr("selected", "selected");

$("#CategoryFirst  option[value=2]").prop("selected",true); //也可以

$('#CategoryFirst').val(<%=CId1 %>);

$("#rr").prop("disabled", true); 不可操作

$("#rr").prop("disabled", false); 可操作

$("#rr").attr("disabled", true); 不可操作

disabled="disabled"  不可操作  等价： disabled=""      disabled=null

var j={"count":"0","error":"","success":"","data":[{}]};

alert(j.data.length) 为 1

判断：if(j.success) 

// 文本框只允许数字
$("#input1").keypress(function(e)
{
  // allow digits only
  if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57))
  {
    return false;
  }
});

计算总价
 $(document).ready(function () {
            var Amount = 0;
            $("#table1 tr").each(function (index) {
                var value = $(this).find("td:nth-child(3)").html();
                if (value != null && value != "" && !isNaN(value))
                    Amount = Amount + parseFloat($(this).find("td:nth-child(3)").html());
            });
            $("#total").text("Total Price: " + Amount.toFixed(2));
        });

删除一行
  $(document).ready(function () {
            $("#table1 tr").click(function () {
                if (confirm('Are you sure you want to delete:' + $(this).find("td:nth-child(1)").html())) {
                    $(this).css("background-color", "#FFFFC4");
                    $(this).fadeOut(700, function () {
                        $(this).remove();
                    });
                }
            });
        });


 $("#<%=gdRows.ClientID%> tr").filter(":odd").css("background-color", "grey");
 $("#<%=gdRows.ClientID%> tr").filter(":even").css("background-color", "blue");




$(document).ready(function() {
  $("#<%=gdRows.ClientID%> tr:has(td)").hover(function() {
    $(this).css("background-color", "Lightgrey");
   }, function() {
   $(this).css("background-color", "#ffffff");
  });
});



  $(function(){
       $.upgradebrowsers();
  });


<style>
        #table1
        {
             500px;
            font-size: .80em;
            font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
            margin: 0px;
            padding: 0px;
            color: #666;
        }
        #table1 th
        {
            border-bottom: 1px solid #eee;
            border-top: 1px solid #eee;
            height: 29px;
            text-align: left;
            padding-left: 10px;
            background-color: #fafafa;
        }
        #table1 td
        {
            border-bottom: 1px solid #eee;
            padding-left: 10px;
        }
    </style>