内部插入操作,如果元素已淡入

作者: 前端  发布:2019-11-03

CSS“隐藏”元素的几种方法的对比

2016/02/16 · CSS · 隐藏

原文出处: 狼狼的蓝胖子(@狼狼的蓝胖子)   

一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none。这是最为人所熟知也是最常用的方法。我相信还有不少人想到使用设置visibility为hidden来隐藏元素,这种方式也是常用的方法,而且也有很多人知道两者的不同。除了这两种方法,本文还总结了一些比较不常用的方法,比较了这几种“隐藏”元素方法的区别和优缺点,欢迎大家交流!!

基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器。

jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法,jquery-2.jquery

资料来源

w3cschool

几种方法的简单介绍

首先我们分别来说说到底有哪几种隐藏元素的方法,有一些方法是众所周知的,还有一些算是一种技巧。

思想:弹出框元素插入body节点中,并在页面垂直居中显示(fixed定位),触发确定和关闭事件绑定。

一、jQuery操作DOM

内部插入操作:

append(content|fn):向每个匹配的元素内部追加内容。

prepend(content):向每个匹配的元素内部前置内容。

外部插入操作:

after(content|fn):在每个匹配的元素之后插入内容。

before(content|fn):在每个匹配的元素之前插入内容。

包裹操作:

wrap(html|element|fn):把所有匹配的元素用其他元素的结构化标记包裹起来。

unwrap():这个方法将移出元素的父元素。

wrapAll(html|ele):将所有匹配的元素用单个元素包裹起来。

wrapInner(htm|element|fnl):将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。

替换操作:

replaceWith(content|fn):将所有匹配的元素替换成指定的HTML或DOM元素。

replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素。

删除操作:

empty():删除匹配的元素集合中所有的子节点。

remove([expr]):从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

detach([expr]):从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

复制操作:

clone(Even]):克隆匹配的DOM元素并且选中这些克隆的副本。

