(function ($) { $.fn.stripHtml = function () { var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi; this.each(function () { $(this).html($(this).html().replace(regexp, "")); }); return $(this); } })(jQuery); //用法： $(‘p').stripHtml();
36. 如何使用closest来取得父元素
$(‘#searchBox').closest(‘div');
37. 如何使用Firebug和Firefox来记录jQuery事件日志
// 允许链式日志记录 // 用法：$('#someDiv').hide().log('div hidden').addClass('someClass'); jQuery.log = jQuery.fn.log = function (msg) { if (console) { console.log("%s: %o", msg, this); } return this; };
38. 如何强制在弹出窗口中打开链接
jQuery('a.popup').live('click', function () { newwindow = window.open($(this).attr('href'), '', 'height=200,width=150'); if (window.focus) { newwindow.focus(); } return false; });
39. 如何强制在新的选项卡中打开链接
jQuery('a.newTab').live('click', function () { newwindow = window.open($(this).href); jQuery(this).target = "_blank"; return false; });
40. 在jQuery中如何使用.siblings()来选择同辈元素
// 不这样做
$('#nav li').click(function () { $('#nav li').removeClass('active'); $(this).addClass('active'); });
//替代做法是
$('#nav li').click(function () { $(this).addClass('active').siblings().removeClass('active'); })
41. 如何切换页面上的所有复选框
var tog = false ; // 或者为true，如果它们在加载时为被选中状态的话 $('a').click(function () { $("input[type=checkbox]").attr("checked", !tog); tog = !tog; });
42. 如何基于一些输入文本来过滤一个元素列表
//如果元素的值和输入的文本相匹配的话 //该元素将被返回 $('.someClass').filter(function () { return $(this).attr('value') == $('input#someId').val(); })
43. 如何获得鼠标垫光标位置x和y
$(document).ready(function () { $(document).mousemove(function (e) { $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); }); });
44. 如何把整个的列表元素（List Element，LI）变成可点击的
$("ul li").click(function () { window.location = $(this).find("a").attr("href"); return false; }); <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul>
45. 如何使用jQuery来解析XML（基本的例子）
function parseXml(xml) { //找到每个Tutorial并打印出author $(xml).find("Tutorial").each(function () { $("#output").append($(this).attr("author") + ""); }); }
46. 如何检查图像是否已经被完全加载进来
$('#theImage').attr('src', 'image.jpg').load(function () { alert('This Image Has Been Loaded'); });
47. 如何使用jQuery来为事件指定命名空间
//事件可以这样绑定命名空间 $('input').bind('blur.validation', function (e) { // ... }); //data方法也接受命名空间 $('input').data('validation.isValid', true);
48. 如何检查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 }
49. 如何让cookie过期
var date = new Date(); date.setTime(date.getTime() + (x * 60 * 1000)); $.cookie('example', 'foo', { expires: date });
50. 如何使用一个可点击的链接来替换页面中任何的URL
$.fn.replaceUrl = function () { var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi; this.each(function () { $(this).html( $(this).html().replace(regexp, '<a href="https://www.jb51.net/article/$1">$1</a>') ); }); return $(this); } //用法 $(‘p').replaceUrl();
以上内容就是给大家介绍了web前端开发JQuery常用实例代码片段(50个)，希望大家喜欢。
您可能感兴趣的文章: