用jQuery修改元素

最新推荐文章于 2024-03-10 17:51:12 发布

riverrun_z

最新推荐文章于 2024-03-10 17:51:12 发布

阅读量1.4k

点赞数

分类专栏： jquery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_48047636/article/details/124692016

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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()–> $() 8 . 如果 j Q u e r y 的对象和 D O M 元素对象采用了相同的变量名，要怎么区分 - - > j Q u e r y 的对象命名规则前面要加$
9.用jQuery绑定的事件this指向的是谁
例子: $b t n . c l i c k (f u n c t i o n ()) - - > 用 j Q u e r y 绑定事件的按钮 - - > b u t t o n . o n c l i c k = f u n c t i o n () - - > 用 D O M 绑定事件的按钮由于这两个是等价的, 所以用 j Q u e r y 绑定事件的元素 t h i s 指向的仍然是触发这个事件的元素对象, 即 t h i s - - > D O M 但是这又带来一个问题, 那就是 j Q u e r y 不能继续使用简化版函数 10 . t h i s 指向的是 D O M, t h i s 不能继续使用 j Q u e r y 的简化版函数怎么办 j Q u e r y 构造函数除了支持选择器查找, 也支持直接把 D O M 元素放入 j Q u e r y 子对象如果一个 D O M 元素也想用 j Q u e r y 函数, 可以用$ (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>

在这里插入图片描述