even:一个布尔值(true 或者 false)指示事件处理函数是否会被复制。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .outer_one{
                width: 80%;
                height: 80px;
                text-align: center;
                background: #ff0000;
            }
            .outer_one_child{
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background: #00cd00;
            }
            .outer_four{
                background: purple;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="outer_one">
                第一个外边框
            </div>
            <div class="outer_one_child">
                第一个外边框的孩子——布局与第一个外边框同级
            </div>
            <div class="outer_two">
                第二个外边框
            </div>
            <div class="outer_three">
                第三个外边框
            </div>
            <div class="outer_four">
                第四个外边框
            </div>

            <div class="outer_five">
                <p>第五个外边框</p>
                <p>第五个外边框</p>
                <a>第五个外边框</a>
            </div>
            <div class="outer_six">
                <p>第六个外边框</p>
                <a>第六个外边框</a>
            </div>
            <div class="outer_seven">
                <p>第七个外边框</p>
                <p>第七个外边框</p>
                <a>第七个外边框a标签<p>我是孙子p标签</p></a>
                <p>第七个外边框</p>
            </div>
            <div class="outer_eight">
                <p>第八个外边框</p>
                <a>第八个外边框&times;</a>
                第八个外边框
            </div>
            <div class="outer_nine">
                <p>第九个外边框</p> 
                <p>第九个外边框</p> 
                <p>第九个外边框</p> 
                <p>第九个外边框</p> 
            </div>
            <div class="outer_ten">
                <p>第十个外边框</p> 
                <p>第十个外边框</p> 
                <p>第十个外边框</p> 
                <a>第十个外边框</a> 
            </div>
            <div class="outer_11">
                <p>第11个外边框</p> 
                <p>第11个外边框</p> 
                <p>第11个外边框</p> 
                <a>第11个外边框</a> 
            </div>
            <div class="outer_12">
                <p>第12个外边框</p> 
                <p>第12个外边框</p> 
            </div>
            <div class="outer_13">
                <p>第13个外边框</p> 
                <p>第13个外边框</p> 
            </div>
            <div class="outer_14">
                第14个外边框
            </div>
            <div class="outer_15">
                第15个外边框
            </div>
            <div class="outer_16">
                第16个外边框
            </div>
            <div class="outer_17">
                第17个外边框
            </div>

        </div>
    </body>
    <script src="http://www.txnma.com/uploads/allimg/191103/2306322R3-0.jpg"></script>
    <script type="text/javascript">

        //内部插入(生成子元素)
        //append元素内部末尾追加内容(支持回调函数)
        $('.outer_one').append($('.outer_one_child'));//将现有标签追加到元素内
        $('.outer_two').append('<p>');//向元素末尾追加新标签
        //prepend元素内部开头追加内容
        $('.outer_three').prepend('我是prepend追加的内容');

        //外部插入(生成兄弟元素)
        $('.outer_four').before('<p>我是before刚插入的标签</p>')
        $('.outer_four').after('<p>我是after刚插入的标签</p>')
        //包裹操作wrap(添加父元素) unwrap(移除父元素)
        $('.outer_five p').wrap('<a>');//所有包含的元素外围包裹p标签
        $('.outer_six p').unwrap('<p>');//去除父元素的包裹
        //wrapAll将所有匹配的元素放到一起用一个规定的父元素包裹
        $('.outer_seven p').wrapAll('<a>');
        //wrapInner将子元素包裹
        $('.outer_eight').wrapInner('<h3>');

        //替换操作
        //replaceWith将匹配的元素替换为规定的元素
        $('.outer_nine p').replaceWith('<a>');
        //replaceAll将匹配的元素替换为规定的元素
        $('<p>').replaceAll('.outer_ten a');
        //删除操作
        $('.outer_11').empty();
        // remove和detach的区别:
        //remove() dom中删除节点保留到jquery,元素保留,事件删除
        //detach() dom中删除节点保留到jquery,元素保留,事件保留
        $('.outer_12').click(function(){
            $(this).css('background','green');
        }).remove().appendTo('.outer_14');
        $('.outer_13').click(function(){
            $(this).css('background','red');
        }).detach().appendTo('.outer_15');            
        //复制操作clone(even)方法的参数取值boolean如果true保留复制元素的绑定事件否则相反
        $('.outer_16').clone().appendTo('.outer_17')
    </script>
</html>

1.元素的显示与隐藏

display:none

设置元素的display为none是最常用的隐藏元素的方法。

CSS

.hide { display:none; }

1
2
3
.hide {
     display:none;
}

将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。

注意ie6包含两个问题:
一、select、flash不能遮罩,采用iframe。
二、fixed属性采用滚动时重新计算高度或在样式中采用表达式计算expression。

二、jQuery动画

show([speed, [easing], [callback]]):显示隐藏的匹配元素。

hide([speed, [easing], [callback]]):隐藏显示的元素。

toggle([speed, [easing], [callback]]):如果元素是可见的,切换为隐藏的,如果元素是隐藏的,切换为可见的。

speed:三种预定速度的字符串(slow、normal、fast)或者动画时长的毫秒数值。

easing:指定切换效果,默认是swing,可用linear。

callback:在动画完成时执行的函数,每个元素执行一次。

运动过程中:改变width、height、margin、padding、opacity属性值,添加overflow:hidden属性。 

slideDown([speed, [easing], [callback]]):通过高度变化(向下增大)来动态的显示所有匹配的元素,显示完成后可选的触发一个回调函数。

slideUp([speed, [easing], [callback]]):通过高度变化(向上减小)来动态的隐藏所有匹配的元素,隐藏完成后可选的触发一个回调函数。

slideToggle([speed, [easing], [callback]]):通过高度变化来切换所有匹配元素的可见性,切换完成后可选的触发一个回调函数。

speed:三种预定速度的字符串(slow、normal、fast)或者动画时长的毫秒数值。

easing:指定切换效果,默认是swing,可用linear。

callback:在动画完成时执行的函数,每个元素执行一次。

运动过程中:改变height、margin-top、margin-bottom、padding-top、padding-bottom属性值,添加overflow:hidden属性。 

fadeIn([speed, [easing], [callback]]):通过不透明度的变化来实现所有匹配元素的淡入效果,动画完成后可选的触发一个回调函数。

fadeOut([speed, [easing], [callback]]):通过不透明度的变化来实现所有匹配元素的淡出效果,动画完成后可选的触发一个回调函数。

fadeTo([speed, opacity, [easing], [callback]]):把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,动画完成后可选的触发一个回调函数。opacity:一个0到1之间表示透明度的数字。

fadeToggle([speed, [easing], [callback]]):通过不透明度的变化来开关所有匹配元素的淡入淡出效果,动画完成后可选的触发一个回调函数。

speed:三种预定速度的字符串(slow、normal、fast)或者动画时长的毫秒数值。

easing:指定切换效果,默认是swing,可用linear。

callback:在动画完成时执行的函数,每个元素执行一次。

注:fadeIn、fadeout、fadeToggle,运动过程中修改opacity属性值,最终只修改display属性值。而fadeTo只修改opacity属性值。 

animate(params, [speed], [easing], [fn]):用于创建自定义动画的函数。

params:一组包含作为动画属性和终值的样式属性和及其值的集合。

speed:三种预定速度的字符串(slow、normal、fast)或者动画时长的毫秒数值。

easing:指定切换效果,默认是swing,可用linear。

fn:在动画完成时执行的函数,每个元素执行一次。 

stop(clearQueue, [jumpToEnd]):停止所有在指定元素上正在运行的动画。如果clearQueue没有设置为true,并且队列中有等待执行的动画,他们将马上执行。

clearQueue:如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。调用stop()的时候,队列中的下一个动画开始。如果clearQueue参数为true,那么在队列中的动画其余被删除并永远不会被执行。

jumpToEnd:当前动画将停止,但该元素上的CSS属性会被立刻修改成动画的目标值。 

delay(duration [,queueName]):设置一个延时来推迟执行队列中之后的项目。

duration:延迟时间,单位:毫秒。

queueName:队列名次,默认是Fx,动画队列。 

jQuery.fx.off:关闭页面上所有的动画。把这个属性设置为true可以立即关闭所有动画。把这个属性设置为false,可以重新开启所有动画。

jQuery.fx.interval:设置动画的显示帧速。 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery—dom操作和ajax方法</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 90%;
            height: 100px;
            margin: 20px;
            padding: 10px;
            border: 10px solid #ff0000;
            background: #888888;
        }
        input[type=button]{
            border: 1px solid #555555;
            padding: 10px 20px;
            background:'#f3f3f3';
            margin:5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input name="show" type="button" value="show显示" />
        <input name="hide" type="button" value="hide隐藏" />
        <input name="toggle" type="button" value="toggle动画" />
        <hr/>
        <input name="slideDown" type="button" value="slideDown动画" />
        <input name="slideUp" type="button" value="slideUp动画" />
        <input name="slideToggle" type="button" value="slideToggle动画" />
        <hr/>
        <input name="fadeIn" type="button" value="fadeIn动画" />
        <input name="fadeOut" type="button" value="fadeOut动画" />
        <input name="fadeToggle" type="button" value="fadeToggle动画" />
        <input name="fadeTo" type="button" value="fadeTo动画" />
        <hr/>
        <input name="animate" type="button" value="animate自定义动画" />
        <input name="delay" type="button" value="delay动画延迟" />
        <input name="stop" type="button" value="stop停止动画" />
        <div class="box">

        </div>
    </div>
</body>
<script src="http://www.txnma.com/uploads/allimg/191103/2306322R3-0.jpg"></script>
<script type="text/javascript">

    // $.fx.off = true; // 关闭页面上所有的动画
    // $.fx.interval = 500; //设置动画显示帧速 500ms执行一次
    // toggle和带有toggle的jQuery方法显示动画为隐藏、隐藏动画为显示可重复
    $('input[name=show]').click(function () {
        $('.box').show('slow','linear',function () {
            console.log("显示动画");
        });
    });

    $('input[name=hide]').click(function () {
        $('.box').hide('quick');
    });

    $('input[name=toggle]').click(function () {
        $('.box').toggle(5000);
    });
    // 操作高度控制元素的显示隐藏
    $('input[name=slideDown]').click(function () {
        $('.box').slideDown(5000, 'linear', function () {
            console.log('OVER');
        });
    });

    $('input[name=slideUp]').click(function () {
        $('.box').slideUp(1000);
    });

    $('input[name=slideToggle]').click(function () {
        $('.box').slideToggle(1000);
    });

    // 操作opacity属性
    $('input[name=fadeIn]').click(function () {
        $('.box').fadeIn(1000);
    });

    $('input[name=fadeOut]').click(function () {
        $('.box').fadeOut(1000);
    });    

    $('input[name=fadeToggle]').click(function () {
        $('.box').fadeToggle(1000);
    });

    $('input[name=fadeTo]').click(function () {    
        alert("fadeIn、fadeout、fadeToggle,运动过程中修改opacity属性值,
        最终只修改display属性值。而fadeTo只修改opacity属性值
        ,故针对此属性后其他动画无法显示。 ")
        $('.box').fadeTo(1000, 0);
    });
    // 自定义动画
    $('input[name=animate]').click(function () {    
        $('.box').animate({
            width: 200,
            height: 200,
            opacity: 0.4,
            border:0
        }, 6000, 'linear', function () {
            console.log('自定义动画完成');
        });
    });
    // 动画延迟
    $('input[name=delay]').click(function () {    
        $('.box').delay(2000).animate({
            width: 200,
            height: 200,
            opacity: 0.4,
            border:0
        }, 6000, 'linear', function () {
            console.log('自定义动画完成');
        });
    });
    $('input[name=stop]').click(function () {
        $('.box').stop(false, true);
    });

</script>
</html>

1.1显示元素show()

visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法,和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。

.hidden{ visibility:hidden }

1
2
3
.hidden{
     visibility:hidden
}

visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景

源码分析:
1、creatHtml:采用doT.js初始化元素添加到body中;
2、show:设置宽度,高度,居中显示;
3、events:为关闭和确定绑定事件;
4、removeCallback:移出元素节点,如有执行回调方法;
5、ie6fixed:ie6中fixed的兼容性处理。

三、jQuery循环遍历及data()方法

对象访问:

each(callback):以每一个匹配的元素作为上下文来执行一个函数。回调函数有两个参数,第一个参数代表索引,第二个参数代表当前遍历到的DOM对象。return true则跳至下一个循环(就像在普通循环中使用continue),return false则终止循环(就像在普通循环中使用break)。

get([index]):取得其中一个匹配的元素。 num表示取得第几个匹配的元素。与$(this)[0]等价。

index([selector|element]):搜索匹配的元素,并返回相应元素的索引值,从0开始计数。如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。如果不传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

数据缓存:

data([key],[value]) :在元素上存放数据,返回jQuery对象。

removeData([name|list]):在元素上移除存放的数据。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery循环遍历</title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .list{
            list-style: none;
            line-height: 35px;
            text-indent: 24px;
        }
        .list li{
            border-bottom: 1px dashed #f3f3f3;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <ul class="list" data-name='迷城'>
                <li>标签内容1</li>
                <li>标签内容2</li>
                <li>标签内容3</li>
                <li>标签内容4</li>
                <li>标签内容5</li>
            </ul>
        </div>
        <img class="testimg" src="kong" data-src="测试" />
    </body>
    <script src="http://www.txnma.com/uploads/allimg/191103/2306322R3-0.jpg"></script>
    <script type="text/javascript">
        /*参数回调函数包含两个参数,一索引值,二对应项的dom元素*/
        $('.list li').each(function (index,value) {
            // get方法对应索引位置的元素
            $(value).hover(function(){
                this.style.background="#555555";
                console.log(index,$('.list li').get(index));
                console.log($(this).index());
            },function () {
                this.style.background="#ffffff";
            });
        });

        // data()添加的数据属性在dom元素不显示
        /*data()在元素直接定义data需要加data-前缀
        后续修改data的值不会dom元素身上呈现
        */
        $('.list').data('name', '烟雾');
        console.log($('.list').data('name'));
        $('.list').removeData('name')
        /*removeData()元素身上直接定义的data无法删除,
        可以理解为元素身上添加例如data-name视为初始化data*/
        console.log($('.list').data('name'));
        $('.list').data('age','40');
        $('.list').removeData('age');
        console.log($('.list').data('age'));

        console.log($('.testimg').data('src'));
        $('.testimg').data('src','数据')
        console.log($('.testimg').data('src'));
        /*data()、removeData()方法不能直接通过data-操作data()添加的数据*/
        $('.testimg').data('data-src');
        $('.testimg').attr('src');
        /*data(key, value)中value可以存储任意对象而不限于简单类型。
    为此付出的代价是,dom添加jQuery.expando属性,用jQuery-ID进行唯一标识,
    然后用jQuery.cache做k-v字典,于是dom上只能看到jQuery.expando,
    而实际上data数据都是存在那个字典里的*/
       //具体查看jQuery框架源码
    </script>
</html>

语法

$(selector).show(speed,callback);

显示已经设置隐藏的元素

opacity:0

opacity属性我相信大家都知道表示元素的透明度,而将元素的透明度设置为0后,在我们用户眼中,元素也是隐藏的,这算是一种隐藏元素的方法。

.transparent { opacity:0; }

1
2
3
.transparent {
     opacity:0;
}

这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,但我们都知道,设置透明度为0后,元素只是隐身了,它依旧存在页面中。

参数使用说明:

 四、jQuery.ajax方法

1、load(url, [data], [callback]):载入服务器HTML文件代码并插入至DOM中。默认为GET请求。

1)url不一定是html文件地址,css、js、txt、php等可以。

2)筛选加载进来的HTML文档:Load(url  #content p)。

3)data可以是key/value数据,也可以是字符串类型。如果是键值对对象类型,则为POST请求,如果是字符串,则为GET请求。

4)回调函数三个参数:1:获取的HTML代码,2:请求状态的描述,3:XHR对象。 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq.ajax方法</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <ul class="list">
<!--     
//test.html文件内容    
<ul>
    <li>测试数据1</li>
    <li>测试数据2</li>
    <li>测试数据3</li>
    <li>测试数据4</li>
    <li>测试数据5</li>
