jQuery 常見小例匯總
更新時(shí)間：2016年12月14日 12:02:07 作者：王小帥0401
本文主要對(duì)基于jQuery實(shí)現(xiàn)的常用小案例進(jìn)行匯總，具有一定的參考價(jià)值，需要的朋友一起來看下吧
1
//這段代碼展示了在用戶未輸入值時(shí)，
//如何在文本類型的input域中保留
//一個(gè)默認(rèn)值
wap_val = [];
$(".swap").each(function(i){
wap_val[i] = $(this).val();
$(this).focusin(function(){
if ($(this).val() == swap_val[i]) {
$(this).val("");
}
}).focusout(function(){
if ($.trim($(this).val()) == "") {
$(this).val(swap_val[i]);
}});});
2
var el = $('#id');
el.html(el.html().replace(/word/ig, ''));
3
$('button.someClass').live('click', someFunction);
//注意，在jQuery 1.4.2中，delegate和undelegate選項(xiàng)
//被引入代替live，因?yàn)樗鼈兲峁┝烁玫纳舷挛闹С?
//例如，就table來說，以前你會(huì)用
//.live()
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
//現(xiàn)在用
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
4.如何把已創(chuàng)建的元素動(dòng)態(tài)地添加到DOM中：
var newDiv = $('');
newDiv.attr('id','myNewDiv').appendTo('body');
5
var cloned = $('#somediv').clone();
6
if($(element).is(':visible') == 'true') {
//該元素是可見的
}
7.JQ中定位
jQuery.fn.center = function () {
this.css('position','absolute');
this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
return this;
}
//這樣來使用上面的函數(shù)：
$(element).center();
8.如何把有著某個(gè)特定名稱的所有元素的值都放到一個(gè)數(shù)組中：
var arrInputValues = new Array();
$("input[name='table[]']").each(function(){
arrInputValues.push($(this).val());
});
9.在jQuery中如何使用.siblings()來選擇同輩元素
$('#nav li').click(function(){
$('#nav li').removeClass('active');
$(this).addClass('active');
});
//替代做法是
$('#nav li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
10.正反選
var tog = false;
$('a').click(function() {
$("input[type=checkbox]").attr("checked",!tog);
tog = !tog;
});
11.如何獲得鼠標(biāo)墊光標(biāo)位置x和y
$(document).ready(function() {
$(document).mousemove(function(e){
$('#XY').html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
});
});
12.如何把整個(gè)的列表元素（List Element，LI）變成可點(diǎn)擊的
$("ul li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
13.如何檢查圖像是否已經(jīng)被完全加載進(jìn)來
$('#theImage').attr('src', 'image.jpg').load(function() {
alert('This Image Has Been Loaded');
});
14.如何檢查cookie是否啟用
var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled) {
//沒有啟用cookie
}
15.如何讓cookie過期：
var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
JQuery是一個(gè)很NB的js集成作品，以其簡(jiǎn)潔的語(yǔ)法和跨平臺(tái)兼容性的優(yōu)勢(shì)，這里給大家介紹下JQuery中的選擇器，不理解選擇器或者用不好選擇器，是不可能有一手很NB的JQuery技能的2014-04-04
jQuery實(shí)現(xiàn)的無縫廣告圖片左右滾動(dòng)功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)的無縫廣告圖片左右滾動(dòng)功能,結(jié)合實(shí)例形式詳細(xì)分析了jQuery無縫滾動(dòng)圖片的實(shí)現(xiàn)原理、步驟與具體操作技巧,需要的朋友可以參考下2016-12-12
Jquery的autocomplete插件用法及參數(shù)講解
今天小編就為大家分享一篇關(guān)于Jquery的autocomplete插件用法及參數(shù)講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-03-03
jQuery實(shí)現(xiàn)checkbox全選的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)checkbox全選的方法,涉及jQuery操作頁(yè)面元素屬性及鼠標(biāo)事件響應(yīng)的相關(guān)技巧,需要的朋友可以參考下2015-06-06
JQuery 入門實(shí)例 大家可以參考下。2009-06-06
jQuery對(duì)象和DOM對(duì)象相互轉(zhuǎn)化
jQuery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對(duì)象；2009-04-04
本文主要分享了jquery實(shí)現(xiàn)百葉窗效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
jQuery 浮動(dòng)廣告實(shí)現(xiàn)代碼
用jquery實(shí)現(xiàn)的浮動(dòng)廣告代碼,需要的朋友可以參考下。2008-12-12
jQuery 順便學(xué)習(xí)下CSS選擇器 奇偶匹配nth-child(even)
今天學(xué)習(xí)jQuery,看到nth-child(even)用法，特意找了下這個(gè)選擇器的用法,在CSS3標(biāo)準(zhǔn)中，用法很強(qiáng)大。2010-05-05
jQuery模擬新浪微博首頁(yè)滾動(dòng)效果的方法
這篇文章主要介紹了jQuery模擬新浪微博首頁(yè)滾動(dòng)效果的方法,實(shí)例分析了jQuery使用animate、css等方法實(shí)現(xiàn)滾動(dòng)特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03