JQUERY 01

这篇博客详细介绍了jQuery的基础知识,包括它的轻量级特性、跨浏览器兼容性、链式编程以及DOM操作的简化。讲解了如何下载jQuery,以及入口函数的两种写法。还深入探讨了jQuery的选择器、事件、动画效果以及类操作,提供了实用的案例,如下拉菜单、tab栏切换和手风琴效果。此外,还对比了jQuery类操作与原生className的区别,并展示了如何使用animate方法实现自定义动画。
摘要由CSDN通过智能技术生成
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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值