The difference between the two: $(document).ready(); There are many dom structures in the web page that are executed after the drawing is completed, and
the things associated with the dom elements may not be loaded. [If there are multiple popup boxes, the output can be executed]
window.onload must wait for multiple content to be loaded, including pictures, before it can be executed [Only one popup box can be executed]
$(document).ready(function(){ alert("Hello World!");//待dom加载完毕，弹出框 }); window.onload=function(){ alert("Hello World"); }
Requirement 1: Click on the link of different chapter names to display the corresponding content, and at the same time highlight the currently selected chapter
[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;
Requirement 2: On the forum registration page, the user must select the Agree and accept the registration agreement checkbox at the bottom of the page, otherwise they cannot submit
<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("感谢你的支持！你可以继续操作"); } }); })
To resolve the conflict between jquery and other libraries, jq will be introduced later
jQuery.noConflict();//变量$的控制权给other 框架 jQuery(function(){ jQuery("p").click(function(){ alert(jQuery(this).text(); }); }) $("pp").style.display='none';
Requirement 3: A specific table is interlaced and discolored
$("#tb tbody tr:even").css("backgroundColor","#888"); css("property","value");//用来设置jquery对象的样式 $("p").css({"fontSize":"30px","backgroundColor":"#888888"});
Requirement 4: Operate the multi-select box and output the number of selected multi-select boxes
$("btn").click(function(){ var length=$("input[name='check']:checked").length; alert("选中个数为："+length); });
Requirement 5: Hide the following brands from the seventh item (except for cameras of other brands in the last item).
Click to display all brands, and the text will become a simplified display brand, display the hidden brand, and
highlight the recommended brand .
When the user clicks the simplified display brand,
from the first After five, the brand behind it began to be hidden.
Simply show the brand to show all brands and its text
Remove the highlighted recommended brands.SubCategoryBox>(ul>(li>a+i)*14+div.showmore>a>span(display all brands))
```$ (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();//Hide all brands
$('.showmore a span')
.css("background" ,"url(img/up.gif) no-repeat 0 0")
.text("Show all brands");
$('ul li').filter(":contains('Canon'),:contains(' Nikon'),:contains('
}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");
```Requirement 6 In the default state, the email address and password are respectively prompted to enter the email address and the password.
When the mouse is placed in the corresponding box, the text is empty input#address+input#password+input[type="button"]
` ``$(function(){
//Operate the address box
$("#address").focus(function(){
var txt_value=$(this).val();
if(text_value=="Please enter the email address "){
$(this).val("");//Empty the content of the text box if the conditions are met
}
});
$("#address").blur(function(){
var txt_value=$(this). val();
if(text_value==""){
$(this).val("Please enter your email address");//Empty the content of the text box if the conditions are met
}
});
//Operate on the password box
$( "#address").focus(function(){
var txt_value=$(this).val();
if(text_value=="Please enter your email password"){
$(this).val("");//Clear the content of the text box if the conditions are met
}
});
$("#address").blur(function(){
var txt_value=$(this).val();
if(text_value==""){
$(this).val("Please enter the email password");//If the conditions are met, clear the content of the text box
}
});
});
$("#single option:eq(1)").attr("selected",true);
$("[value=radio2]:radio").attr("checked",true);
```Requirement seven website hyperlink and picture prompt effect p>a([title="This is my hyperlink prompt 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();
});
})
```Requirement 9: Validate the form and click submit to determine whether an element is a required field and whether the length of an element is 6 digits long.
When the form does not meet the submission conditions, the submission of the form should be organized.
$("#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); }); })
After clicking the div element, let it move right and increase its height, and change its opacity from 50% to 100%,
and then let it move from top to bottom, while its width increases, when done After these effects, let it fade out
$(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");
}
);
})
```Requirement 12 Add get and lose focus events for text boxes
$(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); })
Zoom-in and zoom-out buttons of the comment box of requirement thirteen
$(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); } } }); })
Requirement fourteen, the user clicks the select all button, the checkbox group will be selected;
$("#checked").click(function(){ $("[name=items]:checkbox").attr('checked',true); });
Fifteen of the requirements do not select the operation
$("#checked").click(function(){ $("[name=items]:checkbox").attr('checked',false); });
Sixteen inverse selection operations are required
$("#checkedRev").click(function(){ $('[name=items]:checkbox').each(function(){ this.checked=!this.checked; }); });
Requirement 17 Click Submit to output the selected value
$('#send').click(function(){ var str="你选中的是：\r\n"; $("[name=items]:checkbox:checked").each(function(){ str+=$(this).val()+"\r\n"; }); alert(str); });