//控制图片最大大小

$(document).ready(function() {

    var maxwidth=552;

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

        if (this.width>maxwidth)

         this.width = maxwidth;

    });

}); 

//鼠标点击时的触发

$(document).ready(function(){

$("p").click(function(){alert("hello world");});  //点击时

}); 

//增加 CSS Class

$(document).ready(function(){

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

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

}); 

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

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

//首先增加样式，然后show( ):显示隐藏的匹配元素。html("foo"):设置每一个匹配元素的html内容

//隐藏hide()点击超链接，超链接就会慢慢的消失。"return false"表示保留默认行为，因此页面不会跳转。

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

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

    return false;

}); 

//收缩展开功能

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

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

}); 

//toggle()的用法。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

$(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)取得一个包含着匹配元素的唯一祖先元素的元素集合（不包含根元素）

$(document).ready(function() {

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

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

    }, function() {

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

    });

}); 

//get异步验证用户名 同样可以采用post方式

$(document).ready(function() { 

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

        var userName = $("#userName").val();    //1.获取文本框的内容

        if (userName == "") {   //2.将这个内容发送给服务器端

            alert("用户名不能为空");

        } else {

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

                    $("#result").html(response);//3.接收服务器端返回的数据，填充到div中result为div的id

                });

        }

    });

}); 

//获取下拉列表中的值

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

function isSelected(caname){                                        //元素改变时事件

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的所有的奇数行  

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

    numTd.click(function() {    //给这些单元格注册鼠标点击的事件     

        var tdObj = $(this);    //找到当前鼠标点击的td,this对应的就是响应了click的那个td

        if (tdObj.children("input").length > 0) {     //当前td中input，不执行click处理           

            return false;

        }

        var text = tdObj.html();       

        tdObj.html(""); //清空td中的内容    

        var inputObj = $("<input type='text'>");    //创建一个文本框

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

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

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

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

        inputObj.val(text); //需要将当前td中的内容放到文本框中

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

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

        inputObj.click(function() {

            return false;

        });

        //处理文本框上回车和esc按键的操作

        inputObj.keyup(function(event){        

            var keycode = event.which;  //获取当前按下键盘的键值         

            if (keycode == 13) {        //处理回车的情况        

                var inputtext = $(this).val();  //获取当当前文本框中的内容               

                tdObj.html(inputtext);  //将td的内容修改成文本框中的内容

            }          

            if (keycode == 27) {    //处理esc的情况             

                tdObj.html(text);   //将td中的内容还原成text

            }

        });

    });

}); 

//jQuery的弹出层

1、导入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();

} 

/* 点击显示相应的区域 */

function showhotpic_right(x, obj) {     //鼠标移上时的方法传入数字和本身对象

    $("#tabswi1_A .current").attr("class", "switchNavItem");    //为元素设置一个属性值

    $(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="#">用户发帖排行</a></li>

<li id="tab_li_5" class="switchNavItem"><a onmousemove="showhotpic_right(5,this)" href="#">版块发帖排行</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>

//点击A链接添加class样式。并且class就停在该链接上

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

    <a class="cur" href="index.aspx">首页</a> //默认class停放在首页

    <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) {    //当浏览器中的地址中有index字符时

$("#mainNav a").eq(0).addClass("cur");    //给a标签下标为0的加上class

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

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

}

});    

//点击缩略图弹出大图

1、在images中复制prettyPhoto文件夹

2、导入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">   //复制整个ul 这里的li为class="hmain" style="float: left"

<a href="#">菜单项1</a>

    <ul><li><a href="#">子菜单项11</a></li>

        <li><a href="#">子菜单项12</a></li>

    </ul>

</li>

<li class="main">

<a href="#">菜单项2</a>

    <ul><li><a href="#">子菜单项21</a></li>

        <li><a href="#">子菜单项22</a></li>

    </ul>

</li>

<li class="main">

<a href="#">菜单项3</a>

    <ul><li><a href="#">子菜单项31</a></li>

        <li><a href="#">子菜单项32</a></li>

    </ul>

</li>

</ul>

