一、介绍
1. 首先理解库的概念：
是一个封装好的特定的集合，从而封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show等等
可以理解为仓库：可以把东西放在这个仓库，找东西时候只需要进入仓库即可
2. 优势
- 开源、免费
- 轻量级：核心文件kb单位
- 兼容所有主流浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持，大大简化了DOM操作
- 支持第三方插件扩展开发
- 树形菜单、日期控制、轮播图等等
二、使用
1. 下载：
jQueryjQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/
2. 引入到文件
3. 可以通过一个jQuery方法进行测试
$('隐藏对象').hide();
4. jQuery入口函数
- 等同于原生JS的DOMContentLoaded
- 等待页面的js，css，图片等外部文件加载完成再去执行
$(function(){
. . . //页面的DOM加载完成的入口
});4. $理解与获取元素
- $是jquery的一个别称，在代码中使用jquery代替$
- $是jquery的顶级对象，相当于js中的window
- $('') 引号里包含获取的元素
jQuery(function () {
// alert(11);
// $("div"). hiden();
jQuery("div").hiden();
});5. jQuery对象和DOM对象的区别
- 用原生js获取到的元素元素就是DOM对象
- jquery获取到的元素就是jquery元素
- jQuery对象本质：利用$对DOM对象包装后产生的对象（伪数组的形式存储）
// 1.DOM对象：用原生js获取过来的对象就是dom对象那个
var myDiv = document.querySelector("div");
console.dir(myDiv);
// 2.jQuery获取
$("div"); //$("div");是一个jquery对象
console.dir($("div"));区别
- 获取到的元素对象类型不同
- 各自的样式修改：不可互换
//区别操作
var myDiv = document.querySelector("div");
// dom对象操作
myDiv.style.display = "none";
//jQuery对象操作
myDiv.hide(); //报错6. DOM对象与jQuery对象转换
- 原生的一些属性和方法jquery没有给我们封装，想要使用这些属性和方法需要把jquery对象转换伪DOM对象才能使用
- DOM转jQuery可以直接使用$()包裹
- jQuery转DOM应该根据索引
- 由于jq获取的对象以伪数组形式存储
- index是索引号
//DOM转换为jQuery对象
var myvideo = document.querySelector("video");
$(myvideo); //直接用$转化
//jQuery对象转换为DOM对象
//直接使用$('')包裹抓换
$('div')[index]
$('div').get(index)三、常用 API
查询手册：
1. jQuery选择器
$(function () {
console.log($(".nav"));
console.log($("ul li"));
});2. 隐式迭代
遍历内部的DOM元素非过程就叫做隐式迭代
jQuery：给匹配到的所有元素进行循环遍历，执行对应的方法，而不用循环
- 可以理解为获取到所有元素可以直接使用样式
<div>这里有几个字</div>
<div>这里有几个字</div>
<div>这里有几个字</div>
<div>这里有几个字</div>
<script>
$(function () {
// 1.获取四个div
console.log($("div"));
// 2.注意jquery不能使用style：此时给四个div设置背景色
$("div").css("background", "blue");
$("div").css("color", "white");
// 隐式迭代：把匹配到的所有元素进行遍历循环
});
</script>3. 筛选选择器
基础筛选选择器
<script>
$(function () {
$("li").css("color", "black");
$("ul li:first").css("background", "red"); //第一个
$("ul li:last").css("background", "green"); //最后一个
$("ul li:eq(2)").css("color", "red"); //根据下标得到jquery指定对象并执行
$("ol li:odd").css("background", "yellow"); //奇数
$("ol li:even").css("background", "purple"); //偶数
});
</script>
筛选重点：类似于获取节点操作方式（）注意括号参数可以获取到指定元素
<script>
$(function () {
// 1.查找父亲
console.log($(".son").parent()); //直接找到父级(亲爸爸)
// 2.查找孩子
$(".nav").children("p").css("color", "red"); //只获得亲儿子
$(".nav").find("p").css("color", "green"); //会获得所有子孙后代
//3.查找兄弟：此处设置ul包含多个li结构，其中一个li设置类名items
$("ol .items").siblings("li").css("color", "red"); //选择除了自己的所有兄弟
//4.查找指定下标元素：此处设置ul包含多个li结构
$("ul li").eq(1).css("color", "blue"); //此处方便直接修改添加变量
});
</script>选择器案例 - 下拉菜单显示
$(function () {
// 鼠标经过：li的ul显示
$(".nav>li").mousemove(function () {
$(this).children("ul").show();
});
$(".nav>li").mouseout(function () {
$(this).children("ul").hide();
});
});后期替换的操作方法： 切换与滑进、滑出切换效果：使用一个stop方法停止上一次动画效果
<script>
$(function () {
// 新的houver时间切换效果
$(".nav>li").hover(
function () {
// 动画队列机制：先暂停上一次动画再去执行下一次动画
// 方法必须写在动画前面
$(this).children("ul").stop().slideToggle();
}
);
});
</script>- 页面分析：鼠标移动上去触发显示下拉，鼠标移除隐藏
- 代码分析：显示隐藏方法太生硬于是采用滑进滑出效果
- 获取元素鼠标移动上去事件：设置显示： show（）方法
- 获取元素鼠标移动上去事件：设置隐藏： hide（）方法
4. 排他思想：主要用兄弟元素获取+隐式迭代
<body>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
</body>
<script>
$(function () {
$("button").click(function () {
// 1.当前的元素变换背景颜色
$(this).css("background", "red");
// 2.其余兄弟去掉背景颜色
$(this).siblings("button").css("background", "");
});
});
</script>5. 以上总结案例:tab栏操作
<script>
$(function () {
// 1.鼠标经过左侧li
$("#left li").click(function () {
// 得到当前li的this下标
var index = $(this).index();
console.log(index);
// 3.让右侧盒子相应索引号显示
/* $(".content div").eq(index).show();
// 4.其他兄弟隐藏
$(".content div").eq(index).siblings().hide(); */
// 5-直接链式解决代码繁杂
$(".content div").eq(index).show().siblings().hide();
});
});
</script>- 页面效果：点击哪个标签就会显示哪个图片
- 代码解析:
- 首先布置静态页面
- 获取元素设置点击事件
- 获取到当前获取到的元素的下标
- 设置显示对应下标的图片
- 并隐藏所有兄弟元素
6. 样式操作修改
简单样式修改直接使用样式方法
// 1.简单样式修改
console.log($("div").css("width")); //返回原始值
$("div").css("width", "300px"); //进行修改
$("div").css(height, "300"); //报错 属性名必须添加引号
$("div").css("width", 500); //无报错：如果后面的值 是数字可以不用引号也不用单位
$("div").css({
width: 400,
height: 400,
backgroundColor: "red",
});复杂样式修改：使用类型名操作：类似于DOM中的className（类名）
// (1)添加类:addClass
$("div").addClass("con");
// (2)添删除类:removeClass
$("div").removeClass("con");
// (3)切换类:toggleClass
$("div").toggleClass("con");var div = document.querySelector("div");
div.onclick = function () {
// 特点：calssName会直接修改原来的类名：
// 如果要保留：赋值的内容就是在原先的类名基础上添加类名
this.className = "one change";
};
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
