JQuery的基本使用

Posted 2021-04-08 web前端与开发

卡农 来自蚂蚁吧吧 00:00 02:29

1.1      jQuery操作样式

1.1.1       css操作

功能：设置或者修改样式，操作的是style属性。

Ø  设置单个样式

                //name：需要设置的样式名称

                //value：对应的样式值

                css(name, value);

                //使用案例

                $("#one").css("background","gray");//将背景色修改为灰色

Ø  设置多个样式

                //参数是一个对象，对象中包含了需要设置的样式名和样式值

                css(obj);

                //使用案例

                $("#one").css({

                    "background":"gray",

                    "width":"400px",

                    "height":"200px"

                });

Ø  获取样式

                //name:需要获取的样式名称

                css(name);

                //案例

                $("div").css("background-color");

    注意：获取样式操作只会返回第一个元素对应的样式值。

1.1.2       class操作

Ø  添加样式类

                //name：需要添加的样式类名，注意参数不要带点.

                addClass(name);

                //例子,给所有的div添加one的样式。

                $(“div”).addClass(“one”);

Ø  移除所有样式类

                //不带参数，移除所有的样式类

                removeClass()

                //例子，移除div所有的样式类

                $(“div”).removeClass();

Ø  移除单个样式类

                //name:需要移除的样式类名

                removeClass(“name”);

                //例子，移除div中one的样式类名

                $(“div”).removeClass(“one”);

Ø  判断是否有样式类

                //name:用于判断的样式类名，返回值为true false

                hasClass(name)

                //例子，判断第一个div是否有one的样式类

                $(“div”).hasClass(“one”);

Ø  切换样式类

                //name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。

                toggleClass(name);

                //例子

                $(“div”).toggleClass(“one”);

                经验总结：

         1.    如果操作到的样式非常少，可以考虑css方法

         2.    如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个                      class类里面。

         3.    如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式

                  来操作。

                

1.2       jquery动画

jquery提供了三组动画，这些动画都是标准的、有规律的效果，jquery还提供了自定义动画的功能。

1.2.1       显示与隐藏

显示(show)与隐藏(hide)是一组动画：

show方法详解：

            show([speed], [callback]);

            //speed(可选)：动画的执行时间

               1.如果不传，就没有动画效果。

               2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

               3.固定字符串，slow(600)、normal(400)、fast(200)，如果传其他字符串，则默认为normal。

            //callback(可选):执行完动画后执行的回调函数

            hide方法详解：

            与show方法的用法完全一致。

            show/hide：修改的是元素的width、height、opacity。

1.2.2       滑入与滑出

        滑入(slideDown)与滑出(slideUp)是一组动画，效果与卷帘门类似

        slideUp/slideDown,使用方法与show/hide基本一致。

            slideUp(speed, callback);

            //speed(可选)：动画的执行时间

              1.如果不传，默认为normal，注意区分show/hide。

               2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

               3.固定字符串，slow(200)、normal(400)、fast(600)

            //callback(可选):执行完动画后执行的回调函数

滑入滑出切换

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

            //如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。

            slideUp/slideDown：修改的是元素的height

1.2.3       淡入与淡出

fadeIn/fadeOut使用方法与show/hide、slideDown/slideUp一致。

            fadeIn(speed, callback);

            //speed(可选)：动画的执行时间

               1.如果不传，默认是normal。

               2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

               3.固定字符串，slow(200)、normal(400)、fast(600)

            //callback(可选):执行完动画后执行的回调函数

淡入淡出切换：

                fadeToggle(speed,callback);

            //如果当前元素处于隐藏状态，那么执行fadeIn操作，如果处于显示状态，那么执行fadeOut操作。

淡入淡出到某个值

    与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

    fadeTo(speed, value,callback)//可以设置具体的透明度

    //speed（必须）

    //value  0-1之间的数值(比如0.4)，表示淡到某一个值。

    //callback(可选) 回调函数

    fade系列方法：修改的是元素的opacity

1.2.4       动画小结

1.    jQuery给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut

2.    动画切换方法：slideToggle、fadeToggle，注意：show和hide没有切换的方法。

3.    淡入淡出到某个值：fadeTo方法。

4.    show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。

5.    show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。

 

1.2.5       自定义动画

animate：自定义动画

            $(selector).animate({params},[speed],[callback]);

            // {params}：要执行动画的CSS属性，带数字（必选）

            // speed：执行动画时长（可选）

            // callback：动画执行完后立即执行的回调函数（可选）

    动画支持的属性：

     http://www.w3school.com.cn/jquery/effect_animate.asp

    补充：如果想要实现颜色的运动变化  （查看一下jquery官网的color插件）

1.2.6       easing参数

控制动画在不同元素的速度，默认为“swing”

“swing”：在开头和结尾移动慢，在中间移动速度快

“linear”：匀速移动

 

1.2.7       动画队列问题

引出事件队列效果【二级菜单案例】

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的

动画执行完成了才会执行（联想：地铁进站）。

1.2.8       停止动画

stop方法：停止动画效果

    stop(clearQueue,jumpToEnd);

    //第一个参数：是否清除队列

    //第二个参数：是否跳转到最终效果

最常用的停止动画：stop();  / stop(true)

1.3       jquery操作DOM(节点)

1.3.1       创建元素

        //$(htmlStr)

        //htmlStr：html格式的字符串

        $(“<span>这是一个span元素</span>”);

1.3.2       添加元素

Ø    添加新建的元素：

            //方法一：将jQuery对象添加到调用者内部的最后面。

            var $span = $(“<span>这是一个span元素</span>”);

            $(“div”).append($span);

 

            //方法二：参数传字符串，会自动创建成jquery对象

            $(“div”).append(“<span>这是一个span元素</span>”);

Ø    添加已经存在的元素

            var $p = $(“p”);

            $(“div”).append($p);

            //注意：如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。

            类似的用法：append  prepend after before

Ø    使用html方法创建元素

            //设置内容

            $(“div”).html(“<span>这是一段内容</span>”);

            //获取内容

            $(“div”).html()

 

1.3.3       清空元素

      * empty：清空指定节点的所有元素，自身保留(清理门户)

           * $(“div”).empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）

       清空元素的第二种方法

               * $(“div”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被

                 清除。

1.3.4       删除元素

        remove：相比于empty，自身也删除（自杀）

                $(“div”).remove();

 

1.3.5       克隆元素

作用：复制匹配的元素

        // 复制$(selector)所匹配到的元素（深度复制）

        //cloneNode(true)

        // 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。

        $(selector).clone();