jQuery

2022-06-25 23:03:51

jQuery 主要分成三个大的版本：1，2，3

1：兼容所有浏览器的版本

2：IE8 - 浏览器舍弃了；更轻更好的jQuery版本

3：重构了部分功能，极大的提升了jQuery的性能

jQuery之所以流行是因为作者非常顾及开发人员对工具使用的成本；写的更少，做的更多。

加载jQuery ;

1. 本地加载：

production 压缩版本，字符量尽可能少，加载速度尽可能快

development 开发版本，尽可能清晰的展示代码，带有注释可以二次开发

2. CDN加载：

CDN 付费服务器

CDN 免费服务器 bootcdn; https://www.bootcdn.cn/

编写jQuery代码：

　　提供了一个API jQuery

　　1. 构造函数里面的方法：都是工具类的，纯函数

　　　　function Foo(){} Foo.a = function(){}

　 2. 原型对象里面的方法：给实例对象用的，jQuery的实例对象就是jQuery要操作的DOM的容器

　　　　Foo.prototype.b = function(){}

　　3. 使用jQuery选择一个元素：

　　jQuery("任意css3选择器");

　　　　4. var res = jQuery("body")

　　 console.log(res);

jQuery的使用：

　　ready 是jquery的一个自创事件，会在页面之中文档加载结束之后触发

        jQuery(document).ready(function(){
            console.log("hello world 页面文档加载结束");
        });
        write less do more;

jQuery 提供了非常多的简写方案;

　　1. 命名简写： $

　　　　因为 $ 命名有非常多的库在使用，我们不能为所欲为的使用 $

　　2. 重新命名jQuery

        var $$ = jQuery;
        $$(document).ready(function(){
            console.log("hello world 页面文档加载结束");
        });

　　3. 把jQuery放进函数之中

        (function($){
            $(document).ready(function(){
                console.log("hello world 页面文档加载结束");
            });
        })(jQuery);

最终版本的简写：

　　$(function(){
            console.log("hello world 页面文档加载结束");
        })

css 方法　　给jQuery实例里面的dom对象添加行内样式

        $box.css({
            width  : "100px",
            height : 100,
            marginLeft : "+=200",
            backgroundColor : "yellowgreen"
        })
        $box.css({
            marginLeft : "+=100"
        })

jQuery的实例操作DOM对象时，绝大多数默认了是批量操作；在批量操作的绝大多数方法之中都给我们提供了回调函数，我们可以根据文档之中函数的参数配置实现功能自定义的

         var $boxs = $(".box");
         // jQuery实例对象里面的所有方法都是对DOM对象的批量操作；
         $boxs.css({
            width  : function( index , value ){
                return (index + 1) * 100
            },
            height : 100,
            margin : 5,
            backgroundColor : function( index , value ){
                return value.replace(/\d/g, (index + 1) * 20);
            }
        })
        console.log($boxs);

因为jQueryDOM操作都是批量的，所以我们可以使用群组选择器批量选择元素，进行统一操作

        $("#box,.box,.list *").css({
            width  : function( index , value ){
                return (index + 1) * 100
            },
            height : 100,
            margin : 5,
            backgroundColor : function( index , value ){
                return value.replace(/\d/g, (index + 1) * 20);
            }
        });

jQuery关系选择库：如直接子集选择器 selector>children ：

$(".box>div").css({
    background : "#fff"
})

$(".son").parent() 　　返回值就是son的父级元素，如果不加上一个限制条件的话会一直向外寻找父级,直到html

        $(".son").parent().css({
            background : "skyblue"
        })

        // $(".son").parents(".box").css({
        //     borderWidth : 10
        // })

        // parentsUtil
        $(".son").parentsUntil(".box").css({
            borderWidth : 10
        })

过滤器的写法 => 选择器:过滤条件

jQuery动画：

        $(".box").mouseover(function(){
            $(this)
            .stop(true)
            .animate({
                width : 1380
            })
            .siblings(".box")
            .stop(true)
            .animate({
                width : 0
            })
            .end()
            .children(".content")
            .css({
                left : 0
            })
        })

        $(".box").mouseout(function(){
            $(".box")
            .stop(true)
            .animate({
                width : 345
            })
            .queue(function(){
                $(this)
                .children(".content")
                .css({
                    left : 345
                })
            })
        })

jQuery

码农公寓

相关文章