//控制圖片最大大小

$(document).ready(function() {

    var maxwidth=552;

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

        if (this.width>maxwidth)

         this.width = maxwidth;

    });

}); 

//鼠標(biāo)點(diǎn)擊時(shí)的觸發(fā)

$(document).ready(function(){

$("p").click(function(){alert("hello world");});  //點(diǎn)擊時(shí)

}); 

//增加 CSS Class

$(document).ready(function(){

$("a").addClass("test");  //添加css

$("a").removeClass("test"); //移除css

}); 

//show()和html()的使用 顯示

$("a").addClass("test").show().html("foo");

//首先增加樣式，然后show( ):顯示隱藏的匹配元素。html("foo"):設(shè)置每一個(gè)匹配元素的html內(nèi)容

//隱藏hide()點(diǎn)擊超鏈接，超鏈接就會(huì)慢慢的消失。"return false"表示保留默認(rèn)行為，因此頁(yè)面不會(huì)跳轉(zhuǎn)。

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

    $(this).hide("slow");

    return false;

}); 

//收縮展開功能

$("#head").click(function()

{$("#content").slideToggle("slow",function(){ alert("Hello,cssrain..");});

}); 

//toggle()的用法。如果元素是可見(jiàn)的，切換為隱藏的；如果元素是隱藏的，切換為可見(jiàn)的。

$(document).ready(function(){

  $("input").click(function(){

     $("p").toggle();

  })

}); 

//hover()的用法

$(document).ready(function() {

$("#orderedlist tbody tr").hover(function() {  

        $(this).addClass("blue");

    }, function() {

        $(this).removeClass("blue");

    });

}); 

//parents()的用法parents(String expr)取得一個(gè)包含著匹配元素的唯一祖先元素的元素集合（不包含根元素）

$(document).ready(function() {

    $("a").hover(function() {

        $(this).parents("p").addClass("highlight");

    }, function() {

        $(this).parents("p").removeClass("highlight");

    });

}); 

//get異步驗(yàn)證用戶名 同樣可以采用post方式

$(document).ready(function() { 

    $("#verifyButton").click(function() {   //需要找到button按扭，注冊(cè)事件       

        var userName = $("#userName").val();    //1.獲取文本框的內(nèi)容

        if (userName == "") {   //2.將這個(gè)內(nèi)容發(fā)送給服務(wù)器端

            alert("用戶名不能為空");

        } else {

            $.get("hadler/CheckUserName.aspx?userName=" + encodeURI((userName)+"&t=new Date().valueOf(),function(response){    //function為返回的函數(shù)              

                    $("#result").html(response);//3.接收服務(wù)器端返回的數(shù)據(jù)，填充到div中result為div的id

                });

        }

    });

}); 

//獲取下拉列表中的值

var caname=document.getElementById(caname);                                   //找到下拉列表

