保存到桌面加入收藏设为首页
java开发
当前位置:首页 > java开发

十分钟玩转 jQuery 实例大全-安度博客

时间:2019-02-04 14:53:17   作者:   来源:   阅读:147   评论:0
内容摘要:一、简介界说  jQuery首创人是美国John Resig,是优秀的javascript框架;  jQuery是一个轻量级、快速精练的javascript库。源码戳这jQuery工具  jQuery发生的工具时jQuery独占的,只能自己调用书写规则  支持链式操作;  在变量......
  • 一、简介

    界说

      jQuery首创人是美国John Resig,是优秀的javascript框架;

      jQuery是一个轻量级、快速精练的javascript库。源码戳这

    jQuery工具

      jQuery发生的工具时jQuery独占的,只能自己调用

    书写规则

      支持链式操作;

      在变量前加'$'符号(var $variable = jQuery 工具);

      注:此划定并不是强制要求。

    二、寻找元素

    选择器

    基本选择器、层级选择器、属性选择器  与CSS类似,这里不再细说,详细猛戳这里。

    基本筛选器

    $('li:first') //第一个元素$('li:last') //最后一个元素$('tr:even') //索引为偶数的元素,从 0 开始$('tr:odd') //索引为奇数的元素,从 0 开始 $('tr:eq(1)') //给定索引值的元素$('tr:gt(0)') //大于给定索引值的元素$('tr:lt(2)') //小于给定索引值的元素$(':focus') //当前获取焦点的元素$(':animated') //正在执行动画效果的元素

    内容选择器

    $('div:contains('nick')') //包罗nick文本的元素$('td:empty') //不包罗子元素或者文本的空元素$('div:has(p)') //含有选择器所匹配的元素$('td:parent') //含有子元素或者文本的元素

    表单选择器

    $(':input') //匹配所有 input textarea select 和 button 元素$(':text') //所有的单行文本框$(':password') //所有密码框$(':radio') //所有单选按钮$(':checkbox') //所有复选框$(':submit') //所有提交按钮$(':reset') //所有重置按钮$(':button') //所有button按钮$(':file') //所有文件域 $('input:checked') //所有选中的元素$('select option:selected') //select中所有选中的option元素

      

    筛选器

    过滤

    $('p').eq(0) //当前操作中第N个jQuery工具类似索引$('li').first() //第一个元素$('li').last() //最后一个元素$(this).hasClass('test') //元素是否含有某个特定的类返回布尔值$('li').has('ul') //包罗特定子女的元素

    查找

    $('div').children() //div中的每个子元素第一层$('div').find('span') //div中的包罗的所有span元素子子孙孙$('p').next()    //紧邻p元素后的一个同辈元素$('p').nextAll() //p元素之后所有的同辈元素$('#test').nextUntil('#test2') //id为'#test'元素之后到id为'#test2'之间所有的同辈元素掐头去尾$('p').prev() //紧邻p元素前的一个同辈元素$('p').prevAll() //p元素之前所有的同辈元素$('#test').prevUntil('#test2') //id为'#test'元素之前到id为'#test2'之间所有的同辈元素掐头去尾$('p').parent() //每个p元素的父元素$('p').parents() //每个p元素的所有祖先元素bodyhtml$('#test').parentsUntil('#test2') //id为'#test'元素到id为'#test2'之间所有的父级元素掐头去尾$('div').siblings() //所有的同辈元素不包罗自己

     三、属性操作

    基本属性操作

    $('img').attr('src');        //返回文档中所有图像的src属性值$('img').attr('src''test.jpg'); //设置所有图像的src属性$('img').removeAttr('src');    //将文档中图像的src属性删除$('input[type='checkbox']').prop('checked' true); //选中复选框$('input[type='checkbox']').prop('checked' false);$('img').removeProp('src');    //删除img的src属性

    CSS类

    $('p').addClass('selected');   //为p元素加上 'selected' 类$('p').removeClass('selected'); //从p元素中删除 'selected' 类$('p').toggleClass('selected'); //如果存在就删除否则就添加

    HTML代码/文本/值

    $(&#39;p&#39;).html();            //返回p元素的html内容$(&#39;p&#39;).html(&#39;Hello <b>nick</b>!&#39;); //设置p元素的html内容$(&#39;p&#39;).text();            //返回p元素的文本内容$(&#39;p&#39;).text(&#39;nick&#39;);        //设置p元素的文本内容$(&#39;input&#39;).val();          //获取文本框中的值$(&#39;input&#39;).val(&#39;nick&#39;);      //设置文本框中的内容

     四、CSS操作

    样式 

    $(&#39;p&#39;).css(&#39;color&#39;); //会见检察p元素的color属性$(&#39;p&#39;).css(&#39;color&#39;&#39;red&#39;); //设置p元素的color属性为red$(&#39;p&#39;).css({ &#39;color&#39;: &#39;red&#39; &#39;background&#39;: &#39;yellow&#39; }); //设置p元素的color为red,background属性为yellow(设置多个属性要用{}字典形式)

     位置

    $(&#39;p&#39;).offset() //元素在当前视口的相对偏移object {top: 122 left: 260}$(&#39;p&#39;).offset().top$(&#39;p&#39;).offset().left$(&#39;p&#39;).position() //元素相对父元素的偏移对可见元素有效,object {top: 117 left: 250}$(window).scrollTop() //获取滚轮滑的高度$(window).scrollLeft() //获取滚轮滑的宽度$(window).scrollTop(&#39;100&#39;) //设置滚轮滑的高度为100

    尺寸

    $(&#39;p&#39;).height(); //获取p元素的高度$(&#39;p&#39;).width(); //获取p元素的宽度$(&#39;p:first&#39;).innerHeight() //获取第一个匹配元素内部区域高度(包罗补白、不包罗边框)$(&#39;p:first&#39;).innerWidth() //获取第一个匹配元素内部区域宽度(包罗补白、不包罗边框)$(&#39;p:first&#39;).outerHeight() //匹配元素外部高度(默认包罗补白和边框)$(&#39;p:first&#39;).outerWidth() //匹配元素外部宽度(默认包罗补白和边框)$(&#39;p:first&#39;).outerHeight(true) //为true时包罗边距

     五、文档处置惩罚

     内部插入

    $(&#39;p&#39;).append(&#39;<b>nick</b>&#39;); //每个p元素内后面追加内容$(&#39;p&#39;).appendTo(&#39;div&#39;);     //p元素追加到div内后$(&#39;p&#39;).prepend(&#39;<b>Hello</b>&#39;); //每个p元素内前面追加内容$(&#39;p&#39;).prependTo(&#39;div&#39;);   //p元素追加到div内前

     外部插入

    $(&#39;p&#39;).after(&#39;<b>nick</b>&#39;); //每个p元素同级之后插入内容$(&#39;p&#39;).before(&#39;<b>nick</b>&#39;); //在每个p元素同级之前插入内容$(&#39;p&#39;).insertAfter(&#39;#test&#39;); //所有p元素插入到id为test元素的后面$(&#39;p&#39;).insertBefore(&#39;#test&#39;); //所有p元素插入到id为test元素的前面

    替换

    $(&#39;p&#39;).replaceWith(&#39;<b>Paragraph. </b>&#39;); //将所有匹配的元素替换成指定的HTML或DOM元素$(&#39;<b>Paragraph. </b>&#39;).replaceAll(&#39;p&#39;); //用匹配的元素替换掉所有 selector匹配到的元素

    删除

    $(&#39;p&#39;).empty(); //删除匹配的元素荟萃中所有的子节点,不包罗自己$(&#39;p&#39;).remove(); //删除所有匹配的元素包罗自己$(&#39;p&#39;).detach(); //删除所有匹配的元素(和remove()差异的是:所有绑定的事件、附加的数据会保留下来)

    复制

    $(&#39;p&#39;).clone()   //克隆元素并选中克隆的副本$(&#39;p&#39;).clone(true) //布尔值指事件处置惩罚函数是否会被复制

    六、事件

    页面载入

      当页面载入乐成后再运行的函数事件

    $(document).ready(function(){ do something...});//简写$(function($) { do something...});

    页面处置惩罚

    //bind 为每个匹配元素绑定事件处置惩罚函数,绑定多个用{}。$(&#39;p&#39;).bind(&#39;click&#39; function(){ alert( $(this).text() );});$(menuF).bind({ &#39;mouseover&#39;:function () { $(menuS).parent().removeClass(&#39;hide&#39;); }&#39;mouseout&#39;:function () { $(menuS).parent().addClass(&#39;hide&#39;);}}); $(&#39;p&#39;).one( &#39;click&#39; fun...) //one 绑定一个一次性的事件处置惩罚函数$(&#39;p&#39;).unbind( &#39;click&#39; ) //解绑一个事件

    页面委派

    // 与bind 差异的是其时间发生时才去暂时绑定。$(&#39;p&#39;).delegate(&#39;click&#39;function(){ do something...});$(&#39;p&#39;).undelegate();    //p元素删除由 delegate() 要领添加的所有事件$(&#39;p&#39;).undelegate(&#39;click&#39;) //从p元素删除由 delegate() 要领添加的所有click事件

    事件

    $(&#39;p&#39;).click();   //单击事件$(&#39;p&#39;).dblclick(); //双击事件$(&#39;input[type=text]&#39;).focus() //元素获得焦点时触发 focus 事件$(&#39;input[type=text]&#39;).blur() //元素失去焦点时触发 blur事件$(&#39;button&#39;).mousedown()//当按下鼠标时触发事件$(&#39;button&#39;).mouseup() //元素上放松鼠标按钮时触发事件$(&#39;p&#39;).mousemove() //当鼠标指针在指定的元素中移动时触发事件$(&#39;p&#39;).mouseover() //当鼠标指针位于元素上方时触发事件$(&#39;p&#39;).mouseout()  //当鼠标指针从元素上移开时触发事件$(window).keydown() //当键盘或按钮被按下时触发事件$(window).keypress() //当键盘或按钮被按下时触发事件每输入一个字符都触发一次$(&#39;input&#39;).keyup() //当按钮被松开时触发事件$(window).scroll() //当用户转动时触发事件$(window).resize() //当调整nk" target="_blank">浏览器窗口的巨细时触发事件$(&#39;input[type=&#39;text&#39;]&#39;).change() //当元素的值发生改变时触发事件$(&#39;input&#39;).select() //当input 元素中的文本被选择时触发事件$(&#39;form&#39;).submit() //当提交表单时触发事件$(window).unload() //用户脱离页面时

    (event object) 工具

    所有的事件函数都可以传入event参数利便处置惩罚事件

    $(&#39;p&#39;).click(function(event){ alert(event.type); //&#39;click&#39; }); (evnet object)属性要领:event.pageX   //事件发生时,鼠标距离网页左上角的水平距离event.pageY   //事件发生时,鼠标距离网页左上角的垂直距离event.type   //事件的类型event.which   //按下了哪一个键event.data   //在事件工具上绑定数据,然后传入事件处置惩罚函数event.target  //事件针对的网页元素event.preventDefault()  //阻止事件的默认行为(好比点击链接,会自动打开新页面)event.stopPropagation() //停止事件向上层元素冒泡

     七、效果

     基本

    $(&#39;p&#39;).show()     //显示隐藏的匹配元素$(&#39;p&#39;).show(&#39;slow&#39;); //参数体现速度(&#39;slow&#39;&#39;normal&#39;&#39;fast&#39;)也可为900毫秒$(&#39;p&#39;).hide()     //隐藏显示的元素$(&#39;p&#39;).toggle();    //切换 显示/隐藏

    滑动

    $(&#39;p&#39;).slideDown(&#39;900&#39;); //用900毫秒时间将段落滑下$(&#39;p&#39;).slideUp(&#39;900&#39;);  //用900毫秒时间将段落滑上$(&#39;p&#39;).slideToggle(&#39;900&#39;); //用900毫秒时间将段落滑上,滑下

    淡入淡出

    $(&#39;p&#39;).fadeIn(&#39;900&#39;);    //用900毫秒时间将段落淡入$(&#39;p&#39;).fadeOut(&#39;900&#39;);    //用900毫秒时间将段落淡出$(&#39;p&#39;).fadeToggle(&#39;900&#39;);  //用900毫秒时间将段落淡入淡出$(&#39;p&#39;).fadeTo(&#39;slow&#39; 0.6); //用900毫秒时间将段落的透明度调整到0.6

     八、工具会见

    $.trim()   //去除字符串两头的空格$.each()   //遍历一个数组或工具,for循环$.inArray() //返回一个值在数组中的索引位置,不存在返回-1 $.grep()   //返回数组中切合某种尺度的元素$.extend() //将多个工具,合并到第一个工具$.makeArray() //将工具转化为数组$.type() //判断工具的种别(函数工具、日期工具、数组工具、正则工具等等$.isArray() //判断某个参数是否为数组$.isEmptyobject() //判断某个工具是否为空(不含有任何属性)$.isFunction() //判断某个参数是否为函数$.isPlainobject() //判断某个参数是否为用&#39;{}&#39;或&#39;new object&#39;建设的工具$.support() //判断nk" target="_blank">浏览器是否支持某个特性
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title></head><body> <script src=&#39;../../jquery-1.12.4.js&#39;></script> <script> li = [112233]; $.each(lifunction (kv) { console.log(this); console.log(kv); if (k == 1){ return false; } }) </script> <script> function myEach(objfunc) { for (var i=0;i<obj.length;i++){ var current = obj[i]; var ret = func(icurrent); if (ret == false){ break; } } } var li = [102030]; myEach(lifunction (kv) { console.log(kv); return false; }) </script></body></html>
    模拟each()内部实现机制

    九、插件拓展机制 

    //方式一jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); } uncheck: function() { return this.each(function() { this.checked = false; }); }});$(&#39;input[type=checkbox]&#39;).check();$(&#39;input[type=radio]&#39;).uncheck();
    //方式二jQuery.extend({ min: function(a b) { return a < b ? a : b; } //三元运算 max: function(a b) { return a > b ? a : b; }});jQuery.min(23); //2jQuery.max(45); //5
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title></head><body> <div class=&#39;title&#39;>111</div> <div class=&#39;title&#39;>222</div> <script src=&#39;../../jquery-1.12.4.js&#39;></script> <script> jQuery.fn.extend({ show1: function () { var val = this.text(); val = val + &#39;sb&#39;; return val; } show2: function () { } }); var ret = $(&#39;.title&#39;).show1(); console.log(ret); jQuery.extend({ s1: function (arg) { var val = $(arg).text(); return val + &#39;sb&#39;; } s2: function () { } }); var ret2 = $.s1(&#39;.title&#39;); console.log(ret2); </script></body></html>

     十、实例

    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title> <style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 23px; background-color: #2F4F4F; color: white; position: fixed; right: 18px; bottom: 18px; } .divT:hover{ cursor: pointer; } .hide { display: none; } </style></head><body> <div class=&#39;divH&#39;></div> <div class=&#39;divT hide&#39; onclick=&#39;ReturnTop();&#39;><strong>返回顶部</strong></div> <script src=&#39;../../jquery-1.12.4.js&#39;></script> <script> window.onscroll = function () { var current = $(window).scrollTop(); if (current > 180){ $(&#39;.divT&#39;).removeClass(&#39;hide&#39;); }else { $(&#39;.divT&#39;).addClass(&#39;hide&#39;); } }; function ReturnTop() { $(window).scrollTop(0); } </script></body></html>
    返回顶部
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title> <style> .menu{ height: 600px; width: 30%; background-color: #2F4F4F; float: left; } .title{ line-height: 50px; color: #ddd; } .title:hover{ cursor: pointer; color: lightcyan; font-size: 18px; } .hide{ display: none; } </style></head><body> <div class=&#39;outer&#39;> <div class=&#39;menu&#39;> <div class=&#39;item&#39;> <div class=&#39;title&#39; onclick=&#39;Show(this);&#39;>菜单一</div> <div class=&#39;con&#39;> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class=&#39;item&#39;> <div class=&#39;title&#39; onclick=&#39;Show(this);&#39;>菜单二</div> <div class=&#39;con hide&#39;> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class=&#39;item&#39;> <div class=&#39;title&#39; onclick=&#39;Show(this);&#39;>菜单三</div> <div class=&#39;con hide&#39;> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> </div> <script src=&#39;../../jquery-1.12.4.js&#39;></script> <script> function Show(self) { $(self).next().removeClass(&#39;hide&#39;).parent().siblings().children(&#39;.con&#39;).addClass(&#39;hide&#39;); } </script></body></html>
    左侧菜单
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title> <style> *{ margin: 0px; padding: 0px; } .tab_outer{ margin: 0px auto; width: 60%; } .menu{ background-color: #cccccc; border: 1px solid #ccc; line-height: 40px; } .menu li{ display: inline-block; color: white; } .menu li:hover { cursor: pointer; } .menu a{ padding: 11px; } .content{ border: 1px solid #ccc; height: 300px; font-size: 30px; } .hide{ display: none; } .current{ background-color: #0099dd; color: black; } </style></head><body> <div class=&#39;tab_outer&#39;> <ul class=&#39;menu&#39;> <li xxx=&#39;c1&#39; class=&#39;current&#39; onclick=&#39;Tab(this);&#39;>菜单一</li> <li xxx=&#39;c2&#39; onclick=&#39;Tab(this);&#39;>菜单二</li> <li xxx=&#39;c3&#39; onclick=&#39;Tab(this);&#39;>菜单三</li> </ul> <div class=&#39;content&#39;> <div id=&#39;c1&#39;>内容一</div> <div id=&#39;c2&#39; class=&#39;hide&#39;>内容二</div> <div id=&#39;c3&#39; class=&#39;hide&#39;>内容三</div> </div> </div> <script src=&#39;../../jquery-1.12.4.js&#39;></script> <script> function Tab(self) { $(self).addClass(&#39;current&#39;).siblings().removeClass(&#39;current&#39;); var x = &#39;#&#39; + $(self).attr(&#39;xxx&#39;); $(x).removeClass(&#39;hide&#39;).siblings().addClass(&#39;hide&#39;); } </script></body></html>
    菜单切换
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title> <style> body{ margin: 0; background-color: #dddddd; } .w{ margin: 0 auto; width: 980px; } .pg-header{ background-color: black; color: white; height: 48px; } .pg-body .menu{ position: absolute; left: 200px; width: 180px; background-color: white; float: left; } li { list-style-type: none; } .pg-body .menu .active{ background-color: #425a66; color: white; } .pg-body .fixed{ position: fixed; top: 10px; } .pg-body .content{ position: absolute; left: 385px; right: 200px; background-color: white; float: left; } .pg-body .content .item{ height: 900px; } </style></head><body> <div class=&#39;pg-header&#39;> <div class=&#39;w&#39;></div> </div> <div class=&#39;pg-body&#39;> <div id=&#39;menu&#39; class=&#39;menu&#39;> <ul> <li menu=&#39;funcOne&#39;>第一章</li> <li menu=&#39;funcTwo&#39;>第二章</li> <li menu=&#39;funcStree&#39;>第三章</li> </ul> </div> <div id=&#39;content&#39; class=&#39;content&#39;> <div class=&#39;item&#39; con=&#39;funcOne&#39;>床前明月管</div> <div class=&#39;item&#39; con=&#39;funcTwo&#39;>疑是地上霜</div> <div class=&#39;item&#39; con=&#39;funcStree&#39; style=&#39;height: 100px&#39;>我是郭德纲</div> </div> </div> <script src=&#39;../../jquery-1.12.4.js&#39;></script> <script> window.onscroll = function () { var onTop = $(window).scrollTop(); if (onTop >= 48){ $(&#39;#menu&#39;).addClass(&#39;fixed&#39;); }else { $(&#39;#menu&#39;).removeClass(&#39;fixed&#39;); } var flag = false; $(&#39;.item&#39;).each(function () { var topH = $(this).offset().top; var HH = $(this).height() + topH; var wH = $(window).height(); if ((wH + onTop) == HH){ $(&#39;ul .active&#39;).removeClass(&#39;active&#39;); $(&#39;li:last&#39;).addClass(&#39;active&#39;); flag = true; return } if (flag){ return } var menuCon = $(this).attr(&#39;con&#39;); if ((topH < onTop) && (onTop < HH)){ $(&#39;ul [menu=&#39;&#39; + menuCon +&#39;&#39;]&#39;).addClass(&#39;active&#39;); }else { $(&#39;ul [menu=&#39;&#39; + menuCon +&#39;&#39;]&#39;).removeClass(&#39;active&#39;); } }) } </script></body></html>
    转动菜单
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title></head><body> <button id=&#39;in&#39;>fadein</button> <button id=&#39;out&#39;>fadeout</button> <button id=&#39;toggle&#39;>fadetoggle</button> <button id=&#39;fadeto&#39;>fadeto</button> <div id=&#39;id1&#39; style=&#39;display:none; width: 80px;height: 80px;background-color: blueviolet&#39;></div> <div id=&#39;id2&#39; style=&#39;display:none; width: 80px;height: 80px;background-color: orangered &#39;></div> <div id=&#39;id3&#39; style=&#39;display:none; width: 80px;height: 80px;background-color: darkgreen &#39;></div> <script src=&#39;../../jquery-1.12.4.js&#39;></script> <script> $(document).ready(function(){ $(&#39;#in&#39;).click(function(){ $(&#39;#id1&#39;).fadeIn(1000); $(&#39;#id2&#39;).fadeIn(1000); $(&#39;#id3&#39;).fadeIn(1000); }); $(&#39;#out&#39;).click(function(){ $(&#39;#id1&#39;).fadeOut(1000); $(&#39;#id2&#39;).fadeOut(1000); $(&#39;#id3&#39;).fadeOut(1000); }); $(&#39;#toggle&#39;).click(function(){ $(&#39;#id1&#39;).fadeToggle(1000); $(&#39;#id2&#39;).fadeToggle(1000); $(&#39;#id3&#39;).fadeToggle(1000); }); $(&#39;#fadeto&#39;).click(function(){ $(&#39;#id1&#39;).fadeTo(10000.4); $(&#39;#id2&#39;).fadeTo(10000.5); $(&#39;#id3&#39;).fadeTo(10000); }); }); </script></body></html>
    淡入淡出
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title> <style> #flipshow#content#fliphide#toggle{ padding: 5px; text-align: center; background-color: blueviolet; border:solid 1px red; } #content{ padding: 50px; display: none; } </style></head><body> <div id=&#39;flipshow&#39;>泛起</div> <div id=&#39;fliphide&#39;>隐藏</div> <div id=&#39;toggle&#39;>toggle</div> <div id=&#39;content&#39;>helloworld</div> <script src=&#39;../../jquery-1.12.4.js&#39;></script> <script> $(document).ready(function(){ $(&#39;#flipshow&#39;).click(function(){ $(&#39;#content&#39;).slideDown(1000); }); $(&#39;#fliphide&#39;).click(function(){ $(&#39;#content&#39;).slideUp(1000); }); $(&#39;#toggle&#39;).click(function(){ $(&#39;#content&#39;).slideToggle(1000); }) }); </script></body></html>
    滑动
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title></head><body> <!--1 隐藏与显示--> <!--2 淡入淡出--> <!--3 滑动--> <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数要领或者所能做的一件事--> <p>hello</p> <button id=&#39;hide&#39;>隐藏</button> <button id=&#39;show&#39;>显示</button> <button id=&#39;toggle&#39;>隐藏/显示</button> <script src=&#39;../../jquery-1.12.4.js&#39;></script> <script> $(document).ready(function(){ $(&#39;#hide&#39;).click(function(){ $(&#39;p&#39;).hide(1000); }); $(&#39;#show&#39;).click(function(){ $(&#39;p&#39;).show(1000); }); //用于切换被选元素的 hide() 与 show() 要领。 $(&#39;#toggle&#39;).click(function(){ $(&#39;p&#39;).toggle(2000); }); }); </script></body></html>
    隐藏与显示
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title></head><body><div class=&#39;outer&#39;> <div class=&#39;section&#39;> <div class=&#39;icons&#39; style=&#39;display: inline-block&#39;> <a onclick=&#39;Add(this);&#39;><button>+</button></a> </div> <div class=&#39;inputs&#39; style=&#39;display: inline-block&#39;> <input type=&#39;checkbox&#39;> <input type=&#39;text&#39; value=&#39;IP&#39;> </div> </div> </div> <script src=&#39;../../jquery-1.12.4.js&#39;></script> <script> function Add(self) { $(self).parentsUntil(&#39;outer&#39;).clone().find(&#39;a&#39;).html(&#39;<button>-</button>&#39;).attr(&#39;onclick&#39;&#39;Remove(this);&#39;).end().eq(1).appendTo(&#39;.outer&#39;); } function Remove(self) { $(self).parentsUntil(&#39;outer&#39;).eq(1).remove(); } </script></body></html>
    添加与删除标签
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta http-equiv=&#39;Content-Type&#39; content=&#39;text/html; charset=UTF-8&#39;> <meta name=&#39;viewport&#39; content=&#39;width=device-width&#39;> <meta http-equiv=&#39;X-UA-Compatible&#39; content=&#39;IE=8&#39;> <title>购物商城</title> <style> *{ margin: 0; padding: 0; } .outer{ position:relative; width:350px; height:350px; border:1px solid black; } .outer .small-box{ position: relative; z-index: 1; } .outer .small-box .mark{ position: absolute; display: block; width: 350px; height: 350px; background-color: #fff; filter: alpha(opacity=0); opacity: 0; z-index: 10; } .outer .small-box .float-box{ display: none; width: 175px; height: 175px; position: absolute; background: #DAEEFC; filter: alpha(opacity=40); opacity: 0.4; } .outer .big-box{ position: absolute; top: 0; left: 351px; width: 350px; height: 350px; overflow: hidden; border: 1px solid transparent; z-index: 1; } .outer .big-box img{ position: absolute; z-index: 5 } </style></head><body> <div class=&#39;outer&#39;> <div class=&#39;small-box&#39;> <div class=&#39;mark&#39;></div> <div class=&#39;float-box&#39; ></div> <img width=&#39;350&#39; height=&#39;350&#39; src=http:\&#39;../../css/1.jpg/&#39;> </div> <div class=&#39;big-box&#39;> <img width=&#39;900px&#39; height=&#39;900px&#39; src=http:\&#39;../../css/1.jpg/&#39; > </div> </div><script src=&#39;../../jquery-1.12.4.js&#39;></script><script> $(function(){ $(&#39;.mark&#39;).mounk" target="_blank">seover(function () { $(&#39;.float-box&#39;).css(&#39;display&#39;&#39;block&#39;); $(&#39;.big-box&#39;).css(&#39;display&#39;&#39;block&#39;); }); $(&#39;.mark&#39;).mounk" target="_blank">seout(function () { $(&#39;.float-box&#39;).css(&#39;display&#39;&#39;none&#39;); $(&#39;.big-box&#39;).css(&#39;display&#39;&#39;none&#39;); }); $(&#39;.mark&#39;).mousemove(function (e) { var _event = e || window.event; //兼容多个浏览器的event参数模式 var float_box_width = $(&#39;.float-box&#39;)[0].offsetWidth; var float_box_height = $(&#39;.float-box&#39;)[0].offsetHeight;//175175 var float_box_width_half = float_box_width / 2; var float_box_height_half = float_box_height/ 2;//87.587.5 var small_box_width = $(&#39;.outer&#39;)[0].offsetWidth; var small_box_height = $(&#39;.outer&#39;)[0].offsetHeight;//360360 var mouse_left = _event.clientX - float_box_width_half; var mouse_top = _event.clientY - float_box_height_half; if (mouse_left < 0) { mouse_left = 0; } else if (mouse_left > small_box_width - float_box_width) { mouse_left = small_box_width - float_box_width; } if (mouse_top < 0) { mouse_top = 0; } else if (mouse_top > small_box_height - float_box_height) { mouse_top = small_box_height - float_box_height; } $(&#39;.float-box&#39;).css(&#39;left&#39;mouse_left + &#39;px&#39;); $(&#39;.float-box&#39;).css(&#39;top&#39;mouse_top + &#39;px&#39;); var percentX = ($(&#39;.big-box img&#39;)[0].offsetWidth - $(&#39;.big-box&#39;)[0].offsetWidth) / (small_box_width - float_box_width); var percentY = ($(&#39;.big-box img&#39;)[0].offsetHeight - $(&#39;.big-box&#39;)[0].offsetHeight) / (small_box_height - float_box_height); console.log($(&#39;.big-box img&#39;)[0].offsetWidth$(&#39;.big-box&#39;)[0].offsetWidthsmall_box_widthfloat_box_width) console.log(percentXpercentY) $(&#39;.big-box img&#39;).css(&#39;left&#39;-percentX * mouse_left + &#39;px&#39;); $(&#39;.big-box img&#39;).css(&#39;top&#39;-percentY * mouse_top + &#39;px&#39;) }) })</script></body></html>
    商城商品放大镜
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <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=&#39;pg-header&#39;> <div class=&#39;header-nav&#39;> <div class=&#39;container narrow bg&#39;> <div class=&#39;nav-allgoods left&#39;> <a id=&#39;all_menu_catagory&#39; href=&#39;#&#39; class=&#39;menuEvent&#39;> <b class=&#39;catName&#39;>全部商品分类</b>> <span class=&#39;arrow&#39; style=&#39;display: inline-block;vertical-align: top;&#39;></span> </a> </div> </div> </div> <div class=&#39;header-menu&#39;> <div class=&#39;container narrow hide&#39;> <div id=&#39;nav_all_menu&#39; class=&#39;menu-catagory&#39;> <div class=&#39;catagory&#39; float-content=&#39;one&#39;> <div class=&#39;title&#39;>家电</div> <div class=&#39;body&#39;> <a href=&#39;#&#39;>空调</a> </div> </div> <div class=&#39;catagory&#39; float-content=&#39;two&#39;> <div class=&#39;title&#39;>床上用品</div> <div class=&#39;body&#39;> <a href=&#39;http://www.baidu.com&#39;>床单</a> </div> </div> <div class=&#39;catagory&#39; float-content=&#39;three&#39;> <div class=&#39;title&#39;>水果</div> <div class=&#39;body&#39;> <a href=&#39;#&#39;>橘子</a> </div> </div> </div> <div id=&#39;nav_all_content&#39; class=&#39;menu-content&#39;> <div class=&#39;item hide&#39; float-id=&#39;one&#39;> <dl> <dt><a href=&#39;#&#39; class=&#39;red&#39;>厨房用品</a></dt> <dd> <span>| <a href=&#39;#&#39; target=&#39;_blank&#39; title=&#39;勺子&#39;>勺子</a> </span> </dd> </dl> <dl> <dt><a href=&#39;#&#39; class=&#39;red&#39;>厨房用品</a></dt> <dd> <span>| <a href=&#39;#&#39; target=&#39;_blank&#39; title=&#39;菜刀&#39;>菜刀</a> </span> </dd> </dl> <dl> <dt><a href=&#39;#&#39; class=&#39;red&#39;>厨房用品</a></dt> <dd> <span>| <a href=&#39;#&#39;>菜板</a> </span> </dd> </dl> <dl> <dt><a href=&#39;#&#39; class=&#39;red&#39;>厨房用品</a></dt> <dd> <span>| <a href=&#39;#&#39; target=&#39;_blank&#39; title=&#39;碗&#39;>碗</a> </span> </dd> </dl> </div> <div class=&#39;item hide&#39; float-id=&#39;two&#39;> <dl> <dt><a href=&#39;#&#39; class=&#39;red&#39;>床上用品</a></dt> <dd> <span>| <a href=&#39;#&#39; target=&#39;_blank&#39; title=&#39;&#39;>枕头</a> </span> </dd> </dl> <dl> <dt><a href=&#39;#&#39; class=&#39;red&#39;>床上用品</a></dt> <dd> <span>| <a href=&#39;#&#39; target=&#39;_blank&#39; title=&#39;角阀&#39;>夏凉被</a> </span> </dd> </dl> <dl> <dt><a href=&#39;#&#39; class=&#39;red&#39;>床上用品</a></dt> <dd> <span>| <a href=&#39;#&#39; target=&#39;_blank&#39; title=&#39;角阀&#39;>嘿嘿嘿</a> </span> </dd> </dl> </div> <div class=&#39;item hide&#39; float-id=&#39;three&#39;> <dl> <dt><a href=&#39;#&#39; class=&#39;red&#39;>厨房用品</a></dt> <dd> <span>| <a href=&#39;#&#39; target=&#39;_blank&#39; title=&#39;角阀&#39;>微波炉</a> </span> </dd> </dl> <dl> <dt><a href=&#39;#&#39; class=&#39;red&#39;>厨房用品</a></dt> <dd> <span>| <a href=&#39;http://www.meilele.com/category-jiaofa&#39; target=&#39;_blank&#39; title=&#39;角阀&#39;>金菜刀</a> </span> </dd> </dl> </div> </div> </div> </div></div><script src=&#39;../../jquery-1.12.4.js&#39;></script><script> $(function () { Change(&#39;#all_menu_catagory&#39;&#39;#nav_all_menu&#39;&#39;#nav_all_content&#39;) }); function Change(menuFmenuSmenuT) { $(menuF).bind({ &#39;mouseover&#39;:function () { $(menuS).parent().removeClass(&#39;hide&#39;); }&#39;mouseout&#39;:function () { $(menuS).parent().addClass(&#39;hide&#39;); } }); $(menuS).children().bind({ &#39;mouseover&#39;:function () { $(menuS).parent().removeClass(&#39;hide&#39;); var $item = $(menuT).find(&#39;[float-id=&#39;&#39; + $(this).attr(&#39;float-content&#39;) + &#39;&#39;]&#39;); $item.removeClass(&#39;hide&#39;).siblings().addClass(&#39;hide&#39;); } &#39;mouseout&#39;:function () { $(menuS).parent().addClass(&#39;hide&#39;); $(menuT).parent().addClass(&#39;hide&#39;); } }); $(menuT).children().bind({ &#39;mouseover&#39;:function () { $(menuS).parent().removeClass(&#39;hide&#39;); $(this).removeClass(&#39;hide&#39;); } &#39;mouseout&#39;:function () { $(menuS).parent().addClass(&#39;hide&#39;); $(this).addClass(&#39;hide&#39;); } }) }</script></body></html>
    商城菜单
    <!DOCTYPE html><html><head lang=&#39;en&#39;> <meta charset=&#39;UTF-8&#39;> <title></title></head><body> <div style=&#39;border: 1px solid #ddd;width: 600px;position: absolute;&#39;> <div id=&#39;title&#39; style=&#39;background-color: black;height: 40px;color: white;&#39;> <strong>标题</strong> </div> <div style=&#39;height: 300px;&#39;> 内容 </div> </div><script type=&#39;text/javascript&#39; src=&#39;../../jquery-1.12.4.js&#39;></script><script> $(function () { $(&#39;#title&#39;).mouseover(function () { $(this).css(&#39;cursor&#39;&#39;move&#39;); }).mousedown(function (e) { var _event = e || widows.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(&#39;mousemove&#39;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(&#39;left&#39;x+&#39;px&#39;); $(this).parent().css(&#39;top&#39;y+&#39;px&#39;); }) }).mouseup(function () { $(this).unbind(&#39;mousemove&#39;); }); })</script></body></html>
    拖动面板
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title> <style> .shade{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(000.6) ; z-index: 20; } .modal{ position: fixed; left: 50%; top: 50%; height: 300px; width: 400px; margin-top: -150px; margin-left: -200px; z-index: 30; border: 1px solid #ddd; background-color: white; } .hide{ display: none; } .modal form { position: fixed; left: 50%; top: 50%; height: 200px; width: 229px; border: 1px; margin-left: -115px; margin-top: -100px; } .modal form p { float: right; margin-top: 12px; } .modal form span { float: right; display: inline-block; height: 18px; width: 170px; background-color: #FFEBEB; text-align: center; border: 1px solid #ffbdbe; color: #e4393c; font-size: 14px; visibility: hidden; } .modal form [type=&#39;button&#39;] { position: absolute; bottom: -30px; left: 115px; } .modal form [value=&#39;提交&#39;]{ left: 50px; } </style></head><body> <div style=&#39;width: 300px; margin: 0 auto&#39;> <input type=&#39;button&#39; value=&#39;添加主机&#39; onclick=&#39;return Add();&#39; /> <table style=&#39;border: 2px solid #F5F5F5; width: 300px;&#39;> <thead> <tr> <th >主机名</th> <th >IP</th> <th >端口</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td target=&#39;host&#39;>c1.com</td> <td target=&#39;ip&#39;>1.1.1.1</td> <td target=&#39;port&#39;>8888</td> <td onclick=&#39;Edit(this);&#39;>Edit</td> </tr> <tr> <td target=&#39;host&#39;>c2.com</td> <td target=&#39;ip&#39;>1.1.1.1</td> <td target=&#39;port&#39;>8888</td> <td onclick=&#39;Edit(this);&#39;>Edit</td> </tr> <tr> <td target=&#39;host&#39;>c3.com</td> <td target=&#39;ip&#39;>1.1.1.1</td> <td target=&#39;port&#39;>8888</td> <td onclick=&#39;Edit(this);&#39;>Edit</td> </tr> <tr> <td target=&#39;host&#39;>.com</td> <td target=&#39;ip&#39;>1.1.1.1</td> <td target=&#39;port&#39;>8888</td> <td onclick=&#39;Edit(this);&#39;>Edit</td> </tr> </tbody> </table> </div> <div class=&#39;shade hide&#39;></div> <div class=&#39;modal hide&#39;> <form action=&#39;&#39; method=&#39;get&#39;> <p>主机名:<input type=&#39;text&#39; id=&#39;host&#39; name=&#39;host&#39;><br><span></span></p> <p>IP地址:<input type=&#39;text&#39; id=&#39;ip&#39; name=&#39;ip&#39;><br><span></span></p> <p>端口号:<input type=&#39;text&#39; id=&#39;port&#39; name=&#39;port&#39;><br><span></span><br></p> <input type=&#39;button&#39; value=&#39;提交&#39; onclick=&#39;return SubmitForm();&#39;> <input type=&#39;button&#39; value=&#39;取消&#39; onclick=&#39;HideModal();&#39;> </form> </div> <script src=&#39;../../jquery-1.12.4.js&#39;></script> <script> $(function () { $(&#39;tr:even&#39;).css(&#39;background-color&#39;&#39;#f5f5f5&#39;); }); function Edit(ths) { $(&#39;.shade.modal&#39;).removeClass(&#39;hide&#39;); prevList = $(ths).prevAll(); prevList.each(function () { var text = $(this).text(); var target = $(this).attr(&#39;target&#39;); $(&#39;#&#39;+target).val(text); }); } function HideModal() { $(&#39;.shade.modal&#39;).addClass(&#39;hide&#39;); $(&#39;.modal&#39;).find(&#39;input[type=&#39;text&#39;]&#39;).val(&#39;&#39;); Addd = false; } function SubmitForm() { var flag = Detection(); try { if (Addd && flag){ $(&#39;tbody&#39;).append($(&#39;tr&#39;).last().clone()); $(&#39;.modal&#39;).find(&#39;input[type=&#39;text&#39;]&#39;).each(function () { var value = $(this).val(); var name = $(this).attr(&#39;name&#39;); ($(&#39;tr&#39;).last().children()).each(function () { if ($(this).attr(&#39;target&#39;) == name){ $(this).text(value); return } } )}); Addd = false; HideModal(); return false; } }catch (e){} if (flag){ $(&#39;.modal&#39;).find(&#39;input[type=&#39;text&#39;]&#39;).each(function () { var value = $(this).val(); var name = $(this).attr(&#39;name&#39;); $(prevList).each(function () { if ($(this).attr(&#39;target&#39;) == name){ $(this).text(value); return } } )}); $(&#39;.modal.shade&#39;).addClass(&#39;hide&#39;); HideModal(); } return flag; } function Detection() { var flag = true; $(&#39;.modal&#39;).find(&#39;input[type=&#39;text&#39;]&#39;).each(function () { var value = $(this).val(); if (value.length == 0){ $(this).next().next().css(&#39;visibility&#39;&#39;visible&#39;).text(&#39;亲,不能为空&#39;); flag = false; return false; }else { $(this).next().next().css(&#39;visibility&#39;&#39;hidden&#39;).text(&#39;&#39;); } if ($(this).attr(&#39;name&#39;) == &#39;host&#39;){ var r = /(.com)$/; if (r.test(value) == false){ $(this).next().next().css(&#39;visibility&#39;&#39;visible&#39;).text(&#39;主机名必须以.com末了&#39;); flag = false; return false; } }else if ($(this).attr(&#39;name&#39;) == &#39;ip&#39;){ var r2 = /^(([0-2]?[0-9][0-9]?).){3}([0-2]?[0-9][0-9]?)$/; if (r2.test(value) == false){ $(this).next().next().css(&#39;visibility&#39;&#39;visible&#39;).text(&#39;ip 地址名堂有误&#39;); flag = false; return false; } }else if ($(this).attr(&#39;name&#39;) == &#39;port&#39;){ var r3 = /^([0-9]{15})$/; if ((r3.test(value) == false) || (value > 65535)){ $(this).next().next().css(&#39;visibility&#39;&#39;visible&#39;).text(&#39;端口必须为0-65535&#39;); flag = false; return false; } }else { $(this).next().next().css(&#39;visibility&#39;&#39;hidden&#39;).text(&#39;&#39;); } }); return flag; } function Add() { Addd = true; $(&#39;.shade.modal&#39;).removeClass(&#39;hide&#39;); } </script></body></html>
    模态对话框
    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .out{ width: 730px; height: 454px; margin: 50px auto; position: relative; } .out .img li{ position: absolute; left: 0; top: 0; } .out .num{ position: absolute; left:0; bottom: 20px; text-align: center; font-size: 0; width: 100%; } .out .btn{ position: absolute; top:50%; margin-top: -30px; width: 30px; height: 60px; background-color: aliceblue; color: black; text-align: center; line-height: 60px; font-size: 40px; display: none; } .out .num li{ width: 20px; height: 20px; background-color: black; color: #fff; text-align: center; line-height: 20px; border-radius: 60%; display: inline; font-size: 18px; margin: 0 10px; cursor: pointer; } .out .num li.active{ background-color: red; } .out .left{ left: 0; } .out .right{ right: 0; } .out:hover .btn{ display: block; color: white; font-weight: 900; background-color: black; opacity: 0.8; cursor: pointer; } .out img { height: 100%; width: 100%; } </style></head><body> <div class=&#39;out&#39;> <ul class=&#39;img&#39;> <li><a href=&#39;#&#39;><img src=http://www.it165.net/pro/html/201607/&#39;images/1.jpg&#39; alt=&#39;&#39;></a></li> <li><a href=&#39;#&#39;><img src=http://www.it165.net/pro/html/201607/&#39;images/2.jpg&#39; alt=&#39;&#39;></a></li> <li><a href=&#39;#&#39;><img src=http://www.it165.net/pro/html/201607/&#39;images/3.jpg&#39; alt=&#39;&#39;></a></li> <li><a href=&#39;#&#39;><img src=http://www.it165.net/pro/html/201607/&#39;images/4.jpg&#39; alt=&#39;&#39;></a></li> <li><a href=&#39;#&#39;><img src=http://www.it165.net/pro/html/201607/&#39;images/5.jpg&#39; alt=&#39;&#39;></a></li> </ul> <ul class=&#39;num&#39;> <!--<li class=&#39;active&#39;>1</li>--> <!--<li>2</li>--> <!--<li>3</li>--> <!--<li>4</li>--> <!--<li>5</li>--> </ul> <div class=&#39;left btn&#39;><</div> <div class=&#39;right btn&#39;>></div> </div> <script src=&#39;../../jquery-1.12.4.js&#39;></script> <script> $(function(){ var size=$(&#39;.img li&#39;).size(); for (var i= 1;i<=size;i++){ var li=&#39;<li>&#39;+i+&#39;</li>&#39;; $(&#39;.num&#39;).append(li); } $(&#39;.num li&#39;).eq(0).addClass(&#39;active&#39;); $(&#39;.num li&#39;).mouseover(function(){ $(this).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;); var index=$(this).index(); i=index; $(&#39;.img li&#39;).eq(index).fadeIn(1000).siblings().fadeOut(1000); }); i=0; var t=setInterval(move1500); function move(){ i++; if(i==size){ i=0; } $(&#39;.num li&#39;).eq(i).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;); $(&#39;.img li&#39;).eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } function moveL(){ i--; if(i==-1){ i=size-1; } $(&#39;.num li&#39;).eq(i).addClass(&#39;active&#39;).siblings().removeClass(&#39;

最近更新

精彩推荐

阅读排行

本站所有站内信息仅供娱乐参考,不作任何商业用途,不以营利为目的,专注分享快乐,欢迎收藏本站!
所有信息均来自:百度一下 (威尼斯人官网)