jQuery(基础中的基础，jquery核心源码，入门必看文章）

最新推荐文章于 2024-08-03 17:05:14 发布

孤影_ls

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量506

点赞数

分类专栏： jQuery 文章标签： js javascript jquery es6

本文链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/104232163

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery初识

jq是一款用原生js封装的，操作dom的类库
- 他里面封装的大量的方法，基于这些方法，可以使我们快速的取操作dom和构建我们的项目
JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
- 推荐自学方法
  - 1、jQuery相关API
  - 2、用jQuery做案例
  - 3、看源码：可以提高你自己封装插件的能力，也可以提高你阅读其他代码的能力

jQuery的语法

1、获取dom的方式

$(‘选择器’) jq选择器
eq(索引) 找到索引对应的元素
gt(索引) 找到大于索引对应的元素
lt(索引) 找到小于索引对应的元素
find(‘选择器’) 找到对应的后代元素
filter(‘选择器’) 把符合条件的过滤出来

   // 如果你是用jq获取的东西，那变量接收时，那这个变量名前一般加上$,这时大家约定俗称的规范，别人一看就知道你是用jq获取的
       
        let $box =  $('#box')
        $('.box li').eq(0)
        $('.box li').gt(2)
        $('.box li').lt(2)
        $('.box').find('li').filter('.active')

2、节点之间的属性

prev() 获取上一个哥哥元素
prev(‘span’) 获取标签名为span的哥哥元素
prevAll() 获取所有的哥哥元素
next() 获取下一个兄弟元素
next(‘span’) 获取下一个标签名为span的兄弟元素
nextAll() 获取所有的兄弟元素
parent() 获取父亲元素
parents() 获取所有的祖先元素

  $('.box').prev() // 获取上一个哥哥元素
       $('.box').prev('span') // 获取上一个标签名为span的哥哥元素
       $('.box').prevAll() // 获取所有的哥哥元素


       $('.box').next() // 获取下一个兄弟元素
       $('.box').next('span') // 获取下一个标签名为span的兄弟元素
       $('.box').nextAll()// 获取所有的兄弟元素
       $('.box').siblings() // 获取所有的哥哥兄弟元素

       $('.box').parent()
       $('.box').parents() // 获取所有的祖先元素，直到document

3、dom的增删改

$(’.box’).append(‘
333
’) // 往指定的元素末尾插入元素
$(’.box’).html() // 获取 innerHTML
$(’.box’).html(‘2222’) // 设置
$(’.box’).text() // 获取 innerText
$(’.box’).text(‘2222’) // 设置

  div.html = '1111'
       let $ss =  $('.box').clone()

4、自定义属性

      $('.box').attr('data-time') // 获取自定义属性
      $('.box').attr('data-time', 11) // 设置自定义属性
      $('.box').attr({
          "data-type":1,
          "data-time":2,
      }) // 设置一组自定义属性
       $('.box').removeAttr('data-time') // 移除自定义属性

5、css

      $('.box').css('width') // 获取css样式
      $('.box').css('width', 100) // 设置css样式
      $('.box').css({
          width:100,
          height:100
      })
      $('.box').addClass('active')
      $('.box').removeClass('active')
      $('.box').hasClass('active') // 检测当前元素是否拥有当前的class名，如果有就是true，
没有就是false
      $('.box').toggleClass('active') // 自动判断当前元素是否拥有这个class名，如果有就是删除，
没有就是增加

6、js盒子模型

       $('.box').offset // 跟咱自己封装的一样的,距离body的上、左偏移量
       $('.box').position // 获取父级参照物

        $('.box').innerHeight/innerWidth/outerHeight/outerWidth
                clientHeight/ clientWidth/offsetHeight/offsetWidth
        $(document).scrollTop
        $(document).scrollLeft

7、工具、事件

      box.onclick = fn
      $('.box').on('eventType', fn) // 增加事件

      $('.box').on('click', fn)
      $('.box').click(fn)

      $('.box').off('click', fn) // 移除事件

      forEach

      $('.box li').each(function(index, item){
        // 可以遍历数组，类数组，对象
        //index是每一项的索引
        // item是每一项
        // 如果遍历的是对象，那index是属性名，item是属性值
      })


      $('.box li').toArray()
      $.uniqueSort()

8、如果是表单元素

        $('input').val() // 获取表单元素的内容
        $('input').val('666') // 设置表单元素的内容
        // html和text对表单元素不起作用

9、表单元素的行内属性

        $('radio').prop('checked') // 获取行内属性
        $('radio').prop('checked', true) // 设置行内属性
        $('radio').removeProp('checked') // 移除行内属性

语法

1. jquery的选择器

$(‘选择器’) jquery选择器

<body>
    <ul>
        <li class="a">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div></div>
    <div></div>
    <div></div>
    <input type="text" name="abcshd">
    <input type="text" name="ab">
    <input type="text" name="s">
    <input type="text" name="a">
    

    <script src="../../jquery-1.11.3.js"></script>
    <script>
        console.log($('li:first')); //获取第一个li，放在一个数组里
        
        console.log($("li:not('.a')")); //获取class名不叫a的li，放在一个数组里

        console.log($('li:even')); //获取索引为偶数的li，放在一个数组里

        console.log($('li:odd')); //获取索引为奇数的li，放在一个数组里

        console.log($('li:eq(1)')); //找到索引为1的li,放在一个数组里

        console.log($('li:gt(1)')); //找到索引大于1的li，放在一个数组里

        console.log($('li:lt(1)')); //找到索引小于1的li，放在一个数组里

        console.log($('input[name=a]')); //获取名字为a的input

        console.log($('input[name!=a]')); //获取名字不为a的input

        console.log($("input[name^=ab]")); //获取名字开头为ab的input

        console.log($("input[name$=ab]")); //获取名字结尾为ab的input
        
        console.log($('ul>li')); //获取ul下的li

        console.log($('ul+div')); //获取紧接着ul的下一个兄弟元素，而且下一个兄弟元素必须是div标签

        console.log($('ul~input')); //获取ul之后的所有input
    </script>
</body>

2. jquery的常用方法

<body>
    <div class="a" trueImg="1.jpg">
        中国
    </div>
    <input type="text">

    <script src="../../jquery-1.11.3.js"></script>
    <script>
        console.log($('.a').attr('trueImg')); //如果只有一个参数，获取行间属性

        console.log($('.a').attr('b', 100)); //如果是两个参数，就是设置行间属性

        console.log($('input').prop('checked')); //如果一个参数就是是否选中，选中为true，没选中为false；两个参数是设置是否选中

        console.log($('.a').addClass('s')); //新增class类名

        console.log($('.a').removeClass('a')); //删除class类名

        console.log($('.a').html()); //获取标签的内容，html可以识别标签

        console.log($('.a').text()); //获取标签的内容，text不可以识别标签

        console.log($('input').val('请输入查询密码')); //设置文本框内容

        console.log($('input').val()); //获取文本框内容
    </script>
</body>

3. jquery的CSS

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box{
        width:100px;
        height:100px;
        background: red;
        padding:10px;
        border:10px solid blue;
        margin:1000px auto;
        position: relative;
    }
    .box div{
        position: absolute;
        left:30px;
    }
    </style>
</head>

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

    <script src="../../jquery-1.11.3.js"></script>
    <script>
        console.log($('.box').css('winth')); //获取.box的width值

        console.log($('.box').css('width','200px')); //设置.box的width值为200px
        
        console.log($('.box').offset()); //获取.box的偏移量

        console.log($('.box').offset().left); //获取.box的左偏移量
        
        console.log($('.box div').position().left); //获取.box下的div的定位属性的左位移

        console.log($('.box').innerWidth()); //获取.box的clientWidth值

        console.log($('.box').outerWidth()); //获取.box的offsetWidth值
    </script>
</body>

4. jquery的文档处理

<body>
    <div class="box">
        <div></div>
    </div>
    <span>123</span>
    <span>123</span>
    <span>123</span>

    <script src="../../jquery-1.11.3.js"></script>
    <script>
        console.log($('.box').append("<span>How are you?</span>")); //给.box新增一个span标签

        let a = document.createElement('a'); //创建一个a标签
        console.log($(a).addClass('cv')); //给a标签加class名cv
        console.log($('.box').append(a)); //将a标签加到.box里的后面

        console.log($('span').appendTo('.box')); //将a标签加到.box里的后面

        console.log($('.box').prepend($('span'))); //将span标签置入到.box里的前面
        
        console.log($('span').prependTo('.box')); //将span标签置入到.box里的前面
        
        console.log($('.box').after('<b>123</b>')); //将'<b>123</b>'添加到.box后面

        console.log($('.box').before('<b>123</b>')); //将'<b>123</b>'添加到.box前面

        console.log($('.box').empty()); //清空.box的dom元素

        console.log($('span').remove()); //删除所有匹配到的元素 
    </script>

5. jquery的筛选

$(‘选择器’).hasClass(‘a’) ：判断是否有某个类名，有就返回true没有就返回false
$(‘选择器’).filter(‘条件，条件’) ：筛选，按条件匹配，条件可以有多个
$('选择器**‘).has(’条件’****) ：拥有对应的后代元素的选择器**
$("选择器").find("li") ：匹配后代元素

<body>
    <ul class="list" style="position: absolute;">
        <li  class="a">1</li>
        <li>2</li>
        <li class="b">
            <span></span>
        </li>
        <li>4</li>
    </ul>
    <p>Hello</p>
    <p>Hello Again</p>
    <p class="selected">And Again</p>

    <script src="../../jquery-1.11.3.js"></script>
    <script>
        console.log($('.list li').eq(2).hasClass('a')); //false 判断是否有某个类名，有返回true，没有就返回false

        console.log($('p').filter('.selected,:first')); //匹配出p标签的有class名为.selected和第一个
        
        console.log($('li').has('span')); //有span标签为后代的li标签
        
        console.log($(".list").find("li")); //获取.list下的全部li
        
        console.log($('.a').next()); //下一个弟弟元素节点节点

        console.log($('.a').nextAll()); //全部弟弟元素节点节点

        console.log( $("span").offsetParent()) //用于定位的父元素节点

        console.log( $("span").parent()) //父元素节点

        console.log( $("span").parents()) //全部的父元素节点
        
        console.log( $(".b").prev()); //上一个哥哥元素节点

        console.log( $(".b").prevAll()); //全部的哥哥元素节点

        console.log( $(".b").siblings()); //全部的兄弟元素节点
    </script>
</body>

6. jquery的事件

在JQ中所有的事件都是通过addEventListener绑定的，所以当使用事件的时候如果不解除前一次绑定，那么容易出现事件重复执行。
解决：off().click() 解除上一次的事件

ready
相同点：当DOM元素准备就绪会触发一个函数；DOM结构，图片，音视频解析完成以后，才会触发的回调函数
不同点：ready在同一个页面中，可以有多个回调函数，并且按照顺序依次执行
click ：事件点击

<body>
    <div class="box">1</div>
    <div class="box">2</div>

    <script src="../../jquery-1.11.3.js"></script>
    <script>
        console.log($(document).ready(function(){
            console.log(1)
        })); 
        //页面加载完成事件

        $(".box").click(function(){
            console.log(this);
        })
        //点击事件

        function fn(){}
        $(".box").on("click",fn)
        //on增加事件

        $(".box").off("click")
        //off删除事件
    </script>
</body>

7. jquery的动画

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button id="btn">点击</button>

    <script src="../../jquery-1.11.3.js"></script>
    <script>
        $(".box").hide(); //隐藏
        $(".box").show(); //显示
        $(".box").toggle();//如果隐藏就显示，如果显示就隐藏

        $(".box").slideDown(); //从上面拉下来（显示）
        $(".box").slideUp(); //从上面收上去（隐藏）
        $(".box").slideToggle(); //如果隐藏就显示，如果显示就隐藏

        $(".box").fadeIn(); //通过改透明的让盒子显示
        $(".box").fadeOut(); //通过改透明的让盒子隐藏
        $(".box").fadeToggle(1000);// 通过不断改变透明度，让盒子显示隐藏；

        $(".box").animate({
                width:300,
                height:200
            },function(){
                // 当动画运动完成之后，执行该函数
                    //console.log(100);
                $(".box").css("background","blue")
                    
            })
        //animate 自定义动画
    </script>
</body>

8.清除某个事件再添加某个事件

$aa.off('click).click(function(){})
先清除某个事件再添加某个事件

用jq做选项卡

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 500px;
            margin: 100px auto;
        }

        ul {
            list-style: none;
            display: flex;
            position: relative;
            top: 1px
        }

        li {
            width: 150px;
            margin-right: 10px;
            height: 40px;
            line-height: 40px;
            font-size: 30px;
            text-align: center;
            border: 1px solid orangered;
        }

        .box div {
            width: 500px;
            border: 1px solid orangered;
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 50px;
            display: none;
        }

        ul li.active {
            border-bottom: 1px solid white;
        }

        .box div.active {
            display: block;
        }
    </style>

<body>
    <div id="box" class="box">
        <ul id="navBox" class="navBox">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div class="active">一</div>
        <div>二</div>
        <div>三</div>
    </div>
    <script src="../../js/jquery-1.11.3.js"></script>
    <script>
        let $navList = $('.box li');
        let $tabList = $('.box div');

        // //    $navList.each(function(index, item){
        // //         console.log(index, item)
        // //         $(item).click(function(){
        // //             console.log(111)
        // //         })
        // //    })



        // // 他会自动给每一个li加上点击事件，内部就给你循环了
        $navList.click(function () {
            //     // index()代表了当前点击元素的位置的索引
            //     //  eq()通过索引找到对应的元素

            //     let index = $(this).index(); // 获取当前元素对应的索引
            //     $(this).addClass('active').siblings().removeClass('active');
            //     $tabList.eq(index).addClass('active').siblings().removeClass('active');

            $(this).addClass('active').siblings().removeClass('active').parent().nextAll().eq($(this).index())
                .addClass('active').siblings().removeClass('active')
        })
    </script>

</body>

JQ源码简单理解


    <script>
        (function (global, factory) {
            // global就是 window
            // factory是 function (window, noGlobal) {}

            if (typeof module === "object" && typeof module.exports === "object") {
                // ...
                // 支持CommonJs模块规范的执行这里(例如node.js)
            } else {
                // 代码能走到这里说明是浏览器或者webView环境
                // 当外层自执行代码执行的时候，factory执行，function (window, noGlobal) {}
                //                                                 window
                // 也就是说function的里第一个形参被赋值的实参就是window
                factory(global);
            }


            // typeof windiw => 'object'
        }(typeof window !== "undefined" ? window : this, function (window, noGlobal) {
            //    参数信息
            //    window --> window
            //    noGlobal --> undefined
            // ....
            var version = "1.11.3",
                jQuery = function (selector, context) {
                    return new jQuery.fn.init(selector, context);
                };
            // jQqury还一个自定义类，他们把jQuery的原型重定向了，
            // 而且还给jQ加了一个属性，属性值也是自己的原型  jQuery.fn === jQuery.prototype
            jQuery.fn = jQuery.prototype = {
                // 这里面是jQ的公有属性和方法
                jquery: version,

                // 我们自己重定向后的原型是没有construstor，所以他给手动增加了一个constructor属性指向自己的类
                // 为了保证原型的完整性
                constructor: jQuery,
                // 转换为数组的方法
                // this：一般是当前类jQuery的实例
                toArray: function () {
                    // this：一般是当前类jQuery的实例
                    return slice.call(this);
                },
                // 把jQ对象转换为原生js对象
                get: function (num) {
                    return num != null ?

                        // Return just the one element from the set
                        (num < 0 ? this[num + this.length] : this[num]) :

                        // Return all the elements in a clean array
                        slice.call(this);
                },
                each: function (callback, args) {
                    // this就是当前实例，
                    // each是jQ类的一个私有属性(把jQ当做对象来用)

                    // 一会去jQ里查each方法
                    return jQuery.each(this, callback, args);
                },
                eq: function (i) {
                    var len = this.length,
                        j = +i + (i < 0 ? len : 0);
                    return this.pushStack(j >= 0 && j < len ? [this[j]] : []);
                },

            }

            // 把jQuery赋值给window的$和jQuery，这样你就在全局下都可以使用了
            if (typeof noGlobal === "undefined") {
                window.jQuery = window.$ = jQuery;
            }
        }));


        $()



        //jQ提供的方法放到了两个位置
        // 1、原型上jQuery.prototype={toArray:fn}
        // $().toArray()
        // 只有jQ的实例才可以调用
        // 2、对象上jQuery.ajax = ...
        // $.ajax()
        // 直接调取使用






        // 检测当前对象是数组还是类数组
        // function isArraylike(obj) {


        // if (type === "function" || jQuery.isWindow(obj)) {
        //     return false;
        // }

        // if (obj.nodeType === 1 && length) {
        //     return true;
        // }

        // return type === "array" || length === 0 ||
        //     typeof length === "number" && length > 0 && (length - 1) in obj;
        // }
    </script>

jquery核心源码

    <script>
        (function (global, factory) {

            factory(global); // factory 是实参的回调函数

        }(typeof window !== "undefined" ? window : this, function (window, noGlobal) {
            // 在这个作用域准备了数组和对象的常用方法；
            var deletedIds = [];
            var slice = deletedIds.slice;
            var concat = deletedIds.concat;
            var push = deletedIds.push;
            var indexOf = deletedIds.indexOf;
            var class2type = {};
            var toString = class2type.toString;
            var hasOwn = class2type.hasOwnProperty;
            var support = {};
            var jQuery = function (selector, context) {

                // jQuery执行时，会返回一个init的实例；
                return new jQuery.fn.init(selector, context);
            };

            jQuery.fn = jQuery.prototype = {
                // 这是jquery原型上的方法；jQuery实例能用；
                jquery: version,
                constructor: jQuery,
                toArray: function () {
                    return slice.call(this);
                },
            }
            // 是往原型上扩展方法的；
            jQuery.extend = jQuery.fn.extend = function () {}
            // 扩展传一个对象，那么jquery的实例以后就可以调用新扩展的方法了；
            jQuery.extend({
                toArray: function () {

                },
                slice: function () {

                }
            })
            // 返回的init实例，就是通过传入选择器，获取到的对应的元素
            init = jQuery.fn.init = function (selector, context) {

            }
            // 
            init.prototype = jQuery.fn; // 把jQuery的prototype给了init的原型
            // 把jQuery这个方法给了全局下的$
            window.jQuery = window.$ = jQuery;
        }))();

        $("#box") // jQuery 的实例，可以调用jquery原型上的方法；
            // $.addClass// jQuery 的实例，可以调用jquery原型上的方法；
        // console.log(module);
        // $("#box").prev();
        // $.ajax
        // $("#box").ajax()
        // jquery的私有属性和jquery这个类原型的方法；

    </script>

孤影_ls

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery(基础中的基础，jquery核心源码，入门必看文章）

jQueryjQuery初识jq是一款用原生js封装的，操作dom的类库他里面封装的大量的方法，基于这些方法，可以使我们快速的取操作dom和构建我们的项目JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaS...
复制链接

扫一扫

专栏目录