这里写自定义目录标题
jQuery
jQuery:JavaScript库
是JS的一个仓库,对DOM做一个封装,用来储存js封装好的特定的集合(方法和函数)。从封装一大推函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate,hide,show,获取元素等。
下载安装
官网:https://jquery.com/
点击下载,选择压缩的版本使用
点击压缩版本进入:ctrl+A 全选,ctrl+C复制,在写js软件中进行新建一个js文件,在html页面对其进行外部引入即可
其余版本下载: https://code.jquery.com/
入口函数
// 第一种方法
$(function(){
... // 此处是页面DOM加载完成的入口
})
// 第二种方法
$(document).ready(function(){
... //此处是页面DOM加载完成的入口
})
jQuery的顶级对象$
- $ 是 jQuery 的别称,在代码中可以使用 jQuery 代替$
- $ 是 jQuery 的别称,在代码中可以使用 jQuery 代替$
(当$与别处重复时可以选择其他的方法,在后处进行讲解)
<script>
// 1. $ 是jQuery的别称(另外的名字)
// $(function() {
// alert(11)
// });
jQuery(function() {
// alert(11)
// $('div').hide();
jQuery('div').hide();
});
</script>
jQuery对象和DOM对象
- DOM对象:用原生js获取过来的对象
- jQuery对象: 用jQuery方式获取过来的对象是jQuery对象。
本质:通过$把DOM元素进行了包装(伪数组形式存储) - jQuery对象只能使用jQuery方法,DOM对象则使用原生的JavaScript的属性和方法
<script>
// 1. DOM 对象: 用原生js获取过来的对象就是DOM对象
var myDiv = document.querySelector('div'); // myDiv 是DOM对象
var mySpan = document.querySelector('span'); // mySpan 是DOM对象
console.dir(myDiv);
// 2. jQuery对象:用jquery方式获取过来的对象是jQuery对象。
// 本质:通过$把DOM元素进行了包装
$('div'); // $('div')是一个jQuery 对象
$('span'); // $('span')是一个jQuery 对象
console.dir($('div'));
// 3. jQuery 对象只能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 属性和方法
// myDiv.style.display = 'none';
// myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
// $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
</script>
对象转化
原生js比jQuery更大,原生的一些属性方法jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换未DOM对象才能使用
- DOM对象转换未jQuery对象: $(DOM对象) $(‘div’)
- jQuery对象转换未DOM对象(两种方式)
$(‘div’)[index] index是索引号 $(‘div’).get(index) index是索引号
<body>
<video src="mov.mp4" muted></video>
<script>
// 1. DOM对象转换为 jQuery对象
// (1) 我们直接获取视频,得到就是jQuery对象
// $('video');
// (2) 我们已经使用原生js 获取过来就是DOM对象
var myvideo = document.querySelector('video');
// $(myvideo).play(); jquery里面没有play 这个方法
// 2. jQuery对象转换为DOM对象
// myvideo.play();
$('video')[0].play()
$('video').get(0).play()
</script>
</body>
常用API
基础选择器
语法:$(“选择器”) 里面选择器直接写CSS选择器即可,但是要加引号
层级选择器
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ol>
<li>我是ol 的</li>
<li>我是ol 的</li>
</ol>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
$(function() {
console.log($(".nav"));
console.log($("ul li"));
})
</script>
样式操作
jQuery可以使用css方法来修改简单元素样式,也可以操作类,修改多个样式。
- 参数只写属性名,则是返回属性名
$(this).css("color");
- 参数是属性名,属性值,逗号分隔,是一组设置样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css("color","red");
- 参数可以是对象形式,方便设置多组样式,属性名和属性值用冒号隔开,属性可以不用加引号
$(this).css({"color":"white","font-size":"20px"});
如果是复合属性则必须采取驼峰命名法,如果值不是数字,则需要加引号
设置类样式方法
作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点。
- 添加类
$("div").addClass("current");
- 移除类
$("div").removeClass("current");
- 切换类
$("div").toggleClass("current");
原生JS中className会覆盖元素原先里面的类名,jQuery里面类操作只是对指定类进行操作,不影响原先的类名
<body>
<div class="one two"></div>
<script>
// var one = document.querySelector(".one");
// one.className = "two";
// $(".one").addClass("two"); 这个addClass相当于追加类名 不影响以前的类名
$(".one").removeClass("two");
</script>
</body>
jQuery隐式迭代
遍历内部元素DOM元素(伪数组形式存储)的过程就叫做隐式迭代
简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便调用
<div>惊喜不,意外不</div>
<div>惊喜不,意外不</div>
<div>惊喜不,意外不</div>
<div>惊喜不,意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
// 1. 获取四个div元素
console.log($("div"));
// 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
$("div").css("background", "pink");
// 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环,给每一个元素添加css这个方法
$("ul li").css("color", "red");
</script>
jQuery筛选选择器
// 选取 ul 里面的 第一个 li
$("ul li:first").css("color","red");
<body>
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script>
$(function() {
// 获取第一个li元素
$("ul li:first").css("color", "red");
// 获取索引号为2的li
$("ul li:eq(2)").css("color", "blue");
// 获取索引号为奇数的li
$("ol li:odd").css("color", "skyblue");
// 获取索引号为偶数的li
$("ol li:even").css("color", "pink");
})
</script>
</body>
jQuery排他思想
想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
<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>
jQuery效果
显示与隐藏效果
显示效果
- 参数都可以省略, 无动画直接显示。
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
- easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
- fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
// 显示语法规范
show([speed,[easing],[fn]]) //中括号表示参数都可以省略
$("div").show();
隐藏效果
// 隐藏语法规范
hide([speed,[easing],[fn]])
$("div").hide();
切换效果
// 切换语法规范
toggle([speed,[easing],[fn]])
$("div").toggle();
jQuery滑动效果与事件切换
下滑动
// 下滑动
slideDown([speed,[easing],[fn]])
$("div").slideDown();
上滑动
// 滑动切换效果
slideToggle([speed,[easing],[fn]])
$("div").slideToggle();
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 下滑动 slideDown()
$("div").slideDown();
})
$("button").eq(1).click(function() {
// 上滑动 slideUp()
$("div").slideUp(500);
})
$("button").eq(2).click(function() {
// 滑动切换 slideToggle()
$("div").slideToggle(500);
});
});
</script>
事件切换
hover([over,]out)
- over: 鼠标移到元素上要触发的函数(相当于mouseenter)
- out: 鼠标移出元素要触发的函数(相当于mouseleave)
- 如果只写一个函数,则鼠标经过和离开都会触发它
jQuery动画队列及其停止排队方法
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行
stop()
- stop()方法用于停止动画或者效果
- 注意: stop() 写到动画或者效果的前面,相当于停止结束上一次的动画
$(".nav>li").hover(function(){
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
})
jQuery淡入淡出以及突出效果
淡入淡出切换
// 淡入
fadeIn([speed,[easing],[fn]])
$("div").fadeIn();
// 淡出
fadeOut([speed,[easing],[fn]])
$("div").fadeOut;
// 淡入淡出切换
fadeToggle([speed,[easing],[fn]])
渐进方式调整到指定的不透明度
// 修改透明度 这个速度和透明度必须写
fadeTo(speed,opacity,[easing],[fn])
- opacity :透明度必须写,取值 0~1 之间
- speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如1000)。必须写
$("div").fadeTo(1000,0.5)
jQuery自定义动画animate方法
animate(params,[speed],[easing],[fn])
- params: 想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
jQuery属性操作
获取元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性,比如 元素里面的 href ,比如 元素里面的 type。
语法:prop(“属性”)
prop("属性")
$("a").prop("href");
设置元素固有属性值
语法:prop(“属性”,“属性值”)
prop("属性","属性值")
$("a").prop("title","我们都挺好~");
获取元素自定义属性值
用户自己给元素添加的属性,我们称为自定义属性。 比如给 div 添加 index =“1”。
语法:attr(“属性”)
attr("属性") // 类似原生getAttribute()
$("div").attr("index");
数据缓存data()
data() 方法可以在指定的元素上存取数据,并不会修改DOM元素结构,一旦页面刷新,之前存放的数据都将被移除。
附加数据语法
语法:data(“name”,“value”) 向被选元素附加数据
$("span").data("uname","andy");
获取数据语法
如果你想加载一篇你写过的.md文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
继续你的创作。
语法:date(“name”) 向被选元素获取数据
$("span").data("uname");
// 这个方法获取data-index h5自定义属性,不用写 data- 返回的是数字型(2)
$("div").data("index");
jQuery内容文本值
主要针对元素的内容还有表单的值操作
普通元素内容html()
相当于原生innerHTML
语法:
- 获取元素的内容:html()
- 设置元素的内容:html(“内容”)
$("div").html();
$("div").html("123");
// 获取过来的带的标签 <span>123</span>
普通元素文本内容text()
相当于原生innerText
语法:
- 获取元素的文本内容:text()
- 设置元素的文本内容:text(“文本内容”)
$("div").text();
$("div").text("123");
// 123
// 获取过来的不带标签 123
获取设置表单值 val()
语法:
- 获取表单的的值:val()
- 设置表单的值:val(“内容”)
$("input").val();
$("input").val("请输入内容~~~");
jQuery元素操作
遍历元素
隐式迭代是对同一类元素做了同样的操作,如果想要给同一类元素做不同操作,就需要用到遍历
语法一
$("div").each(function(index,domEle){xxx;})
- each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
- 里面的回调函数有2个参数: index是每个元素的索引号,demEle是每个DOM元素,不是jQuery对象
- 所以想要使用jQuery方法,需要给这个dom元素转换为jquery对象 $(domEle)
语法二
$.each(Object,function(index,element){xxx;})
-
$.each() 方法可用于遍历任何对象,主要用于数据处理,比如数组,对象
-
里面的函数有2个参数: index 是每个元素的索引号,element遍历内容
创建元素
$("<li></li>");
// 动态创建一个li标签
var li = $("<li>我是后来创建的li</li>");
var div =$("<div>我是后来的div</div>")
添加元素
内部添加
- 把内容放入匹配元素内部最后面:element.append(“内容”)
- 把内容放入匹配元素内部最前面:element.prepend(“内容”)
外部添加
语法:
- 外部添加把内容放到目标元素后面:element.after(“内容”)
- 外部添加把内容放到目标元素前面:element.before(“内容”)
内部添加元素,生成之后,它们是父子关系
外部添加元素,生成之后,它们是兄弟关系
内部添加元素,生成之后,它们是父子关系
外部添加元素,生成之后,它们是兄弟关系
添加元素
语法:
- 删除匹配的元素(本身):element.remove()
- 删除匹配的元素集合中所有的子节点:element.empty()
- 清空匹配的元素内容:element.html(“”)
1.element.remove() //删除匹配的元素(本身)
$("ul").remove();
2.element.empty() //删除匹配元素里面的子结点(孩子)
$("ul").empty();
3.element.html("") //删除匹配元素里面的子结点(孩子)
remove 删除元素本身
empt() 和 html(“”) 作用等价,都可以删除元素黎曼的内容,只不过 html 还可以设置内容。
jQuery位置
offset() 设置或获取元素偏移
1- offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系
$(".son").offset();
$(".son").offset().top;
$(".son").offset({
top: 200,
left: 200
});
该方法有两个属性 left、top.
- offset().top用于获取距离文档顶部的距离,
- offset().left 用于获取距离文档左侧的距离
可以设置元素的偏移:offset({ top: 10, left: 30 });
position()获取元素偏移
position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,以文档为准
- position().top 用于获取距离定位父级顶部的距离,
- position().left 用于获取距离定位父级左侧的距离。
这个方法只能获取偏移,不能设置偏移
$(".son").position();
// 这个方法只能获取偏移,不能设置偏移
scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
- scrollTop()方法设置或返回被选元素被卷去的头部。
- 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。
// 页面滚动事件
$(window).scroll(function(){
$(document).scrollTop();
})