目录
jQuery简介
jQuery是JavaScript的一个库，目的是为了简化JavaScript的代码量，把JS中的DOM操作进行了封装，如果举个例子的话，就像是上楼一样，你可以通过爬楼梯（DOM），也可以坐电梯（jQuery）
jQuery库的引用
官网下载jQuery
在这里介绍一下jQuery的官网下载Download jQuery | jQuery
这两个文件就是jQuery的源码，第一个用于导入我们的程序中，第二个用于我们程序员的阅读
导入我们程序的形式是，在我们的程序的文件夹下新建一个.js文件，这里以jquery.min.js名为例
当我们把文件建好并把官网上的jQuery复制过来之后，需要在源文件中声明一下
<script src="jquery.min.js"></script>
现在就可以直接调用jQuery中的一些封装好的函数了
jQuery入门
在使用jQuery库中的函数时，都是以jQuery开头的，jQuery，但是呢，jQuery写起来太麻烦了，就出现了一个别名，也就是$
这里进行一个代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery的基本使用</title>
<script src="jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<script>
//用$()开始，不管jQuery代码写在HTML后面还是前面都能执行
//
$(function () {
$('div').hide();//这里是隐藏div的意思
});
</script>
</body>
</html>有时候一些DOM对象jQuery没有给我们进行封装，所以需要我们进行二者的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video src="#"></video>
<script>
//jQuery对象中的方法只是DOM中的一些常用方法，jQuery对其进行了封装，方便使用
//DOM转jQuery
var vid = document.querySelector('video');
$(vid).hide();
//有时候jQuery中的方法不够用，需jQuery转DOM,jQuery返回的是一个伪数组
$('video')[0].play();//这里就是DOM对象了，可以调用DOM中的方法
$('video').get(0).play();//这是另一种方法
</script>
</body>
</html>
jQuery常用的API（重要）
jQuery选择器
jQuery基础选择器
$("#id") ID选择器，用于获取指定ID的元素
$("*") 全选选择器，用于匹配所有元素
$(".class") 类选择器，用于获取同一类class的元素
$("div") 标签选择器，用于获取多个元素
$("ul>li") 子代选择器，用于获取儿子层的元素，这里只是获得儿子的，不会获得孙子的
$("ul li") 后代选择器，用于获取ul下的所有li元素，包括孙子的
jQuery隐式迭代
这里注意一下，jQuery中有隐式迭代，可以自动进行遍历，这里代码演示下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐式迭代</title>
<script src="jquery.min.js"></script>
</head>
<body>
<div>hello world</div>
<div>hello world</div>
<div>hello world</div>
<script>
$("div").css("background", "green");//这里把每个div都添加了背景颜色
</script>
</body>
</html>jQuery筛选选择器
$("li:first") 获取第一个li元素
$("li:last") 获取最后一个li元素
$("li:eq(2)") 获取到的li元素中，选择索引号为2的元素
$("li:odd") 获取到的li元素中，选择索引号为奇数的元素
$("li:even") 获取到的li元素中，选择索引号为偶数的元素
jQuery筛选方法
$("li").parent() 查找父级
$("ul").children("li") 查找儿子级，这里不包含孙子
$("ul").find("li") 后代选择器，包含孙子
$(".first").siblings("li") 查找兄弟节点，不包括自己本身
$(".first").nextAll() 查找当前元素之后所有的同辈元素
$(".last").prevAll() 查找当前元素之前所有的同辈元素
$("div").hasClass("protected") 检查当前的元素是否含有某个特定的类，如果有返回true
$("li").eq(2) 获取到的li元素中，选择索引号为2的元素
jQuery样式操作
操作css方法
基本语法以div为例，这里更改一个样式
$("div").css("width", "300px");//这里的px可以省略
改多个样式
$("div").css({
width: 400,
height: 400,
backgroundColor: "red"
});
设置样式方法
定义一个类current
.current {
background-color: red;
}
$("div").addClass("current"); 添加类，这里的current就不用加.了
$("div").removeClass("current"); 删除类
$("div").toggleClass("current"); 切换类，可以添加类和删除类
jQuery效果
显示隐藏
show([speed],[easing],[fn]) 显示函数，这里的[]指的是该参数可有可无
speed：参数是速度的意思，分为slow，normal，fast，或者是填毫秒值
easing：用来指定切换效果，默认是swing，可用参数linear
fn：是回调函数，在动画完成时执行的函数，每个元素执行一次
hide([speed],[easing],[fn]) 隐藏函数，参数同上
toggle() ([speed],[easing],[fn]) 切换函数，参数同上
滑动
slideDown([speed],[easing],[fn]) 下滑函数，参数同上
slideUp([speed],[easing],[fn]) 上滑函数，参数同上
slideToggle([speed],[easing],[fn]) 切换函数，参数同上
stop() 停止动画排队，当我们切换的非常快的时候，就需要停止动画排队
淡入淡出
fadeIn([speed],[easing],[fn]) 淡入函数，参数同上
fadeOut() ([speed],[easing],[fn]) 淡出函数，参数同上
fadeToggle([speed],[easing],[fn]) 淡入淡出切换函数，参数同上
fadeTo(speed,opacity,,[easing],[fn]) 修改透明度函数，opacity透明度必须写，取值0~1之间，speed也要必须写
自定义动画
animate(params,[speed],[]easing),[fn]) params是想要更改的样式属性，以对象形式传递，必须写，其他可以省略
举例：以左边500像素为例
$("div").animate({
left: 500
});
jQuery属性操作
$("a").prop("属性") 获取属性,设置元素的固有属性
$("a").prop("属性"，"属性值") 设置属性
$("div").attr("index") 获取自定义属性（这里假设自定义了一个index属性）
$("div").attr("index"，2) 设置自定义属性
jQuery文本属性值
$("div").html() 获取元素内容
$("div").html("123") 设置元素文本内容
$("div").text() 获取元素文本内容
$("div").text("123") 设置元素文本内容
$("input").val() 获取表单值
$("input").val("123") 设置表单值
jQuery元素操作
遍历元素
$("div").each(function(index,domEle){}) index是每个元素的索引号，demEle是每个DOM元素对象
$.each($("div"), function(i,ele){}) index是每个元素的索引号，ele遍历内容
创建、添加、删除元素
var li = $("<li>hello world<li>")
$("ul").append(li) 内部添加并且放到内容的最后面
$("ul").prepend(li) 内部添加并且放到内容的最前面
var div = $("<div>hello world!!!!<div>")
$(".test").after(div) 外部添加到前面 //这里默认在HTML中已存在一个div标签，并且它的class属性是test
$(".test").before(div) 外部添加到前面
$("ul").remove() 可以删除匹配的元素，也就是把ul及其孩子都删除
$("ul").empty() 可以删除匹配元素里的子节点，也就是孩子
$("ul").html("") 可以删除匹配元素里的子节点，也就是孩子
jQuery尺寸、位置操作
jQuery尺寸
$("div").width() 得到匹配元素的宽度，高度只需把width改成height
$("div").width(300) 设置匹配元素的宽度，高度同上
$("div").innerWidth() 得到匹配元素的宽度+padding值，高度同上
$("div").outerWidth() 得到匹配元素的宽度+padding值+border值，高度同上
$("div").outerWidth(true) 得到匹配元素的宽度+padding值+border值+margin值，高度同上
jQuery位置
$(".son").offset()获取距离文档的位置，返回的是一个对象 //这里默认有一个盒子的class属性是son，并且他有一个父盒子
$(".son").offset().left 获取距离文档左侧的位置
$(".son").offset({left: 300}) 设置举例文档左侧的位置
$(".son").position() 获取距离带有定位父级位置
jQuery事件
jQuery事件注册
常见的事件有mouseover mouseout blur focus change keydown keyup resize scroll
$("div").click(function(){}) 这里是给div注册了一个点击事件
jQuery事件处理
on绑定一个或多个事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
$("div").on({
mounseover: function(){}
click: function(){}
}) 该方法可以绑定多个事件
$("div").on("mouseover mouseleave", function(){}) 该方法也可以绑定多个事件
on实现事件委托
$("ul li").click() 这是之前的方法，来进行li上的事件绑定
$("ul").on("click","li",function(){}) 这是事件委托的方式绑定，其中事件是绑定在了ul上，而触发是li
on动态创建元素绑定事件
$("ol").on("click", "li", function(){})
var li = $("<li>hello world</li>")
$("ol").append(li)
经过上面的三个操作，可以动态创建一个绑定事件，在之前不用on的时候是不能这样动态创建
off解绑事件
$("div").off() 这里是解除了div上的所有事件
$("div").off("click") 解除div身上的点击事件
$("ul").off("click", "li") 解除事件委托
$("p").one("click", function(){}) 这里是绑定一个事件，但是只能触发一次
trigger自动触发事件
$("div").click() 会触发事件的默认行为
$("div").trgger("click") 会触发事件的默认行为
$("div").triggerHandler("click") 该事件不会触发默认行为，就像input标签，默认会有光标闪动，但该事件不会触发
jQuery事件对象
$("div").on("click", function(event){}) 这里的event就是事件对象
event对象里有一个方法可以阻止事件冒泡，event.stopPropagation()
扫一扫
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
