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. IOS下的 click 点击失效

    当委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. demo: & ...

  2. Linux 文本处理三剑客之grep

    文本处理都要使用正则表达式,正则表达式有: 基本正则表达式:grep或者egrep -G 扩展正则表达式:egreo或者grep -E Linux 文本处理三剑客: sed:stream editor ...

  3. [jnhs]id字段修改错误导致hibernate hql查询整表只返回第一条数据

    调试发现,查询到的就是一条数据 hql语句执行结果 Hibernate: select ballmodel0_.ball_id as ball_id1_1_, ballmodel0_.color as ...

  4. Ubuntu 12.04 安装 IQQ

    1. 安装 IQQ 首先应安装jdk包 2. 百度网盘下载: http://pan.baidu.com/share/home?uk=3071047022 3. 运行 (1) Linux用户给IQQ-1 ...

  5. SpringBoot web获取请求数据【转】

    SpringBoot web获取请求数据 一个网站最基本的功能就是匹配请求,获取请求数据,处理请求(业务处理),请求响应,我们今天来看SpringBoot中怎么获取请求数据. 文章包含的内容如下: 获 ...

  6. 编码之Base64编码

    Base64编码 是一种基于 64 个可打印字符来表示二进制数据的方法.目前 Base64 已经成为网络上常见的传输 8 位二进制字节代码的编码方式之一. 为什么会有 Base64 编码呢?因为有些网 ...

  7. MySQL学习-- UNION与UNION ALL

    UNION用于把来自许多SELECT语句的结果组合到一个结果集合中,也叫联合查询. ? 1 2 3 4 5 SELECT ... UNION [ALL | DISTINCT] SELECT ... [ ...

  8. DirectX11笔记(六)--Direct3D渲染2--VERTEX BUFFER

    原文:DirectX11笔记(六)--Direct3D渲染2--VERTEX BUFFER 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u0103 ...

  9. golang中包的初始化

    1.当一个go源程序被初始化时,首先去初始化所依赖的其他包,然后初始化该go源码文件的全局变量的初始化和执行初始化函数,其中该包所有的全局变量初始化在前,该包的初始化函数int在后.当所有包的初始化函 ...

  10. MaxCompute 助力衣二三构建智能化运营工具

    摘要:本文由衣二三CTO程异丁为大家讲解了如何基于MaxCompute构建智能化运营工具.衣二三作为亚洲最大的共享时装平台,MaxCompute是如何帮助它解决数据提取速度慢.数据口径差异等问题呢?程 ...