jQuery简介

1.版本兼容:
jq1.x兼容IE8这样的旧浏览器
2.x不兼容旧浏览器,支持ES6
3.x不兼容旧浏览器,支持ES6
2.Jq的缺点:js文件是在我们自己的服务器上的,用户离我们服务器近就访问速度快,反之不
3.什么是 cdn网络:就是jquery存在一个服务器时,它会分发到别的同一个公司放置在各地的服务器,当客户端需要jquery时会跟cdn要,cdn就会查找哪一个存有jquery的服务器离客户端最近
4.两种引入jquery的方式–>下载引入jq文件/使用cdnjs文件
5.在调用jquery原型对象里面的简化版函数之前，要先做什么？
创建jquery的子对象 如var btn=new jQuery(“…”);
这样btn元素就可以使用jQuery里面的的简化版函数了，比如btn.click, 但是在jQuery
中简化后onclick函数的名字是click, innerHTML的名字是叫html
6.jquery子对象怎么知道自己要操作哪个dom元素
当new.jQuery(“选择器”)时，可传入任意一个css选择器
New jQuery()做的两件事：
1）和普通new一样，创建子对象，继承父对象，添加自有属性
2）自动用传入的选择器去dom树上查找符合条件的dom元素对象,保存进jQuery子对象
7.简化过程：new jQuery()–>jQuery()–>Jquery 修改元素宽度 jquery修改元素内容_javascript
9.用jQuery绑定的事件this指向的是谁
例子:Jquery 修改元素宽度 jquery修改元素内容_javascript_02(DOM元素)包裹下就变成jQuery家的函数

用DOM修改元素

<body>
    <h1>jQuery/$工厂函数</h1>
    <button id="btn1">click me(0)</button>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        //DOM4步
        //1.查找触发事件的元素
         var btn=document.getElementById("btn1");
        //2.绑定事件处理函数
        btn.onclick=function(){
            //3.查找要修改的元素-->this.innerHTML
            //4.修改元素
            /*
            4.1取出数量-->slice(9,-1)
            4.2将取出来的数量转为整数-->parseInt
            4.3将数量+1-->n++
            4.4将新数量拼到（）中，放回当前按钮的内容
            */
           var n=parseInt(this.innerHTML.slice(9,-1));
           n++;
           this.innerHTML=`click me(${n})`;
        }
    </script>
</body>

Jquery 修改元素宽度 jquery修改元素内容_jQuery_03

用jQuery修改元素

<body>
    <h1>jQuery/$工厂函数</h1>
    <h1>用jq写点击按钮数字变化</h1>
    <button id="btn1">click me(0)</button>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        //获取元素
         var $btn=$("#btn1");
         $btn.click(function(){
             //由于this是指向DOM元素的,this要用jQuery的简化版函数只能用$(this)这种方式
             var $this=$(this);
             /*
             问题:为什么不能在jQuery中使用DOM元素,因为使用框架和原生一起写容易混乱
             */
            var n=parseInt($this.html().slice(9,-1));
            n++;
            $this.html(`click me(${n})`);
         });
    </script>
</body>

Jquery 修改元素宽度 jquery修改元素内容_javascript_04