学习目标:
1.jQuery基本使用
2.jQuery顶级对象
3.jQuery对象和dom对象
4.jQuery和dom对象可以互相转化
5.jQuery隐式迭代
6.jQuery筛选选择器
7.jQuery筛选方法
8.jQuery排他思想
9.淘宝精品服饰展示案例
10.链式编程
11.jQuery操作css方法
12.tab栏切换案例
13.jQuery效果
14.简洁版滑动下拉菜单
15.淡入淡出效果
16.自定义动画
17.设置元素的固有属性
学习内容:
1.jQuery基本使用
1)
(
“
d
i
v
”
)
.
h
i
d
e
(
)
立
即
执
行
2
)
(“div”).hide()立即执行 2)
(“div”).hide()立即执行2)(function(){
$(“div”).hide()
})等待页面加载完毕后才执行jQuery代码
<script>
// $('div').hide();
//等着页面加载完毕后在执行js代码
// $(document).ready(function(){
// $('div').hide();
// })
$(function(){
$('div').hide();
})
</script>
2.jQuery顶级对象
1)$是jquery的别称
<script>
//$是jquery的别称
// $(function{
// alert(11)
// })
jQuery(function(){
alert(11)
})
</script>
3.jQuery对象和dom对象
1)jQuery获取的对象只能使用jQuery的方法,和dom两者不能相互通用。
<script>
//1.dom对象:用原生js代码获取的对象
var div=document.querySelector('.div')
//2.jquery对象:用jquery方法获取来的对象
$('div');
$('span')
//jquery只能实验jquery的方法,两者不能互相通用
</script>
4.jQuery和dom对象可以互相转化
1)dom对象转化为jQuery对象
2)
(
d
o
m
对
象
)
就
可
以
调
用
d
o
m
对
象
方
法
3
)
(dom对象)就可以调用dom对象方法 3)
(dom对象)就可以调用dom对象方法3)()获取来的元素是一个伪数组,加上数组下标就可以调用dom对象方法
<script>
//1.dom对象转换为jquery对象
//1)我们直接获取视频得到的就是jquery对象
$('video')
//2)我们以及使用原生js获取过来的dom对象
var myvideo=document.querySelector('video')
$(myvideo).play()
//jquery里面没有play这个方法
//2.jquery对象转换为dom对象
$('video')[0].play()
$('video').get(0).play()
</script>
5.jQuery隐式迭代
<script>
//1.获取四个div元素
console.log($('div'));
//2.给四个div设置背景颜色
$('div').css("background","pink")
//3.隐式迭代就是把匹配的所有元素内部进行遍历循环,给每个元素添加css属性
</script>
6.jQuery筛选选择器
1)ul li:first ul中li的第一个元素
2)ul li:eq(2) ul中li下标为2的元素
3)ol li:odd 奇数
4)ol li:even偶数
$(function(){
$("ul li:first").css("color","pink")
$("ul li:eq(2)").css("color","pink")
$("ol li:odd").css("color","pink")
$("ol li:even").css("color","skyblue")
})
</script>
7.jQuery筛选方法
1)parent返回的是最近一级的父亲
<script>
$(function(){
//1.parent返回的是最近一级的父亲
console.log($(".son").parent);
})
</script>
8.jQuery排他思想
1)隐式迭代,默认给所有按钮都绑定了点击事件
2)
(
t
h
i
s
)
.
c
s
s
(
)
给
点
击
当
前
按
钮
修
改
c
s
s
3
)
(this).css()给点击当前按钮修改css 3)
(this).css()给点击当前按钮修改css3)(this).siblings().css()给当前元素
<script>
$(function(){
//1.隐式迭代,给所有按钮都绑定了点击事件
$("button").click(function(){
//2.给当前元素变化元素,
$(this).css("background","pink")
//3.其余兄弟去掉背景颜色。
$(this).siblings("button").css("background","")
})
})
</script>
9.淘宝精品服饰展示案例
1)鼠标经过左侧导航栏li
2)得到li的索引号,在让右侧盒子对应索引号的图片显示,其余的隐藏
<script>
$(function(){
//1.鼠标经过左侧的li
$("#left li").mouseover(function(){
//2.得到当前li的索引号
var index=$(this).index()
console.log(index);
//3.让外卖右侧盒子对应索引号的图片显示出来
$("#content div").eq(index).show()
$("#content div").eq(index).siblings().hide()
})
})
</script>
10.链式编程
<script>
$(function(){
$("button").click(function(){
// $(this).css("color","red").siblings().css("color","")
//我的颜色位红色,我的兄弟颜色位空
// $(this).siblings("color",red)
//我的兄弟变为红色,我不变色
$(this).siblings().parent().css('color',"red")
//我的兄弟的爸爸变色
})
})
</script>
11.jQuery操作css方法
1)操作css宽度大小等时候可带px可不带px
2)可同时修改多个css值用{}包含,每个属性之间用,连接
3)符合属性必须采用驼峰命名法
4) 如果只写了属性名,则返回属性值。
5)添加类
(
)
.
a
d
d
c
l
a
s
s
(
)
6
)
删
除
类
().addclass() 6)删除类
().addclass()6)删除类().removeClass()
7)切换类$().toggleClass()
<script>
//操作样式之css方法、
$(function(){
console.log($("div").css("width"));
// $("div").css("width",300)
// $("div").css("width","300px")
// $("div").css({
// width:400,
// height:400,
// backgroundColor:"red"
//复合属性必须采用驼峰命名法
//如果只写了属性名,返回属性值
// })
//添加类
// $("div").click(function(){
// $(this).addClass("current")
// })
// //删除类
// $("div").click(function(){
// $(this).removeClass("current")
// })
// })
//3.切换类
$("div").click(function(){
$(this).toggleClass("current");
})
})
</script>
12.tab栏切换案例
1)点击li当前li添加类,其余兄弟移除类
2)点击的同时获取当前li的索引号
3)让下面的内容模块相应索引号的内容显示,其余隐藏。
<script>
$(function(){
//1.点击顶部li,当前li添加current类,其余兄弟移除类
$(".tab_list li").click(function(){
$(this).addClass("current").siblings().removeClass("current")
//2.点击的同时,得到li的索引号
var index=$(this).index()
console.log(index);
//3.让下部的相应索引号item显示,其余隐藏
$(".tab_con .item").eq(index).show().siblings().hide()
})
})
</script>
13.jQuery效果
1)hide()隐藏可添加动作执行事件,和回调函数
2)toggle()显示和隐藏来回切换
<script>
$(function(){
$("button").eq(1).click(function(){
$("div").hide(1000,function(){
})
})
$("button").eq(0).click(function(){
$("div").show(1000,function(){
})
})
$("button").eq(2).click(function(){
$("div").toggle(1000)
})
//一般情况都不加参数,直接显示和隐藏就行
})
</script>
14.简洁版滑动下拉菜单
1)slideDown向下滑动
2)slideUp向上滑动
3)sliderToggle下滑动切换
4)切换事件$().hover鼠标进入或者离开都会触发,
<script>
$(function(){
// $("button").eq(0).click(function(){
// //夏滑动slideDown
// $("div").slideDown()
// })
// $("button").eq(1).click(function(){
// //夏滑动slideUp
// $("div").slideUp()
// })
// $("button").eq(2).click(function(){
// //夏滑动slideT
// $("div").slideToggle()
// })
//事件切换
// $("button").eq(0).hover(function(){
// $("div").slideDown(200)
// },function(){
// $("div").slideUp(200)
// })
//2.事件切换hover如果只写一个函数,那么鼠标经过或者离开都会触发这个函数
$("button").eq(1).hover(function(){
//stop方法必须写到动画前面
$("div").stop().slideToggle(200)
})
})
</script>
15.淡入淡出效果
1)淡入fadeIn()
2)淡出fadaOut()
3)淡入淡出切换fadaToggle()
4)透明度修改fadaTo(1000,0.5)时间和透明度
<script>
$(function(){
$("button").eq(0).click(function(){
//淡入fadeIn()
$("div").fadeIn(1000)
})
$("button").eq(1).click(function(){
//淡入fadeOut()
$("div").fadeOut(1000)
})
$("button").eq(2).click(function(){
//淡入fadeToggle()
$("div").fadeToggle(1000)
})
$("button").eq(3).click(function(){
//淡入fadeTo()
$("div").fadeTo(1000,0.5)
})
})
</script>
16.自定义动画
1)animate({
css样式修改,
})
<script>
$(function(){
$("button").click(function(){
$("div").animate({
left:500,
top:500,
opacity:0.4,
width:1000,
},500);
})
})
</script>
17.设置元素的固有属性
1)
(
)
.
p
r
o
p
(
“
属
性
名
”
)
获
取
属
性
值
2
)
().prop(“属性名”)获取属性值 2)
().prop(“属性名”)获取属性值2)().prop(“属性名”,“属性值”)来修改属性值
3)元素自定义属性,通过attr()获取
4)数据缓存data()里面的数据是存放在元素内存中的。
5)这个方法获取data-index h5自定义属性时候,不需要写data,而且返回的是数字。
<script>
$(function(){
//element.prop(“属性名”)获取属性值
console.log($("a").prop("href"));
$("a").prop("title","wasd")
$("input").change(function(){
console.log($(this).prop("checked"));
})
//2.元素的自定义属性,通过attr()获取
console.log($("div").attr("index"));
$("div").attr("index",4)
console.log($("div").attr("data-index"));
//3.数据缓存data()这个里面的数据是存放在元素内存里面
$("span").data("uname","andy")
console.log($("span").data("uname"));
//这个方法获取data-index h5自定义属性,第一个不要写data- 而且返回的是数字属性
console.log($("div").data("index"));
})
</script>
学习时间:
2021.11.4