function isSelected(caname){                                        //元素改變時(shí)事件

document.getElementById("txtmodcaname").value = caname.options[caname.selectedIndex].text; //直接賦值

 <select onchange="isSelected(this);" name="caname" id="caname"></select>           //下拉列表

 <input type="text" name="txtmodcaname" id="txtmodcaname" />                    //文本框

$(“#caname”).val(); //獲取值

$(“#caname”).find(“option:selected”).text();//獲取文本

//可以編輯的表格

$(function(){  

    $("tbody tr:even").css("background-color","#ECE9D8");//找到表格的tbody tr的所有的奇數(shù)行  

    var numTd = $("tbody td:even");//找到所有的td單元格 

    numTd.click(function() {    //給這些單元格注冊(cè)鼠標(biāo)點(diǎn)擊的事件     

        var tdObj = $(this);    //找到當(dāng)前鼠標(biāo)點(diǎn)擊的td,this對(duì)應(yīng)的就是響應(yīng)了click的那個(gè)td

        if (tdObj.children("input").length > 0) {     //當(dāng)前td中input，不執(zhí)行click處理           

            return false;

        }

        var text = tdObj.html();       

        tdObj.html(""); //清空td中的內(nèi)容    

        var inputObj = $("<input type='text'>");    //創(chuàng)建一個(gè)文本框

        inputObj.css("border-width","0");   //去掉文本框的邊框

        inputObj.css("font-size","16px"));  //設(shè)置文本框中的文字字體大小是16px

        inputObj.width(tdObj.width();   //使文本框的寬度和td的寬度相同

        inputObj.css("background-color",tdObj.css("background-color"));//設(shè)置文本框的背景色

        inputObj.val(text); //需要將當(dāng)前td中的內(nèi)容放到文本框中

        inputObj.appendTo(tdObj);   //將文本框插入到td中    

        inputObj.trigger("focus").trigger("select");//是文本框插入之后就被選中

        inputObj.click(function() {

            return false;

        });

        //處理文本框上回車和esc按鍵的操作

        inputObj.keyup(function(event){        

            var keycode = event.which;  //獲取當(dāng)前按下鍵盤的鍵值         

            if (keycode == 13) {        //處理回車的情況        

                var inputtext = $(this).val();  //獲取當(dāng)當(dāng)前文本框中的內(nèi)容               

                tdObj.html(inputtext);  //將td的內(nèi)容修改成文本框中的內(nèi)容

            }          

            if (keycode == 27) {    //處理esc的情況             

                tdObj.html(text);   //將td中的內(nèi)容還原成text

            }

        });

    });

}); 

//jQuery的彈出層

1、導(dǎo)入jquery.js和jquery.popup.js //推薦 jquery1.4版

href="javascript:$.popup.open('#tab_send')";    //彈出層

href="javascript:$.popup.close('#tab_send')";   //彈出層

 該彈出層的css必須有 display:none; position:absolute;  z-index:999;

//顯示和隱藏的元素

<a class="title" onmouseout="showMenu();" onmouseover="showMenu();" />

<div onmouseout="hideMenu()" onmouseover="showMenu();" style="display: none;" id="forumlist_menu">

function showMenu() {

    $("#forumlist_menu").show();    /*顯示版塊樹菜單*/

}

function hideMenu() {   /*隱藏版塊樹菜單*/

    $("#forumlist_menu").hide();

} 

/* 點(diǎn)擊顯示相應(yīng)的區(qū)域 */

function showhotpic_right(x, obj) {     //鼠標(biāo)移上時(shí)的方法傳入數(shù)字和本身對(duì)象

    $("#tabswi1_A .current").attr("class", "switchNavItem");    //為元素設(shè)置一個(gè)屬性值

    $(obj).parent().attr("class", "current");

    $(".newHotB").hide();

    $("#hot_layer_" + x).show();

}

<ul class="tab_forumhot" id="tabswi1_A">

<li id="tab_li_1" class="current"><a onmousemove="showhotpic_right(1,this)" href="#">最新主題</a></li>

<li id="tab_li_2" class="switchNavItem"><a onmousemove="showhotpic_right(2,this)" href="#">熱門主題</a></li>

<li id="tab_li_4" class="switchNavItem"><a onmousemove="showhotpic_right(4,this)" href="#">用戶發(fā)帖排行</a></li>

<li id="tab_li_5" class="switchNavItem"><a onmousemove="showhotpic_right(5,this)" href="#">版塊發(fā)帖排行</a></li>

</ul>

<div style="" id="hot_layer_1" name="hot_layer_1" class="newHotB"></div>

<div style="display: none;" id="hot_layer_2" name="hot_layer_2" class="newHotB"></div>

<div style="display: none" id="hot_layer_4" name="hot_layer_4" class="newHotB"></div>

<div style="display: none;" id="hot_layer_5" name="hot_layer_5" class="newHotB"></div>

//點(diǎn)擊A鏈接添加class樣式。并且class就停在該鏈接上

<div class="clearfix" id="mainNav">

    <a class="cur" href="index.aspx">首頁(yè)</a> //默認(rèn)class停放在首頁(yè)

    <a class="" href="news.aspx">新聞中心</a>

    <a class="" href="product.aspx">商品中心</a>

</div>

$(function () {

var url = window.location.href;    //獲取瀏覽器的地址

$("#mainNav a").removeClass("cur");    //先移除所有a中的class

if (url.indexOf("index") > -1) {    //當(dāng)瀏覽器中的地址中有index字符時(shí)

$("#mainNav a").eq(0).addClass("cur");    //給a標(biāo)簽下標(biāo)為0的加上class

} else if (url.indexOf("news") > -1) { //以此類推

$("#mainNav a").eq(1).addClass("cur");

}

});    

//點(diǎn)擊縮略圖彈出大圖

1、在images中復(fù)制prettyPhoto文件夾

2、導(dǎo)入jquery1.3.2.js、jqueryprettyPhoto.js和prettyPhoto.css文件

head部分

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

    <script type="text/javascript" charset="utf-8">

        google.load("jquery", "1.3");

    </script>

    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"

        title="prettyPhoto main stylesheet" charset="utf-8" />

    <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

<ul class="photozhanshi gallery clearfix">

    <li><a href="images/20109248255450.jpg" rel="prettyPhoto[gallery2]">

    <img src="images/20109248255450.jpg" alt="" width="308" height="252" /></a></li>

    <li><a href="images/20109248255450.jpg" rel="prettyPhoto[gallery2]">

    <img src="images/20109248255450.jpg" alt="" width="232" height="189" /></a></li>   

</ul> 

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

    $(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_square'});

});

</script>

//橫向縱向菜單

<ul>//縱向的菜單

<li class="main">   //復(fù)制整個(gè)ul 這里的li為class="hmain" style="float: left"

<a href="#">菜單項(xiàng)1</a>

    <ul><li><a href="#">子菜單項(xiàng)11</a></li>

        <li><a href="#">子菜單項(xiàng)12</a></li>

    </ul>

</li>

<li class="main">

<a href="#">菜單項(xiàng)2</a>

    <ul><li><a href="#">子菜單項(xiàng)21</a></li>

        <li><a href="#">子菜單項(xiàng)22</a></li>

    </ul>

</li>

<li class="main">

<a href="#">菜單項(xiàng)3</a>

    <ul><li><a href="#">子菜單項(xiàng)31</a></li>

        <li><a href="#">子菜單項(xiàng)32</a></li>

    </ul>

</li>

</ul>

$(document).ready(function(){   //頁(yè)面中的DOM已經(jīng)裝載完成時(shí)，執(zhí)行的代碼  

    $(".main > a").click(function(){    //找到主菜單項(xiàng)對(duì)應(yīng)的子菜單項(xiàng) 如果為.main a則是所有a節(jié)點(diǎn)    

        var ulNode = $(this).next("ul");    //這里的next為.main a的下一個(gè)兄弟節(jié)點(diǎn)

        /* 顯示或隱藏ul即子菜單 方法一

        if (ulNode.css("display") == "none") {

            ulNode.css("display","block");

        } else {

            ulNode.css("display","none");

        }

        */ 顯示或隱藏ul即子菜單 方法二

        //ulNode.show("slow");//normal fast //show顯示

        //ulNode.hide(); //hide隱藏

        //ulNode.toggle(); //toggle如果是顯示的，切換為隱藏的；如果是隱藏的，切換為顯示

        //

        //顯示或隱藏ul即子菜單 方法三

        //ulNode.slideDown("slow"); //slideDown調(diào)整元素的高度，可以使元素以“滑動(dòng)”的方式顯示出來(lái)

        //ulNode.slideUp;   //slideUp調(diào)整元素的高度，可以使元素以“滑動(dòng)”的方式隱藏出來(lái)

        ulNode.slideToggle(); //slideToggle調(diào)整元素的高度，可以使元素以“滑動(dòng)”的方式隱藏或顯示

    });

    $(".hmain").hover(function(){   //懸停事件

        $(this).children("ul").slideDown(); //slideDown取得元素中所有子元素的集合并顯示

    },function(){

        $(this).children("ul").slideUp();   //slideUp取得元素中所有子元素的集合并隱藏

    });

});

//標(biāo)簽頁(yè)效果

<ul id="tabfirst">

    <li class="tabin">標(biāo)簽1</li>

    <li>標(biāo)簽2</li>

    <li>標(biāo)簽3</li>

</ul>

<div class="contentin contentfirst">我是內(nèi)容1</div> display: block;

<div class="contentfirst">我是內(nèi)容2</div>    display: none;

<div class="contentfirst">我是內(nèi)容3</div>    display: none;

var timoutid;

$(document).ready(function(){

    /*找到所有的標(biāo)簽 方法一

    $("$("#tabfirst li").mouseover(function(){

        //將原來(lái)顯示的內(nèi)容區(qū)域進(jìn)行隱藏

        $("div.contentin").hide();

        //當(dāng)前標(biāo)簽所對(duì)應(yīng)的內(nèi)容區(qū)域顯示出來(lái)

        });

    */找到所有的標(biāo)簽 方法二

    $("#tabfirst li").each(function(index){ //each找到li并執(zhí)行一個(gè)函數(shù)  index是當(dāng)前執(zhí)行這個(gè)function代碼的li對(duì)應(yīng)在所有l(wèi)i組成的數(shù)組中的索引值

        $(this).mouseover(function(){   //鼠標(biāo)移上時(shí)，這里的this為li

            var liNode = $(this);   //這里的this為div

            timoutid = setTimeout(function(){   //setTimeout方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)300毫秒                                  $("div.contentin").removeClass("contentin");    //將原來(lái)顯示的內(nèi)容區(qū)域進(jìn)行隱藏               

                $("#tabfirst li.tabin").removeClass("tabin");   //對(duì)有tabin的class定義的li清除tabin的class               

                //$("div.contentfirst").eq(index).addClass("contentin"); ==↓ //當(dāng)前標(biāo)簽所對(duì)應(yīng)的內(nèi)容區(qū)域顯示出來(lái) eq獲取第N個(gè)元素

                $("div.contentfirst:eq(" + index + ")").addClass("contentin");==↑ //當(dāng)前標(biāo)簽所對(duì)應(yīng)的內(nèi)容區(qū)域顯示出來(lái)

                liNode.addClass("tabin");  

            },300);        

        }).mouseout(function(){ //鼠標(biāo)移出時(shí)

            clearTimeout(timoutid); //clearTimeout清除上述的所有方法

        });

    });

});

//三級(jí)聯(lián)下拉框效果

<div class="loading" style="display: none;">

    <p><img src="images/data-loading.gif" alt="數(shù)據(jù)裝載中" /></p>   

</div>

<div class="car">

    <span class="carname">汽車廠商:

        <select>

            <option value="" selected="selected">請(qǐng)選擇汽車廠商</option>

            <option value="BMW">寶馬</option>

            <option value="Audi">奧迪</option>

            <option value="VW">大眾</option>

        </select>      

    </span>

    <span class="cartype" style="display: none;">汽車類型:

        <select></select>      

    </span>

    <span class="wheeltype" style="display: none;">車輪類型：

        <select></select>

    </span>

</div>

$(document).ready(function(){  

    var carnameSelect = $(".carname").children("select");   //找到三個(gè)下拉框

    var cartypeSelect = $(".cartype").children("select");

    var wheeltypeSelect = $(".wheeltype").children("select");

    carnameSelect.change(function(){    //第一下下接列表事件

        var carnameValue = $(this).val();   //1.需要獲得當(dāng)前下拉框的值       

        wheeltypeSelect.parent().hide();    //1.1只要第一個(gè)下拉框內(nèi)容有變化，第三個(gè)下拉框都要先隱藏起來(lái)

        if (carnameValue != "") {   //2.如果值不為空，則將下拉框的值傳送給服務(wù)器

                $.post("ChainSelect.php",{keyword: carnameValue, type: "top"},function(data){  

                //post方式發(fā)送到服務(wù)器上json類型回收top為第一個(gè)下拉列表               

                    if (data.length != 0) { //2.1接收服務(wù)器返回的汽車類型                

                        cartypeSelect.html(""); //2.2解析汽車類型的數(shù)據(jù)，填充到汽車類型的下拉框中

                        $("<option value=''>請(qǐng)選擇汽車類型</option>").appendTo(cartypeSelect);

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

                            $("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(cartypeSelect);

                        }                      

                        cartypeSelect.parent().show();  //2.2.1汽車類型的下拉框顯示出

                    } else {                       

                        cartypeSelect.parent().hide();  //2.3沒(méi)有任何汽車類型的數(shù)據(jù)

                    }              

                }, "json");

        } else {    //3.如果值為空，那么第二個(gè)下拉框所在span要隱藏起來(lái)，  

            cartypeSelect.parent().hide();         

        }

    });

    cartypeSelect.change(function(){    //第二下下接列表事件    

        var cartypeValue = $(this).val();   //1.需要獲得當(dāng)前下拉框的值

        if (cartypeValue != "") {   //2.如果值不為空，則將下拉框的值傳送給服務(wù)器          

                $.post("ChainSelect.php",{keyword: cartypeValue, type: "sub"},function(data){   //2.1接收服務(wù)器返回的汽車類型

                    if (data.length != 0) {                    

                        wheeltypeSelect.html("");   //2.2解析汽車類型的數(shù)據(jù)，填充到車輪類型的下拉框中

                        $("<option value=''>請(qǐng)選擇車輪類型</option>").appendTo(wheeltypeSelect);

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

                            $("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(wheeltypeSelect);

                        }                      

                        wheeltypeSelect.parent().show();    //2.2.1車輪類型的下拉框顯示出

                    } else {                       

                        wheeltypeSelect.parent().hide();    //2.3沒(méi)有任何汽車類型的數(shù)據(jù)

                    }                  

                }, "json");        

        } else {           

            wheeltypeSelect.parent().hide();    //3.如果值為空，那么第三個(gè)下拉框所在span要隱藏起來(lái)，第二個(gè)下拉框后面的指示圖片也要隱藏 

        }

    });

    wheeltypeSelect.change(function(){      //第三下下接列表事件    

        var wheeltypeValue = $(this).val(); //1.獲取車輪類型    

    });

    $(".loading").ajaxStart(function(){ //給數(shù)據(jù)裝載中的節(jié)點(diǎn)定義ajax事件，實(shí)現(xiàn)動(dòng)畫提示效果

        $(this).show();

    }).ajaxStop(function(){

        $(this).hide();

    });

});

jQuery 讓頁(yè)面中所有復(fù)選框選中或者非選中

var tog =false; $('a').click(function() { $("input[type=checkbox]").attr("checked", !tog); tog = !tog;});

Jquery 取消鏈接的默認(rèn)行為

$('.load a').bind ('click', function() {

var link = $(this).attr("href");

$('#ajax').load(link);

return false;

});