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 >
<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 >
<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>
{
<%= ClientScript.GetPostBackEventReference(btnSaveChanges, "") %>;
}
$(function () {
$("#<%= btnSaveChanges.ClientID %>").click(function () {
$(this).attr("disabled", "true");
autoSubmit();
return false;
});
});
</script>
jquery实现锚点跳转平滑滚动效果
$(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=\"" + "width:" + 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事件
Cross browser input event for jQuery
在iframe子页面获取父页面元素: $('#objId', parent.document);
在父页面 获取iframe子页面的元素: $("#objid",document.frames('iframename').document)
序列化：
$('#Select1').change(function () {//Example 1alert( $(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 onlyif (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 { width: 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>
