jQuery

jquery到底是什么

jQuery的官网 http://jquery.com/
jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。

js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。
(animate.js、common.js)

我们知道了,jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,
其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。

jq对象和dom对象(重要)
DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合(伪数组)
DOM对象与jQuery对象的方法不能混用。

jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。
注意:jQuery选择器返回的是jQuery对象。
jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多扩展性的选择器。
【查看jQuery文档】
jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。
所以我们平时真正能用到的只是少数的最常用的选择器。
基本选择器
名称 用法 描述
ID选择器 $(“#id”); 获取指定ID的元素
类选择器 $(“.class”); 获取同一类class的元素
标签选择器 $(“div”); 获取同一类标签的所有元素
并集选择器 $(“div,p,li”); 使用逗号分隔,只要符合条件之一就可。
交集选择器 $(“div.redClass”); 获取class为redClass的div元素
总结:跟css的选择器用法一模一样。

层级选择器
名称 用法 描述
子代选择器 $(“ul>li”); 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等
总结:跟css的选择器用法一模一样。

过滤选择器
名称 用法 描述
:eq(index) $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
:odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中,选择索引号为奇数的元素
:even $(“li:even”).css(“color”, ”red”); 获取到的li元素中,选择索引号为偶数的元素
总结:这类选择器都带冒号

筛选选择器(方法)
名称 用法 描述
children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”),子类选择器
find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器
siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点,不包括自己本身。
parent() $(“#first”).parent(); 查找父亲
eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始
next() $(“li”).next() 找下一个兄弟
prev() $(“li”).prev() 找上一次兄弟
总结:筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。

jQuery效果

jQuery属性操作

所谓元素固有属性就是元素本身自带的属性、比如<a>元素里面的href、比如<input>元素里面的type

设置或获取元素自定义属性值

用户自己给元素添加的属性、我们称为自定义属性,比如给div添加index=“1”

 

 

 

主要是遍历、创建、添加、删除元素操作

遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作,如果想要给同一类元素做不同操作,就需要用到遍历

jQuery尺寸

 

 

 jQuery位置

位置主要是三个:offset()、position()、scrollTop()/scrollLeft()

1.offset()设置或获取元素偏移

1.offset()方法设置或返回被选元素相对于文档的偏移坐标、跟父级没有关系

2.该方法有2个属性left、top。offset().top 用于获取距离文档顶部的距离,offset().left用于获取距离文档左侧的距离

3.可以设置元素的偏移:offset({top:10,left30});

2.position()获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档稳准

3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

scrollTop()方法设置或返回被选元素被卷去的头部

 

事件处理 on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

 

 

 

 

 

1.events:一个或多个用空格分隔的事件类型、如"click"或"keydown"

2.selector:元素的子元素选择器

3.fn:回调函数 即绑定在元素身上的侦听函数

 
事件处理off()解绑事件
off()方法可以移除通过 on()方法添加的事件处理程序

 

 如果有的事件只想触发一次、可以使用one()来绑定事件

 

自动触发事件 trigger()

有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致,可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发

 

 

 

jQuery事件对象

事件被触发,就会有事件对象的产生

 

 

阻止默认行为:event.preventDefault() 或者return false

阻止冒泡:event.stoPropagation()

posted @ 2022-04-25 09:28  奥摩前端  阅读(94)  评论(0编辑  收藏  举报