1 什么是 jQuery

jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。

关于jQuery的相关资料：

2  jQuery 的两大特点

  • 链式编程：比如.show()和.html()可以连写成.show().html()。

  • 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

3  使用 jQuery 的基本步骤

（1）引包

（2）入口函数

（3）功能实现代码（事件处理）

导包的代码一定要放在js代码的最上面。

例子：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>引入jquery</title>
  6.  </head>
  7.  <body>
  8.  <script src="jquery-3.3.1.min.js"></script>
  9.  
  10.  <div id="app"></div>
  11.  <div class="box"></div>
  12.  <div class="box"></div>
  13.  <script>
  14.      console.log($('#app'));
  15.      console.log($('.box'));
  16.      console.log($('div'));
  17.      $('div').css({
  18.            'width': '200px',
  19.              'height': '200px',
  20.              "background-color":'red',
  21.              'margin-top':'20px'
  22.  })
  23.  
  24.  </script>
  25.  
  26.  </body>
  27.  </html>

4 入口函数

原生 js 的入口函数指的是：window.onload = function() {}; 如下：

  1.         //原生 js 的入口函数。页面上所有内容加载完毕，才执行。
  2.         //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
  3.        window.onload = function () {
  4.            alert(1);
  5.        }

而 jQuery的入口函数，有以下几种写法：

写法一：

  1.  //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
  2.        $(document).ready(function () {
  3.            alert(1);
  4.        })

写法二：（写法一的简洁版）

  1.  //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
  2.        $(function () {
  3.            alert(1);
  4.        });

写法三：

  1.   //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
  2.        $(window).ready(function () {
  3.            alert(1);
  4.        })

jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：

  • Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。

  • jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

  • Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

  • jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

5   js中的DOM对象 和 jQuery对象 比较

通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：

针对下面这样一个div结构：

<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div

通过原生 js 获取这些元素节点的方式是：

  1.     var myBox = document.getElementById("app");           //通过 id 获取单个元素
  2.     var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
  3.     var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

  1.    //获取的是数组，里面包含着原生 JS 中的DOM对象。
  2.  　　console.log($('#app'));
  3.  　　console.log($('.box'));
  4.  　　console.log($('div'));

二者相互转换

1、 DOM 对象 转为 jQuery对象：

  1. $(js对象);

2、jQuery对象 转为 DOM 对象：

  1.   jquery对象[index];      //方式1（推荐）
  2.  
  3.   jquery对象.get(index);  //方式2

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

  1. $('div')[1].style.backgroundColor = 'yellow';
  2. $('div')[3].style.backgroundColor = 'green';

总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。

13-2 jquery介绍的更多相关文章

  1. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  2. 前端——jQuery介绍

    目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...

  3. 前端-jQuery介绍

    目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...

  4. 分享自制的13套 JQuery Mobile 界面主题（追加4套新款）

    15套整合在一起的,其中2套官方+13套自制,款款精致,方便移动开发. 字体默认为微软雅黑. 适配于 JQuery Mobile 1.4.3 下载地址:http://files.cnblogs.com ...

  5. Day047--JS BOM介绍, jQuery介绍和使用

    内容回顾 DOM 文档对象模型(model) 一个模型就是一个对象(属性和方法 面向对象的三大特性:封装 继承 多态) 为了可扩展性 DOM操作 标签属性操作 获取值 getAttribute() 设 ...

  6. Python自动化 【第十七篇】：jQuery介绍

    jQuery jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在 ...

  7. jquery介绍

    1.jQuery (1)jQuery简介 是一个js框架(.js文件),它的最大特点是,使用选择器( 借鉴了css选择器的语法)查找要操作的节点,并且将这些 节点封装成一个jQuery对象,通过调用j ...

  8. 2.jQuery介绍

    . jQuery的认识 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的css选择器,并且可对CSS选择器进行扩展:拥有便捷的插件扩展机制和丰富的插件. 和原 ...

  9. jQuery介绍 常用选择器

    jquery现在三个版本, 1.x  2.x  3.x  都在用,越小的版本兼容性越好,ie8以下浏览器也支持,新功能不多.我们通常使用1.x 在html中,css放Head中,js放body尾部 j ...

  10. JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

随机推荐

  1. ios那些事之如何在ios5上运行gdb

    为啥要在ios上运行gdb? 这个问题见仁见智喽.对于搞开发的同学们来所, 有了gdb更方便跟踪分析别人的程序,取长补短:)这里不是教大家crack:) 运行环境: Mac OS 10.7.4 Xco ...

  2. 安装最新版本 nginx

    有时用操作系统默认安装 yum install apt install , 版本都会低,当然存在的bug 也会有.装最新版本 nginx 需要用他自己的源: sudo add-apt-reposito ...

  3. webpack4进阶配置

    移动端CSS px自动转换成rem 需要两步来实现: px2rem-loader 在构建阶段将px转换成rem lib-flexible 页面渲染时动态计算根元素的font-size值(手机淘宝开源库 ...

  4. go语言：类型转换

    类型转换用于将一种类型的变量转换为另一种类型的变量. 有以下场景: package main import "fmt" func main() { var sum int = 17 ...

  5. R语言可视化--颜色

    RColorBrewer包 三类调色板:sequential / diverging / qualitative 调色板的信息可以与colorRamp / colorRampPalette结合使用 从 ...

  6. JDBC入门案例

    什么是JDBC? JDBC的全称是Java数据库连接(Java Database Connectivity),它是一套用于执行SQL语句的Java API. 作为一个Web开发人员来说,JDBC操作是 ...

  7. new操作符实现过程

    var obj = new Object(); //创建新对象 一. new是干嘛的? new操作符用来生成一个新的对象, 它后面必须跟上一个函数(否则, 会抛出TypeError异常), 这个函数就 ...

  8. python内置模块大全 processon

    https://www.processon.com/view/link/5b4ee15be4b0edb750de96ac#map

  9. 新一代互联网传输协议QUIC浅析

    QUIC(Quick UDP Internet Connection)是谷歌制定的一种互联网传输层协议,它基于UDP传输层协议,同时兼具TCP.TLS.HTTP/2等协议的可靠性与安全性,可以有效减少 ...

  10. 【转载】【技巧总结】PyCharm怎么克隆github上开源的项目

    PyCharm怎么clone github上开源的项目 一.先要确保PyCharm正确的配置了Git   如果你已经在PyCharm中配置好了Git,可以跳过此步骤,直接看下一步.   那么怎么在Py ...