分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery动画，获取，添加，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

动画：

<!@H_801_9@DOCTYPE html@H_801_9@>@H_801_9@
<@H_801_9@html@H_801_9@>@H_801_9@
    <@H_801_9@head@H_801_9@>@H_801_9@
        <@H_801_9@Meta @H_801_9@charset@H_801_9@="UTF-8"@H_801_9@>@H_801_9@
        <@H_801_9@title@H_801_9@>@H_801_9@stop实验测试</@H_801_9@title@H_801_9@>@H_801_9@
        <@H_801_9@script @H_801_9@src@H_801_9@="../js/jquery-1.4.2.js"@H_801_9@></@H_801_9@script@H_801_9@>@H_801_9@
        <@H_801_9@script @H_801_9@src@H_801_9@="../js/jquery-1.8.3.min.js"@H_801_9@></@H_801_9@script@H_801_9@>@H_801_9@
        <@H_801_9@script@H_801_9@>@H_801_9@
            /*@H_801_9@
             * jQuery 动画 - animate() 方法
             * jQuery animate() 方法用于创建自定义动画。
             * 语法：$(SELEctor).animate({params},speed,callBACk);
             * 必需的 params 参数定义形成动画的 CSS 属性。
             * 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
             * 可选的 callBACk 参数是动画完成后所执行的函数名称。
             @H_801_9@*/@H_801_9@
            $(document).ready(@H_801_9@function@H_801_9@(){
                  $(@H_801_9@"@H_801_9@#start@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    $(@H_801_9@"@H_801_9@div@H_801_9@"@H_801_9@).animate({left:@H_801_9@‘@H_801_9@100px@H_801_9@‘@H_801_9@},@H_801_9@5000@H_801_9@);
                    $(@H_801_9@"@H_801_9@div@H_801_9@"@H_801_9@).animate({fontSize:@H_801_9@‘@H_801_9@3em@H_801_9@‘@H_801_9@},@H_801_9@5000@H_801_9@);
                  });
  
                  $(@H_801_9@"@H_801_9@#stop@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    $(@H_801_9@"@H_801_9@div@H_801_9@"@H_801_9@).stop();
                  });

                  $(@H_801_9@"@H_801_9@#stop2@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    $(@H_801_9@"@H_801_9@div@H_801_9@"@H_801_9@).stop(@H_801_9@true@H_801_9@);
                  });

                  $(@H_801_9@"@H_801_9@#stop3@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                        $(@H_801_9@"@H_801_9@div@H_801_9@"@H_801_9@).stop(@H_801_9@true@H_801_9@,@H_801_9@true@H_801_9@);
                  });
  
            });
        @H_801_9@</@H_801_9@script@H_801_9@>@H_801_9@
    </@H_801_9@head@H_801_9@>@H_801_9@
    <@H_801_9@body@H_801_9@>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="start"@H_801_9@>@H_801_9@开始</@H_801_9@button@H_801_9@>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="stop"@H_801_9@>@H_801_9@停止</@H_801_9@button@H_801_9@>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="stop2"@H_801_9@>@H_801_9@停止所有</@H_801_9@button@H_801_9@>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="stop3"@H_801_9@>@H_801_9@停止但要完成</@H_801_9@button@H_801_9@>@H_801_9@
        <@H_801_9@p@H_801_9@><@H_801_9@b@H_801_9@>@H_801_9@"开始"</@H_801_9@b@H_801_9@>@H_801_9@ 按钮会启动动画。</@H_801_9@p@H_801_9@>@H_801_9@
        <@H_801_9@p@H_801_9@><@H_801_9@b@H_801_9@>@H_801_9@"停止"</@H_801_9@b@H_801_9@>@H_801_9@ 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</@H_801_9@p@H_801_9@>@H_801_9@
        <@H_801_9@p@H_801_9@><@H_801_9@b@H_801_9@>@H_801_9@"停止所有"</@H_801_9@b@H_801_9@>@H_801_9@ 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</@H_801_9@p@H_801_9@>@H_801_9@
        <@H_801_9@p@H_801_9@><@H_801_9@b@H_801_9@>@H_801_9@"停止但要完成"</@H_801_9@b@H_801_9@>@H_801_9@ 会立即完成当前活动的动画，然后停下来。</@H_801_9@p@H_801_9@>@H_801_9@ 
        <@H_801_9@div @H_801_9@style@H_801_9@="BACkground:#98bf21;height:100px;width:200px;position:absolute;"@H_801_9@>@H_801_9@HelLO</@H_801_9@div@H_801_9@>@H_801_9@
    </@H_801_9@body@H_801_9@>@H_801_9@
