day0528-jQuery语法、选择器、特效
day0528-jQuery语法、选择器、特效
本节内容
1.jQuery简介
2.jQuery语法
3.jQuery基本选择器
4.jQuery特效
一.jquery语法与选择器
1.html/css代码
<head>
<meta charset="utf-8" />
<title>jquery语法与选择器</title>
</head>
<body>
jquery的选择器
```htmlI am tom!
LOL1
LOL2
风景这边独好
LOL3
LOL4
2.jquery代码
//jquery标准的预加载方式
$(document).ready(function(){
$(’.wrap’).css({‘width’:‘300px’,‘height’:‘150px’,‘border’:‘1px dotted red’});
// 1.属性选择格式一
(
′
[
h
r
e
f
]
′
)
.
c
s
s
(
′
c
o
l
o
r
′
,
′
g
r
e
e
n
′
)
;
/
/
2.
属
性
选
择
格
式
二
v
a
r
m
a
=
('[href]').css('color','green'); // 2.属性选择格式二 var ma=
(′[href]′).css(′color′,′green′);//2.属性选择格式二varma=(’[href=“http://www.ifeng.com”]’);
ma.css(‘border’,‘2px solid blue’);
ma.css(‘display’,‘inline-block’);
ma.css(‘width’,‘200px’);
// 3.属性选择格式三
//修改属性的值：attr(属性名,新值);
//获取属性的值：attr(属性名);
// ^=找属性值以某些字符开头的元素,$=找属性值以某些字符结尾的元素
(
′
[
t
i
t
l
e
('[title
(′[title=“a”]’).css(‘color’,‘red’).attr(‘title’,‘我改了’);
//属性选择器找input并改值,此时可以直接使用val()方法
// $("[type=text]").val(‘请入你的姓名’).css(‘font-size’,‘2rem’);
//input如果没显式地添加value属性则有默认
$("[type=text]").attr(‘value’,‘请输入密码’).css(‘font-size’,‘26px’);
// 元素都有属性可以找到
//所有元素都有的属性一般有：id,class,title,onclick等
// 元素特有属性：a有：href,img有：src/alt,input有value/type
$("[type=text]").attr(‘title’,‘我是input’);
//4.this选择器的作用
$(’.p1’).click(function(){
// 找点击当前对象
$(this).text(‘我是bean’).css(‘font-size’,‘25px’);
});
//5.高级与组合
KaTeX parse error: Expected '}', got '#' at position 66: …,'background':'#̲ccc'}); //组合式选择…(’.content>div>p:nth-of-type(2)’);
pp.css({‘height’:‘80px’,‘background’:‘pink’});
var poems=[‘一片冰心在玉壶’,‘二月春似剪刀’,‘三山五岳任我行’];
var ps=$(’.content>div>p’);
ps.css({‘height’:‘60px’});
ps.eq(0).css(‘border’,‘1px solid red’);
ps.eq(1).css(‘border’,‘1px solid green’);
ps.eq(2).css(‘border’,‘1px solid blue’);
for(var i=0;i<ps.length;i++){
ps.eq(i).text(poems[i]).css({‘text-align’:‘center’,‘line-height’:‘60px’});
}
// 6.this选择器,pre()/next()
//this能方便区分当前正在操作的名称相同的某一个对象
KaTeX parse error: Expected '}', got 'EOF' at end of input: …点击的是谁,并设置样式 //(this).css(‘background’,‘pink’);
// 找出当前点击的对象并设置样式，同时接着找其它的兄弟元素，也设置样式
//$(this).css(‘background’,‘pink’).siblings(‘h3’).css(‘background’,‘white’);
//next()中没有参数，则按顺序往下找下一个元素,如果有参数(元素名)则按要判断下一个是
//否为参数中的元素，不是则找不到
$(this).next().css(‘background’,‘grey’);
(
t
h
i
s
)
.
n
e
x
t
(
′
h
3
′
)
.
c
s
s
(
′
b
a
c
k
g
r
o
u
n
d
′
,
′
p
i
n
k
′
)
;
/
/
i
n
d
e
x
(
)
方
法
能
够
拿
到
一
系
列
元
素
的
索
引
号
v
a
r
i
n
d
=
(this).next('h3').css('background','pink'); //index()方法能够拿到一系列元素的索引号 var ind=
(this).next(′h3′).css(′background′,′pink′);//index()方法能够拿到一系列元素的索引号varind=(this).index();
alert(ind);
});
//找p元素上一个元素
$(’.more>p’).prev().css(‘background’,‘pink’);
//找p元素的下一个元素
$(’.more>p’).next().css(‘background’,‘orange’);
//7.jquery的css()样式设置，能够动态设置元素的样式，有两种格式
/**
- 对象.css(属性名,值);
- 对象.css({属性名:值,属性名:值,属性名:值,属性名:值});
*/
});
二.jquery特效
//1.显示/隐藏,show()/hidden()/toggle()
var btnShow = $(’.show’);
var btnHide = $(’.hide’);
var btnToggle = $(’.toggle’);
btnShow.click(function(){//显示
// $(’.content1’).show();
// $(’.content1’).show(时长);
// $(’.content1’).show(回调函数);
// $(’.content1’).show(时长,回调函数);
// 参数：无/low/fast,毫秒数(1000/500)
$(’.content1’).show(3500);
})
btnHide.click(function(){//隐藏
// 参数：无/low/fast,毫秒数(1000/500)
$(’.content1’).hide(500);
})
btnToggle.click(function(){//来回切换
// 参数：无/low/fast,毫秒数(1000/500)
KaTeX parse error: Expected 'EOF', got '}' at position 28: …).toggle(300); }̲) // 2.上下滑动,sli…(’.su’);
var btnSd=
(
′
.
s
d
′
)
;
v
a
r
b
t
n
S
t
=
('.sd'); var btnSt=
(′.sd′);varbtnSt=(’.st’);
// 事件的另一种写法
btnSu.on(‘click’,function(){
//可以有参数，也可以没有
$(’.content2’).slideUp(500);
});
btnSd.on(‘click’,function(){
$(’.content2’).slideDown(400);
});
btnSt.on(‘click’,function(){
$(’.content2’).slideToggle(400);
});
// 有回调函数的操作,一个动作结束后,能继续做另一件事,增强功能
btnSu.on(‘click’,function(){
//可以有参数，也可以没有
$(’.content2’).slideUp(500,function(){//回调
alert(‘我警告你，我喜欢上你啦!’);
});
});
// 3.透明度的设置,淡入/淡出/切换/指定透明,fadeIn/fadeOut/fadeToggle/fadeTo
var btnFi = $(’.fadeIn’);
var btnFo = $(’.fadeOut’);
var btnFtg = $(’.fadeToggle’);
var btnFto = $(’.fadeTo’);
btnFi.click(function(){//变亮,淡入
$(’.content3’).fadeIn(1000);
});
btnFo.click(function(){//变暗,淡出
$(’.content3’).fadeOut(1200);
});
btnFtg.click(function(){//来回切换明暗
$(’.content3’).fadeToggle(1200);
});
btnFto.click(function(){//设置透明度0-1之间,会影响其它效果,大于1还是1
// 参数最少有2个(时长,透明度),也可以是三个(时长,透明度,回调函数)
$(’.content3’).fadeTo(500,0.1,function(){
KaTeX parse error: Expected 'EOF', got '}' at position 25: …deTo(2000,1); }̲); }); // 4.jqu…操作符转成自定义的名称jq
//var btnAnim = jq(’.btnAnim’);
var btnAnim = KaTeX parse error: Expected '}', got 'EOF' at end of input: …值},时长,回调函数) //(’.content4’).animate({‘height’:‘toggle’},300);//来回切换大小
$(’.content4’).animate({‘left’:‘160px’,‘width’:‘200px’},200);
$(’.content4’).animate({‘top’:‘180px’,‘width’:‘200px’},500);
$(’.content4’).animate({‘left’:‘0px’,‘width’:‘200px’},500);
$(’.content4’).animate({‘top’:‘0px’,‘width’:‘100px’},800);
});
// 停止jquery其它特效stop()
var btnStop = $(’.btnStop’);
btnStop.click(function(){
// 停止正在运行动画
$(’.content4’).stop();
});
实战练习
1.创建网页,在网页中创建至少6个元素并设置id、class、属性等，分别运用jquery的id选择器,类选择器,元素选择器与属性选择器找到元素，并修改其样式。
2.设计如图所示的页面(附部分素材)
3.运用jquery设计轮播图效果，要求：有指示器效果
$(’.btnStop’);
btnStop.click(function(){
// 停止正在运行动画
$(’.content4’).stop();
});
实战练习
1.创建网页,在网页中创建至少6个元素并设置id、class、属性等，分别运用jquery的id选择器,类选择器,元素选择器与属性选择器找到元素，并修改其样式。
2.设计如图所示的页面(附部分素材)
3.运用jquery设计轮播图效果，要求：有指示器效果
4.创建多个div练习jquery的多种特效，并尝试运用到网页中的按钮，导航条上增加用户体验
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）