day0528-jQuery语法、选择器、特效

最新推荐文章于 2024-05-22 14:27:49 发布

简至大道

最新推荐文章于 2024-05-22 14:27:49 发布

阅读量93

点赞数 2

分类专栏：前端文章标签： jquery html html5

又见面了，惊不惊喜，意不意外

本文链接：https://blog.csdn.net/zxyhj/article/details/119935983

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

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的选择器

```html

高山流水

I 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=“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$ =“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: \dots,'background':'#̲ccc'}); //组合式选择\dots$ (’.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: \dots点击的是谁,并设置样式 //$ (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).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: \dots).toggle(300); }̲) // 2.上下滑动,sli\dots$ (’.su’);
var btnSd= $(^{'} . s d^{'}); v a r b t n S t =$ (’.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: \dotsdeTo(2000,1); }̲); }); // 4.jqu\dots$ 操作符转成自定义的名称jq
//var btnAnim = jq(’.btnAnim’);
var btnAnim = $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots值},时长,回调函数) //$ (’.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的多种特效，并尝试运用到网页中的按钮，导航条上增加用户体验

简至大道

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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的选择器```html 高山流水 I am
复制链接

扫一扫