</ul> -->
    </ul>
</body>
<script src="http://www.txnma.com/uploads/allimg/191103/2306322R3-0.jpg"></script>
<script type="text/javascript">
    $('.list').load('test.html ul li',function () {
        console.log("加载完成")
    })
</script>
</html>

 

2、jQuery.ajax(url, [settings]):通过HTTP请求加载远程数据,返回其创建的XHR对象。

url:请求地址,settings也有url配置选项,如果同时设置,则以外面的url为基准。如果都不设置,则默认请求的是当前发起请求的页面。

settings配置选项:

dataType:支持的数据类型:xml,html、json、jsonp、script、text。

  • text和xml类型返回的数据不会经过处理。数据仅仅将简单的XHR的responseText和responseXML属性传递给success回调函数。
  • script类型:jquery会先执行服务器端生成的JS代码,然后将脚本作为一个文本数据返回。
  • jsonp类型:会创建一个查询字符串参数callback=?,这个参数会加在请求的URL后面。
  • xml类型:返回XML文档,可用jquery处理。
  • html类型:返回纯文本HTML信息,包含的script标签会在插入DOM时执行。
  • json类型:返回JSON数据。
  • text类型:返回纯文本字符串。 

async:Boolean类型。默认为true(异步)。

contentType:string类型。默认为application/x-www-form-urlencoded,发送信息至服务器时内容编码类型。

