jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

～东北大呲花～

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量541

点赞数 1

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

本文链接：https://blog.csdn.net/Da_ci_hua/article/details/121449976

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

jQuery

通俗来说，就是一个JS的库，里面封装了很多的JS方法，可以使前端人员去调用，大大减少了开发的时间，增加了开发的效率。

JQ的优点

轻量级，核心文件才几十KB，不会影响页面的加载速度。
跨浏览器兼容。基本兼容了现在主流的浏览器。
链式编程，隐式迭代。
对事件，样式，动画支持，大大简化了DOM操作。
支持插件扩展开发，有着丰富的第三方的插件，例如：轮播图、日期控件
免费，开源。

jq的引用

第一种：是在联网的情况下使用，直接在你的html中放这句代码，就可以用了

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

第二种：是现在官网下载jq库文件，下载完放在你电脑的里面（一般东西别放C盘，电脑容易卡），要用的时候直接用相对路径，直接引用即可。

所有的jQuery代码写在页面加载函数

$(function(){
    jQuery代码
});

ES6写法

<script>
        $(() => {
            jQuery代码
        })
    </script>

等着DOM加载完再去执行内部代码，不分js代码与HTML代码先后顺序了。

顶级对象

$是JQ的别称，代码用$代替JQ
$是JQ的顶级对象，相当于JS中的window把元素利用这个符号包装成JQ的对象，
就可以调用JQ的方法。

JQ对象和DOM对象的区别

DOM对象：
通过JS的属性和方法获得的对象
JQ对象：
通过JQ的属性和方法获得的对象

<script>
        // DOM对象：通过JS的属性和方法获得的对象
        var mydiv = document.querySelector('div');
        console.log(mydiv);
        //JQ对象：通过JQ的属性和方法获得的对象
        $('div') //$('div')是一个jQ对象
        console.log($('div'));
    </script>

jq获取过来的对象是jq对象（伪数组形式储存）。

DOM对象只能使用JS的属性和方法，JQ对象只能使用JQ的属性和方法，
两者不可以弄混

第二个为jq对象

JQ对象和DOM对象的相互转换

原生js比jq更大，原生的一些属性和方法jQ没有给我们进行封装，要使用这些属性和方法必须转化为Dom对象。
1.DOM对象转化为JQ对象

var mydiv = document.querySelector(‘div’);
1.前提是使用DOM获取了，用下面
$(mydiv) 注意：不加引号
2.没有用DOM获取过
$('选择的名称')  注意：加引号

2.JQ对象转化为DOM对象

$（'对象名'）[index]；index 是索引号，第n个对象就写n-1

jQuery选择器

$(“选择器”);//里面需要加引号

在这里插入图片描述

jQuery层级选择器

在这里插入图片描述

jQuery过滤选择器

在这里插入图片描述

<body>
    <div>惊喜吧，意外吧

    </div>
    <div>惊喜吧，意外吧

    </div>
    <div>惊喜吧，意外吧

    </div>
    <div>惊喜吧，意外吧

    </div>
    <div>惊喜吧，意外吧

    </div>
    <script>
        console.log($('div'));
        var div = document.querySelectorAll("div");
        console.log(div);
        div.style.background = "pink"
        这句话是错的，因为js获取过来的是一个对象，必须指明是哪一。
        改：
        div[0].style.background = "pink"
         或者利用jq把div全部改为pink背景颜色
         $("div").css("background", "pink")
         隐式迭代
         遍历内部DOM元素（伪数组的形式储存）的过程叫做隐式迭代
         给匹配的所有元素进行循环遍历，执行相应的方法，
         而不用我们经行循环遍历。
    </script>

</body>

～东北大呲花～

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery通俗来说，就是一个JS的库，里面封装了很多的JS方法，可以使前端人员去调用，大大减少了开发的时间，增加了开发的效率。JQ的优点轻量级，核心文件才几十KB，不会影响页面的加载速度。跨浏览器兼容。基本兼容了现在主流的浏览器。链式编程，隐式迭代。对事件，样式，动画支持，大大简化了DOM操作。支持插件扩展开发，有着丰富的第三方的插件，例如：轮播图、日期控件免费，开源。jq的引用第一种：是在联网的情况下使用，直接在你的html中放这句代码，就可以用了<script src=
复制链接

扫一扫