前端 ----jQuery的介绍
01-jQuery的介绍
1.为什么要使用jQuery
在用js写代码时，会遇到一些问题：
window.onload 事件有事件覆盖的问题，因此只能写一个事件。
代码容错性差。
浏览器兼容性问题。
书写很繁琐，代码量多。
代码很乱，各个页面到处都是。
动画效果很难实现。
jQuery的出现，可以解决以上问题。
什么是 jQuery
jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。
js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。
关于jQuery的相关资料：
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/
学习jQuery，主要是学什么
初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功API。
这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
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>
<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>
jQuery 的两大特点
链式编程：比如
.show()和.html()可以连写成.show().html()。隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。
jQuery 的使用
使用 jQuery 的基本步骤
（1）引包
（2）入口函数
（3）功能实现代码（事件处理）
如图：
主要：导包的代码一定要放在js代码的最上面。
jQuery 的版本
jQuery 有两个大版本：
1.x版本：最新版为 v1.11.3。
2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）。
3.x版本。
下载jQuery包之后里面会有两个文件，一个是jquery-3.3.1.js，一个是jquery-3.3.1.min.js
它们的区别是：
第一个是未压缩版，第二个是压缩版。
平时开发过程中，可以使用任意一个版本；但是，项目上线的时候，推荐使用压缩版。
jQuery 的入口函数和 $ 符号
入口函数（重要）
原生 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了，不用等到所有的外部资源都加载完成。
文档加载的顺序：从上往下，边解析边执行。
jQuery的$符号
jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。
jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：
<script src="jquery-3.3.1.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 === $。
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'
设置当前4个div的样式：
$('div').css({
'width': '200px',
'height': '200px',
"background-color":'red',
'margin-top':'20px'
})
由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。
总结：jQuery 就是把 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';
总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。
举例：
隔行换色
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
//入口函数
jQuery(function () {
var jqLi = $("li");
for (var 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>小马哥</li>
<li>小马哥</li>
<li>小马哥</li>
<li>小马哥</li>
<li>小马哥</li>
<li>小马哥</li>
</ul>
</body>
</html>
效果如下：
前端 ----jQuery的介绍的更多相关文章
- python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- jQuery的介绍和选择器详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. jQuery 的介绍 引入 jQuery 的原因 在用 js 写代码时, ...
- 4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍
4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍 天涯明月笙 关注 2018.02.20 19:23* 字数 762 阅读 135 ...
- Vue.js教程 1.前端框架学习介绍
Vue.js教程 1.前端框架学习介绍 什么是Vue.js 为什么要学习流行框架 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站, ...
- （二）Jquery Mobile介绍以及Jquery Mobile页面与对话框
Jquery Mobile介绍以及Jquery Mobile页面与对话框 一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...
- Sublime Text前端开发工具介绍
Sublime Text前端开发工具介绍.. Sublime Text这款前端开发工具中的非常优秀的特性进行介绍 ------------ sublime text 3 3114 注册码 —– BEG ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- Web前端JQuery面试题（三）
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
- Web前端JQuery面试题（二）
Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...
随机推荐
- [Android] Android 使用 Greendao 操作 db sqlite(1)-- 直接在MainActivity中调用
继续接上文: Android 使用 Greendao 操作 db sqlite 布局文件: activity_test_green.xml <?xml version="1.0&quo ...
- 安装Blend+SketchFlow Preview for Visual Studio 2012出现错误
安装Blend+SketchFlow Preview for Visual Studio 2012出现如下错误: 首先是这个网址:http://msdn.microsoft.com/en-us/exp ...
- Android手机有的不显示Toast
解决办法一: 在手机中把该app的通知打开 可以直接设置通知权限:<uses-permission android:name="android.permission.RECEIVE_B ...
- CountDownLatch学习
看了几篇博客,说用CountDownLatch实现一个先执行完子线程,再执行主线程的例子.因此写一篇博客总结一下. 一.CountDownLatch了解 1.CountDownLatch继承了Abst ...
- -如何存储并定时更新access_token
来源:https://blog.csdn.net/sct_t/article/details/53002611 我们知道请求access_Token会返回这样一个json,包括access_token ...
- Tomcat多应用启动报错:org.apache.catalina.loader.WebappClassLoaderBase.checkStateForResourceLoading Illegal access: this web application instance has been stopped already. Could not load [].
Loaded org.apache.tomcat.util.net.NioBlockingSelector$BlockPoller$RunnableRemove from .M22/lib/tomca ...
- jq的dom操作
代码可以在该网址测试:www.w3school.com.cn/tiy/t.asp?f=jquery_manipulation_detach_move attr 使用函数来设置属性/值:函数参数为选择器 ...
- hibernate(一) 第一个hibernate工程
序言 其实hibernate已经学过一遍,不过因为太糊弄,急于求成,导致现在需要重新来学习,通过亲自去敲每一行代码,来去理解每一个知识点. ---WH 一.什么是Hibernate? 轻量级JavaE ...
- Django学习手册 - 连接mysql数据库
版本问题: 首先确认django.msql.python版本是统一支持 当前所用的版本信息: Django setting.py 配置 替换之前的DATABASES 配置: DATABASES = { ...
- 解决安装YouCompleteMe与Vim版本不兼容问题
用vim 7.4.4版本装YouCompleMe的时候提示这样的信息: YouCompleteMe unavailable: requires Vim 7.4.1578+.明明版本比它要求的还高,居然 ...