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. django中的缓存 跨域问题(同源策略)

    django缓存机制 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的用户访问量很大的时候,每一次的的后台操作 ...

  2. hdu 3500 还是搜索

    这道题目由于每走一步的时候毛毛球是可以变换的 换言之 主体不唯一 所以这里搜索的设计有变化 再就是几个回溯的过程要注意.,.  小心使得万年船 #include <iostream> #i ...

  3. asp.net core In Docker(Image)

    原文地址:https://www.cnblogs.com/stulzq/p/9059108.html 大家应该知道目前.NET Core(2.0)还是没有System.Drawing程序集,如果我们要 ...

  4. C++通用框架和库

    C++通用框架和库 来源 https://www.cnblogs.com/skyus/articles/8524408.html 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应 ...

  5. C++ STL 之 string

    #include <iostream> #include <string> using namespace std; // 初始化 void test01() { string ...

  6. element-ui el-cascader级联选择器设置指定层级不能选中

    有时候用element-ui el-cascader级联选择器添加分类时会遇到最多添加几级的限定.看了文档,只要给需要禁止选择的选项添加disabled属性就可以.但是使用一层一层循环遍历数据感觉很麻 ...

  7. 2.3 使用 dom4j 对 xml文件进行 dom 解析

    // 使用dom4j对XML文档进行解析 CRUD public class Demo1 { //读取XML文档中第二本书的书名 <书名>javaWEB</书名> @Test ...

  8. go语言入门(7)面向对象编程

    1,概述     对于面向对象编程的支持Go 语言设计得非常简洁而优雅.因为, Go语言并没有沿袭传统面向对象编程中的诸多概念,比如继承(不支持继承,尽管匿名字段的内存布局和行为类似继承,但它并不是继 ...

  9. Redis安装及前后置启动

    Redis简单介绍及在Linux上安装(这里测试用是版本:redis-3.0.0.tar.gz) 一:什么是Redis? redis就是C语言编写的一个高性能的键值存储(key-value)的非关系型 ...

  10. web开发:jquery初级

    一.JQ入门 二.引入JQ 三.页面加载 四.分析JQ源码流程 五.JQ操作 六.c菜单栏案例 一.JQ入门 what is jQuery ???1.jQuery是对原生JavaScript二次封装的 ...