jQuery基本使用_选择器_淘宝服饰切换案例_样式操作_效果

文章目录

一、基本使用
- 1.jquery入口函数
- 2.$符
- 3.DOM对象和jQuery对象的转换
二、jquery选择器
- 1.基础选择器
- 2.隐式迭代
- 3.筛选选择器
- 4.筛选方法
- 5.排他思想
淘宝服饰案例
三、样式操作
- 1.操作css方法
- 2.设置类样式方法
四、效果
- 1.显示隐藏效果
- 2.滑动
- 3.事件切换
- - 解决动画排队问题 stop()
- 4.淡入淡出
- 5.自定义动画 animate
王者荣耀手风琴

一、基本使用

1.jquery入口函数

等着页面DOM加载完毕再执行js代码，不必等到所有外部资源加载完成

不同于js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码

2.$符

jQuery的顶级对象、jQuery的别称

获取jQuery对象 (伪数组形式)$('div')

**注：**①jQuery对象只能使用jQuery方法

②DOM对象则使用原生的JavaScript属性和方法

③DOM对象和jQuery对象可以相互转换

3.DOM对象和jQuery对象的转换

（1）DOM对象 => jQuery对象

<video src="xxx.mp4"></video><script>//直接获取视频$('video')//已经使用原生js获取过来的DOM对象var myvideo = document.querySelector('video')$(myvideo)</script>

（2）jQuery对象 => DOM对象

$('div')[index]
$('div').get(index)

$('video')[0].play()
$('video').get(0).play()j

二、jquery选择器

1.基础选择器

$("选择器")

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$(*)	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素

注： 设置样式

$("div").css("属性","值")

2.隐式迭代

把匹配的所有元素内部进行遍历循环，给每个元素添加css这个方法。（不必循环）

$(function(){$(".nav>li").mouseover(function(){$(this).children("ul").show();         //this表示当前元素 即li});$(".nav>li").mouseout(function(){$(this).children("ul").hide()})
})

3.筛选选择器

语法	用法	描述
:first	$("lifirst’)	获取第一个li元素
:last	$("lilast’)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$("“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“Ii:even”)	获取到的li元素中，选择索引号为偶数的元素

4.筛选方法

语法	用法	说明
parent()	$("“li”).parent()	查找父级
children(selector)	$(“ul”).children(“li”)	相当于`$("ul>li")`，最近一级（亲儿子)
find(selector)	$(“ul”).find(“li”);	相当于`$("ul li")`,后代选择器
siblings(selector)	$(".first").siblings(“li”)	查找兄弟节点，不包括自己本身
nextAll( [expr])	$(".first" ) .nextAll()	查找当前元素之后所有的同辈元素
prevtAl1([expr])	$(".last" ).prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$( ’ div’ ).hasClass(“protected”)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq(2)	相当于`$("li:eq(2)")` ,index从0开始

5.排他思想

$(function(){//隐式迭代，所有按钮绑定点击事件$("button").click(function(){//当前按钮背景颜色改变$(this).css("background","pink")//其余兄弟去掉背景颜色 隐式迭代$(this).siblings().css("background","")})
})

链式编程

$(this).css("background","pink").siblings().css("background","")

淘宝服饰案例

实现当鼠标经过某标题时，显示其相关内容。

①核心原理∶鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。

②需要得到当前小li的索引号，就可以显示对应索引号的图片

③jQuery得到当前元素索引号$(this).index

④对应的图片，可以通过eq(index)方法去选择

$(function(){$("#left li").mouseover(function(){var index = $(this).index();$("#content div").eq(index).show();$("#content div").eq(index).siblings().hide()})
})

三、样式操作

1.操作css方法

（1）参数只写属性名则是返回属性值

$(this).css("color")

（2）修改属性值

$(this).css("color","red")   //修改为红色

（3）修改多个属性，采用对象形式

$(this).css({"color":"red","fontSize:"20px"})     //属性可不加引号，此时复合属性采用驼峰命名法

2.设置类样式方法

（1）添加类 addClass()

（2）删除类 removeClass()

（3）切换类 toggleClass() 实现添加类和删除类

注：类操作和className的区别

原生JS中className会覆盖原来的类名

jquery里的类操作只是对指定类进行操作，不影响原先类名

四、效果

1.显示隐藏效果

（1）显示

show([speed],[easing],[fn])

speed：slow normal fast 或表示动画时长的毫秒数（1000）

easing：指定切换效果，默认是swing，可用linear

fn：回调函数，在动画完成时执行的函数，每个元素执行一次

（2）隐藏

hide([speed],[easing],[fn])

（3）切换（一般情况下，不加参数，直接显示隐藏）

toggle([speed],[easing],[fn])

2.滑动

（1）上拉 slideUp

（2）下拉 slideDown

（3）切换 slideToggle

3.事件切换

hover(鼠标经过的函数,鼠标离开的函数)

如果只写一个函数，那么鼠标经过和离开都会触发这个函数

解决动画排队问题 stop()

stop方法必须写在动画前，解决动画排队问题

$(".nav>li").hover(function(){$(this).children("ul").slideDown();
},function(){$(this).children("ul").slideUp();
})

$(".nav>li").hover(function(){$(this).children("ul").stop().slideToggle();
})

4.淡入淡出

（1）淡入

fadeIn([speed],[easing],[fn])

（2）淡出

fadeOut([speed],[easing],[fn])

（3）修改透明度

fadeTo([speed],opacity,[easing],[fn])    //opacity取值0-1（必写） speed必写

（3）淡入淡出切换

fadeToggle([speed],[easing],[fn])

5.自定义动画 animate

animate(params,[speed],[easing],[fn])

params：想要修改的样式属性，以对象形式编写，必写

王者荣耀手风琴

当鼠标放在上方出现大图片，移走显示为小图片

分析：当前li宽度224 small隐藏 big显示其他li宽度69 small显示 big隐藏

$(function(){$(".king li").mouseenter(function(){$(this).stop().animate({width:224},200).find(".small").fadeOut().siblings(".big").fadeIn();$(this).siblings("li").stop().animate({width:69},200).find(".small").fadeIn().siblings(".big").fadeOut();})
})