jquery-day32

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=thisreturn val}})jQuery.extend({f:function (arg) {var val=$(arg).text();return val+'gh'}})var ret=$.f(".title")console.log(ret)
</script>
</body>
</html>

View Code

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[οnclick="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>

View Code

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>

View Code

购物商场菜单（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>

View Code

轮播图（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-2move()})</script>
</body>
</html>

View Code

拖动面板（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;width: 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>

View Code

模态对话框

<!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>

View Code

转载于:https://www.cnblogs.com/ezway/p/7085801.html

jquery-day32相关推荐

Ajax接收Java异常_java – 处理来自Servlet的Jquery AJAX响应中的异常
我的servlet代码是 try{ //something response.setStatus(201); out.print("Data successfully saved" ...
Jquery DIV滚动至浏览器顶部后固定不动代码
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 效果例1 代码如下复制代码 <scr ...
jquery.raty评星插件
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
jquery autocomplete demo
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择. jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquer ...
在Ant-design-pro框架中引入jQuery和jQuery-ui步骤
1.安装jQuery和jQuery-ui npm i jquery s npm i jquery-ui s yarn install 2.在vue.config.js中进行配置 // webpack ...
火狐浏览器允许ajax,解决火狐浏览器发送jquery的ajax请求无效的问题
今天遇到这样一个问题: 页面在chrome下发送ajax的请求是没有问题的,但是在firfox下无效. 代码大致如下: //前面省略 ..... 生成成绩查询成绩 ...... ...... fun ...
jquery 监听的案例
jQuery 简介 jQuery 是一个 JavaScript 库. jQuery 使用可以下载一个,也可以使用Staticfile CDN.百度.又拍云.新浪.谷歌和微软的服务器都存有 jQuer ...
网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
利用 jquery 获取某个元素下的所有图片并改变其属性
HTML代码 <div id="mochu"> <p>内容....<./p> <p><img src="xxxx.p ...
通过jQuery调用ASP.NET的AJAX
传统上,在ASP.NET页面中实现AJAX的方法是拖放一个ScriptManager控件,并进行一系列的设置和相关编程.但事实上,这并不是理想的解决方案.使用jQuery来调用ASP.NET后台的方法 ...

jquery-day32

jquery-day32相关推荐

最新文章

热门文章