锋利的jQuery复制粘贴(一)
两者区别:$(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复制粘贴(一)的更多相关文章
- JQuery 复制粘贴上传图片插件(textarea 和 tinyMCE)
开源地址:https://github.com/yuezhongxin/paste-upload-image.js 支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传. ...
- jQuery event的复制粘贴的坑
jQuery为了兼容性会把系统暴露出来的event重新整理一遍,但是复制粘贴的event就被丢掉了. 所以要在所有原生浏览器想实现复制粘贴,大家都用flash实现了.其实只要用原生的方法捕获事件就ok ...
- JQuery Mobile - html5+CSS 禁止IOS长按复制粘贴实现
因为在移动端APP需要实现长按执行别的事件,但是在IOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法.实际测试,也并不是很理想,但是可能没有更好办法了! / ...
- 锋利的jQuery学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...
- js 实现复制粘贴文本过滤(保留文字和图片)
实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...
- 通过如何通过js实现复制粘贴功能
在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...
- 锋利的jQuery(第二版)学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...
- 同时绑定onpropertychange 和 oninput 事件,实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴
实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...
- 《锋利的jQuery》学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...
随机推荐
- webvirtmgr-重命名kvm虚拟机的名称
之前部署了Webvirtmgr平台管理kvm虚拟机,由于虚拟机在创建时名称是顺便起的,后续在虚拟机上部署了部分业务.为了便于管理,最好将虚拟机的名称重置下. 现在说下如何修改kvm中虚拟机的名称: 比 ...
- Spring RPC 入门学习(3)-插入Student对象
Spring RPC 向后台传递对象 1. 新建RPC接口:StudentInterface.java package com.cvicse.ump.rpc.interfaceDefine; impo ...
- uml 图学习记录
UML类图与类的关系详解 2011-04-21 来源:网络 在画类图的时候,理清类和类之间的关系是重点.类的关系有泛化(Generalization).实现(Realization).依赖(D ...
- Beta阶段爬取数目预估
预计于12月29号能进行Beta版本发布. Beta阶段我们的爬取动作应该更有针对性,在爬取期间如若数据处理小组有需求,会优先爬取数据处理小组提供的种子链接.预估在项目展示之前能够爬取的数目: 普通网 ...
- spring mvc的工作原理
该文转载自:http://blog.csdn.net/u012191627/article/details/41943393 SpringMVC框架介绍 1) spring MVC属于SpringFr ...
- 博客用Markdown编辑器插入视频
要展示一些App的效果用或者更方便地展示工具的操作,可以使用视频. 以下有两种方式可以在博客中插入视频 第一种 此方法适用于插入来源优酷的视频或者你自己录制了视频上传到优酷,这种方法的好处是可以插入时 ...
- Beta阶段敏捷冲刺二
一.举行站立式会议 1.当天站立式会议照片一张 2.团队成员报告 林楚虹 (1) 昨天已完成的工作:连接上数据库 (2) 今天计划完成的工作:修改学习界面单词获取 (3) 工作中遇到的困难:虽然前天询 ...
- 使用kindeditor来替换ecshop的fckeditor编辑器,让ecshop可以批量上传图片
老杨原创 kindeditor此编辑器可以让ecshop批量上传图片,可以插入代码,可以全屏编辑,可以插入地图.视频,进行更多word操作,设置字体. 步骤一:进入kindeditor的官网,http ...
- PGSQL 获取数据库大小以及表达小等的SQL
SELECT d.datname AS Name, pg_catalog.pg_get_userbyid(d.datdba) AS Owner, CASE WHEN pg_catalog.has_da ...
- SAP入行就业
就大局势来说, 缺乏人最多的模块有abap 还有就是FICO 和MM. 如果您 英语水平特别高的话,建议您学习FICO HR 或BW. 如果您想追求高薪,那就是FICO无疑了.想快速就业或者有编程基础 ...