context:object类型。这个对象用于设置AJAX相关回调函数的上下文,也就是说,让回调函数内部的this指向这个对象。

timeout:设置请求超时时间(毫秒)。

type:请求方式(GET或POST),默认为GET。

url:默认当前页地址,发送请求的地址。

data:object/string类型。发送到服务器的数据。

jsonp:string类型。在一个jsonp请求中重写回调函数的名字。这个值用来替代”callback=?”中的callback部分。

jsonpCallback:string类型。为jsonp请求指定一个回调函数名。这个值用来取代jQuery自动生成的随机函数名。

statusCode:map类型。一组数值的HTTP代码和函数对象,当响应时调用相应的代码。

回调函数:

beforeSend:在发送请求之前调用,并且传入XHR作为参数。

error:在请求出错时调用。传入XHR对象,描述错误类型的字符串,以及异常对象(如果存在的话)。

dataFilter:在请求成功后调用,传入返回的数据以及dataType参数的值,并且必须返回新的数据给success回调函数

success:当请求成功之后调用,传入返回后的数据,以及包含成功代码的字符串。

complete:当请求完成后调用这个函数,无论成功或失败。传入XHR对象,以及包含成功或错误代码的字符串。

beforeSend:function(xhr, ajax){}

dataFilter:function (data, dataType){}

success:function(data, sInfo, xhr){}

complete:function(xhr, sInfo){}

error:function(xhr, sInfo[, exception]){}

成功执行顺序:beforeSend、dataFilter、success、complete

失败执行顺序:beforeSend、error、complete

ajax普通请求:

