1、为什么要使用jQuery

（1）什么是jQuery

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

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

关于jQuery的相关资料：

（2）jQuery的第一个代码

使用原生js来实现下面代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div{

            width: 100px;

            height: 100px;

            background-color: green;

            margin-top: 20px;

            display: none;

        }

    </style>

    <script type="text/javascript">

        window.onload = function(){

            let oBtn = document.getElementsByTagName('button')[0];

            let divArr = document.getElementsByTagName('div');

            oBtn.onclick = function () {

                for (let i = 0; i < divArr.length; i++) {

                    divArr[i].style.display = "block";

                    divArr[i].innerHTML = "赵云";

                }

            }

        }

    </script>

</head>

<body>

<button>操作</button>

<div></div>

<div></div>

<div></div>

</body>

</html>

如果使用jQuery来写，保持其他代码不变，<script>部分的代码修改为：（需要导入jQuery）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div{

            width: 100px;

            height: 100px;

            background-color: green;

            margin-top: 20px;

            display: none;

        }

    </style>

</head>

<body>

<button>操作</button>

<div></div>

<div></div>

<div></div>

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

<script type="text/javascript">

    $(document).ready(function(){

        // 获取dom元素

        let oBtn = $('button'); //根据标签名获取元素

        let oDiv = $('div'); //根据标签名获取元素

        oBtn.click(function(){

            oDiv.show(1000);//显示盒子

            oDiv.html('赵云'); // 设置内容

        });//事件是通过方法绑定的

    })

</script>

</body>

</html>

（3）：jQuery的两大特点

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

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

2、jQuery的使用

（1）jQuery的基本使用：

a、导包    b、入口函数    （3）：功能实现代码（事件处理）

注意：导包的代码一定要放在js代码的最上面

（2）jQuery代码会有两个版本，一个是.min.js，一个是.js文件。

他们的区别是：

  • 第一个是未压缩版，第二个是压缩版。

  • 平时开发过程中，可以使用任意一个版本；但是，项目上线的时候，推荐使用压缩版。

3、jQuery的入口函数和$符号

（1）入口函数（重要）

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

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

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

window.onload = function () {

     alert(1);

}

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

写法1：

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

       $(document).ready(function () {

           alert(1);

       })

写法2：

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

       $(function () {

           alert(1);

       });

写法3：

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

       $(window).ready(function () {

           alert(1);

       })

注意：

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

区别一：书写个数不同：

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

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

区别二：执行时机不同：

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

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

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

（2）jQuery的$符号

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：

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

<script>

    console.log($);

    console.log(jQuery);

    console.log($===jQuery);

</script>

执行效果：

从打印结果可以看出，$代表的就是jQuery。

4、js中的DOM对象和jQuery对象比较

（1）二者区别

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

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

<div></div>

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

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

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

<div></div

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

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

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

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

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

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

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

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

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

设置当前4个div的样式：

    $('div').css({

        'width': '200px',

        'height': '200px',

        "background-color": 'red',

        'margin-top': '20px'

    })

由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。

总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

5、DOM对象和jQuery对象互相转换

（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';

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

6、一个实例

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

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

    <script>

        //入口函数

        $(function () {

            let jqLi = $("li");

            for (let i = 0; i < jqLi.length; i++) {

                if (i % 2 === 0) {

                    //jquery对象，转换成了js对象

                    jqLi[i].style.backgroundColor = "pink";

                } else {

                    jqLi[i].style.backgroundColor = "yellow";

                }

            }

        });

    </script>

</head>

<body>

<ul>

    <li>felix</li>

    <li>felix</li>

    <li>felix</li>

    <li>felix</li>

    <li>felix</li>

    <li>felix</li>

</ul>

</body>

</html>

效果图：

jQuery系列（一）：jQuery介绍的更多相关文章

  1. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  2. Jquery 系列（2） 选择元素

    Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...

  3. jQuery UI Datepicker使用介绍

    本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...

  4. Jquery系列教程

    最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...

  5. jQuery.fn和jQuery.prototype jquery.extend() jquery.fn.extend()区别介绍

    这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: (function( win ...

  6. jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍

    jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍 这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企 ...

  7. jquery系列教程2-style样式操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  8. jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  9. jquery系列教程6-ajax的应用全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

随机推荐

  1. 微信小程序 基本介绍及组件

    创建项目 微信开发工具深入介绍 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 基本项目目录 1. 配置 ...

  2. python学习-1 编程语言的介绍

    1.开发语言: 高级语言:Java.python.C#.PHP.Go.ruby.C++等等 低级语言:C.汇编语言 2.机器码和字节码 高级语言 ====>字节码 低级语言===>机器码 ...

  3. QQ浏览器、搜狗浏览器等兼容模式下，Asp.NetCore下，Cookie、Session失效问题

    原文:QQ浏览器.搜狗浏览器等兼容模式下,Asp.NetCore下,Cookie.Session失效问题 这些狗日的浏览器在兼容模式下,保存Cookie会失败,是因为SameSiteMode默认为La ...

  4. C++性能榨汁机之虚函数的开销

    C++性能榨汁机之虚函数的开销 来源  http://irootlee.com/juicer_vtable/ 虚函数的实现 虽然C++标准并没有规定编译器实现虚函数的方式,但是大部分编译器均是采用了虚 ...

  5. Django rest-framework框架-解析器

    解析器: 开始: django: request.POST/ request.body 满足一下两个要求POST中才有值 1. 如果请求头中的 Content-Type: application/x- ...

  6. Docker Registry搭建

    一.前言 Docker官方镜像仓库 访问速度很慢,Docker Registry允许搭建我们自己的镜像仓库,为实现镜像拉取.推送提供便利. 二.安装与启动 1.创建目录 mkdir /usr/loca ...

  7. 基于Groovy编写Ngrinder脚本常用方法

    1.生成随机字符串(import org.apache.commons.lang.RandomStringUtils) 数字:RandomStringUtils.randomNumeric(lengt ...

  8. liunx pyinotify的安装和使用

    介绍此功能是检测目录的操作的事件 1.安装 在百度云盘下载或者在gits上下载安装包 链接:https://pan.baidu.com/s/1Lqt872YEgEo_bNPEnEJMaw 提取码:bj ...

  9. SAP云平台里Global Account和Sub Account的关系

    在Cloud Foundry环境里,一个Global Account或者Trial Account能够创建多个SubAccount,如图: 创建好的新的subaccount: 一旦subaccount ...

  10. Python3 GUI:PyQt5环境搭建

    配置镜像源 最近用Python内置的Thinter写了个小工具,发现界面略朴素,于是决定转向PyQt5.先配置镜像源,否则只能龟速下载. C:\Users\你的用户名下新建目录pip 在pip目录下新 ...