jq的50种常用方法（转）

//允许你减少集合中的匹配元素的过滤器，  

//只剩下那些与给定的选择器匹配的部分。在这种情况下，  

//查询删除了任何没（:not）有（:has）  

//包含class为“selected”（.selected）的子节点。  

.filter(":not(:has(.selected))")  

var allitems = $("div.item");  

var keeplist = $("div#container1 div.item");  

//现在你可以继续使用这些jquery对象来工作了。例如，  

//基于复选框裁剪“keep list”，复选框的名称  

//符合  

< div >class names:  

$(formtolookat + " input:checked").each(function() {  

    keeplist = keeplist.filter("." + $(this).attr("name"));  

});  

< /div>  

//jquery 1.4.*包含了对这一has方法的支持。该方法找出  

//某个元素是否包含了其他另一个元素类或是其他任何的  

//你正在查找并要在其之上进行操作的东东。  

$("input").has(".email").addclass("email_icon");  

//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。  

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

//尽可能使用标签名来作为类名的前缀，  

//这样jquery就不需要花费更多的时间来搜索  

//你想要的元素。还要记住的一点是，  

//针对于你的页面上的元素的操作越具体化，  

//就越能降低执行和搜索的时间。  

var in_stock = $('#shopping_cart_items input.is_in_stock');  

<ul id="shopping_cart_items">  

<li><input type="radio" value="item-x" name="item" class="is_in_stock" /> item x</li>  

<li><input type="radio" value="item-y" name="item" class="3-5_days" /> item y</li>  

<li><input type="radio" value="item-z" name="item" class="unknown" /> item z</li>  

</ul>  

//切换（toggle）类允许你根据某个类的  

//是否存在来添加或是删除该类。  

//这种情况下有些开发者使用：  

a.hasclass('bluebutton') ? a.removeclass('bluebutton') : a.addclass('bluebutton');  

//toggleclass允许你使用下面的语句来很容易地做到这一点  

a.toggleclass('bluebutton');  

if ($.browser.msie) {  

// internet explorer就是个虐待狂  

}  

$('#thatdiv').replacewith('fnuh');  

