\u5c3d\u7ba1\u5404\u79cd JavaScirpt \u6846\u67b6\u548c\u5e93\u5c42\u51fa\u4e0d\u7a77\uff0cjQuery \u4ecd\u7136\u662f Web \u524d\u7aef\u5f00\u53d1\u4e2d\u6700\u5e38\u7528\u7684\u5de5\u5177\u5e93\u3002\u4eca\u5929\uff0c\u5411\u5927\u5bb6\u5206\u4eab\u6211\u89c9\u5f97\u5728\u7f51\u7ad9\u5f00\u53d1\u4e2d10\u4e2a\u7b80\u5355\u5b9e\u7528\u7684 jQuery \u4ee3\u7801\u7247\u6bb5\u3002<\/p>\n
\u5e73\u6ed1\u6eda\u52a8\u5230\u951a\u70b9<\/strong><\/p>\n [code]\/\/ HTML: $(document).ready(function() { [code]$(window).bind(“load”, function() { if(width > maxWidth){ \u6eda\u52a8\u65f6\u81ea\u52a8\u52a0\u8f7d\u5185\u5bb9<\/strong> [code]var loading = false; $(document).ready(function() { \u5728\u8868\u5355\u529f\u80fd\u4e2d\uff0c\u7ecf\u5e38\u4f1a\u6709\u68c0\u6d4b\u7528\u6237\u8f93\u5165\u7684\u5bc6\u7801\u5f3a\u5ea6\u7684\u529f\u80fd\uff0c\u4e0b\u9762\u8fd9\u4e2a\u4ee3\u7801\u7247\u6bb5\u4f7f\u7528\u6b63\u5219\u8868\u8fbe\u5f0f\u6765\u68c0\u6d4b\u5bc6\u7801\u662f\u5426\u8db3\u591f\u5b89\u5168\uff0c\u5f53\u7136\u8bb0\u5f97\u5728\u670d\u52a1\u7aef\u4e5f\u8fdb\u884c\u8868\u5355\u9a8c\u8bc1\u3002<\/p>\n [code]$(‘#pass’).keyup(function(e) { \u4f7f\u7528\u7eaf CSS\u4ee3\u7801\u5b9e\u73b0\u5747\u8861\u5143\u7d20\u7684\u9ad8\u5ea6\u6bd4\u8f83\u56f0\u96be\uff0c\u800c\u4e0b\u9762\u8fd9\u6bb5 jQuery \u4ee3\u7801\u4f1a\u6839\u636e\u6700\u9ad8\u7684\u5143\u7d20\u6765\u5747\u8861\u6240\u6709\u7684 Div \u5143\u7d20\u3002<\/p>\n [code]var maxHeight = 0;<\/p>\n $(“div”).each(function(){ $(“div”).height(maxHeight);[\/code]<\/p>\n \u4fee\u590d IE6 PNG \u95ee\u9898<\/strong> [code]$(‘.pngfix’).each( function() { \u89e3\u6790 JSON \u5b57\u7b26\u4e32<\/strong><\/p>\n \u4f7f\u7528 jQuery \u89e3\u6790 JSON \u6570\u636e\u5e76\u4e0d\u590d\u6742\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u9ad8\u6548\u89e3\u6790 JSON \u6570\u636e\u5e76\u5c06\u5176\u8ffd\u52a0\u5230\u60a8\u7684\u7f51\u9875\u7684\u4f8b\u5b50\u3002<\/p>\n [code]function parseJson(){ \/\/The process function, I am going to get the title, \/\/Fire off the function in your document ready \u9694\u884c\u6362\u8272<\/strong><\/p>\n \u8fd9\u662f\u4e00\u4e2a\u5f88\u8001\u7684\u529f\u80fd\u4e86\uff0c\u5728\u5927\u7684\u5217\u8868\u6216\u8868\u683c\u4e2d\uff0c\u9694\u884c\u989c\u8272\u53ef\u4ee5\u5927\u5927\u63d0\u9ad8\u5185\u5bb9\u7684\u53ef\u8bfb\u6027\u3002\u4e0b\u9762\u7684\u4ee3\u7801\u53ef\u4ee5\u975e\u5e38\u7b80\u5355\u5b9e\u73b0\u8fd9\u4e2a\u529f\u80fd\u3002<\/p>\n [code]$(‘div:odd’).css(“background-color”, “#F4F4F8”); \u9884\u52a0\u8f7d\u56fe\u7247<\/strong><\/p>\n \u4f60\u662f\u5426\u6ce8\u610f\u5230 facebook \u76f8\u518c\u7684\u56fe\u7247\u52a0\u8f7d\u901f\u5ea6\u7279\u522b\u5feb\uff1f\u90a3\u662f\u56e0\u4e3a\u5728\u4f60\u770b\u5230\u8fd9\u4e9b\u56fe\u7247\u4e4b\u524d\u5df2\u7ecf\u9884\u52a0\u8f7d\u5230\u4f60\u7684\u6d4f\u89c8\u5668\u7f13\u5b58\u4e2d\u4e86\u3002\u4e0b\u9762\u662f\u5b9e\u73b0\u8fd9\u4e2a\u7c7b\u4f3c\u529f\u80fd\u7684\u4ee3\u7801\u793a\u4f8b\uff1a<\/p>\n [code]var nextimage = “\/images\/some-image.jpg”; \u8ba9\u6574\u4e2a Div \u53ef\u70b9\u51fb<\/strong> [code]<div class=”myBox”>
\n\/\/ <h1 id=”anchor”>Lorem Ipsum<\/h1>
\n\/\/ <p><a href=”#anchor” class=”topLink”>Back to Top<\/a><\/p><\/p>\n
\n$(“a.topLink”).click(function() {
\n$(“html, body”).animate({
\nscrollTop: $($(this).attr(“href”)).offset().top + “px”
\n}, {
\nduration: 500,
\neasing: “swing”
\n});
\nreturn false;
\n});
\n});[\/code]
\n\u7f29\u653e\u56fe\u7247<\/strong>
\n\u867d\u7136\u56fe\u7247\u5e94\u8be5\u5728\u670d\u52a1\u5668\u7aef\u7f29\u653e\uff0c\u4e0d\u8fc7\u5982\u679c\u670d\u52a1\u5668\u7aef\u672a\u505a\u7f29\u653e\uff0c\u9700\u8981\u518d\u5ba2\u6237\u7aef\u7f29\u653e\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u4f7f\u7528\u4e0b\u9762\u8fd9\u4e2a\u65b9\u4fbf\u7684\u4ee3\u7801\u7247\u6bb5\uff1a<\/p>\n
\n\/\/ IMAGE RESIZE
\n$(‘#product_cat_list img’).each(function() {
\nvar maxWidth = 120;
\nvar maxHeight = 120;
\nvar ratio = 0;
\nvar width = $(this).width();
\nvar height = $(this).height();<\/p>\n
\nratio = maxWidth \/ width;
\n$(this).css(“width”, maxWidth);
\n$(this).css(“height”, height * ratio);
\nheight = height * ratio;
\n}
\nvar width = $(this).width();
\nvar height = $(this).height();
\nif(height > maxHeight){
\nratio = maxHeight \/ height;
\n$(this).css(“height”, maxHeight);
\n$(this).css(“width”, width * ratio);
\nwidth = width * ratio;
\n}
\n});
\n\/\/$(“#contentpage img”).show();
\n\/\/ IMAGE RESIZE
\n});[\/code]<\/p>\n
\n\u5f88\u591a\u7f51\u7ad9\u4f7f\u7528\u4e86\u6d41\u884c\u7684\u7011\u5e03\u56fe\u5e03\u5c40\uff0c\u8fd9\u79cd\u7c7b\u578b\u7684\u7f51\u7ad9\u5728\u9875\u9762\u6eda\u52a8\u7684\u65f6\u5019\u4f1a\u81ea\u52a8\u52a0\u8f7d\u5185\u5bb9\u3002\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\u8ba9\u4f60\u80fd\u591f\u628a\u8fd9\u4e2a\u529f\u80fd\u642c\u5230\u4f60\u7684\u7f51\u7ad9\u4e0a\u3002<\/p>\n
\n$(window).scroll(function(){
\nif((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
\nif(loading == false){
\nloading = true;
\n$(‘#loadingbar’).css(“display”,”block”);
\n$.get(“load.php?start=”+$(‘#loaded_max’).val(), function(loaded){
\n$(‘body’).append(loaded);
\n$(‘#loaded_max’).val(parseInt($(‘#loaded_max’).val())+50);
\n$(‘#loadingbar’).css(“display”,”none”);
\nloading = false;
\n});
\n}
\n}
\n});<\/p>\n
\n$(‘#loaded_max’).val(50);
\n});[\/code]
\n\u68c0\u6d4b\u5bc6\u7801\u5f3a\u5ea6<\/strong><\/p>\n
\nvar strongRegex = new RegExp(“^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$”, “g”);
\nvar mediumRegex = new RegExp(“^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$”, “g”);
\nvar enoughRegex = new RegExp(“(?=.{6,}).*”, “g”);
\nif (false == enoughRegex.test($(this).val())) {
\n$(‘#passstrength’).html(‘More Characters’);
\n} else if (strongRegex.test($(this).val())) {
\n$(‘#passstrength’).className = ‘ok’;
\n$(‘#passstrength’).html(‘Strong!’);
\n} else if (mediumRegex.test($(this).val())) {
\n$(‘#passstrength’).className = ‘alert’;
\n$(‘#passstrength’).html(‘Medium!’);
\n} else {
\n$(‘#passstrength’).className = ‘error’;
\n$(‘#passstrength’).html(‘Weak!’);
\n}
\nreturn true;
\n});[\/code]
\n\u5747\u8861\u5143\u7d20\u7684\u9ad8\u5ea6<\/strong><\/p>\n
\nif ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
\n});<\/p>\n
\n\u81f3\u4eca\uff0cIE6 \u5728\u56fd\u5185\u4ecd\u7136\u5360\u636e\u4e86\u5927\u91cf\u7684\u4efd\u989d\uff0c\u56e0\u6b64\u5728 Web \u5f00\u53d1\u4e2d\u4ecd\u7136\u9700\u8981\u8003\u8651 IE6 \u7684\u517c\u5bb9\u95ee\u9898\u3002\u6bd4\u8f83\u5e38\u7528\u7684 IE6 PNG \u56fe\u7247\u95ee\u9898\uff0c\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\u53ef\u4ee5\u65b9\u4fbf\u7684\u4fee\u590d\u3002<\/p>\n
\n$(this).attr(‘writing-mode’, ‘tb-rl’);
\n$(this).css(‘background-image’, ‘none’);
\n$(this).css( ‘filter’, ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”path\/to\/image.png”,sizingMethod=”scale”)’);
\n});[\/code]<\/p>\n
\n\/\/Start by calling the json object, I will be using a
\n\/\/file from my own site for the tutorial
\n\/\/Then we declare a callback function to process the data
\n$.getJSON(‘hcj.json’,getPosts);<\/p>\n
\n\/\/url and excerpt for 5 latest posts
\nfunction getPosts(data){
\n\/\/Start a for loop with a limit of 5
\nfor(var i = 0; i < 5; i++){
\nvar strPost = ‘<h2>’
\n+ data.posts[i].title
\n+ ‘<\/h2>’
\n+ ‘<p>’
\n+ data.posts[i].excerpt
\n+ ‘<\/p>’
\n+ ‘<a href=”‘
\n+ data.posts[i].url
\n+ ‘” title=”Read ‘
\n+ data.posts[i].title
\n+ ‘”>Read ><\/a>’;
\n\/\/Append the body with the string
\n$(‘body’).append(strPost);
\n}
\n}
\n}<\/p>\n
\n$(document).ready(function(){
\nparseJson();
\n});[\/code]<\/p>\n
\n$(‘div:even’).css(“background-color”, “#EFF1F1”);[\/code]<\/p>\n
\n$(document).ready(function(){
\nwindow.setTimeout(function(){
\nvar img = $(“<img>”).attr(“src”, nextimage).load(function(){
\n\/\/all done
\n});
\n}, 100);
\n});[\/code]<\/p>\n
\n\u8fd9\u662f\u5b9e\u73b0\u94fe\u63a5\u7684\u7236 Div \u4e5f\u80fd\u591f\u70b9\u51fb\u7684\u7b80\u5355\u65b9\u6cd5\uff0cHTML \u793a\u4f8b\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
\nblah blah blah.
\n<a href=”http:\/\/google.com”>link<\/a>
\n<\/div>[\/code]
\n\u4e0b\u9762\u7684 jQuery \u4ee3\u7801\u8ba9\u6574\u4e2a Div \u53ef\u70b9\u51fb\uff1a<\/p>\n