checkbox会有优先于自定义的事件，就是写一个checkbox，在绑定一个事件，看看那个优先；
selfy function
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="title">12312313123</div> <div class="title">8888888</div> <script src="jquery-3.1.1.js"> </script> <script> jQuery.fn.extend({ so:function () { var val=this.text(); val=val+'gg' return val }, sr:function () { var val=this return val } }) jQuery.extend({ f:function (arg) { var val=$(arg).text(); return val+'gh' } }) var ret=$.f(".title") console.log(ret) </script> </body> </html>
clone
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="condition"> <div class="icons" style="display: inline-block;"> <a onclick="add(this);"> <button>+</button> </a> </div> <div class="input" style="display: inline-block"> <input type="checkbox"> <input type="text"> </div> </div> </div> <script src="jquery-3.1.1.js"></script> <script> function add(self) { var duplicate=$(self).parent().parent().clone(); duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-"); $(self).parent().parent().parent().append(duplicate); // duplicate.appendTo($(self).parent().parent().parent()); } function removed(self) { $(self).parent().parent().remove() } </script> </body> </html>
clone2（2017-6-30 20:45:38）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="block"> <div class="btm" style="display: inline-block;"> <a onclick="Add(this)"><button>+</button></a> </div> <div class="ipt" style="display: inline-block;"> <input type="checkbox"> <input type="text" value="IP"> </div> </div> </div> <script src="jquery-3.1.1.js"></script> <script> function Add(ths) { var item=$(ths).parent().parent().clone(); item.find('a button').text('-'); item.find('a').attr('onclick','Remove(this)'); $('.outer').append(item); // 先修改再append是否可行 } function Remove(ths) { $(ths).parent().parent().remove(); } </script> </body> </html>
购物商场菜单（2017-7-1 16:13:29）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .hide{ display:none; } .header-nav { height: 39px; background: #c9033b; } .header-nav .bg{ background: #c9033b; } .header-nav .nav-allgoods .menuEvent { display: block; height: 39px; line-height: 39px; text-decoration: none; color: #fff; text-align: center; font-weight: bold; font-family: 微软雅黑; color: #fff; width: 100px; } .header-nav .nav-allgoods .menuEvent .catName { height: 39px; line-height: 39px; font-size: 15px; } .header-nav .nav-allmenu a { display: inline-block; height: 39px; vertical-align: top; padding: 0 15px; text-decoration: none; color: #fff; float: left; } .header-menu a{ color:#656565; } .header-menu .menu-catagory{ position: absolute; background-color: #fff; border-left:1px solid #fff; height: 316px; width: 230px; z-index: 4; float: left; } .header-menu .menu-catagory .catagory { border-left:4px solid #fff; height: 104px; border-bottom: solid 1px #eaeaea; } .header-menu .menu-catagory .catagory:hover { height: 102px; border-left:4px solid #c9033b; border-bottom: solid 1px #bcbcbc; border-top: solid 1px #bcbcbc; } .header-menu .menu-content .item{ margin-left:230px; position:absolute; background-color:white; height:314px; width:500px; z-index:4; float:left; border: solid 1px #bcbcbc; border-left:0; box-shadow: 1px 1px 5px #999; } </style> </head> <body> <div class="pg-header"> <div class="header-nav"> <div class="container narrow bg"> <div class="nav-allgoods left"> <a id="all_menu_catagory" href="#" class="menuEvent" > <strong class="catName">全部商品分类</strong> <span class="arrow" style="display: inline-block;vertical-align: top;"></span> </a> </div> </div> </div> <div class="header-menu"> <div class="container narrow hide"> <div id="nav_all_menu" class="menu-catagory"> <div class="catagory CLASS1" float-content="one"> <div class="title">家电</div> <div class="body"> <a href="#">空调</a> </div> </div> <div class="catagory CLASS2" float-content="two"> <div class="title">床上用品</div> <div class="body"> <a href="http://www.baidu.com">床单</a> </div> </div> <div class="catagory CLASS3" float-content="three"> <div class="title">水果</div> <div class="body"> <a href="#">橘子</a> </div> </div> </div> <div id="nav_all_content" class="menu-content"> <div class="item CLASS1 hide" float-id="one"> <dl> <dt><a href="#" class="red">厨房用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span> </dd> </dl> <dl> <dt><a href="#" class="red">厨房用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span> </dd> </dl> <dl> <dt><a href="#" class="red">厨房用品</a></dt> <dd> <span>| <a href="#">菜板</a> </span> </dd> </dl> <dl> <dt><a href="#" class="red">厨房用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="碗">碗</a> </span> </dd> </dl> </div> <div class="item CLASS2 hide" float-id="two"> <dl> <dt><a href="#" class="red">厨房用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="">角阀</a> </span> </dd> </dl> <dl> <dt><a href="#" class="red">厨房用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span> </dd> </dl> <dl> <dt><a href="#" class="red">厨房用品</a></dt> <dd> <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span> </dd> </dl> </div> <div class="item CLASS3 hide" float-id="three"> <dl> <dt><a href="#" class="red">厨房用品3</a></dt> <dd> <span>| <a href="#" target="_blank" title="角阀">角阀3</a> </span> </dd> </dl> <dl> <dt><a href="#" class="red">厨房用品3</a></dt> <dd> <span>| <a href="http://www.meilele.com/category-jiaofa/" target="_blank" title="角阀">角阀3</a> </span> </dd> </dl> </div> </div> </div> </div> </div> <script src="jquery-3.1.1.js"></script> <script> $(document).ready(function () { Show_menu('#all_menu_catagory','#nav_all_menu', '#nav_all_content'); function Show_menu(tar,Fclass,Sclass) { one=$(tar); two=$(Fclass); three=$(Sclass); one.bind("mouseover",function () { two.parent().removeClass('hide'); }); one.bind("mouseout",function () { two.parent().addClass('hide'); }); two.children().bind('mouseover',function () { two.parent().removeClass('hide'); var sec=$(this).attr('float-content'); three.find('div[float-id="'+sec+'"]').removeClass('hide'); }); two.bind("mouseout",function () { two.parent().addClass('hide'); three.children().addClass('hide'); // $menu.bind("mouseout", function () { // $content.children().addClass('hide'); // $menu.parent().addClass('hide'); }); three.children().bind('mouseover',function () { $(this).removeClass('hide'); two.parent().removeClass('hide'); }); three.children().bind('mouseout',function () { $(this).addClass('hide'); two.parent().addClass('hide'); }) } }) </script> </body> </html>
轮播图（2017/6/28）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } li{ list-style:none; } .outer{ width:790px; height: 340px; border: dashed powderblue 5px; margin:0 auto; position: relative; top: 180px; } .outer .im li{ position: absolute; left: 0; top:0; } .outer .num{ position: absolute; text-align: center; width: 100%; bottom:5px; font-size: 0; } .outer .num li{ height: 20px; margin: 5px; background-color: #dddddd; width: 20px; border-radius: 60%; text-align: center; line-height: 20px; display: inline-block; font-size: 13px; cursor: pointer; } .lr{ width: 60px; height: 80px; position: absolute; background-color: #cccccc; font-size: 40px; opacity: 0.5; top:50%; margin-top: -40px; line-height: 80px; font-weight:bolder ; text-align: center; display: none; cursor: pointer; } .right{ right: 0; } .outer:hover .lr{ display: block; } .outer .num li.cc{ background-color: crimson; } </style> <script src="jquery-3.1.1.js"></script> </head> <body> <div class="outer"> <ul class="im"> <li><img src="img/1.jpg"></li> <li><img src="img/2.jpg"></li> <li><img src="img/3.jpg"></li> <li><img src="img/4.jpg"></li> <li><img src="img/5.jpg"></li> <li><img src="img/6.jpg"></li> <li><img src="img/7.jpg"></li> <li><img src="img/8.jpg"></li> </ul> <ul class="num"> <li class="cc">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <div class="right lr"> ></div> <div class="left lr"> <</div> </div> <script> $('.num li').mouseover(function () { $(this).addClass("cc").siblings().removeClass("cc"); var index=$(this).index(); i=index; $(".im li").eq(index).fadeIn(500).siblings().fadeOut(500); }); i=0; var time= setInterval(move,800); function move() { i++; if (i==8){ i=0; } $(".num li").eq(i).addClass("cc").siblings().removeClass("cc"); $(".im li").eq(i).fadeIn(500).siblings().fadeOut(500); } $(".outer").hover(function () { clearInterval(time) },function () { time= setInterval(move,800); }) $(".right").click(function () { move() }) $(".left").click(function () { if(i==0){ i=8 } i=i-2 move() }) </script> </body> </html>
拖动面板（2017-6-29 10:43:15）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Td</title> </head> <body> <div style="border:1px solid #dddddd; 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;color:white;"> title </div> <div style="height: 300px;"> content </div> </div> <script src="jquery-3.1.1.js"></script> <script> $('#title').mouseover(function () { $(this).css('cursor','move'); }).mousedown(function (e) { // console.log(e,$(this).offset()); var mevent=e || window.event; // console.log(mevent); // 原始鼠标坐标 var oldX=mevent.clientX; var oldY=mevent.clientY; // console.log(oldY,oldX); var pleft=$(this).parent().offset().left; var ptop=$(this).parent().offset().top; // console.log(pleft,ptop) $(this).bind('mousemove',function (g) { var newevent= g||window.event; var newX=newevent.clientX; var newY=newevent.clientY; // console.log(newY,newX); var x=pleft+(newX - oldX); var y=ptop+(newY - oldY); // console.log(x,y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); // console.log($(this).parent().css('top',y+'px')) }); }).mouseup(function(){ $(this).unbind('mousemove'); }); // $('#title').mouseover(function(){ // $(this).css('cursor','move'); // }).mousedown(function(e){ // //console.log($(this).offset()); // var _event = e || window.event; // // 原始鼠标横纵坐标位置 // var ord_x = _event.clientX; // var ord_y = _event.clientY; // // var parent_left = $(this).parent().offset().left; // var parent_top = $(this).parent().offset().top; // // $(this).bind('mousemove', function(e){ // var _new_event = e || window.event; // var new_x = _new_event.clientX; // var new_y = _new_event.clientY; // // var x = parent_left + (new_x - ord_x); // var y = parent_top + (new_y - ord_y); // // $(this).parent().css('left',x+'px'); // $(this).parent().css('top',y+'px'); // // }) // }).mouseup(function(){ // $(this).unbind('mousemove'); // }); </script> </body> </html>
模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .shade{ position: fixed; top:0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,.6); z-index: 2; } .model{ position: fixed; left: 50%; top:50%; height: 200px; width: 180px; margin-top: -100px; margin-left: -90px; background: white; z-index: 3; } .hide{ display: none; } </style> </head> <body> <div class="flame"> <input class="add" type="button" value="add+" onclick="add()"> </div> <table class="content" border="1" style="cursor: pointer;"> <thead> <tr> <th>host</th> <th>IP</th> <th>port</th> <th>Edit</th> </tr> </thead> <tbody> <tr> <td name="host">c1</td> <td name="IP">1.1.1.1.1</td> <td name="port">8888</td> <td onclick="modify(this);">modify</td> </tr> <tr> <td name="host">c2</td> <td name="IP">1.1.1.1.1</td> <td name="port">8888</td> <td onclick="modify(this);">modify</td> </tr> <tr> <td>c3</td> <td>1.1.1.1.1</td> <td>8888</td> <td onclick="modify(this);">modify</td> </tr> <tr> <td>c4</td> <td>1.1.1.1.1</td> <td>8888</td> <td onclick="modify(this);">modify</td> </tr> <tr> <td>c5</td> <td>1.1.1.1.1</td> <td>8888</td> <td onclick="modify(this);">modify</td> </tr> </tbody> </table> <div class="shade hide"></div> <div> <form class="model hide"> <p><input type="text" id="host"></p> <p><input type="text" id="IP"></p> <p><input type="text" id="port"></p> <input type="submit" value="submit" onclick="submit()"> <input type="button" value="cancel" onclick="cancel()"> </form> </div> <script src="jquery-3.1.1.js"></script> <script> function modify(ths) { $('.model,.shade').removeClass('hide'); var obj=$(ths).prevAll(); obj.each(function () { var text=$(this).text(); var name=$(this).attr('name'); $("#"+name).val(text); // console.log(text) }); console.log(name) // name.each(function () { // console.log(this) // }) } function cancel() { $(".model [type=text]").val(''); $('.model,.shade').addClass('hide'); } function add() { $('.hide').removeClass('hide'); } </script> </body> </html>