if ($('#keks').html()) {  

//什么都没有找到;  

$("ul > li").click(function () {  

    var index = $(this).prevall().length;  

$('#foo').bind('click', function() {  

    alert('user clicked on "foo."');  

$('#lal').append('sometext');  

var e = $("", { href: "#", class: "a-class another-class", title: "..." });  

//在使用许多相类似的有着不同类型的input元素时，  

//这种基于精确度的方法很有用  

var elements = $('#someid input[type=sometype][value=somevalue]').get();  

jquery.preloadimages = function() {  

    for(var i = 0; i < arguments.length; i++) {  

        $("<img />").attr('src', arguments[i]);  

    }  

};  

//用法  

$.preloadimages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');  

$('button.someclass').live('click', somefunction);  

//注意，在jquery 1.4.2中，delegate和undelegate选项  

//被引入代替live，因为它们提供了更好的上下文支持  

//例如，就table来说，以前你会用  

//.live()  

$("table").each(function(){  

    $("td", this).live("hover", function(){  

        $(this).toggleclass("hover");  

    });  

//现在用  

$("table").delegate("td", "hover", function(){  

    $(this).toggleclass("hover");  

$('#someelement').find('option:selected');  

$("p.value:contains('thetextvalue')").hide();  

jquery.fn.autoscroll = function(selector) {  

    $('html,body').animate(  

        {scrolltop: $(selector).offset().top},  

        500  

    };  

//然后像这样来滚动到你希望去到的class/area上。  

$('.area_name').autoscroll();  

检测safari (if( $.browser.safari)),  

检测ie6及之后版本 (if ($.browser.msie && $.browser.version > 6 )),  

检测ie6及之前版本 (if ($.browser.msie && $.browser.version <= 6 )),  

检测firefox 2及之后版本 (if ($.browser.mozilla && $.browser.version >= '1.8' ))  

var el = $('#id');  

    el.html(el.html().replace(/word/ig, ''));  

$(document).bind('contextmenu',function(e){  

    return false;  

$.expr[':'].mycustomselector = function(element, index, meta, stack){  

// element- 一个dom元素  

// index – 栈中的当前循环索引  

// meta – 有关选择器的元数据  

// stack – 要循环的所有元素的栈  

// 如果包含了当前元素就返回true  

// 如果不包含当前元素就返回false };  

// 定制选择器的用法：  

$('.someclasses:test').dosomething();  

if ($('#somediv').length) {  

//万岁！！！它存在……  

$("#someelement").live('click', function(e) {  

    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {  

        alert("left mouse button clicked");  

    } else if(e.button == 2) {  

        alert("right mouse button clicked");  

//这段代码展示了在用户未输入值时，  

//如何在文本类型的input域中保留  

//一个默认值  

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]);  

        }});});  

<input type="text" value="enter username here.." class="swap" />  

//这是1.3.2中我们使用settimeout来实现的方式  

settimeout(function() {  

  $('.mydiv').hide('blind', {}, 500)  

}, 5000);  

//而这是在1.4中可以使用delay()这一功能来实现的方式（这很像是休眠）  

$(".mydiv").delay(5000).hide('blind', {}, 500);  

var newdiv = $('');  

    newdiv.attr('id','mynewdiv').appendto('body');  

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"){  

            //apply the standard 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);  

                }  

$('#mytextarea').maxlength(500);  

//把测试单独放在模块中  

module("module b");  

test("some other test", function() {  

    //指明测试内部预期有多少要运行的断言  

    expect(2);  

    //一个比较断言，相当于junit的assertequals  

    equals( true, false, "failing test" );  

    equals( true, true, "passing test" );  

var cloned = $('#somediv').clone();  

if($(element).is(':visible') == 'true') {  

    //该元素是可见的  

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;  

//这样来使用上面的函数：  

$(element).center();  

var arrinputvalues = new array();  

$("input[name='table[]']").each(function(){  

    arrinputvalues.push($(this).val());  

(function($) {  

    $.fn.striphtml = function() {  

        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;  

        this.each(function() {  

            $(this).html( $(this).html().replace(regexp,”") );  

        });  

        return $(this);  

})(jquery);  

//用法：  

$('p').striphtml();  

$('#searchbox').closest('div');  

// 允许链式日志记录  

// 用法：  

$('#somediv').hide().log('div hidden').addclass('someclass');  

jquery.log = jquery.fn.log = function (msg) {  

    if (console){  

        console.log("%s: %o", msg, this);  

jquery('a.popup').live('click', function(){  

    newwindow=window.open($(this).attr('href'),'','height=200,width=150');  

    if (window.focus) {  

        newwindow.focus();  

jquery('a.newtab').live('click', function(){  

    newwindow=window.open($(this).href);  

    jquery(this).target = "_blank";  

// 不这样做  

$('#nav li').click(function(){  

    $('#nav li').removeclass('active');  

    $(this).addclass('active');  

//替代做法是  

    $(this).addclass('active').siblings().removeclass('active');  

var tog = false;  

// 或者为true，如果它们在加载时为被选中状态的话  

$('a').click(function() {  

    $("input[type=checkbox]").attr("checked",!tog);  

    tog = !tog;  

//如果元素的值和输入的文本相匹配的话  

//该元素将被返回  

$('.someclass').filter(function() {  

    return $(this).attr('value') == $('input#someid').val();  

})  

$(document).ready(function() {  

    $(document).mousemove(function(e){  

        $(’#xy’).html(”x axis : ” + e.pagex + ” | y axis ” + e.pagey);  

$("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>  

function parsexml(xml) {  

    //找到每个tutorial并打印出author  

    $(xml).find("tutorial").each(function() {  

        $("#output").append($(this).attr("author") + "");  

$('#theimage').attr('src', 'image.jpg').load(function() {  

    alert('this image has been loaded');  

//事件可以这样绑定命名空间  

$('input').bind('blur.validation', function(e){  

// ...  

//data方法也接受命名空间  

$('input').data('validation.isvalid', true);  

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  

var date = new date();  

date.settime(date.gettime() + (x * 60 * 1000));  

$.cookie('example', 'foo', { expires: date });  

$.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="http://www.woiweb.net/$1" style="border-right-width:0px; font-family:'microsoft yahei'; border-top-width:0px; border-bottom-width:0px; color:rgb(20,158,174); margin-left:3px; font-size:13px; vertical-align:baseline; border-left-width:0px; margin-right:3px; text-decoration:none">$1</a>‘)  

        );  

    return $(this);  

//用法　  

$('p').replaceurl();