//控制图片最大大小

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

//显示和隐藏的元素

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

}

<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>

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

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

</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部分

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

</script>

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

</ul>

$(document).ready(function(){

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

});

</script>

//横向纵向菜单

<ul>//纵向的菜单

<li class="main"> //复制整个ul 这里的li为class="hmain" style="float: left"

</ul>

</li>

</ul>

</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>

<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>

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

<option value="" selected="selected">请选择汽车厂商</option>

</select>

</span>

<span class="cartype" style="display: none;">汽车类型:

</span>

<span class="wheeltype" style="display: none;">车轮类型：

</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;

});

学无止境详情

JQuery常用方法

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

Jquery 取消链接的默认行为