1.什么是 JQuery ？
JQuery 是一种快速小型的功能丰富的JavaScript库,简单来说就是别人封装好的 JS 库，简单好用流行！
[网上有好多废话介绍的，自己去看，但是没什么太大用处，理论性的东西，会用才是王道😘]
2.引入 JQuery
首先从官网下载对应的 JQuery 版本，（点击这里进入JQuery官网），点击下载，如下图：
点击下载之后，然后翻到最后一行，可以下载以前的历史版本。我这事谷歌翻译的界面，正常是英文的，国外服务器，加载有点慢，我等下上传一个我用的Jquery版本，不能上传资源就当我没说，我等下试试~~
新建一个html 文件，把刚刚下载好的 JQuery 文件扔进去，
，我用的是 1.12.3的版本，初学嘛~先来个低一点的。我放在lip 的文件夹里面的。其实老师教的是 lib 文件夹，我听岔了新建的 lip 文件夹不影响啦~ min 是压缩版，跟第一个差不多啦。为了时尚一点，我学着用vscode 的！在html 这样引入 JQuery:
<script src="./lip/jquery-1.12.3.js"></script>3.JQuery 的使用
（1）可以作为选择器
$('a') 获取页面中标签名为 a 标签的所有标签
$('.box') 获取页面中所有的类名为 box 的标签对象
$('#btn') 获取页面中 id 为 btn 的标签对象 id 是唯一的，只能获取一个对象（2）注册一个点击事件
<input type="button" id="btn" value="点击">
<script src="./lip/jquery-1.12.3.js "></script>
<script>
// 获取按钮 注册点击事件 click
$('#btn').click(function() {
alert('hello world')
})
</script>
（3）注册鼠标移入事件
<input type="text" id="text1" value="鼠标放到这里">
<script src="./lip/jquery-1.12.3.js "></script>
<script>
// 获取按钮 注册事件 click
$('#text1').mouseenter(function() {
alert('现在鼠标移入到按钮当中了...')
})
</script>
（4）设置一个 或多个CSS 属性样式
一个 css 的属性：
<div class="box">设置一个 css 属性</div>
<script src="./lip/jquery-1.12.3.js"></script>
<script>
// $()选择器函数 用来获取页面中的标签和对象
// css() 可以用来设置样式 例如 width height background-color font-size color...
$('.box').css('background-color', 'red');
</script>
多个：
<input type="button" id="btn" value="设置样式">
<div class="box">这是用JQuery来设置的样式</div>
<script src="./lip/jquery-1.12.3.js"></script>
<script>
// 1.获取按钮 给按钮 注册事件
$('#btn').click(function(){
// 2. 给div设置宽 高 背景颜色
// css方法在设置多个属性的时候，要传一个对象
$('.box').css({
width:200, // 宽度
height:200, // 高度
backgroundColor:'hotpink', // 背景颜色
fontSize:30, // 字体大小
color:'blue' // 字体颜色
})
})
</script> 
（5） this()方法的使用
1、在事件处理程序当中，如果当前标签对象 和事件源相同的话，就可以使用this来代替
2、确切的说，this就表示当前正在执行事件处理程序的事件源对象
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid #ff0000;
background-color:pink;
float: left;
}
</style>
—————————————————————————————————————————————————————————————————————————————————————————
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script src="./lip/jquery-1.12.3.js"></script>
<script>
$(".box").click(function(){
// $(".box").css('backgroundColor','aqua')
//这里的.box和外面的是同一个事件源，所以可以用 this 来代替
$(this).css('backgroundColor','aqua')
// this表示当前事件源对象 也就是正在执行事件处理程序的那个标签
$(this).siblings().css("backgroundColor","pink")
// siblings 兄弟姊妹 表示其余的兄弟级标签
})
</script>
（6）链式编程
链式编程就是如果代码前面的对象是同一个的话，可以继续向后写方法。就是把 （5）的例子中的两句话写的方法改成一个句子了下面请看：
$('.box').click(function(){
$(this).css("backgroundColor","aqua").siblings().css("backgroundColor","pink")
})
（7）JQuery 的入口函数
1、如果是将代码 写在标签的后面的话，是可以不用写入口 函数的
2、如果是将js代码写在head标签内的话，则需要加入口函数
其实就是执行顺序的问题，head 里面先加载，如果不写入口函数，效果不一定显示出来，反正我是这么理解的，我觉得你也应该听懂吧~~下图的入口函数就是写了一个$(function(){}）
<script>
$(function(){
// jQuery的入口函数，会在页面中的标签都 渲染完成之后才执行
// 标签渲染完毕 图片加载完毕 其它静态资源加载
$('.box').click(function(){
$(this).css('backgroundColor','pink')
})
})
</script>（8）DOM 对象和 JQuery 对象
DOM对象：
-
使用原生js的方式获取的页面标签对象就是DOM对象
-
DOM对象只能使用原生js中的方法或是属性
-
DOM对象一定不要直接使用jQuery中的方法，会报错的
<ul>
<li>这是第1个li标签</li>
<li>这是第2个li标签</li>
<li>这是第3个li标签</li>
</ul>
<script>
var lis = document.getElementsByTagName('li'); // 根据标签名来获取三个li标签 存在了伪数组当中
console.log(lis);
lis[0].style.backgroundColor= 'pink';
lis[1].css('backgroundColor','red'); // 这个会报错 因为DOM对象 不能调用 jQuery中的API
</script>
JQuery 对象 ：
-
使用jQuery中的方法来获取的页面标签对象 就是jQuery对象，比如说：$()
-
jQuery对象只能使用jQuery中的API，css() click()
-
jQuery对象不能直接使用原生js中的属性或是方法
<ul>
<li>这是第1个li标签</li>
<li>这是第2个li标签</li>
<li>这是第3个li标签</li>
</ul>
<script src="./lip/jquery-1.12.3.js" ></script>
<script>
var $lis = $('li') // 使用jQuery的方式获取三个 li 标签 这是一个 jQuery对象
console.log($lis)
</script>
3.DOM对象与jQuery对象的互换：
1.将DOM对象转换成jQuery对象非常简单，只需要将DOM对象做为参数，传递到$()即可
var btn = document.getElementById('btn') //DOM 对象
var $btn = $(btn); //jQuery 对象2.将jQuery对象转换成DOM对象，两种方式：一个是通过索引 第二个是通过.get()
两个方法只能一个一个试哦~，我是用的第一个方法，注释第二个方法的！
<button id="btn">按钮</button>
<script src="./lip/jquery-1.12.3.js" ></script>
<script>
// 1. jQuery对象都是包装集的形式 就相当于是一个伪数组 是对DOM对象的一种包装形式
// 因此应该通过索引的方式 来获取
$('#btn')[0].onclick = function(){
alert("我是小天使~")
}
// 2. 方式二 将jQuery对象转换成DOM对象 .get()
// $('#btn').get(0).onclick = function(){
// alert("我是大天使~")
// }
</script>
（9) 入口函数的比较
-
jQuery的入口执行时机比原生JS的要早
-
jQuery的入口函数可以写多个 原生js的入口函数只能写一个
<script src="./lip/jquery-1.12.3.js" ></script>
<script>
window.onload = function(){
// 当页面中的标签渲染完毕 图片资源加载完毕 第三方资源库加载完毕
console.log("小仙女")
}
$(function(){
console.log("小可爱")
})
$(function(){
console.log("小仙子")
})
// 1. jQuery的入口执行时机比原生JS的要早
// 2. jQuery的入口函数可以写多个 原生js的入口函数只能写一个
</script>
（10）显示与隐藏
<button id="btnShow">显示</button>
<button id="btnHide">隐藏</button>
<div class="box" style="width: 100px;height: 100px;background-color: hotpink;"></div>
<script src="./lip/jquery-1.12.3.js"></script>
<script>
// 1. 单击隐藏按钮 让盒子隐藏起来
$('#btnHide').click(function(){
// hide() 隐藏的意思
$('.box').hide(2000) // width height opacity display:none
})
// 2. 单击按钮 ，让盒子显示出来
$('#btnShow').click(function(){
// js中的时间是用毫秒来显示
// 1s = 1000ms 1min = 60s 1h=60min 1d = 24h
$('.box').show(2000) // width height opacity display:none
})
</script>
未经允许，禁止转载~~今天也要加油啊❤❤❤ 请继续关注后期会更新的呀 (o゜▽゜)o☆
835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