$(document).ready(function(){   //页面中的DOM已经装载完成时，执行的代码  

    $(".main > a").click(function(){    //找到主菜单项对应的子菜单项 如果为.main a则是所有a节点    

        var ulNode = $(this).next("ul");    //这里的next为.main a的下一个兄弟节点

        /* 显示或隐藏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调整元素的高度，可以使元素以“滑动”的方式显示出来

        //ulNode.slideUp;   //slideUp调整元素的高度，可以使元素以“滑动”的方式隐藏出来

        ulNode.slideToggle(); //slideToggle调整元素的高度，可以使元素以“滑动”的方式隐藏或显示

    });

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

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

    },function(){

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

    });

});

//标签页效果

<ul id="tabfirst">

    <li class="tabin">标签1</li>

    <li>标签2</li>

    <li>标签3</li>

</ul>

<div class="contentin contentfirst">我是内容1</div> display: block;

<div class="contentfirst">我是内容2</div>    display: none;

<div class="contentfirst">我是内容3</div>    display: none;

var timoutid;

$(document).ready(function(){

    /*找到所有的标签 方法一

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

        //将原来显示的内容区域进行隐藏

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

        //当前标签所对应的内容区域显示出来

        });

    */找到所有的标签 方法二

    $("#tabfirst li").each(function(index){ //each找到li并执行一个函数  index是当前执行这个function代码的li对应在所有li组成的数组中的索引值

        $(this).mouseover(function(){   //鼠标移上时，这里的this为li

            var liNode = $(this);   //这里的this为div

            timoutid = setTimeout(function(){   //setTimeout方法用于在指定的毫秒数后调用函数300毫秒                                  $("div.contentin").removeClass("contentin");    //将原来显示的内容区域进行隐藏               

                $("#tabfirst li.tabin").removeClass("tabin");   //对有tabin的class定义的li清除tabin的class               

                //$("div.contentfirst").eq(index).addClass("contentin"); ==↓ //当前标签所对应的内容区域显示出来 eq获取第N个元素

                $("div.contentfirst:eq(" + index + ")").addClass("contentin");==↑ //当前标签所对应的内容区域显示出来

                liNode.addClass("tabin");  

            },300);        

        }).mouseout(function(){ //鼠标移出时

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

        });

    });

});

//三级联下拉框效果

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

    <p><img src="images/data-loading.gif" alt="数据装载中" /></p>   

</div>

<div class="car">

    <span class="carname">汽车厂商:

        <select>

            <option value="" selected="selected">请选择汽车厂商</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");   //找到三个下拉框

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

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

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

        var carnameValue = $(this).val();   //1.需要获得当前下拉框的值       

        wheeltypeSelect.parent().hide();    //1.1只要第一个下拉框内容有变化，第三个下拉框都要先隐藏起来

        if (carnameValue != "") {   //2.如果值不为空，则将下拉框的值传送给服务器

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

                //post方式发送到服务器上json类型回收top为第一个下拉列表               

                    if (data.length != 0) { //2.1接收服务器返回的汽车类型                

                        cartypeSelect.html(""); //2.2解析汽车类型的数据，填充到汽车类型的下拉框中

                        $("<option value=''>请选择汽车类型</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没有任何汽车类型的数据

                    }              

                }, "json");

        } else {    //3.如果值为空，那么第二个下拉框所在span要隐藏起来，  

            cartypeSelect.parent().hide();         

        }

    });

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

        var cartypeValue = $(this).val();   //1.需要获得当前下拉框的值

        if (cartypeValue != "") {   //2.如果值不为空，则将下拉框的值传送给服务器          

                $.post("ChainSelect.php",{keyword: cartypeValue, type: "sub"},function(data){   //2.1接收服务器返回的汽车类型

                    if (data.length != 0) {                    

                        wheeltypeSelect.html("");   //2.2解析汽车类型的数据，填充到车轮类型的下拉框中

                        $("<option value=''>请选择车轮类型</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没有任何汽车类型的数据

                    }                  

                }, "json");        

        } else {           

            wheeltypeSelect.parent().hide();    //3.如果值为空，那么第三个下拉框所在span要隐藏起来，第二个下拉框后面的指示图片也要隐藏 

        }

    });

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

        var wheeltypeValue = $(this).val(); //1.获取车轮类型    

    });

    $(".loading").ajaxStart(function(){ //给数据装载中的节点定义ajax事件，实现动画提示效果

        $(this).show();

    }).ajaxStop(function(){

        $(this).hide();

    });

});

jQuery 让页面中所有复选框选中或者非选中

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

Jquery 取消链接的默认行为

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

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

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

return false;

});