1 什么是 jQuery

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

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

关于jQuery的相关资料：

2  jQuery 的两大特点

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

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

3  使用 jQuery 的基本步骤

（1）引包

（2）入口函数

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

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

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>引入jquery</title>

 </head>

 <body>

 <script src="jquery-3.3.1.min.js"></script>

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

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

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

 <script>

     console.log($('#app'));

     console.log($('.box'));

     console.log($('div'));

     $('div').css({

           'width': '200px',

             'height': '200px',

             "background-color":'red',

             'margin-top':'20px'

 })

 </script>

 </body>

 </html>

4 入口函数

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

        //原生 js 的入口函数。页面上所有内容加载完毕，才执行。

        //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。

       window.onload = function () {

           alert(1);

       }

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

写法一：

 //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。

       $(document).ready(function () {

           alert(1);

       })

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

 //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。

       $(function () {

           alert(1);

       });

写法三：

  //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。

       $(window).ready(function () {

           alert(1);

       })

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 获取这些元素节点的方式是：

    var myBox = document.getElementById("app");           //通过 id 获取单个元素

    var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组

    var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

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

   //获取的是数组，里面包含着原生 JS 中的DOM对象。

 　　console.log($('#app'));

 　　console.log($('.box'));

 　　console.log($('div'));

二者相互转换

1、 DOM 对象 转为 jQuery对象：

$(js对象);

2、jQuery对象 转为 DOM 对象：

  jquery对象[index];      //方式1（推荐）

  jquery对象.get(index);  //方式2

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

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

$('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. Codeforces 222B 数组行列交换操作

    /*做完这题发现自己好水,太伤人了.... 不过还是学到一些,如果直接暴力模拟的话肯定是TLM.. 所以要用虚拟数组来分别保存当前数组的每行没列在初始数组中的位置...*/ #include<c ...

  2. org.hibernate.service.UnknownServiceException: Unknown service requested [org.hibernate.engine.jdbc.connections.spi.ConnectionProvider]

    蜜汁问题? 完全不知道怎么解决啊

  3. POJ1991 NOI1999棋盘分割

    棋盘分割 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 15581   Accepted: 5534 Description ...

  4. SPOJ GSS5

    GSS5 - Can you answer these queries V #tree You are given a sequence A[1], A[2], ..., A[N] . ( |A[i] ...

  5. DOM 创建元素 删除元素（结点）

    创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <script> var para=document. ...

  6. Html5知识点以及兼容性

    什么的HTNL5? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供的 ...

  7. webpack学习之—— Configuration(配置)

    你可能已经注意到,很少有 webpack 配置看起来很完全相同.这是因为 webpack 的配置文件,是导出一个对象的 JavaScript 文件.此对象,由 webpack 根据对象定义的属性进行解 ...

  8. 由一道面试题引起的arguments的思考

    写一个按照下面方式调用都能正常工作的 sum 方法 console.log(sum(2,3)); // Outputs 5 console.log(sum(2)(3)); // Outputs 5从这 ...

  9. thinkphp---display与fetch区别

    区别: ① display方法直接输出模板文件渲染后的内容,fetch方法是返回模板文件渲染后的内容 ② 有时候我们不想直接输出模板内容,而是希望对内容再进行一些处理后输出, 就可以使用fetch方法 ...

  10. Permutations II 去掉重复的全排列

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...