01-JQUERY入门导读
02-JAVASCRIPT库
什么是js库?
JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)
03-jQuery概述
jQuery优点有哪些?
1.轻量级。核心文件才几十kb,不会影响页面加载速度。
2.跨浏览器兼容,基本兼容了现在主流的浏览器。
3.链式编程、隐式迭代。
4.对事件、样式、动画支持,大大简化了DOM操作。
5.支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等。6.免费、开源。
04-jQuery基本使用-入口函数
如何下载jquery?
https://jquery.com/
jquery入口函数的两种写法?
//第一种:简单易用。
$ ( function ( ) {
... l/此处是页面DOM加载完成的入口
}) ;
//第二种:繁琐,但是也可以实现
$ ( document ) .ready ( function ( ){
... 1l此处是页面pOM加载完成的入口
} );
05-jQuery顶级对象$
$和jQuery有什么区别和联系?
$是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用 $
$在jQuery中的作用是什么?
$是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用jQuery 的方法。
06-DOM对象和jQuery对象
DOM对象和jQuery对象有什么区别?
07-DOM对象和jQuery对象相互转换
如何将DOM对象转为jQuery对象?
$(DOM对象)
如何将jQuery对象转为DOM对象?
jQuery对象[索引值]
jQuery对象.get(索引值)
08-jQuery常用API导读
09-jQuery基本和层级选择器
jQuery中选择器的基本写法是什么?
$("选择器")
名称 用法 描述
ID选择器 $(""#id") 获取指定ID的元素
全选选择器 $('*') 匹配所有元素
类选择器 $(".class") 获取同一类class的元素
标签选择器 $("div") 获取同一类标签的所有元素
并集选择器 $("div,p,li") 选取多个元素
交集选择器 $("li.current") 交集元素
10-jQuery隐式迭代
什么叫做隐式迭代?
简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
11-jQuery筛选选择器
如何选择第一个元素?
:first
如何选择某个位置的元素?
:eq(index)
index从0开始
奇偶数位置的元素如何选择?
:odd
:even
12-jQuery筛选方法-选取父子元素
如何筛选父级元素?
parent()
如何筛选子级元素?
children(选择器)
如何筛选元素内部任意层级的元素(儿子,孙子..)?
find(选择器)
13-新浪下拉菜单
14-jQuery其他筛选方法
如何选择除了自身元素之外的所有亲兄弟?
siblings(选择器)
如何选择特定位置的元素?
eq(index)
判断是否有某个类名?
hasClass(类名)
15-jQuery排他思想
排他思想:当前元素设置样式,其余的兄弟元素清除样式
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
16-淘宝服饰精品案例
如何获取当前元素的索引号?
$(this).index()
17-jQuery链式编程
链式编程的好处是什么?
链式编程是为了节省代码量,看起来更优雅
18-jQuery修改样式css方法
修改样式css方法有哪些常见形式?
1.参数只写属性名,则是返回属性值
var strColor = $(this).css('color');
2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
19-jQuery修改样式操作类
如何添加类?
$("div").addClass("current");
如何删除类?
$("div").removeClass("current");
如何切换类?
$("div").toggleClass("current");
20-tab栏切换案例
21-jQuery类操作和className区别
jQuery类操作和className有什么区别?
className会将之前的类名覆盖
jQuery类操作不会影响以前的类名
22-jQuery显示与隐藏效果
如何显示元素?
show()
show([speed,[easing],[fn]])
speed:定义时间
easing:设置动画加速度
fn:动画结束的回调函数
如何隐藏元素?
hide()
hide([speed,[easing],[fn]])
如何切换元素的显示和隐藏?
toggle()
toggle([speed,[easing],[fn]])
23-jQuery滑动效果以及事件切换
如何上滑?
slideUp()
如何下滑?
slideDown()
如何切换滑入滑出?
slideToggle()
hover事件有什么作用?
能够同时监听鼠标移入和移出事件
hover([over,]out) // 其中over和out为两个函数
如果只写一个函数,则鼠标经过和离开都会触发它
24-jQuery停止动画排队stop
如何停止上一次的动画?
stop()
每次使用动画之前,先调用 stop() ,在调用动画
25-jQuery淡入淡出以及突出显示案例
如何淡入?
fadeIn()
如何淡出?
fadeOut()
如何切换淡入淡出?
fadeToggle()
如何调整到指定透明度?
fadeTo()
26-jQuery自定义动画animate方法
自定义动画的语法规范是什么样子的?
animate(params, [speed], [easing], [fn])
27-王者荣耀手风琴案例布局分析
28-王者荣耀手风琴案例制作
<script type="text/javascript">
$(function() {
// 鼠标经过某个小li 有两步操作:
$(".king li").mouseenter(function() {
// 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});
</script>
JQUERY 01
最新推荐文章于 2024-10-30 19:10:39 发布
这篇博客详细介绍了jQuery的基础知识,包括它的轻量级特性、跨浏览器兼容性、链式编程以及DOM操作的简化。讲解了如何下载jQuery,以及入口函数的两种写法。还深入探讨了jQuery的选择器、事件、动画效果以及类操作,提供了实用的案例,如下拉菜单、tab栏切换和手风琴效果。此外,还对比了jQuery类操作与原生className的区别,并展示了如何使用animate方法实现自定义动画。
摘要由CSDN通过智能技术生成