图片 1<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq.ajax方法</title> <style type="text/css"> *{ padding: 0; margin: 0; } .container{ border: 1px solid #eeeeee; margin: 100px auto 0; width: 500px; overflow: hidden; } .box{ width: 300px; height: 40px; border: 1px solid #f4f4f4; line-height: 40px; margin: 10px auto; overflow: hidden; } .box label{ width: 60px; text-align: center; display: inline-block; } .box input{ width: 60%; height: 100%; border: none; outline: none; font-size: 18px; } .box input[type=button]{ width: 100%; } </style> </head> <body> <div class="container"> <form action="get"> <div class="box account-box"> <label>账号:</label> <input type="text" name="account" /> </div> <div class="box account-box"> <label>密码:</label> <input type="password" name="password" /> </div> <div class="box account-box"> <input type="button" value="登录" name="commitBtn" /> </div> </form> </div> </body> <script src="; <script type="text/javascript"> $.ajax({ type:'POST',//请求类型post/get url:'ajax.php',//请求路径url dataType:'json',//返回数据类型 asyn:true,//是否为异步true异步/false同步 timeout:2000,//设置请求超长事件(毫秒) beforeSend:function () { console.log("发送前调用的回调函数") }, error:function () { console.log("错误捕获") }, dataFilter:function (data) { return '{}' }, success:function (data) { console.log(data); }, complete:function () { console.log("jq.ajax请求完成都会执行") } }) </script> </html> ajax请求php后台

  

图片 2<?php echo "1111"; php两行代码

 ajax跨域请求:

图片 3<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq.ajax方法</title> </head> <body> </body> <script src="; <script type="text/javascript"> // 通过jQuery实现跨域 $.ajax({ url: '', dataType: 'jsonp', // 跨域请求 jsonp: 'cb', //设置回调函数名称(callback=?的callback部分) jsonpCallback: 'callcack', //设置回调函数名称(callback=?的?部分) success:function (data) { console.log(data) } }); </script> </html> ajax实现jsonp跨域请求

3、**$.get**(url, [data], [callback], [type]):通过HTTP GET请求获取数据。这是一个简单的GET请求取代复杂的$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数,则使用$.ajax。

type值:_default。HTML或者XML取决于返回值。 

图片 4<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq.ajax方法</title> <style type="text/css"> *{ padding: 0; margin: 0; } .container{ border: 1px solid #eeeeee; margin: 100px auto 0; width: 500px; overflow: hidden; } .box{ width: 300px; height: 40px; border: 1px solid #f4f4f4; line-height: 40px; margin: 10px auto; overflow: hidden; } .box label{ width: 60px; text-align: center; display: inline-block; } .box input{ width: 60%; height: 100%; border: none; outline: none; font-size: 18px; } .box input[type=button]{ width: 100%; } </style> </head> <body> <div class="container"> <form action="javascript:;"> <div class="box account-box"> <label>账号:</label> <input type="text" name="account" /> </div> <div class="box account-box"> <label>密码:</label> <input type="password" name="password" /> </div> <div class="box account-box"> <input type="submit" value="登录" /> </div> </form> </div> </body> <script src="; </script> <script type="text/javascript"> $("form").submit(function () { var account=$('input[type=text]').val() var password=$('input[type=password]').val() $.get('ajax.php', { account:account, password:password }, function (data) { console.log(data); }, 'json'); }); </script> </html> jQuery.get()

  

图片 5<?php $account = $_GET['account']; $password = $_GET['password']; echo json_encode($account.'||'.$password, JSON_UNESCAPED_UNICODE); php后台文件

4、$.post(url, [data], [callback], [type]):通过HTTP POST请求获取数据。这是一个简单的POST请求取代复杂的$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数,则使用$.ajax。

type值:_default。HTML或者XML取决于返回值。 

图片 6<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq.ajax方法</title> <style type="text/css"> *{ padding: 0; margin: 0; } .container{ border: 1px solid #eeeeee; margin: 100px auto 0; width: 500px; overflow: hidden; } .box{ width: 300px; height: 40px; border: 1px solid #f4f4f4; line-height: 40px; margin: 10px auto; overflow: hidden; } .box label{ width: 60px; text-align: center; display: inline-block; } .box input{ width: 60%; height: 100%; border: none; outline: none; font-size: 18px; } .box input[type=button]{ width: 100%; } </style> </head> <body> <div class="container"> <form action="javascript:;"> <div class="box account-box"> <label>账号:</label> <input type="text" name="account" /> </div> <div class="box account-box"> <label>密码:</label> <input type="password" name="password" /> </div> <div class="box account-box"> <input type="submit" value="注册" /> </div> </form> </div> </body> <script src="; </script> <script type="text/javascript"> $("form").submit(function () { var account=$('input[type=text]').val() var password=$('input[type=password]').val() $.post('ajax.php', { account:account, password:password }, function (data) { if (data===true) { console.log("注册成功") } else{ console.log("注册失败") } }, 'json'); }); </script> </html> jQuery.post

  

图片 7<?php $account = $_POST['account']; $password = $_POST['password']; $flag=true; if ($account==$password) { $flag=false; } echo json_encode($flag,JSON_UNESCAPED_UNICODE); php后台文件

5、$.getJSON(url, [data], [callback]):通过HTTP GET请求获取JSON数据。可以通过使用JSONP形式的回调函数来加载其他网站的数据。如:”myulr?cb=?”,jQuery会自动替换 ? 为正确的函数名,以执行回调函数。 

图片 8<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq.ajax方法</title> </head> <body> </body> <script src="; </script> <script type="text/javascript"> // 通过getJSON跨域获取数据 $.getJSON('', {a:'b'}, function (data) { console.log(data); }); </script> </html> jQuery.getJSON跨域请求

 6、$.getScript(url, [callback]):通过HTTP GET请求载入并执行一个JS文件。 

图片 9// 获取js代码,可执行当代码处理 $.getScript('ajax.php', function (data) { console.log(data); }); jQuery.getScript获取js代码(给出重要代码,无演示)

1.2隐藏元素hide()

设置height,width等盒模型属性为0

这是我总结的一种比较奇葩的技巧,简单说就是将元素的margin,border,padding,height和width等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,还应该设置其overflow:hidden来隐藏其子元素,这算是一种奇技淫巧。

.hiddenBox { margin:0; border:0; padding:0; height:0; width:0; overflow:hidden; }

1
2
3
4
5
6
7
8
.hiddenBox {
     margin:0;
     border:0;
     padding:0;
     height:0;
     width:0;
     overflow:hidden;
}

这种方式既不实用,也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的,比如jquery的slideUp动画,它就是设置元素的overflow:hidden后,接着通过定时器,不断地设置元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom为0,从而达到slideUp的效果。

width:定义弹出框的宽度,默认值是400。
height:定义弹出框的高度,默认值是100.
title:定义弹出框的标题,默认值是空。
html:定义弹出框的内容,默认值是空。
type:定义弹出框的类型,默认值是default,其他conform和alert。
closed: 标题栏中的关闭按钮,回调方法,默认为null。
conform:包含name指按钮的名称,默认值为确定,callback回调方法,默认值为null。
cancel:包含name指按钮的名称,默认值为取消,callback回调方法,默认值为null。
备注:如果使用conform或alert时,不设置type类型是不起作用。

 四、jQuery序列化方法(可扩展反序列化)

$(DOM).serialize():序列表单内容为字符串,用于AJAX请求。

$(DOM).serializeArray():序列化表单元素,返回JSON数据结构数据。 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq.ajax方法</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            border: 1px solid #eeeeee;
            margin: 100px auto 0;
            width: 500px;
            overflow: hidden;
        }
        .box{
            width: 300px;
            height: 40px;
            border: 1px solid #f4f4f4;
            line-height: 40px;
            margin: 10px auto;
            overflow: hidden;
        }
        .box label{
            width: 60px;
            text-align: center;
            display: inline-block;
        }
        .box input{
            width: 60%;
            height: 100%;
            border: none;
            outline: none;
            font-size: 18px;
        }
        .box input[type=button]{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <form action="javascript:;">
            <div class="box account-box">
                <label>账号:</label>
                <input type="text" name="account" />
            </div>
            <div class="box account-box">
                <label>密码:</label>
                <input type="password" name="password" />
            </div>
            <div class="box account-box">
                <input type="submit" value="注册" />
            </div>
        </form>        
    </div>
</body>
<script src="http://www.txnma.com/uploads/allimg/191103/2306322R3-0.jpg">
</script>
<script type="text/javascript">
    $("form").submit(function () {
        // var account=$('input[type=text]').val()
        // var password=$('input[type=password]').val()
        var param=$(this).serializeArray()
        console.log(param)//json格式
        var param=$(this).serialize()
        console.log(param)//字符串格式
        $.post('ajax.php', 
            param, 
            function (data) {
                if (data===true) {
                    console.log("注册成功")
                }
                else{
                    console.log("注册失败")
                }
            },
            'json');
    });
</script>
</html>

  

<?php
$account = $_POST['account'];
$password = $_POST['password'];
$flag=true;
if ($account==$password) {
    $flag=false;
}
echo json_encode($flag,JSON_UNESCAPED_UNICODE);

图片 10

 

一、jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容...

语法

$(selector).hide(speed,callback);

隐藏已显示的元素

元素隐藏后的事件响应

如果被隐藏的元素绑定了一些事件,我们执行了相关操作后,这些事件是否会被响应并执行呢,看看下面的代码:

JavaScript

<style> div { width: 100px; height: 100px; background: red; margin: 15px; padding: 10px; border: 5px solid green; display: inline-block; overflow: hidden; } .none { display: none; } .hidden { visibility: hidden; } .opacity0 { opacity: 0; } .height0 { height: 0; } </style> <div class="none"></div> <div class="hidden"></div> <div class="opacity0"></div> <div class="height0">aa</div> <script src="/Scripts/jquery-1.10.2.min.js"></script> <script> $(".none").on("click", function () { console.log("none clicked"); }) $(".hidden").on("click", function () { console.log("hidden clicked"); }) $(".opacity0").on("click", function () { console.log("opacity0 clicked"); }) $(".height0").on("click", function () { console.log("height0 clicked"); }) </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        margin: 15px;
        padding: 10px;
        border: 5px solid green;
        display: inline-block;
        overflow: hidden;
    }
    .none { display: none; }
    .hidden { visibility: hidden; }
    .opacity0 { opacity: 0; }
    .height0 { height: 0; }  
</style>  
 
<div class="none"></div>
<div class="hidden"></div>
<div class="opacity0"></div>
<div class="height0">aa</div>  
 
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(".none").on("click", function () {
        console.log("none clicked");
    })
    $(".hidden").on("click", function () {
        console.log("hidden clicked");
    })
    $(".opacity0").on("click", function () {
        console.log("opacity0 clicked");
    })
    $(".height0").on("click", function () {
        console.log("height0 clicked");
    })
</script>

这段代码将四种隐藏元素的方法分别展示出来,然后绑定其点击事件,经过测试,主要有下面的结论:

1、display:none:元素彻底消失,很显然不会触发其点击事件
2、visibility:hidden:无法触发其点击事件,有一种说法是display:none是元素看不见摸不着,而visibility:hidden是看不见摸得着,这种说法是不准确的,设置元素的visibility后无法触发点击事件,说明这种方法元素也是消失了,只是依然占据着页面空间。
3、opacity:0:可以触发点击事件,原因也很简单,设置元素透明度为0后,元素只是相对于人眼不存在而已,对浏览器来说,它还是存在的,所以可以触发点击事件
4、height:0:将元素的高度设置为0,并且设置overflow:hidden。使用这种方法来隐藏元素,是否可以触发事件要根据具体的情况来分析。如果元素设置了border,padding等属性不为0,很显然,页面上还是能看到这个元素的,触发元素的点击事件完全没有问题。如果全部属性都设置为0,很显然,这个元素相当于消失了,即无法触发点击事件。

但是这些结论真的准确吗?
我们在上面的代码中添加这样一句代码:

1 $(".none").click();

1
1 $(".none").click();

结果发现,触发了click事件,也就是通过JS可以触发被设置为display:none的元素的事件。
所以前面无法触发点击事件的真正原因是鼠标无法真正接触到被设置成隐藏的元素!!!

放在页面底部,作为公用部分:
图片 11

1.3显示、隐藏的切换toggle

CSS3 transition对这几种方法的影响

CSS3提供的transition极大地提高了网页动画的编写,但并不是每一种CSS属性都可以通过transition来进行动画的。我们修改代码如下:

JavaScript

<style> div { width: 100px; height: 100px; background: red; margin: 15px; padding: 10px; border: 5px solid green; display: inline-block; overflow: hidden; transition: all linear 2s; } </style> <div class="none"></div> <div class="hidden"></div> <div class="opacity0"></div> <div class="height0">aa</div> <script src="/Scripts/jquery-1.10.2.min.js"></script> <script> $(".none").on("click", function () { console.log("none clicked"); $(this).css("display", "none"); }) $(".hidden").on("click", function () { console.log("hidden clicked"); $(this).css("visibility", "hidden"); }) $(".opacity0").on("click", function () { console.log("opacity0 clicked"); $(this).css("opacity", 0); }) $(".height0").on("click", function () { console.log("height0 clicked"); $(this).css({ "height": 0, }); }) </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        margin: 15px;
        padding: 10px;
        border: 5px solid green;
        display: inline-block;
        overflow: hidden;
        transition: all linear 2s;  
    }
</style>  
 
<div class="none"></div>
<div class="hidden"></div>
<div class="opacity0"></div>
<div class="height0">aa</div>  
 
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(".none").on("click", function () {
    console.log("none clicked");
    $(this).css("display", "none");
})
$(".hidden").on("click", function () {
    console.log("hidden clicked");
    $(this).css("visibility", "hidden");
})
$(".opacity0").on("click", function () {
    console.log("opacity0 clicked");
    $(this).css("opacity", 0);
})
$(".height0").on("click", function () {
    console.log("height0 clicked");
    $(this).css({
        "height": 0,
    });
})
</script>

经过测试,可以看到:
1、display:none:完全不受transition属性的影响,元素立即消失
2、visibility:hidden:元素消失的时间跟transition属性设置的时间一样,但是没有动画效果
3、opacity和height等属性能够进行正常的动画效果

假设我们要通过CSS3来做一个淡出的动画效果,应该如下:

.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; } .fadeOut:hover { visibility: hidden; opacity: 0; }

