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

程序员文章站 2022-06-28 13:40:19

一、操作DOM 内部插入操作： append(content|fn)：向每个匹配的元素内部追加内容。 prepend(content)：向每个匹配的元素内部前置内容。外部插入操作： after(content|fn)：在每个匹配的元素之后插入内容。 before(content|fn)：在每个匹配 ......

一、操作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>第八个外边框<span>&times;</span></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="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></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>

jquery操作dom演示

二、动画

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="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></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>

jQuery动画演示

三、核心

对象访问：

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])：在元素上移除存放的数据。

上一篇：威刚预告XPG DDR5-7400内存：超频可达12.6GHz

下一篇： Android Dialog 弹框之外的区域默认透明背景色修改

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

一、操作DOM

三、核心

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

JQuery中DOM节点的操作与访问方法实例分析

jQuery中 DOM节点操作方法大全

jQuery中DOM节点操作方法总结

JQuery中选择器与DOM节点操作的实例详解

JQuery中选择器与DOM节点操作的实例详解

jQuery中DOM节点操作方法总结

有关jquery与DOM节点操作方法和属性记录_jquery

有关jquery与DOM节点操作方法和属性记录

有关jquery与DOM节点操作方法和属性记录