jQuery记录1（入门）

以下摘自百度百科

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的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+等。

正文

首先引入jQuery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

jQuery是用链式语法写的，比如：

$('.demo').html('Simba').css('color','red').css('border','1px solid red').css('cursor','pointer').click(function(){
             $(this).css('color','green')
          })

（当html 有参数时则赋值innerHTML 无参数时则取值）

（当css 有2个参数时则赋值style 1个参数时则取值 参数为对象 则赋多个值）例如：

$('.demo').html('Simba').css({
            border: '1px solid red',
            color: 'red'
          })

这些方法的内部还是用了以下这样的方法

只不过是进行了封装处理，才可以一直 . 下去

为什么它可以连续 . 下去呢，因为它里面写了类似于这样的代码

let z = {
             a() {
                 console.log('a');
                 return this
             },
             b() {
                 console.log('b');
                 return this
             },
             c() {
                 console.log('c');
                 return this
             }
        }
        console.log(z.a());
        z.a().b()
        z.c().a().b()

这样就可以链式调用了。

在写jQuery的时候如果想用到js的方法，那么需要转化一下才能用，因为jQuery里没有包含js的方法，可以用以下方法转换：

jq=>js    $(xxx)[0]
          例如：console.log($('.demo')[0].offsetLeft);
          或者
          $(xxx).get(0)

同理，写js时想用jQuery的方法也需要转换一下：

//js=>jq    $(js_dom)
            例如：$(demo1).css('color', 'red')

为什么可以这样转换，因为它里面写了类似于这样的代码：

function $(args) {

             if (typeof args === 'string') {
                  //按选择器查找
             } else if (typeof args === 'object') {
                  //包装dom元素为jq对象
             }else{
                  //
             }
        }

以上。