1
2
.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
     .fadeOut:hover { visibility: hidden; opacity: 0; }

应该同时设置元素的visibility和opacity属性。

使用方法:

语法

$(selector).toggle(speed,callback)

若元素是隐藏的,则显示

若元素时显示的,则隐藏

总结说明

本文总结说明了“隐藏”元素的几种方式,其中最常用的还是display:none和visibility:hidden。其他的方式只能算是奇技淫巧,并不推荐使用它们来隐藏元素,它们的真正用途应该不在隐藏元素,而是通过了解这些方法的特点,挖掘出其真正的使用场景。欢迎大家交流!!

$.Dialog.init({
    height: 180,
    title: "弹出框",
    html: "亲,默认弹出框哦",
    closed: function() {
        alert("关闭");
    }
});

参数说明

speed:规定显示或隐藏的速度,取值:slow,fast,毫秒数

callback: 回调函数,当显示或隐藏执行后,执行的函数;

 补充

来自评论区小伙伴们补充的技巧:

1、设置元素的position与left,top,bottom,right等,将元素移出至屏幕外

2、设置元素的position与z-index,将z-index设置成尽量小的负数

2 赞 3 收藏 评论

图片 12

github地址:https://github.com/benpaobenpao/dialog

栗子--二级菜单的显示与隐藏

DEMO:

HTML

<ul class="menu">

<li><a href="javascript:;">menu1</a><li>

<li><a href="javascript:;">menu2</a>

<ul class="sub-menu">

<li><a href="javascript:;">mune21</a></li>

<li><a href="javascript:;">menu22</a></li>

</ul>

</li>

<li><a href="javascript:;">menu3</a></li>

<li><a href="javascript:;">menu4</a></li>

