本文详细介绍了jQuery，一个高效、简洁的JavaScript库。jQuery的设计理念是通过封装常用功能，实现更少的代码完成更多任务。内容涵盖jQuery的导入、使用、选择器、DOM操作、事件绑定、动画效果、遍历、以及自定义扩展。此外，还展示了如何使用jQuery实现表格隔行变色的效果，以及各种动画方法的使用。jQuery允许开发者链式编程，提高代码的可读性和效率。
jQuery简介：
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
目录
1.回顾一下js中常用到的事件，在jquery中依旧可以使用,直接使用.调用即可
一.什么是框架？
框架是一组定义好的函数或者代码，让我们可以直接调用其中的函数，使我们的代码工作量变得简洁而优雅，简单来说框架就是毛坯房，当我们入住的时候只需要简单的装修一下就可以了，如果不使用框架的话，就是连盖房子都要自己一砖一瓦的完成，如果项目比较小的话还可以，如果大的话，可以想象是何场面。
二.自定义框架
1.不使用框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义js框架</title>
<!-- <script src="js/自定义框架.html"></script>-->
</head>
<body>
<div id="div1">div1....</div>
<script>
// 1. 根据id获取元素对象
var div1 = document.getElementById("div1");
// var div1 = $("div1");
//2.获取标签体内容
alert(div1.innerHTML);
</script>
</body>
</html>想要通过id获取元素就要写
var div1 = document.getElementById("div1");2.使用框架
var div1 = $("div1");js文件就是一个框架，可以通过<script src="js/自定义框架.html"></script>导入
// 自定义一个id选择器
function $(id) {
return document.getElementById(id);
}3.总结
在效果一样的前提下，使用框架可以有效地减少我们所书写的代码量，特别是一些重复性非常高的代码，使用现成的框架还可以避免自己因为不小心所写下的bug
三.JQuery框架的使用
JQuery就是别人帮我们写好的一些代码，可以供我们拿来使用
1.导入
<script src="JQuery的路径"></script>2.简单使用
入口函数
在js中定义入口函数这样子定义
<script>
window.onload=function () {
// 函数体
}
</script>在JQuery中定义入口函数这样子定义
<script>
$(
function () {
alert("hello")
}
)
</script>注意：
在js中如果定义多个入口函数，新的入口函数会把旧的覆盖掉，如果是在JQuery中定义入口函数，并不会覆盖，会依次执行入口函数
事件绑定
在js中绑定点击事件
<script>
window.onload=function () {
document.getElementById("div01").onclick=function () {
alert("hello")
}
}
</script>在JQuery中绑定点击事件
<script>
$(
function () {
$("#div01").click(
function () {
alert("JQuery")
}
)
}
)
</script>总结：在js中给元素添加事件是直接拿元素的属性给他赋值，而在JQuery中给元素绑定事件封装在了方法中，直接使用“.”去调用click方法，把函数作为参数传入即可
3.选择器
简单选择器
<script>
$(
function () {
// id选择器 (参数为#+id)
$("#div01")
// class选择器 (参数为.+classname)
$(".div01")
// 标签选择器 (参数为标签名)
$("div01")
// 多元选择器用逗号隔开多个参数
$("div01，div02")
}
)
</script>属性选择器
<script>
$(
function () {
// 属性选择器
// 选择带有title属性的div标签
$("div[title]")
// 选择带有title属性并且值为abc的div标签
$("div[title='abc']")
// 选择属性title值开头为ab的标签
$("div[title^='ab']")
// 选择属性title值末尾为bc的div标签
$("div[title$='bc']")
// 选择属性title值包含abc的div标签
$("div[title*='abc']")
// 可以添加多个属性值筛选条件
$("div[id][title='abc']")
// 选择属性title值不为abc的div标签
$("div[title！='abc']")
}
)
</script>层级选择器
<script>
$(
function () {
// 层级选择器
// 选择body下的div元素（只能取出来儿子）
$("div div")
// 选择body标签下的所有div标签的子div元素（儿子孙子一起取）
$("body>div")
}
)
</script>过滤选择器
<script>
$(
function () {
// 过滤选择器
// 选择div元素中的第一个
$("div:first")
// 选择div元素中的最后一个
$("div:last")
// 选择class属性不为abc的元素
$("div:not(.abc)")
// 选择下标为偶数的元素
$("div:even")
// 选择下标为奇数的元素
$("div:odd")
// 选择下标大于3的div元素
$("div:gt(3)")
// 选择下标等于3的div元素
$("div:eq(3)")
// 选择下标小于3的div元素
$("div:lt(3)")
// 选择所有的标题元素
$(":header")
}
)
</script>表单过滤选择器
<script>
$(
function () {
// 表单过滤选择器
// 将可用的type=’test‘的input标签的值改编为aaa
$("input[type='test']:enabled").val("aaa")
// 将不可用的type=’test‘的input标签的值改编为aaa
$("input[type='test']:disabled").val("aaa")
// 返回复选框选中的个数
$("input[type='checkbox']:checked").length
}
)
</script>4.dom操作
方法介绍
<script>
$(
function () {
// 获取div02标签里的所有内容 包括标签体
var html = $("#div02").html();
// 获取div02标签里的所有文本内容 不包括标签体
var text = $("#div02").text();
// 更改div02标签里的内容为aaa
$("#div02").html("aaa");
$("#div02").text("aaa");
// 获取div02标签中属性title的属性值
var attr = $("#div02").attr("title");
// 更改div02标签中属性title的属性值为cba
$("#div02").attr("title","cba");
// 新增div02标签中属性class的属性值为cba
$("#div02").attr("class","cba");
$("#div02").addClass("cba")
// 删除div02节点的class属性值
$("#div02").removeAttr("class");
$("#div02").removeClass("cba")
// 获取div02标签中属性title的属性值(建议获取固有属性时使用)
var attr = $("#div02").prop("title");
$("#div02").prop("title","cba");
// 获取标签div02的css样式中backgroundColor的值(返回一个rgb数值)
var css = $("#div02").css("backgroundColor");
// 改变标签div02的css样式中backgroundColor的值为pink
$("#div02").css("backgroundColor","pink");
// 将div02放在div01的最前面
$("#div02").prepend($("#div01"));
// 将div02放在div01的后面
$("#div02").insertAfter($("#div01"));
// 删除节点div01
$("#div01").remove();
// 删除节点中的所有后代节点
$("#div01").empty();
}
)
</script>四.使用JQuery对象做一个简单案例
编写一个js文件使以下表格隔行变色
js文件如下
$(
function () {
$("tr:gt(0):even").css("backgroundColor","red")
$("tr:gt(0):odd").css("backgroundColor","yellow")
}
)效果如图
五.JQuery动画
JQuery提供了一些定义好的标准的有规律的动画效果，同时也我们也可以使用JQuery自定义动画效果
1.JQuery动画使用的方式
// 变小失踪
function xianshi() {
// 参数，下同
// speed,顾名思义，就是动画执行的时间，参数越大动画越慢,默认为slow
// easing,
// swing,swing慢-快-慢；
// linear,动画执行时的平均速度
// fn（函数，可在执行show函数时一起执行，一般用不到）
$("#div01").show(1000,)
}
function yincang() {
$("#div01").hide("slow",)
}
// 滑动失踪
function xianshi_huadong() {
$("#div01").slideDown("slow",)
}
function yincang_huadong() {
$("#div01").slideUp("slow",)
}
// 渐变失踪
function xianshi_danru() {
$("#div01").fadeIn("slow",)
}
function yincang_danru() {
$("#div01").fadeOut("slow",)
}效果如下
除此之外每一种动画方式还有一个方法是切换显示或者隐藏的，后缀为Toggle的方法是切换，如过div处于隐藏状态就显示，如果出于显示状态就隐藏
function qiehuan() {
$("#div01").fadeToggle("slow",)
}六.遍历
1.使用加强for循环进行遍历
// 加强for循环
$(function () {
var li
var list = $("input")
for(li of list){
alert(li.value)
}
})格式
// 加强for循环
$(function () {
var 变量
var 数组 = $("input")
for(变量 of 数组){
方法体
//变量.方法（）
}
})七.事件绑定与解绑
1.回顾一下js中常用到的事件，在jquery中依旧可以使用,直接使用.调用即可
鼠标悬停事件
mouseover(fun)鼠标移出事件
mouseout(fun)获得焦点（输入框）
focus()表单提交
submit()2.使用on来进行时间的绑定与解除
绑定单击事件
第一个参数是事件类型，第二个参数是触发事件是执行的方法
对象.on(click,function(){})解绑元素所有事件
对象.off()八.jquery的扩展功能
1.使所有的jquery对象都继承此方法
$.fn.extend({
方法1:function () {
方法体
}
方法2:function () {
方法体
}
}
)使用时只需要即可调用
$("xx").方法1()2.创建jquery的全局函数
$.extend({
方法1:function (参数1，参数2) {
方法体
}
方法2:function () {
方法体
}
}
)使用时直接使用$调用即可
ajax是前后端异步通信的一个框架，请看下集
补充：
在jquery中可以链式编程，
对象.方法1().方法2()
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
