目录
一、jQuery的顶级对象
jQuery的顶级对象是$,同时也是jQuery的别称。
jquery(function(){
jquery("div").hide()
})
$(function(){
$("div").hide()
})
二、jQuery对象和DOM对象
1.DOM对象：用原生的js获取过来的对象就是DOM对象
2.jQuery对象：用jQuery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装。
3.jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法。
var myDiv = document.querySelector('div);
$('div')
三、jQuery对象和DOM对象的相互转换
1.DOM对象转换为jQuery对象===>$(DOM对象)
2.jQuery对象转换为DOM对象
①$('div')[index] index是索引号
②$('div').get(index) index是索引号
四、jQuery基本和层级选择器
(一)基本选择器
$("选择器")===> 里面选择器直接写CSS选择器即可，但是要加引号。
<div class="nav"></div>
$('.nav')(二)层级选择器
1.子代选择器
$('ul>li')
使用>号，只会获取亲儿子层级的元素，不会获得孙子层级的元素
2.后代选择器
$('ul li')
使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子层级的元素
五、jQuery隐式迭代（重要）
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代，简单来说，就是给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化操作，方便我们调用。
$('div').css('属性','值')
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
// 1.获取四个div元素
console.log($('div'));
// 2.给四个div设置背景颜色 jquery对象不能使用style
$('div').css('background','pink')
$('ul').css('background','pink')
// 3.给内部每个元素进行循环遍历，简化我们的操作
$('ul li').css('color','white')
</script>
</body>
</html>六、jQuery筛选选择器
:first 获取第一个元素
:last 获取最后一个元素
:eq(index) 获取第几个元素，索引值从0开始
:odd 获取索引号为奇数的元素
:even 获取索引号为偶数的元素
$(function(){
$("ul li:first").css("color","red"); // 筛选第一个 最后一个last
$("ol li:eq(3)").css("color","green"); // 筛选第几个元素
$("ol li:odd").css("color","blue"); // 筛选奇数
$("ul li:even").css("color","yellow") // 筛选偶数
})七、jQuery筛选方法
parent()--->查找父级
parents()--->可以返回指定祖先元素
children()--->查找亲儿子
find()--->可以选择里面所有的元素 包括儿子和孙子
siblings()--->查找亲兄弟eq()--->查找第n个元素
八、jQuery的排他思想
想要多选一的效果，当前的元素有样式，其余兄弟元素消除样式，主要用到了隐式迭代
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./jquery.min.js"></script>
</head>
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function () {
// 1.隐式迭代 给所有按钮绑定了点击事件
$("button").click(function () {
// 2.当前元素变化背景颜色
$(this).css("background", "pink");
// 3.其余兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", "")
})
})
</script>
</body>
</html>九、jQuery链式编程
节约代码量，让代码看起来更加整洁
$(this).css("color","blue").siblings("button").css("color","")
一定要注意是给哪个元素增加样式！！！
十、jQuery样式操作
jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。
(一)css方法
1.参数只写属性名，则返回的是属性值；
$("div").css("width")
2.想要修改样式，利用"属性名","属性值"来修改，值为数字时可以不用加引号
$("div").css("width","300px")
3.参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号
background-color，复合属性要用驼峰命名法
如果值不是数字要加引号
$("div").css({"background-color":"red",height:"500px"})
(二)设置类样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
1.添加类 addClass()
$("div").click(function(){
$(this).addClass("current")
})
2.删除类 removeClass()
$("div").click(function(){
$(this).removeClass("current")
})
3.切换类 toggleClass()
$("div").click(function(){
$(this).toggleClass("current")
})
(三)类操作与className的区别
原生JS中的className会覆盖元素原先的类名；
jQuery里面的类操作只是对指定类进行操作，不会影响原先的类名
十一、jQuery效果
(一)显示与隐藏
1.显示 show()
$("button").eq(0).click(function () {
$("div").show("slow", function () {
// alert(1)
})
})2.隐藏 hide()
$("button").eq(1).click(function () {
$("div").hide("fast", function () {
// alert(1)
})
})3.切换显示与隐藏 toggle()
$("button").eq(2).click(function () {
$("div").toggle("fast", function () {
// alert(1)
})
})(二)滑动效果
$(function () {
$("button").eq(0).click(function () {
// 下拉滑动 slideDown()
$("div").slideDown()
})
$("button").eq(1).click(function () {
// 上拉滑动 slideup()
$("div").slideUp()
})
$("button").eq(2).click(function () {
// 滑动切换 slideToggle()
$("div").slideToggle()
})
})1.上拉滑动 slideUp()
2.下拉滑动 slideDown()
3.滑动切换 slideToggle()
(三)动画队列及其停止排队方法
1.动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
2.停止排队
stop()
用于停止动画效果；
写到动画或者效果前面，相当于停止结束上一次的动画
(四)淡入淡出以及突出
$(function () {
$("button").eq(0).click(function () {
// 淡入 fadeIn()
$("div").fadeIn()
})
$("button").eq(1).click(function () {
// 淡出 fadeOut()
$("div").fadeOut()
})
$("button").eq(2).click(function () {
// 淡入淡出切换 fadeToggle()
$("div").fadeToggle()
})
$("button").eq(2).click(function () {
// 修改透明度 速度和透明度必须要写
$("div").fadeTo(1000,0.5)
})
})1.淡入 fadeIn()
2.淡出 fadeOut()
3.淡入淡出切换 fadeToggle()
4.修改透明度 fadeTo()
效果参数：opacity透明度必须写，取值0~1之间；speed速度必须写
(五)自定义动画animate
$(function () {
$("button").click(function () {
$("div").animate({
left: 200,
top:300,
opacity:.4,
width:500
},500)
})
})params：想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法。
十二、jQuery属性操作
(一)设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，或者是<input>中的type。
1.获取属性语法
prop("属性")
2.设置属性语法
prop("属性","属性值")
(二) 获取元素自定义属性 attr()
用户自己给元素添加的属性是自定义属性。
1.获取属性语法
attr("属性")
2.设置属性语法
attr("属性","属性值")
(三) 数据缓存 data()
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。
$(function () {
// 1.prop() 获取元素固有的属性值
console.log($("a").prop("href"))
$("a").prop("title","京东");
$("input").change(function(){
console.log($(this).prop("checked"));
});
// 2.attr() 元素的自定义属性
console.log($("div").attr("index"));
$("div").attr("index",4);
console.log($("div").data("data-index"));
// 3.data() 数据缓存 这个里面的数据是存在元素的内存里面
$("span").data("uname","andy")
console.log($("span").data("uname"));
// 这个方法获取h5自定义属性data-index，与上面的区别是，不用写data-，而且返回的是数字型
console.log($("div").data("index"));
})十三、jQuery内容文本值
普通元素内容html() 相当于原生inner HTML
html() 获取元素的内容
html("内容") 设置元素的内容
十四、jQuery元素操作
(一)遍历元素
jQuery隐式迭代是对同一类元素进行同一操作，而遍历是对同一类元素做不同的操作。
$.each()方法可以用于遍历任何对象，主要用于数据处理，比如数组、对象。
其中，index是每个元素的索引号；domEle是DOM元素对象，不是jQuery对象。
要想使用jQuery方法，需要给这个DOM元素转换为jQuery对象$(domEle)
// 1.each()方法遍历元素
var arr = ["red","green","blue"]
$("div").each(function (index, domEle) {
// 回调函数的第一个参数一定是索引号，自己也可以指定索引号
console.log(index);
// 回调函数的第二个参数一定是dom元素对象 没有css方法
console.log(domEle);
$(domEle).css("color",arr[index])
// 因为是字符，所以在相加的时候就排列起来了，这时候要用parseInt转换为数字型
sum += parseInt($(domEle).text());
})(二)创建元素
创建元素
var li = $("<li>456</li>")
(三)添加元素
1.内部添加
element.append("内容")
把内容放入匹配元素内部最后面，类似原生的appendChild
2.外部添加
element.after("内容") 把内容放入目标元素的后面
element.before("内容") 把内容放在目标元素的前面
内部添加元素，生成之后，它们是父子关系；
外部添加元素，生成之后，它们是兄弟关系。
(四)删除元素
element.remove() 删除匹配的元素（本身）
element.empty() 删除匹配的元素集合中所有的子节点
element.html("") 清空匹配的元素内容
十五、jQuery尺寸、位置操作
(一)尺寸
以上参数为空，则获取相应值，返回的是数字型；
如果参数为数字，则是修改相应值；
参数可以不用写单位。
(二)位置操作
1.offset()设置或获取元素偏移
两个属性：left、top
语法：offset({top:10,left})
// 1.获取设置距离文档的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().left);
$(".son").offset({
top:200,
left:200
})2.position() 获取距离带有定位父级位置（偏移）
// 2.position() 只能获取，不能设置
console.log($(".son").position());十六、jQuery事件注册
(一)单个事件注册
element.事件(function(){})
$("div").click(function(){事件处理程序})
(二)事件处理on() 绑定事件
events：一个或多个用空格分隔的事件类型；
selector：元素的子元素选择器
fn：回调函数，即绑定在元素身上的监听函数
//2.事件处理on
$("div").on({
mouseenter:function(){
$(this).css("background","skyblue")
},
click:function(){
$(this).css("background","pink")
},
mouseleave:function(){
$(this).css("background","yellow")
}
});
$("div").on("mouseenter mouseleave",function(){
$(this).toggleClass("current");
})
// on实现事件委派 click是绑定在ul上的，触发的是li
$("ul").on("click","li",function(){
});
// on给动态元素绑定事件
// $("ol li").click(function(){
// alert(111)
// })
$("ol").on("click","li",function(){
alert(111)
})
var li = $("<li>456</li>")
$("ol").append(li)(三)事件处理off() 绑定事件
off()方法可以移除通过on()方法添加的事件处理程序
// 1.事件解绑 off
$("div").off(); // 解除了div所有的事件
$("div").off("click") // 解除了div的鼠标点击事件
$("ul").off("click","li");
// 2.one() 只触发一次
$("p").one("click",function(){
alert(111)
})(四)自动触发事件 trigger()
// 1. 元素.事件()
$("div").click();
// 2. 元素.trigger("事件")
$("div").trigger("click")
// 2. 元素.triggerHandler("事件") 不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus",function(){
$(this).val("123")
});
$("input").triggerHandler("focus");十七、jQuery事件对象
阻止默认行为：event.preventDefault() 或 return false
阻止冒泡：event.stopPropagation()
十八、jQuery插件
(一)常用网站
jQuery插件库：https://www.jq22.com/
jQuery之家：jQuery之家-自由分享jQuery、html5、css3的插件库
(二)使用步骤
1.引入相关文件
2.复制相关代码
十九、jQuery多库共存
问题概述:
jQuery使用$作为标示符，随着jQuery的流行其他js库也会用这$作为标识符，这样一起使用会引起冲突。
客观需求:需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
jQuery解决方案:
1.把里面的$符号 统一改为jQuery，比如 jQuery(“div”)
2. jQuery变量规定新的名称:$.noConflict() var xx = $.noConflictO;
$(function () {
function $(ele) {
return document.querySelector(ele)
}
console.log($("div"));
// 如果$符号冲突 我们就用jQuery
jQuery.each();
// 2.让jQuery释放对$的控制权 让用户自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
suibian.each()
})二十、jQuery对象拷贝
如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用$extend()方法
语法:
$.extend([deep],target,object1[objectn])
1deep:如果设为true为深拷贝，默认为false浅拷贝
2.target要拷贝的目标对象
3.object1:待拷贝到第一个对象的对象。
4.objectN:待拷贝到第N个对象的对象。
5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
6.深拷贝，前面加true，完全克隆(拷贝的对象而不是地址)，修改目标对象不会影响被拷贝对象。
扫一扫
2030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
