当前位置：移动技术网 > IT编程>开发语言>Jquery > Web前端基础(14):jQuery基础(一)

Web前端基础(14):jQuery基础(一)

2019年11月20日 | 移动技术网IT编程 | 我要评论

1. jquery概述

1.1 为什么要使用jquery

在用js写代码时，会遇到一些问题：

window.onload 事件有事件覆盖的问题，因此只能写一个事件。

代码容错性差。

浏览器兼容性问题。

书写很繁琐，代码量多。

代码很乱，各个页面到处都是。

动画效果很难实现。

jquery的出现，可以解决以上问题。

1.2 什么是jquery

jquery是一个javascript框架。它兼容css3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。

jquery2.0及后续版本不再支持ie6/7/8浏览器

核心概念是write less，do more(写的更少，做的更多)。

1.3 jquery相关资料

关于jquery的相关资料：

官网：

官网api文档：

汉化api文档：

1.4 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(){
            var obtn = document.getelementsbytagname('button')[0];
            var divarr = document.getelementsbytagname('div');
            obtn.onclick = function () {
                        for (var 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>部分的代码修改为：（需要提前引入）

<!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.js"></script> //引入jquery
    <script type="text/javascript">
        $(document).ready(function(){
            // 获取dom元素
            var obtn = $('button'); //根据标签名获取元素
            var odiv = $('div'); //根据标签名获取元素
            obtn.click(function(){
                odiv.show(1000);//显示盒子
                odiv.html('赵云'); // 设置内容
            });//事件是通过方法绑定的
        })
    </script>
    
</body>
</html>

1.5 jquery的两大特点

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

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

2. jquery的使用

2.1 使用jquery的基本步骤

（1）引包

（2）入口函数

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

如图：

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

2.2 jquery的版本

jquery 有两个大版本：

1.x版本：最新版为 v1.11.3。

2.x版本：最新版为 v2.1.4（不再支持ie6、7、8）。

3.x版本。最新版为 v3.4.1

我使用的是老版本 v2.1.0，你们下载的是最新版本，下载jquery包之后里面会有两个文件，一个是jquery-3.4.1.js，一个是jquery-3.4.1.min.js

它们的区别是：

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

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

3. jquery的入口函数和$符号

3.1 入口函数

原生 js 的入口函数指的是：window.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了，不用等到所有的外部资源都加载完成。

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

3.2 jquery的$符号

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

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

<script src="jquery-2.1.0.js"></script>
<script>

　　console.log($);
　　console.log(jquery);
　　console.log($===jquery);

</script>

打印结果：

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

那怎么理解jquery里面的 $ 符号呢？

$ 实际上表示的是一个函数名如下：

$(); // 调用上面我们自定义的函数$

$(document）.ready(function(){}); // 调用入口函数

$(function(){}); // 调用入口函数

$(“#btnshow”) // 获取id属性为btnshow的元素

$(“div”) // 获取所有的div标签元素

如上方所示，jquery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jquery对象。

jquery这个js库，除了$ 之外，还提供了另外一个函数：jquery。jquery函数跟 $ 函数的关系：jquery === $。

4. js的dom对象和jquery对象比较

4.1 二者的区别

通过 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'));

设置当前4个div的样式：

$('div').css({
    'width': '200px',
    'height': '200px',
    "background-color":'red',
    'margin-top':'20px'
})

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

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

4.2 二者的相互转换

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

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

VScode中的react自动补全标签代码及黄色or红色警告

解决在vscode中react标签代码不提示的问题：1、作为一个刚开始的react小白，一定有vscode中标签... [阅读全文]
荐 jquery层次选择器

jquery层次选择器按照我个人的习惯，还是先放上总的内容，然后再开始一个一个攻克。常用的几种(概述)：1.派生... [阅读全文]
关于React处理input的方法和多个input共用一个方法（不用jQuery）

关于React处理input的方法和多个input共用一个方法（不用jQuery）前言：笔者目前是一家公司的前... [阅读全文]
Jquery绑定事件及动画效果

绑定事件bind（type，data，fuc）one(type,data,fuc) //只执行一次常见事件类型名... [阅读全文]
荐 jQuery文档阅读笔记自整理——1.6w字笔记

文章目录一、jQuery 基本用法1. 入口函数的写法2. jQuery 的冲突问题3. 核心函数4. 对象5.... [阅读全文]
荐 jQuery框架（四）：动画效果

文章目录1、显示、隐藏动画（1）显示（2）隐藏（3）实现点击按钮显示、隐藏盒子（4）开关式显示隐藏动画2、滑入、... [阅读全文]
jQuery操作DOM对象的方法

# jQuery操作DOM 和增删改查 - 1.html() ```js $('ul li&... [阅读全文]
jQuery的clone()方法和data()方法

# jQuery中的clone()和data()方法 - clone() ```js $('.demo').clon... [阅读全文]
jq使用jsonp实现百度搜索

项目实现：还原百度搜索功能；项目原理：利用json回调页面传参; 什么是jsonp：就是利用<script>标签的src地址，让目标页面回... [阅读全文]
5.jQuery实现简单的on()和trigger()方法

# jQuery事件 - 1.on() ```js //1.事件类型type 2.selector 3.data... [阅读全文]

网友评论


验证码：