两者区别：$(document).ready();网页中多有dom结构绘制完毕后就执行，
可能dom元素关联的东西没用加载完。【若有多个弹框，均可以执行输出】
window.onload 必须等待多有内容加载完毕之后包括图片才能执行完【只能执行一个弹框】
$(document).ready(function(){ alert("Hello World!");//待dom加载完毕，弹出框 }); window.onload=function(){ alert("Hello World"); }
需求一：点击不同章节名称链接，显示相应的内容，同时高亮当前选择的章节
[div.has_children>(span+a*3)]*3 $(".has_children").click(function(){ $(this).addClass("highlight") .children("a").show().end() .siblings().removeClass("lighlight") .children("a").hide(); }) //在一个id为table的表格的tbody中，如果每行最后一列中的checkbox没有被禁用 //则把这行的背景设为红色 $("#table>tbody>tr:has(td:last:has(:checkbox:enable))").css("background","red"); // 获取id为foo元素内的html代码,.html()是jquery中的方法，innerHTML是dom中的方法 $("#foo").html(); document.getElementById("foo").innerHTML;
需求二，在论坛注册页面中，用户必须选择页面下方的同意并接受注册协议复选框，否则不能提交
<input type="checkbox" id="cr"/> <label for="cr">我已经阅读了上面的制度</label> $(document).ready(function(){//等待dom元素加载完毕 var $cr=$("#cr");//jquery对象 var cr=$cr[0];//dom对象，或者$cr.get(0) $cr.click(function(){ if(cr.checked){//dom方式判断 alert("感谢你的支持！你可以继续操作"); } }); }); $(document).ready(function(){ var $cr=$("#cr"); $cr.click(function(){ if($cr.is(":checked")){//jqeury方式判断 alert("感谢你的支持！你可以继续操作"); } }); })
解决jquery和其他库的冲突,jq引进去在后面
jQuery.noConflict();//变量$的控制权给other 框架 jQuery(function(){ jQuery("p").click(function(){ alert(jQuery(this).text(); }); }) $("pp").style.display='none';
需求三：特定的表格个隔行变色
$("#tb tbody tr:even").css("backgroundColor","#888"); css("property","value");//用来设置jquery对象的样式 $("p").css({"fontSize":"30px","backgroundColor":"#888888"});
需求四：对多选框进行操作，输出选中的多选框的个数
$("btn").click(function(){ var length=$("input[name='check']:checked").length; alert("选中个数为："+length); });
需求五：从第七条开始隐藏后面的品牌（最后一条其他品牌相机除外）
点击显示全部品牌其文本变成精简显示品牌，显示隐藏的品牌，
高亮推荐品牌
当用户点击精简显示品牌，
从第五条后开始隐藏后面的品牌。
简显示品牌变成显示全部品牌其文本
去掉高亮显示的推荐品牌.SubCategoryBox>(ul>(li>a+i)*14+div.showmore>a>span(显示全部品牌))
```$(function(){
var $category=$('ul li:gt(5):not(:last)');
$category.hide();
var $toggleBtn=$('div.showmore>a');
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide();//隐藏全部品牌
$('.showmore a span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("显示全部品牌");
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('啥子哟')")
.removeClass("promoted");//去掉高亮样式
}else{
$category.show();//显示全部品牌
$('.showmore a span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("显示全部品牌");
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('啥子哟')")
.addClass("promoted");//添加高亮样式
}
return false;//超链接不跳转
})
})
$("ul li").remove("li[title!=菠萝]");
//复制节点
$("ul li").click(function(){
$(this).clone().appendTo("ul");
});
$(this).clone(true).appendTo("body");//复制元素的同时也复制元素中所绑定的事件
$("input:eq(2)").click(function(){
$("p").addClass("another high");//以空格的形式添加多个
});
// 切换样式
$toggleBtn.toggle(function(){
//显示元素
},function(){
//隐藏元素
});
$("p").toggleClass("another");
```需求六默认状态下邮箱地址及密码内分别有请输入邮箱和请输入密码的提示
将鼠标放入对应框框的时候，文字为空input#address+input#password+input[type="button"]
```$(function(){
//对地址框操作
$("#address").focus(function(){
var txt_value=$(this).val();
if(text_value=="请输入邮箱地址"){
$(this).val("");//如果符合条件就清空文本框内容
}
});
$("#address").blur(function(){
var txt_value=$(this).val();
if(text_value==""){
$(this).val("请输入邮箱地址");//如果符合条件就清空文本框内容
}
});
//对密码框操作
$("#address").focus(function(){
var txt_value=$(this).val();
if(text_value=="请输入邮箱密码"){
$(this).val("");//如果符合条件就清空文本框内容
}
});
$("#address").blur(function(){
var txt_value=$(this).val();
if(text_value==""){
$(this).val("请输入邮箱密码");//如果符合条件就清空文本框内容
}
});
});
$("#single option:eq(1)").attr("selected",true);
$("[value=radio2]:radio").attr("checked",true);
```需求七 网站超链接和图片提示效果p>a([title="这是我的超链接提示1"]&.tooltip)
$(function(){ var x=10; var y=20; $("a.tooltip").mouseover(function(e){ this.myTitle=this.title; this.title=""; var imgTitle=this.myTitle?"<br/>"+this.myTitle:""; var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='产品预览图'/>"+imgTitle+"</div>"; $(body).append(tooltip); $("#tooltip") .css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px" }).show("fast"); }).mouseout(function(){ this.title=this.myTitle; $("#tooltip").remove(); }).mousemove(function(e){ $("#tooltip") .css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px" }); }); })
需求八判断元素是否显示
```$(function(){
$("#panel h5.head").bind("click",function(){
var $content=$(this).next("div.content");
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
});
})
$(function(){
$("#panel h5.head").mouseover(function(){
$(this).next("div.content").show();
});
$("#panel h5.head").mouseout(function(){
$(this).next("div.content").hide();
});
})
$(function(){
$("#panel h5.head").hover(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div.content").hide();
});
})
$(function(){
$("#panel h5.head").toggle(function(){
// $(this).next("div.content").show();
$(this).addClass("highlight");
$(this).next("div.content").show();
},function(){
// $(this).next("div.content").hide();
$(this).removeClass("highlight");
$(this).next("div .content").hide();
});
})
```需求九验证表单点击提交，判断某元素是否是必填字段，某元素长度是否够6位，
当表单不符合提交条件时，要组织表单的提交
$("#sub").bind("click",function(event){ var username=$("#username").val(); if(username==""){ $("#msg").html("<p>文本框的值不能为空</p>"); event.preventDefault(); } }); $("a").click(function(){ alert(event.type);//获取事件类型 alert(event.pageX+event.pageY); return false; }); $(function(){ $("div").bind("mouseover mouseout",function(){ $(this).toggleClass("over"); }); }); $(function(){ $("#myImg").click(function(){ $(this).animate({left:"500px",height:"200px"},3000); }); })
需求十点击div元素后让它右移动的同时增大它的高度，并将它的不透明度从50%到100%，
然后再让它从上到下移动，同时它的宽度变大，当完成这些效果后，让它以淡出的方式隐藏
$(function(){ $('#panel').css("opacity","0.5"); $("#panel").click(function(){ $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) .animate({top:"200px",width:"200px"},3000) .fadeOut("slow"); }); })
需求十一点击向左向右按钮，来控制图片的滚动
```div.v_show>[div.v_caption>(h2.cartoon+div.highlight_tip>span*4+div.change_btn>
(span.prev+span.next))+div.v_content]
$(function(){
var page=1;
var i=4;
$("span.next").click(function(){
var $parent=$(this).parents("div.v_show");
var $v_show=$parent.find("div.v_content_list");
var $v_content=$parent.find("div.v_content");
var v_width=$v_content.width();
var len=$v.show.find("li").length;
var page_count=Math.ceil(len/i);
if(!$v_show.is(":animated")){
if(page==page_count){
$v_show.animate({left:'0px'},"slow");
page=1;
}else{
$v_show.animate({left:'-='+v_width},"show");
page++;
}
}
$parent.find("span").eq((page-1)).addClass("current")
.siblings().removeClass("current");
}
);
})
```需求十二为文本框添加获取和失去焦点事件
$(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); })
需求十三评论框的放大和缩小按钮
$(function(){ var $comment=$("#comment"); $(".bigger").click(function(){ if(!$comment.is(":animated")){ if($comment.height()<500){ $comment.height($comment.height()+50); } } }); $(".smaller").click(function(){ if(!$comment.is(":animated")){ if($comment.height()>50){ $comment.height($comment.height()-50); } } }); })
需求十四，用户点击全选按钮，复选框组会全部选中;
$("#checked").click(function(){ $("[name=items]:checkbox").attr('checked',true); });
需求十五全不选操作
$("#checked").click(function(){ $("[name=items]:checkbox").attr('checked',false); });
需求十六反选操作
$("#checkedRev").click(function(){ $('[name=items]:checkbox').each(function(){ this.checked=!this.checked; }); });
需求十七点击提交将选中的值输出
$('#send').click(function(){ var str="你选中的是：\r\n"; $("[name=items]:checkbox:checked").each(function(){ str+=$(this).val()+"\r\n"; }); alert(str); });