jQuery概述/DOM对象和jQuery对象

最新推荐文章于 2023-11-27 17:13:48 发布

httpkaidi

最新推荐文章于 2023-11-27 17:13:48 发布

阅读量89

点赞数

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

本文链接：https://blog.csdn.net/httpkaidi/article/details/121620871

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery概述
javascript库，即library，是一个封装好的特定的集合（方法和函数），就是在这个库里面。封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素
简单理解，就是一个js文件，里面对原生js进行了封装，存放到里面，这样我们可以快速高效地使用这些封装好了的功能。直接调用就好了。

比如 jQuery，就是为了快速方便地操作DOM，里面基本都是函数（方法）。里面都是用原生js实现的。

常见js库：
jQuery、prototype、YUI、Dojo、Ext JS、移动端的zepto

jQuery是一个快速简洁的javascript库

jQuery封装了javascript常用的功能代码，优化了DOM操作、事件处理、动画操作和Ajax交互。

学习jQuery本质：就是学习调用这些函数（方法）

jQuery的优势：

轻量级。jQuery非常bai轻巧，，大小保持在30KB左右。
强大的选择器。
允许开发者dao使用从CSS1-CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择权。
出色的DOM操作的封装。
jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候，更得心应手。
可靠的事件处理机制
完善的Ajax
jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
不污染顶级变量。
出色的浏览器兼容性
链式操作方式
对发生在同一个jQuery对象上的操作，可以直接连写而无重复获取对象。
隐式迭代
当想找到带有“.myclass”类的全部元素，并将其隐藏，无需循环遍历每一个返回的元素。
行为层与结构层的分离
开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。使各个方面的开发人员各司其职，互不干涉。
丰富的插件支持
完善的文档
开源
jQuery的入口函数：
$是jQuery 的顶级对象，相当于原生js里面的window

有两种解决方法：
方法一：（推荐使用）

$(function(){
   // 此处是页面DOM加载完的入口
});

方法二

$(document).ready(function(){
   // 此处是页面DOM加载完的入口
});

  <script src="jquery.min.js"></script> //引用jQuery.js文件
  <style>
   div{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        }
  </style>
</head>
<body>
    <script>
        //1.等页面DOM加载完毕后再执行js代码
        $(document).ready(function(){
            $('div').hide();  //将盒子隐藏
        })
        //2.方法二
        $(function(){
            $('div').hide(); //实现的结果是一样的
        })
    </script>
    <div></div>
   
</body>

Dom对象与jQuery对象对比
DOM对象：用原生js获取过来的对象就是Dom对象
jQuery对象：用jQuery方式获取过来的对象是jQuery对象，本质：通过 $ 把 DOM元素进行了包装（伪数组形式存储）。
jQuery对象只能使用jQuery方法，DOM对象则使用原生的js属性和方法，不能混用。
jQuery对象与DOM对象间的互相转换
因为原生js 比 jQuery 大，原生的一些属性和方法 jQuery没有给我们封装，要想使用需要把 jQuery对象转换为DOM对象
1.DOM对象转换为jQuery对象： $(DOM对象）

       var div = document.querySelector('div');
        $(div);

2.jQuery对象转换为DOM对象：$('div')[index] 或 $('div').get(index) index 是索引号

        $(video);
        $('video')[0].play();//视频播放
        $('video').get[0].play();

httpkaidi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery概述/DOM对象和jQuery对象

jQuery概述javascript库，即library，是一个封装好的特定的集合（方法和函数），就是在这个库里面。封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素简单理解，就是一个js文件，里面对原生js进行了封装，存放到里面，这样我们可以快速高效地使用这些封装好了的功能。直接调用就好了。比如 jQuery，就是为了快速方便地操作DOM，里面基本都是函数（方法）。里面都是用原生js实现的。常见js库：jQuery、prototype、YUI、Dojo
复制链接

扫一扫

专栏目录