Jquery
导读
Jquery是一个JS库，一个封装好的特定的集合，这样的话使用的时候直接调用即可，可以快捷方便的操作DOM
JQuery的宗旨“write less，do more”，它优化了DOM操作，事件处理，动画设计和Ajax交互
**优点：**轻量级，跨浏览器兼容，链式编程，隐式迭代，支持插件开发，免费开源
Jquery的入口函数
$ 是JQuery的别称同时也是JQuery的顶级对象
<script>
// 两种方法等待元素加载完毕再执行代码
// $(document).ready(function(){
// $('div').hide()
// })
$(function(){
$('div').hide()
})
</script>
<div></div>
JQuery对象和DOM对象
用原生的JS获取的元素就是DOM对象，用$获取的元素就是JQuery对象，JQuery对象本质上是对DOM对象的包装，以伪数组的方式存储
JQuery对象是没有那些原生JS的属性和方法的，同理，DOM对象也不能使用JQuery里面的方法，但是这两种对象可以相互转换
<script>
var div = document.querySelector('div');
// dom对象转换为Jquery对象
$(div);
// JQuery对象转换为DOM对象,index为索引号
var index = 0
$(div)[index]
$(div).get(index)
</script>
JQuery常用API
1.JQuery选择器
$('css选择器')
筛选选择器
| 语法 | 作用 |
|---|---|
| $(div:first) | 获取第一个元素 |
| $(div:list) | 获取最后一个元素 |
| $(div:eq(2)) | 获取索引号为2的元素 |
| $(div:odd) | 获取索引号为奇数的元素 |
| $(div:even) | 获取索引号为偶数的元素 |
筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $(“li”).parent() | 查找父级 |
| children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”)，最近一级，亲儿子 |
| find(selector) | $(“ul”).find(“li”) | 相当于$(“ul li”)，后代选择器 |
| siblings(selector) | $(“ul”).siblings(“ul”) | 查找兄弟节点，不包括自己 |
| nextAll([expr]) | $(“ul”).nextAll() | 查找当前元素之后所有的同辈元素 |
| prevtAll([expr]) | $(“ul”).prevtAll() | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $(“ul”).hasClass(".cn") | 检查当前的元素是否含有某个特定的类，有返回true |
| eq(index) | $(“ul”).eq(index) | 相当于$(“li:eq(2)”),index从0开始 |
2.JQuery样式操作
// 返回属性值
$('div').css('属性')
// 简单的修改样式
$('div').css('属性','值')
// 修改多个样式,属性不叫引号，值如果是数字不加引号，如果是复合属性必须遵循驼峰命名法
$('div').css({属性:值,属性:值})
// 添加类
$('div').addClass("类名")
// 删除类
$('div').removeClass("类名")
// 切换类，如果有就去掉，如果没有就加上
$('div').toggleClass("类名")
原生JS中，对类的操作会直接覆盖，而JQuery中不会直接覆盖，只是针对指定的类进行操作
隐式迭代就是把所有元素的内部进行遍历循环，给每个元素都添加css这个方法，简化操作方便调用
3.JQuery效果
这个效果指的是动画效果
显示隐藏效果
show([apeed,[easing],[fn]])显示元素，hide()隐藏元素，toggle()反向
speed：预定速度字符串 easing：切换效果 fn：回调函数
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function(){
$('button').eq(1).click(function(){
$('div').hide(1000);
})
$('button').eq(0).click(function(){
$('div').show(1000,function(){
alert('ok')
});
})
$('button').eq(0).click(function(){
$('div').toggle(1000);
})
})
</script>
</body>
滑动效果
slideDown([speed,[easing],[fn]]),slideDownUp(),slideToggle()
speed：预定速度字符串 easing：切换效果 fn：回调函数
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>滑动切换</button>
<div></div>
<script>
$(function(){
$('button').eq(1).click(function(){
$('div').slideUp(1000);
})
$('button').eq(0).click(function(){
$('div').slideDown(1000);
})
$('button').eq(2).click(function(){
$('div').slideToggle(1000);
})
})
</script>
</body>
淡入淡出效果
fadeln([speed,[easing],[fn]]),fadeOut(),fadeToggle(),fadeTo([speed,opacity,[easing],[fn])
opacity必须写，取值范围0-1
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function(){
$('button').eq(0).click(function(){
$('div').fadeIn(1000);
})
$('button').eq(1).click(function(){
$('div').fadeOut(1000);
})
$('button').eq(2).click(function(){
$('div').fadeToggle(1000);
})
$('button').eq(3).click(function(){
$('div').fadeTo(1000,0.5);
})
})
</script>
</body>
自定义动画效果
animate(params,[speed],[easing],[fn])
params想要更改的样式属性，以对象的形式传递，必须写，属性名可以不带引号，如果是复合属性需要采用驼峰命名法
<body>
<button>懂</button>
<div></div>
<script>
$(function(){
$("button").click(function(){
$("div").animate({
// 元素必须要有定位
left:200,
top:200,
// 修改透明度
opacity:0.4,
},200)
})
})
</script>
</body>
动画队列
动画一旦触发就会执行，多次触发就会鬼畜，导致动画进入队列排队
可以在执行该动画前执行.stop()
$(this).children("ul").stop().slideToggle();
4.JQuery属性操作
所谓元素固有属性就是元素自带的属性，当然也就有可以自定义的属性
// 得到固有属性
prop('属性')
// 修改固有属性
prop('属性','属性值')
// 得到自定义属性
attr("属性")
// 修改自定义属性
attr("属性","属性值")
// 向备选元素附加数据
data("name","value")
// 向被选元素获取数据,同时还可以获取H5新增的data-自定义数据，返回的是数字型数据
data("name")
5.JQuery文本属性值
text()- 设置或返回所选元素的文本内容html()- 设置或返回所选元素的内容（包括 HTML 标记）val()- 设置或返回表单字段的值
6.JQuery元素操作
遍历元素，隐式迭代是对同一类元素做了相同的操作，对于同一类元素做不同的操作需要用到遍历
$('div').each(function(i,dom){
// 第一个参数一定是索引号,可以自己指定索引号名称
// 第二个参数一定是DOM元素对象。DOM对象没有css方法，需要转为JQuery对象
var arr = ["black","green","red"]
$(dom).css("color",arr[i])
})
创建元素
var li = $('<li>这是一个新元素li</li>')
//内部添加,append放到匹配元素的最后面，prepend放到匹配元素的最前面
$("ul").append(li)
$("ul").prepend(li)
//外部添加,after放在元素的后面，before放在元素的前面
var div = $("<div>这是一个新的div</div>")
$("ul").after(div)
$("ul").before(div)
删除元素
//删除匹配元素，自杀
$("ul").remove()
//删除匹配元素里面的子节点，杀光后代
$("ul").empty()
//删除匹配元素里面的子节点，杀光后代,这个相当于清空子节点
$("ul").html("")
7.JQuery尺寸位置操作
// 设置或获取元素width和height
$("div").width()
$("div").width(300)
// 获取元素width和height + padding的大小
$("div").innerWidth()
// 获取元素width和height + padding + border的大小
$("div").outerWidth()
// 获取元素width和height + padding + border + margin的大小
$("div").outerWidth(true)
// offset主要用于设置距离文档的坐标，和父级元素没有关系
// 获取
$("div").offset()
$("div").offset().top
$("div").offset().left
// 设置
$("div").offset({
// 设置的是距离文档的顶部和文档的左侧
top:200,
left:200,
})
// position主要用于设置带有定位的父盒子的坐标
$("div").position()
$("div").position().top
$("div").position().left
// 这个方法只能获取不能设置
// scrollTop() 被卷去的头部
// scrollLeft() 被卷去的左侧
$("document").scrollTop()
$("document").scrollLeft()
JQuary的排他操作
<body>
<button>one</button><button>one</button>
<button>one</button><button>one</button>
<script>
$(function(){
// 隐式迭代，给所有button绑定方法
$('button').click(function(){
$(this).css("background","pink");
$(this).siblings("button").css("background","");
})
})
</script>
</body>
JQuary的链式编程
$(this).css("color","white").siblings("").css("color","")
我的颜色为红色，我的兄弟颜色为空，实现了排他思想
JQuery事件切换
hover([over,]out)
over:鼠标移到元素上要触发的函数相当于mouseenter
out:鼠标离开元素要触发的函数相当于mouseout
就是鼠标经过和离开的复合写法，如果hover只写一个函数，那么鼠标经过和鼠标离开都会触发该函数（使用slideToggle切换）
JQuery事件
JQuery事件注册
单个事件注册
$("div").click(function(){})
绑定多个事件
element.on(events,[selector],fn)
events:一个或者多个用空格分隔的事件类型
selector:元素的子元素选择器
fn:回调函数
$("div").on({
mouseenter:function(){
$(this).css("background","black")
},
click:function(){
$(this).css("background","red")
}
})
$("div").on("mouseleave mouseenter",function(){
$(this).toggleClass("center")
})
实现事件委托，事件是绑定在ul上的，但是li才能触发
$("ul").on("click","li",function(){
alert("ok")
})
on() 可以给动态创建的元素绑定事件，这在之前的写法中是不可以的
只能触发一次的事件
one事件基本和on一样，但是他只能触发一次
$("ul").one("click","li",function(){
alert("ok")
})
JQuery事件解除绑定
将元素身上所有的事件解绑
$("div").off()
解绑单个事件
$("div").off("mouseenter")
解绑事件委托
$("div").off("mouseenter","li")
JQuery自动触发事件
1.元素.事件()
$("ul").on("click","li",function(){
alert("ok")
})
$("ul").click()
2.trigger方法
$("ul").on("click","li",function(){
alert("ok")
})
$("ul").trigger("click")
3.triggerHandler方法，这种方法不会触发元素的默认行为
$("ul").on("click","li",function(){
alert("ok")
})
$("ul").triggerHandler("click")
JQuery阻止默认行为和冒泡
event.prevenDafault()阻止默认行为
event.stopPropagation()阻止冒泡
JQuery对象拷贝
$.extend([deep],target,object1,[objectN])
deep:如果为true则为深拷贝，false为浅拷贝
target:要拷贝的目标对象
object1:待拷贝的第一个对象
JQuery多库共存
其他的库也可能使用$运算符号，那我们可以用JQuery来替代$,释放对$的控制权
JQuery插件使用
Jquery插件都是基于Jquery的，所以我们必须引入JQuery才能使用这些插件
JQuery之家http://www.htmleaf.com/
JQuery插件库https://www.jq22.com/
图片懒加载技术
提高网页加载速度，减轻服务器负载，只加载当前屏幕的图片，只有页面滑动到可视区才显示图片
扫一扫
463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