</ul>

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>dialog弹出框benpaobenpao</title> <style> *{margin:0px;padding: 0px;} .clearfix{*zoom:1;} .clearfix:after{content:"020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;} .dialogbg{display:block; *zoom:1; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; opacity: 0.35;filter:alpha(opacity=30); background: #ccc;z-index: 9999;} .dialogbox{position: fixed;_position: absolute;-webkit-box-shadow: 0px 0px 6px #999;border: 1px solid #ccc;box-shadow: 0px 0px 3px #999;border-radius: 6px; z-index: 99999;left: 50%;top: 50%;background: #f5fffa;overflow: hidden;} .dialogboxrunstart{-webkit-transform: scale(0px,0px);-webkit-transition:all 0.2s ease-in-out;-moz-transform: scale(0px,0px);-moz-transition:all 0.2s ease-in-out;-ms-transform: scale(0px,0px);-ms-transition:all 0.2s ease-in-out;-o-transform: scale(0px,0px);-o-transition:all 0.2s ease-in-out;transform: scale(0px,0px);transition:all 0.2s ease-in-out;} .dialogtit{position: relative;height: 30px; line-height: 30px; overflow: hidden;padding: 0px 10px;border-bottom: 1px solid #274863;font-size: 16px;background: #4682b4;} .dialogclosed{position: absolute;right: 10px;color: #fff;font-weight: 700;font-size: 20px;cursor: pointer;} .dialogclosed:hover{color: #f00;} .dialogtxt{color: #fff;font-weight: 700;margin-right: 20px;} .dialogmain{padding: 10px 20px 10px 20px;} .dialogBtns{text-align: center;padding-top: 5px;} .dialogconform,.dialogcancel{display: inline-block;*display: inline;*zoom:1;padding: 0px 10px;height: 24px;line-height: 24px;color: #fff;font-size: 12px;border-radius: 4px;background: #005eac;border-width: 1px;border-style: solid;border-color: #b8d4e8 #124680 #124680 #b8d4e8;cursor: pointer;} .dialogcancel{margin-left: 10px;} .dialogconform:hover,.dialogcancel:hover{background: #0000ff;} </style> <script src="; <script src="; <style> body{height: 1500px;} .main{width: 960px; margin: 60px auto 0px; } .main .btn{width: 100px; height: 30px; line-height: 30px; text-align: center; cursor: pointer;} .mtable{ height: 100px; overflow-y: auto;} .mtable table{width: 100%; text-align: center;} .mtable table th, .mtable table td{padding:10px 0px;} </style> </head> <body> <div class="main"> <div> <img src="" /> <select><option>one</option><option>two</option></select> 弹出框插件测试。。。 </div> <div> 点击测试: <input class="btn" id="btndef" type="button" value="default" /> <input class="btn" id="btnconf" type="button" value="confirm" /> <input class="btn" id="btnal" type="button" value="alert" /> <p>使用conform、alert必须制定其type类型,type默认值是default。</p> </div> </div> <script id="arrtmpl" type="text/x-dot-template"> <div class="mtable"> <table > <thead> <tr> <th>第一项</th> <th>第二项</th> <th>第三项</th> </tr> </thead> <tbody> {{~it.array:value:index }} <tr> <td>{{= value.one }}</td><td>{{= value.two }}</td><td>{{= value.three }}</td> </tr> {{~}} </tbody> </table> </div> </script> <script id="dialogtmpl" type="text/x-dot-template"> {{? it.isIE6===false }} <div id="dialogbg" class="dialogbg"></div> {{?? }} <iframe id="dialogbg" class="dialogbg"></iframe> {{?}} <div id="dialogbox" class="dialogbox"> <div class="dialogcont"> <div class="dialogtit clearfix"> <a class="dialogclosed" title="关闭">⊗</a> <div class="dialogtxt">{{=it.title}}</div> </div> <div class="dialogmain">{{=it.html}}</div> {{? it.type === "conform"}} <div class="dialogBtns"><a class="dialogconform">{{=it.conform.name||"确定"}}</a></div> {{?? it.type === "alert"}} <div class="dialogBtns"><a class="dialogconform">{{=it.conform.name||"确定"}}</a><a class="dialogcancel">{{=it.cancel.name||"取消"}}</a></div> {{?}} </div> </div> </script> <script> (function($) { $.Dialog = { init: function(options) { var _this = this, defaults = { width: "400", height: "100", title: "", html: "", type: "default", // default conform alert closed: null, conform: { name: "确定", callback: null }, cancel: { name: "取消", callback: null } }; options.isIE6 = !! window.ActiveXObject && !window.XMLHttpRequest; _this.options = $.extend({}, defaults, options); _this.creatHtml(); _this.show(); _this.events(); if(_this.options.isIE6){ _this.ie6fixed(); } }, creatHtml: function() { var _this = this; var interText = doT.template($("#dialogtmpl")[0].text); $("body").append(interText(_this.options)); }, show: function() { var _this = this; _this.dialogbg = $("#dialogbg"); _this.dialogbox = $("#dialogbox"); _this.dialogbg.css({ "height": $(document).height() }); _this.dialogbox.css({ "margin-top": (-_this.options.height / 2) + "px", "margin-left": (-_this.options.width / 2) + "px", "width": _this.options.width + "px", "height": _this.options.height + "px" }); _this.dialogbox.addClass("dialogboxrunstart"); }, events: function() { var _this = this; _this.dialogclosed = _this.dialogbox.find(".dialogclosed"); _this.dialogconform = _this.dialogbox.find(".dialogconform"); _this.dialogcancel = _this.dialogbox.find(".dialogcancel"); _this.dialogclosed.on("click", function() { _this.removeCallback(_this.options.closed); }); _this.dialogconform.on("click", function() { _this.removeCallback(_this.options.conform.callback); }); _this.dialogcancel.on("click", function() { _this.removeCallback(_this.options.cancel.callback); }); }, removeCallback: function(call) { var _this = this; _this.dialogbg.remove(); _this.dialogbox.remove(); !! call && call(); }, ie6fixed: function() { var _this = this; $(window).scroll(function() { _this.dialogbox.css({ "top": (($(window).height() - _this.options.height) / 2 + $(document).scrollTop()) + "px" }); }); } } })(jQuery); </script> <script> (function($) { $("#btndef").click(function() { $.Dialog.init({ height: 180, title: "弹出框", html: "亲,默认弹出框哦", closed: function() { alert("关闭"); } }); }); $("#btnconf").click(function() { $.Dialog.init({ height: 100, html: "", type: "conform", conform: { name: "确认按钮哦哦哦哦" } }); }); $("#btnal").click(function() { var arr = { "array": [{ "one": "1", "two": "2", "three": "3" }, { "one": "11", "two": "22", "three": "33" }, { "one": "111", "two": "222", "three": "333" }, { "one": "1111", "two": "2222", "three": "3333" }, { "one": "11111", "two": "22222", "three": "33333" }, { "one": "111111", "two": "222222", "three": "333333" }] }; var interText = doT.template($("#arrtmpl")[0].text); var html = interText(arr); $.Dialog.init({ height: 190, html: html, type: "alert", conform: { callback: function() { alert("确定"); } }, cancel: { callback: function() { alert("取消"); } } }); }); })(jQuery); </script> </body> </html>

CSS

ul,li,a{padding:0;margin:0;list-style:none;text-decoration:none;}

.menu{width:960px;height:45px;border-radius:5px;margin:100px auto;}

.menuli{float:left;position:relative;background:indianred;-webkit-transition:all 0.5s ease;

-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}

.menuli a{display:inline-block;width:120px;height:45px;line-height:45px;text-align:center;margin:0 15px;padding:0 10px;color:#fff;}

.menuli a:hover{color:paleturquoise;}

.sub-menu{display:none;width:100%;position:absolute;top:70px;}

.sub-menu:after{content:'';width:0;height:0;position:absolute;top:-40px;left:65px;border:20px solid transparent;;border-bottom-color:indianred;z-index:100;}

运行代码

JS

方法一:使用show(),hide()

$('.menuli').mouseover(function() {

$(this).find('.sub-menu').show();

}).mouseout(function() {

$(this).find('.sub-menu').hide();

});

方法二:使用toggel()

$('.menuli').mouseover(function() {$(this).find('.sub-menu').toggle();}).mouseout(function() {$(this).find('.sub-menu').toggle();});

效果展示

图片 13

元素的显示与隐藏

2.元素的淡入淡出效果

2.1 淡入fadeIn

语法

$(selector).fadeIn(speed,callback);

淡入已经隐藏的元素

2.2  淡出fadeOut

语法

$(selector).fadeOut(speed,callback);

淡出可见元素

2.3 切换fadeToggle

语法

$(selector).fadeToggle(speed,callback);

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果

2.4 切换fadeTo

语法

$(selector).fadeTo(speed,opacity,callback);

参数说明

speed:效果执行的速度

callback: 效果执行完后,调用的函数

opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)

栗子

HTML

<div class="btn-group">

<button class="btn btn1">fadeIn</button>

<button class="btn btn2">fadeOut</button>

<button class="btn btn3">fadeToggle</button>

<button class="btn btn4">fadeTo</button>

</div>

<div class="box box1"> fadeIn</div>

<div class="box box2">fadeOut</div>

<div class="box box3">fadeToggle</div>

<div class="box box4">fadeTo</div>

CSS

div,button{padding:0;margin:0}

.btn{display:inline-block;width:120px;height:34px;line-height:34px;border:none;outline:none;background:paleturquoise;color:purple;}

.box{display:inline-block;margin:30px 15px 0 0;width:200px;height:200px;background:deeppink;transition:all 2s ease-in-out;}

.box1{display:none;}

.box3{display:none;background-color:aquamarine;}

.box4{opacity:0;}

JS

$(function() {

$('.btn1').click(function() {

$('.box1').fadeIn(2000).css('background','paleturquoise');

});

$('.btn2').click(function() {

$('.box2').fadeOut('slow');

});

$('.btn3').click(function() {

$('.box3').fadeToggle();

});

$('.btn4').click(function() {

$('.box4').fadeTo(3000,1)

});

});

效果展示

图片 14

元素的淡入淡出效果

3.滑动

3.1向下滑动slideDown

语法

$(selector).slideDown(speed,callbback)

3.2向上滑动slideUp

语法

$(selector).slideUp(speed,callbback)

3.3切换slideToggle

语法

$(selector).slideToggle(speed,callbback)

如果元素向下滑动,则 slideToggle() 可向上滑动它们。

如果元素向上滑动,则 slideToggle() 可向下滑动它们。

参数说明

speed:效果执行的速度

callback: 效果执行完后,调用的函数

栗子

HTML

<div class="box1">

<div class="box2"></div>

</div>

CSS

div{padding:0;margin:0}

.box1{position:relative;top:50%;left:50%;width:200px;height:200px;background:khaki;}

.box2{display:none;position:absolute;left:0;bottom:0;width:200px;height:100px;background:#333;opacity:0.5;z-index:10;}

JS

$(function() {

var isclick =true;

$('.box1').click(function() {

if(isclick) {

$('.box2').slideDown();

isclick =false;

}else{

$('.box2').slideUp();

isclick =true;

}

});

});

效果展示

图片 15

滑动事件

3.4动画animate

语法

$(selector).animate({param},speed,callback)

参数说明

{param}: 需要设置动画效果的CSS属性

speed: 动画执行的时间

callback:动画效果执行完后,调用的函数

注意:

当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。

animate:可以使用相对值,在值的前面加上 += 或 -=;

栗子

HTML

<div class="box"></div>

CSS

div{padding:0;margin:0;}

.box{position:relative;top:0;left:0;width:100px;height:100px;border-radius:100%;background-color:brown;transition:all 0.35s ease;}

JS

var iSpeed =0,timer =null;

timer = setInterval(function() {

iSpeed++;

$('.box').animate({

left: iSpeed*10+'px'

},'fast');

if(iSpeed ===15) {

clearInterval(timer);

}

},1000)

效果展示

图片 16

动画效果

animate使用相对值

$(function() {

$('.changeSize').click(function() {

$(this).animate({

width:'+=200px',

height:'+=250px',

left:'200px'

});

});

});

效果展示

图片 17

动画效果2

3.5停止动画stop

语法

$(selector).stop(stopAll,goToEnd)

参数说明

stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行;

goToEnd 参数规定是否立即完成当前动画。默认是 false;

默认地,stop() 会清除在被选元素上指定的当前动画

stop方法的使用可以不带参数

栗子

HTML

<button class="stop"></button>

<div class="box"></div>

CSS

div{padding:0;margin:0;}

.box{position:relative;top:0;left:0;width:100px;height:100px;background-color:orchid;}

.stop{display:block;border:none;outline:none;width:80px;height:34px;line-height:34px;background-color:aqua;}

JS

$('.box').click(function() {

$('.box').animate({left:'500px'},5000);

});

$('.stop').click(function() {

$('.box').stop();

});

效果展示

图片 18

停止动画

本文由9159.com发布于前端,转载请注明出处:内部插入操作,如果元素已淡入

关键词:

上一篇:该如何使用他们,审查元素可以发现
下一篇:没有了