两者区别:$(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).addClass("highlight"); $(this).next("div.content").show(); },function(){ $(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"); }); })

需求十一点击向左向右按钮,来控制图片的滚动
$(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); });

锋利的jQuery复制粘贴(一)的更多相关文章

  1. JQuery 复制粘贴上传图片插件(textarea 和 tinyMCE)

    开源地址:https://github.com/yuezhongxin/paste-upload-image.js 支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传. ...

  2. jQuery event的复制粘贴的坑

    jQuery为了兼容性会把系统暴露出来的event重新整理一遍,但是复制粘贴的event就被丢掉了. 所以要在所有原生浏览器想实现复制粘贴,大家都用flash实现了.其实只要用原生的方法捕获事件就ok ...

  3. JQuery Mobile - html5+CSS 禁止IOS长按复制粘贴实现

    因为在移动端APP需要实现长按执行别的事件,但是在IOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法.实际测试,也并不是很理想,但是可能没有更好办法了! / ...

  4. 锋利的jQuery学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  5. js 实现复制粘贴文本过滤(保留文字和图片)

    实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...

  6. 通过如何通过js实现复制粘贴功能

    在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...

  7. 锋利的jQuery(第二版)学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...

  8. 同时绑定onpropertychange 和 oninput 事件,实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴

    实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...

  9. 《锋利的jQuery》学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

随机推荐

  1. C语言----数据类型(基础篇一)

    C语言的入门程序模板 #include <stdio.h> /*使用或者包含系统里面的程序*/ main() /*程序入口点*/ { /*起点*/ +; /*叫计算机执行的指令*/ } / ...

  2. Redis数据"丢失"讨论及规避和解决的几点总结

    Redis大部分应用场景是纯缓存服务,请求后端有Primary Storage的组件,如MySQL,HBase;请求Redis的键未命中,会从primary Storage中获取数据返回,同时更新Re ...

  3. Nginx+Tomcat+Memcached部署

    环境清单列表:(因为只有三台电脑,所有把Nginx和memcached放到一起) 应用服务器1:192.168.51.10: 应用服务器2:192.168.55.110: memcached服务器:1 ...

  4. 四则运算 C 语言

    #include<stdio.h>void main(){ char c; float x,y; int result; scanf("%c %f %f",&c ...

  5. sql server选取第m行到第n行的元组

    现在有一个表Questioin,主码是qid,要求选择第m行到第n行的元组 //方法一:效率最低 //错误:如果n<m,将选取前n条数据,如果n>=m,将选取从m+1开始的n条数据 sel ...

  6. maven依赖的描述

    maven的坐标和依赖 坐标和依赖,主要涉及的就是pom文件的头部和<dependencies>标签部分(1)pom文件的头部 这里头部不是指pom文件的开头<project> ...

  7. 剑指offer:复杂链表的复制

    题目描述: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用, ...

  8. app推广及主要代码

    app推广:      一.基本情况       我们把推广和调研都放在了一起,主要是调研,主要通过调查问卷和直接访问的方式,让调查的人能够看到我们app的主要功能, 然后做出评价和对此改善的意见.调 ...

  9. centos7编译安装zabbix的错误

    [Z3001] connection to database 'zabbix' failed: [2002] Can't connect to local MySQL server through s ...

  10. Beta冲刺随笔汇总

    项目Beta冲刺(团队) Beta冲刺随笔汇总 姓名 学号 博客链接 何守成 031602408 http://www.cnblogs.com/heshoucheng/ 黄锦峰 031602411 h ...