</@H_801_9@html@H_801_9@>@H_801_9@

获取:

<!@H_801_9@DOCTYPE html@H_801_9@>@H_801_9@
<@H_801_9@html@H_801_9@>@H_801_9@
    <@H_801_9@head@H_801_9@>@H_801_9@
        <@H_801_9@Meta @H_801_9@charset@H_801_9@="UTF-8"@H_801_9@>@H_801_9@
        <@H_801_9@title@H_801_9@></@H_801_9@title@H_801_9@>@H_801_9@
        <@H_801_9@script @H_801_9@src@H_801_9@="../js/jquery-1.4.2.js"@H_801_9@></@H_801_9@script@H_801_9@>@H_801_9@
        <@H_801_9@script @H_801_9@src@H_801_9@="../js/jquery-1.8.3.min.js"@H_801_9@></@H_801_9@script@H_801_9@>@H_801_9@
        <@H_801_9@script@H_801_9@>@H_801_9@
            /*@H_801_9@
             * 获得内容 - text()、html() 以及 val()
             * 三个简单实用的用于 DOM 操作的 jQuery 方法：
             * text() - 设置或返回所选元素的文本内容
             * html() - 设置或返回所选元素的内容（包括 HTML 标记）
             * val() - 设置或返回表单字段的值
             * 下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
             @H_801_9@*/@H_801_9@
            $(document).ready(@H_801_9@function@H_801_9@(){
                $(@H_801_9@"@H_801_9@#btn1@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    alert(@H_801_9@"@H_801_9@Text:@H_801_9@"@H_801_9@+@H_801_9@$(@H_801_9@"@H_801_9@#test@H_801_9@"@H_801_9@).text());
                });
                $(@H_801_9@"@H_801_9@#btn2@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    alert(@H_801_9@"@H_801_9@HTML:@H_801_9@"@H_801_9@+@H_801_9@$(@H_801_9@"@H_801_9@#test@H_801_9@"@H_801_9@).html());
                });
                $(@H_801_9@"@H_801_9@#btn3@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    alert(@H_801_9@"@H_801_9@Value:@H_801_9@"@H_801_9@+@H_801_9@$(@H_801_9@"@H_801_9@#test1@H_801_9@"@H_801_9@).val());
                });
                @H_801_9@/*@H_801_9@
                 * 获取属性 - attr()
                 * jQuery attr() 方法用于获取属性值。
                 * 下面的例子演示如何获得链接中 href 属性的值：
                 @H_801_9@*/@H_801_9@
                $(@H_801_9@"@H_801_9@#btn4@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    alert($(@H_801_9@"@H_801_9@#w3s@H_801_9@"@H_801_9@).attr(@H_801_9@"@H_801_9@href@H_801_9@"@H_801_9@));
                });
            });
        @H_801_9@</@H_801_9@script@H_801_9@>@H_801_9@
    </@H_801_9@head@H_801_9@>@H_801_9@
    <@H_801_9@body@H_801_9@>@H_801_9@
        <@H_801_9@p @H_801_9@id@H_801_9@="test"@H_801_9@>@H_801_9@这是段落中的<@H_801_9@b@H_801_9@>@H_801_9@粗体</@H_801_9@b@H_801_9@>@H_801_9@文本。</@H_801_9@p@H_801_9@>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="btn1"@H_801_9@>@H_801_9@显示文本</@H_801_9@button@H_801_9@>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="btn2"@H_801_9@>@H_801_9@显示 HTML</@H_801_9@button@H_801_9@>@H_801_9@
        <!--@H_801_9@val()获取值@H_801_9@-->@H_801_9@
        <@H_801_9@p@H_801_9@>@H_801_9@姓名：<@H_801_9@input @H_801_9@type@H_801_9@="text"@H_801_9@ id@H_801_9@="test1"@H_801_9@ value@H_801_9@="米老鼠"@H_801_9@></@H_801_9@p@H_801_9@>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="btn3"@H_801_9@>@H_801_9@显示值</@H_801_9@button@H_801_9@>@H_801_9@
        <@H_801_9@p@H_801_9@><@H_801_9@a @H_801_9@href@H_801_9@="http://www.w3school.com.cn"@H_801_9@ id@H_801_9@="w3s"@H_801_9@>@H_801_9@W3School.com.cn</@H_801_9@a@H_801_9@></@H_801_9@p@H_801_9@>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="btn4"@H_801_9@>@H_801_9@显示 href 值</@H_801_9@button@H_801_9@>@H_801_9@
    </@H_801_9@body@H_801_9@>@H_801_9@
