关键词：
1.jQuery概诉
1.1 javaScript库
仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以了
javaScript库：即library,是一个封装好的特定的集合（方法和函数）。
从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate,hide,show比如获取元素
简单理解：库就是一个JS文件，对原生JS代码进行封装，高效使用
常见的javaScript库
-
jQuery
-
prototype
-
YUI
-
Dojo
-
Ext js
-
移动端的zepto
1.2 jQuery的概念
jQuery 是一个快速、简介的javaScript库，宗旨是"write Less,Do More" ,倡导写更少的代码做更多的事情
j 是 javaScript ,Q 是 Query查询，意思就是查询js，把js中的DOM操作做了封装，可以快速的查询使用里面的功能
优化了DOM操作、事件处理、动画设计、Ajax交互
学习jQ的本质就是学习调用这些函数（方法），提高开发效率
1.3 jQuery 的优点
优点
-
轻量级。核心文件才几十kb,不会影响页面加载速度
-
跨浏览器兼容，基本兼容主流浏览器
-
链式编程，隐式迭代
-
对事件、样式、动画支持、大大简化DOM操作
-
支持插件扩展开发，如：树形菜单、日期控件、轮播图
-
免费、开源
2.jQ的基本使用
2.1 jQuery的下载
1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本
官网地址： https://jquery.com/
各个版本的下载：https://code.jquery.com/
2.2 jQuery的使用步骤
-
引入jQuery文件
-
使用即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div width: 200px; height: 200px; background-color: pink; </style> </head> <body> <div></div> <script> $(‘div‘).hide() </script> </body> </html>
2.3 jQuery的入口函数
两种写法
$(document).ready(function()
...// DOM加载完成的入口
)
$(function()
...// DOM加载完成的入口
)
-
等着DOM结构渲染完毕即可执行内部代码，不用等待外部资源加载完成加载完成，jQuery帮我们完成了封装
-
相当于原生js中的DOMcontentLoaded
-
不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码
-
更推荐使用第一种方式
2.4 jQuery的顶级对象$
-
$是jQuery的别称，在代码中可以使用jQuery代替$,但一般为了方便，通常都直接使用$
-
$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用 jQuery 的方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div width: 200px; height: 200px; background-color: pink; </style> </head> <body> <div></div> <script> // 1.$是jQuery的别称 $(function() alert(‘11‘) ) jQuery(function() alert(‘22‘) ) // 2.$是jQuery的顶级对象，相当于原生javaScript中的window </script> </body>
2.5 jquery对象和DOM对象
-
原生JS获取来的对象就是DOM对象
-
jQuery方法获取的元素就是jQuery对象
-
jQuery对象本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）
-
jquery 对象只能使用jquery方法，DOM对象则使用 原生js属性和方法
这两个可以互相转换，因为原生js比jq更大，原生有的属性jq没有，想要使用这些属性和方法需要把jq对象转换DOM对象才能使用
DOM对转换jq对象
$(DOM对象)
jq对象转换为DOM对象
$(‘‘)[index]
$(‘‘).get(index)
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<video src="mov.mp4" muted></video>
<script>
// 1. DOM对象转换为jquery对象
// （1）直接获取视频，得到jq对象
$(‘video‘)
// (2) 使用原生js 获取过来DOM对象
var myvideo = document.querySelector(‘video‘)
// $(myvideo).play() jq 没有play方法
// myvideo.play()
// 2.jq对象转换为DOM对象
$(‘video‘)[0].play()
$(‘video‘).get(0).play()
</script>
</body>
</html>01jquery入门(代码片段)
jQuery是什么？jQuery是一个快速、小巧且功能丰富的JavaScript库。 jQuery下载及引入下载地址：www.jquery.com //根据需求可下载压缩版 或者 未压缩版。引入：在head里面 或者 body里面，<scripttype="text/javascript"... 查看详情
jquery入门(代码片段)
JQuery入门Jquerycdn加速快速入门1.先引入依赖2.使用script标签引入3.编写jquery代码VSjavaScript代码重点1：$():调用方法$()---->叫做jquery的核心函数,为$()方法传入一个function()作为参数，就相当于window.οnlοad=function()写代码重... 查看详情
jquery基础入门(代码片段)
Jquery入门支持链式操作$(‘.c1‘).addClass(‘c2‘).text(‘xxx‘).addClass(‘xxx‘).css(‘color‘:‘white‘);jquery引入方式外部网址引入<!--<scriptsrc="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script& 查看详情
jquery快速入门(代码片段)
知识内容：1.jQuery大致了解2.jQuery基础语法3.jQuery事件4.jQuery动画效果5.jQuery补充 参考：http://www.cnblogs.com/liwenzhou/p/8178806.htmljQuery官网：https://jquery.com/jQuery中文文档：http://jquery.cuishifeng.cn/ &nbs 查看详情
jquery入门(代码片段)
jQuery简介jQuery是一个快速、简洁的JavaScript框架jQuery设计的宗旨是“WriteLess，DoMore”，即倡导写更少的代码，做更多的事情它封装JavaScript常用的功能代码，优化HTML文档操作、事件处理、动画设计和Ajax交互导入方式本地文件<scri... 查看详情
jquery入门(代码片段)
什么是jQuery?jQuery是一个快速、简洁的JavaScript框架。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery设计的宗旨是“writeLess，DoMore”，即倡导写更少的代... 查看详情
jquery快速入门(代码片段)
JQuery快速入门1.JQuery简介JQuery是一个JS库，别人使用JS写了很多功能给我们用，主要集中在以下几点：1.简化找标签，改样式等操作语法2.增加了动画的操作方法3.解决了相关属性的兼容性写法2.JQuery语法1.找标签$(‘#box‘)id选择器$(... 查看详情
jquery快速入门(代码片段)
jQuery简介1.jQuery介绍1.为什么用jQuery?简单、开发效率高、不用浏览器的差异化2.jQuery是什么？前端的一个类库，插件。3.使用1.下载jQueryhttp://jquery.com/download/2.导入1.script导入本地的文件2.使用CDN3.按照jQuery的语法使用就可以啦注意... 查看详情
jquery快速入门(代码片段)
jQuery介绍jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Writeless,domore.“jQuery的优势... 查看详情
jquery基础入门(代码片段)
一、什么是jQuery Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。 二、怎么用jQuery jquery-1.8.3.js：一... 查看详情
jquery快速入门(代码片段)
jQueryjQuery介绍jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Writeless,domore.“jQuer... 查看详情
jquery快速入门(代码片段)
转自 https://www.cnblogs.com/liwenzhou/p/8178806.html为什么要用jQuery做同样的事,jQuery写起来极其简练 jQuery相当于JavaScript的第三方模块(原生的DOM是基础) jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选... 查看详情
jquery基础入门(代码片段)
目录一、jquery介绍和引用二、jquery选择器1、jquery基本的选择器2、选择同胞和父辈元素3、过滤选择器4、获取元素的索引值三、jquery操作样式1、获取元素样式2、修改样式3、添加或移除class属性四、绑定click事件1、可元素绑定click... 查看详情
jquery快速入门(代码片段)
JQ介绍 jQuery是一个轻量级的,兼容多浏览器的JavaScript库(模块). jQuery使用户能够更方便地处理HTMLDocument,Events,实现动画效果,方 便进行Ajax交互,能够极大地简化JavaScript编程.他的宗旨是:‘Writeless,do more.‘ ... 查看详情
jquery快速入门(代码片段)
jQueryjQuery介绍jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Writeless,domore.“jQuery的优势一... 查看详情
jquery入门(代码片段)
DOM对象&jQuery对象什么是DOM对象？DOM对象简单来说，就是javascript处理HTML文档时，把整个HTML文档当作document对象，把HTML中的每一个节点当作DOM对象来看待。 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><titl... 查看详情
python入门-01(代码片段)
正文在下面，先打个广告：Python入门（一）--HelloWordHelloWord程序代码：print('HelloWord!')print('1+2=',1+2)a=5*6print(a)输出：HelloWord!1+2=330输 查看详情
python入门-01(代码片段)
正文在下面，先打个广告：Python入门（一）--HelloWordHelloWord程序代码：print('HelloWord!')print('1+2=',1+2)a=5*6print(a)输出：HelloWord!1+2=330输 查看详情