jQuery實用的示例代碼分析

本篇內容介紹了“jQuery實用的示例代碼分析”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

★ 使用 jQuery 來切換樣式表

$("link[media='screen']").attr("href", "Alternative.css");

★ jQuery 檢測瀏覽器類型

(if( $.browser.safari)) (if ($.browser.msie && $.browser.version > 6 )) (if ($.browser.msie && $.browser.version <= 6 )) (if ($.browser.mozilla && $.browser.version >= '1.8' ))

★ jQuery 驗證某個元素是否為空

if ($("#Demo").html()) { //null;}

★ jQuery從集合中獲得索引值

$("ul > li").click(function () { var index = $(this).prevAll().length; });

★ jQuery選擇被選中的option元素

$("#someElement").find("option:selected");

★ jQuery為選擇器綁定方法

$("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); }); //1.42版后,delegate替代live,因為它們提供了更好的上下文支持

★ jQuery自動滾動到頁面中的某區域(可以看做一個小插件)

jQuery.fn.Autoscroll = function(sel) { $('html,body').animate( {scrollTop: $(sel).offset().top},500 ); } //調用：$("#area_name").Autoscroll();

★ jQuery限制"TextArea"域中的字符數(可以看做一個小插件)

(function($) { jQuery.fn.maxLength = function(max){ this.each(function(){ var type = this.tagName.toLowerCase(); var inputType = this.type ? this.type.toLowerCase() : null; if (type == "input" && inputType == "text" || inputType == "password") { //應用標準的maxLength this.maxLength = max; } else if (type == "textarea") { this.onkeypress = function(e){ var ob = e || event; var keyCode = ob.keyCode; var hasSelection = document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd; return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); }; this.onkeyup = function(){ if (this.value.length > max) { this.value = this.value.substring(0, max); } }; } }); })(jQuery); //調用：$('#macoArea").maxLength(500);

★ jQuery判斷某個元素是否可見

if($("#macoArea").is(":visible") == "true") { //少年,別跑 }

★ jQuery元素居中顯示(可以看做一個小插件)

(function($) { 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; } })(jQuery); //調用：$("#macoArea").center();

★ jQuery使用.siblings()選擇同輩元素

// 少年,你是否這樣操作過 $('#nav li').click(function(){ $("#macoArea li").removeClass("current"); $(this).addClass("current"); }); //這樣做是不是會更好呢 $("#nav li").click(function(){ $(this).addClass("current").siblings().removeClass("current"); });

★ jQuery操作復選框全選反選

var sta = false; //你懂,全局東東 $('a').click(function() { $("input[type=checkbox]").attr("checked",!sta); sta = !sta; });

★ jQuery獲得鼠標光標位置x和y

$(document).mousemove(function(e)} $(document).ready(function() { $().mousemove(function(e){ $("#macoArea").html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); }); });

★ jQuery解析XML

function ParseXml(xml) { $(xml).find("Node").each(function(){ $("#macoArea").append($(this).attr("Author") + ""); ); }

★ jQuery判斷圖像是否被完全加載進來

$('#demoImg').attr("src", "demo.jpg").load(function() { alert("是的,你看到的是真的"); });

★ jQuery讓Cookie過期

var date = new Date(); date.setTime(date.getTime() + (x * 60 * 1000)); $.cookie("example", "foo", { expires: date });;

★ jQuery禁止鼠標右鍵

$(function(){ $(document).bind("contextmenu",function(e){ return false; }); });

“jQuery實用的示例代碼分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！