</@H_801_9@html@H_801_9@>@H_801_9@

添加:

<!@H_801_9@DOCTYPE html@H_801_9@>@H_801_9@
<@H_801_9@html@H_801_9@>@H_801_9@
    <@H_801_9@head@H_801_9@>@H_801_9@
        <@H_801_9@Meta @H_801_9@charset@H_801_9@="UTF-8"@H_801_9@>@H_801_9@
        <@H_801_9@title@H_801_9@></@H_801_9@title@H_801_9@>@H_801_9@
        <@H_801_9@script @H_801_9@src@H_801_9@="../js/jquery-1.4.2.js"@H_801_9@></@H_801_9@script@H_801_9@>@H_801_9@
        <@H_801_9@script @H_801_9@src@H_801_9@="../js/jquery-1.8.3.min.js"@H_801_9@></@H_801_9@script@H_801_9@>@H_801_9@
        <@H_801_9@script@H_801_9@>@H_801_9@
            /*@H_801_9@
             * 添加新的 HTML 内容
             * 我们将学习用于添加新内容的四个 jQuery 方法：
             * append() - 在被选元素的结尾插入内容
             * prepend() - 在被选元素的开头插入内容
             * after() - 在被选元素之后插入内容
             * before() - 在被选元素之前插入内容
             @H_801_9@*/@H_801_9@
            $(document).ready(@H_801_9@function@H_801_9@(){
                @H_801_9@//@H_801_9@jQuery append() 方法在被选元素的结尾插入内容。@H_801_9@
                $(@H_801_9@"@H_801_9@#btn1@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    $(@H_801_9@"@H_801_9@p@H_801_9@"@H_801_9@).append(@H_801_9@"@H_801_9@<b>Appended text</b>@H_801_9@"@H_801_9@);
                });
                $(@H_801_9@"@H_801_9@#btn2@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    $(@H_801_9@"@H_801_9@ol@H_801_9@"@H_801_9@).append(@H_801_9@"@H_801_9@<li>Appened item</li>@H_801_9@"@H_801_9@);
                });
                
                @H_801_9@//@H_801_9@jQuery prepend() 方法在被选元素的开头插入内容。@H_801_9@
                $(@H_801_9@"@H_801_9@#btn3@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    $(@H_801_9@"@H_801_9@p@H_801_9@"@H_801_9@).prepend(@H_801_9@"@H_801_9@<b>Prepended text</b>@H_801_9@"@H_801_9@);
                });
                $(@H_801_9@"@H_801_9@#btn4@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    $(@H_801_9@"@H_801_9@ol@H_801_9@"@H_801_9@).prepend(@H_801_9@"@H_801_9@<li>Prepened item</li>@H_801_9@"@H_801_9@)
                });
                
                @H_801_9@/*@H_801_9@
                 * jQuery after() 和 before() 方法
                 * jQuery after() 方法在被选元素之后插入内容。
                 * jQuery before() 方法在被选元素之前插入内容。
                 @H_801_9@*/@H_801_9@
                $(@H_801_9@"@H_801_9@#btn5@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    $(@H_801_9@"@H_801_9@img@H_801_9@"@H_801_9@).before(@H_801_9@"@H_801_9@<b>Before</b>@H_801_9@"@H_801_9@);
                });
                $(@H_801_9@"@H_801_9@#btn6@H_801_9@"@H_801_9@).click(@H_801_9@function@H_801_9@(){
                    $(@H_801_9@"@H_801_9@img@H_801_9@"@H_801_9@).after(@H_801_9@"@H_801_9@<b>After</b>@H_801_9@"@H_801_9@);
                });
                
            });
            
            @H_801_9@/*@H_801_9@
                 * 通过 append() 和 prepend() 方法添加若干新元素
                 * 在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。
                 * 不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。
                 * 可以通过 jQuery 来@L_618_54@文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
                 @H_801_9@*/@H_801_9@
            function@H_801_9@ appendText()
            {
                @H_801_9@var@H_801_9@ txt1@H_801_9@=@H_801_9@"@H_801_9@<p>Text.</p>@H_801_9@"@H_801_9@;              @H_801_9@//@H_801_9@ 以 HTML 创建新元素@H_801_9@
                var@H_801_9@ txt2@H_801_9@=@H_801_9@$(@H_801_9@"@H_801_9@<p></p>@H_801_9@"@H_801_9@).text(@H_801_9@"@H_801_9@Text.@H_801_9@"@H_801_9@);  @H_801_9@//@H_801_9@ 以 jQuery 创建新元素@H_801_9@
                var@H_801_9@ txt3@H_801_9@=@H_801_9@document.createElement(@H_801_9@"@H_801_9@p@H_801_9@"@H_801_9@);
                txt3.innerHTML@H_801_9@=@H_801_9@"@H_801_9@Text.@H_801_9@"@H_801_9@;               @H_801_9@//@H_801_9@ 通过 DOM 来创建文本@H_801_9@
                $(@H_801_9@"@H_801_9@#more@H_801_9@"@H_801_9@).append(txt1,txt2,txt3);        @H_801_9@//@H_801_9@ 追加新元素@H_801_9@
            }
        @H_801_9@</@H_801_9@script@H_801_9@>@H_801_9@
    </@H_801_9@head@H_801_9@>@H_801_9@
    <@H_801_9@body@H_801_9@>@H_801_9@
        <@H_801_9@p@H_801_9@>@H_801_9@This is a paragraph.</@H_801_9@p@H_801_9@>@H_801_9@
        <@H_801_9@p@H_801_9@>@H_801_9@This is another paragraph.</@H_801_9@p@H_801_9@>@H_801_9@
        <@H_801_9@ol@H_801_9@>@H_801_9@
            <@H_801_9@li@H_801_9@>@H_801_9@List item 1</@H_801_9@li@H_801_9@>@H_801_9@
            <@H_801_9@li@H_801_9@>@H_801_9@List item 2</@H_801_9@li@H_801_9@>@H_801_9@
            <@H_801_9@li@H_801_9@>@H_801_9@List item 3</@H_801_9@li@H_801_9@>@H_801_9@
        </@H_801_9@ol@H_801_9@>@H_801_9@
        <@H_801_9@p @H_801_9@id@H_801_9@="more"@H_801_9@>@H_801_9@一次性追加多个文档</@H_801_9@p@H_801_9@>@H_801_9@
        <@H_801_9@img @H_801_9@src@H_801_9@="../img/z_1_attack_02.png"@H_801_9@/><@H_801_9@br @H_801_9@/>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="btn1"@H_801_9@>@H_801_9@追加文本</@H_801_9@button@H_801_9@><@H_801_9@br @H_801_9@/>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="btn2"@H_801_9@>@H_801_9@追加列表项</@H_801_9@button@H_801_9@><@H_801_9@br @H_801_9@/>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="btn3"@H_801_9@>@H_801_9@Prepended向前添加文本</@H_801_9@button@H_801_9@><@H_801_9@br @H_801_9@/>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="btn4"@H_801_9@>@H_801_9@Prepended向前添加li</@H_801_9@button@H_801_9@><@H_801_9@br @H_801_9@/>@H_801_9@
        <@H_801_9@button @H_801_9@onclick@H_801_9@="appendText()"@H_801_9@>@H_801_9@追加多个文档</@H_801_9@button@H_801_9@><@H_801_9@br @H_801_9@/>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="btn5"@H_801_9@>@H_801_9@在图片前面添加文本</@H_801_9@button@H_801_9@><@H_801_9@br @H_801_9@/>@H_801_9@
        <@H_801_9@button @H_801_9@id@H_801_9@="btn6"@H_801_9@>@H_801_9@在图片后面添加文本</@H_801_9@button@H_801_9@><@H_801_9@br @H_801_9@/>@H_801_9@
    </@H_801_9@body@H_801_9@>@H_801_9@
</@H_801_9@html@H_801_9@>@H_801_9@

大佬总结

以上是大佬教程为你收集整理的jquery动画，获取，添加全部内容，希望文章能够帮你解决jquery动画，获取，添加所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：jquery 动画添加获取

上一篇: jquery 页面input上传图后显示下一篇:jquery截取地址栏参数（避免中文...

猜你在找的jQuery相关文章

javascript – window.load&$(document).ready()与jQuery版本2和3的行为不同 2022-03-30
jquery 使用html video 2019-10-09
jQuery 语法 2019-10-09
jQuery介绍 2019-10-09
jquery – 将多个表单序列化在一起？ 2019-10-09
jQuery ajax成功的匿名函数作用域 2019-10-09
jQuery – 获取元素的第二级父级 2019-10-09
jquery清除输入默认值 2019-10-09
JQuery UI：在游标位置而不是元素的中间拖放长元素 2019-10-09
jquery – 停止$.ajax在beforeSend 2019-10-09