偶尔尽管看不进随想-jQuery动画特效篇&MySQL

by admin on 2019年4月2日

  hi

早上知晓新的乱斗格局后,没忍住开了几把,然后就无心杂文了。。。用这么些来破吧

1、jQuery

—–动画特效—–

—-调用show()和hide()方法彰显和隐藏成分

show()hide()办法用于呈现或隐蔽页面中的元素,它的调用格式分别为:

$(selector).hide(speed,[callback])$(selector).show(speed,[callback])

参数speed设置隐藏或呈现时的快慢值,可为“slow”、“fast”或微秒数值,可挑选参数callback为隐蔽或显示动作执行到位后调用的函数名。

<body>
<h三>使用show()和hide()方法呈现和隐藏成分</h3>
<div>
<h四>笔者爱不释手吃的瓜果</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id=”hidval” type=”hidden” value=”0″/>
</div>

<script type=”text/javascript”>
$(function () {
$(“h4”).bind(“click”, function () {
if ($(“#hidval”).val() == 0) {
$(“ul”).show();
$(“#hidval”).val(1);
} else {
$(“ul”).hide();
$(“#hidval”).val(0);
}
});
});
</script>
</body>

—-动画效能的show()和hide()方法

在上一小节中,调用show()hide()主意仅是贯彻的成分的突显和隐身功效,尽管在那几个格局中扩展“speed”参数能够完结动画效果的来得与潜伏,同时,假使添加了办法的回调函数,它将在展现或隐藏执行成功后被调用。

<body>
<h三>show()和hide()方法动画情势显示和隐藏成分</h3>
<div>
<h4>小编喜悦吃的水果</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id=”hidval” type=”hidden” value=”0″/>
</div>

<script type=”text/javascript”>
$(function () {
$(“h4”).bind(“click”, function () {
if ($(“#hidval”).val() == 0) {
$(“ul”).show(“slow”,function(){
$(“#hidval”).val(1);
})
} else {
$(“ul”).hide(“slow”,function(){
$(“#hidval”).val(0);
})
}
})
});
</script>
</body>

—-调用toggle()方法完结动画切换效果

率先节大家学过完结要素的来得与隐藏须要接纳hide()show(),那么有未有更便捷的主意来落到实处均等的动画效果呢?

调用toggle()措施就足以很不难形成,即假设成分处于呈现状态,调用该形式则藏身该因素,反之,则显示该因素,它的调用格式是:

$(selector).toggle(speed,[callback])

其间speed参数为卡通效果时的进度值,能够为数字,单位为微秒,也只是“fast”、“slow”字符,可选用参数callback为格局执行成功后回调的函数名称。

<body>
<h3>toggle()方法的卡通片切换效果</h三>
<div>
<h4>
<span class=”fl”>笔者爱好吃的瓜果</span>
<span class=”fr” id=”spnTip”>显示</span>
</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
</div>

<script type=”text/javascript”>
$(function () {
var $spn = $(“#spnTip”);
$(“h4”).bind(“click”, function () {
$($spn).toggle(“slow”,function(){
$spn.html() == “隐藏” ? $spn.html(“显示”) : $spn.html(“隐藏”);
})
});
});
</script>
</body>

—-使用slideUp()和slideDown()方法的滑动作效果果

能够使用slideUp()slideDown()艺术在页面中滑动成分,前者用于发展滑动成分,后者用于向下滑动成分,它们的调用方法分别为:

$(selector).slideUp(speed,[callback])$(selector).slideDown(speed,[callback])

里面speed参数为滑行时的快慢,单位是皮秒,可挑选参数callback为滑行成功后实施的回调函数名。

要留意的是:slideDown()仅适用于被埋伏的要素;slideup()相反。

<body>
<h叁>使用slideUp()和slideDown()方法的滑行效果</h三>
<div>
<h4>作者欣赏吃的果品</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id=”hidval” type=”hidden” value=”0″/>
</div>

<script type=”text/javascript”>
$(function () {
$(“h4”).bind(“click”, function () {
if ($(“#hidval”).val() == 0) {
$(“ul”).slideUp(“fast”,function(){
$(“#hidval”).val(1);
})
} else {
$(“ul”).slideDown(“fast”,function(){
$(“#hidval”).val(0);
})
}
})
});
</script>
</body>

只顾:JS对大小写敏感,函数名并非写错(不要问作者是怎么掌握的

—-使用slideToggle()方法达成图片“变脸”效果

使用slideToggle()主意能够切换slideUp()slideDown(),即调用该办法时,若是成分已提升滑动,则元素自动向下滑动,反之,则成分自动进化滑动,格式为:

$(selector).slideToggle(speed,[callback])

中间speed参数为动画效果时的进度值,能够为数字,单位为阿秒,也然则“fast”、“slow”字符,可选用参数callback为艺术执行成功后回调的函数名称。

<body>
<h三>使用slideToggle()方法切换滑动作效果果</h三>
<div>
<h4>
<span class=”fl”>作者爱好吃的果品</span>
<span class=”fr” id=”spnTip”>向下滑</span></h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id=”hidval” type=”hidden” value=”0″/>
</div>

<script type=”text/javascript”>
$(function () {
var $spn = $(“#spnTip”);
$(“h4”).bind(“click”, function () {
$(“ul”).slideToggle(“fast”,function(){
$spn.html() == “向下滑” ? $spn.html(“向上滑”) : $spn.html(“向下滑”);
})
})
});
</script>
</body>

—-使用fadeIn()与fadeOut()方法完毕淡入淡出效果

fadeIn()fadeOut()措施能够兑现要素的淡入淡出效果,前者淡入隐藏的要素,后者能够退出可知的成分,它们的调用格式分别为:

$(selector).fadeIn(speed,[callback])$(selector).fadeOut(speed,[callback])

中间参数speed为淡入淡出的速度,callback参数为成功后进行的回调函数名。

<body>
<h三>使用fadeIn()与fadeOut()方法达成要素淡入淡出的效能</h三>
<div>
<h四>笔者欣赏吃的果品</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id=”hidval” type=”hidden” value=”0″/>
</div>

<script type=”text/javascript”>
$(function () {
$(“h4”).bind(“click”, function () {
if ($(“#hidval”).val() == 0) {
$(“ul”).fadeIn(“fast”,function(){
$(“#hidval”).val(1);
})
} else {
$(“ul”).fadeOut(“fast”,function(){
$(“#hidval”).val(0);
})
}
})
});
</script>
</body>

—-使用fadeTo()方法设置淡入淡出效果的不发光度

调用fadeTo()艺术,能够将所选取元素的不反射率以淡入淡出的功效调整为钦定的值,该方法的调用格式为:

$(selector).fadeTo(speed,opacity,[callback])

个中speed参数为意义的快慢,opacity参数为钦定的不透明值,它的取值范围是0.0~壹.0,可选拔参数callback为功能实现后,回调的函数名。

<body>
<h三>使用fadeTo()方法设置淡入淡出效果的不发光度</h三>
<span class=”red”></span><span
class=”orange”></span><span class=”blue”></span>

<script type=”text/javascript”>
$(function () {
$(“span”).each(function (index) {
switch (index) {
case 0:
$(“.red”).fadeTo(“fast”,0.2);
break;
case 1:
$(“.orange”).fadeTo(“fast”,0.4);
break;
case 2:
$(“.blue”).fadeTo(“fast”,0.6);
break;
}
});
});
</script>
</body>

—-调用animate()方法制作简便的卡通片效果

调用animate()情势能够创设自定义动画效果,它的调用格式为:

$(selector).animate({params},speed,[callback])

里头,params参数为创建动画效果的CSS属性名与值,speed参数为动画的效应的进程,单位为纳秒,可选项callback参数为动画片完毕时实行的回调函数名。

<body>
<h三>制作不难的动画片效果</h3>
<span></span>
<div id=”tip”></div>

<script type=”text/javascript”>
$(function () {
$(“span”).animate({
width: “80px”,
height: “80px”
},
3000, function () {
$(“#tip”).html(“执行到位!”);
});
});
</script>
</body>

—-调用animate()方法制作活动地方的卡通

调用animate()办法不仅能够制作简便稳步变大的动画效果,而且仍是能够塑造活动地点的卡通片,在移动地点此前,必须将被移成分的“position”属性值设为“absolute”或“relative”,不然,该因素移动不了。

<body>
<h三>制作活动地点的卡通</h三>
<span></span>
<div id=”tip”></div>

<script type=”text/javascript”>
$(function () {
$(“span”).animate({
left: “+=100px”
}, 3000, function () {
$(“span”).animate({
height: ‘+=30px’,
width: ‘+=30px’
}, 3000, function () {
$(“#tip”).html(“执行到位!”);
});
});
});
</script>
</body>

—-调用stop()方法结束当前享有动画效果

stop()情势的效果是在动画完毕从前,结束当前正在进行的动画效果,这个功效包蕴滑动、淡入淡出和自定义的动画片,它的调用格式为:

$(selector).stop([clearQueue],[goToEnd])

个中,五个可挑选参数clearQueue和goToEnd都是布尔类型值,前者表示是还是不是终止正在推行的动画,后者表示是或不是形成正在履行的卡通片,暗中认可为false。

<body>
<h三>调用stop()方法甘休当前颇具动画效果</h三>
<span></span>
<input id=”btnStop” type=”button” value=”停止” />
<div id=”tip”></div>

<script type=”text/javascript”>
$(function () {
$(“span”).animate({
left: “+=100px”
}, 3000, function () {
$(this).animate({
height: ‘+=60px’,
width: ‘+=60px’
}, 3000, function () {
$(“#tip”).html(“执行到位!”);
});
});
$(“#btnStop”).bind(“click”, function () {
$(“span”).stop();
$(“#tip”).html(“执行甘休!”);
});
});
</script>
</body>

—-调用delay()方法延时执行动画效果

delay()艺术的成效是设置3个延时值来延缓动画效果的施行,它的调用格式为:

$(selector).delay(duration)

在那之中参数duration为延时值,它的单位是飞秒,当跨越延时值时,动画继续执行。

<body>
<h三>调用delay()方法延时执行动画效果</h三>
<span></span>
<input id=”btnStop” type=”button” value=”延时” />
<div id=”tip”></div>

<script type=”text/javascript”>
$(function () {
$(“span”).animate({
left: “+=100px”
}, 3000, function () {
$(this).animate({
height: ‘+=60px’,
width: ‘+=60px’
}, 3000, function () {
$(“#tip”).html(“执行到位!”);
});
});
$(“#btnStop”).bind(“click”, function () {
$(“span”).delay(3000);
$(“#tip”).html(“正在延时!”);
});
});
</script>
</body>

2、MySQL

—–子查询与连接—–

—-复习

上三次是增加和删除改查

根本记住,前多少个是写操作;改是读操作

—-数据准备

创造叁个电子商城的数据表的压缩版如下

创建数据库和数据表

mysql> CREATE DATABASE Tables_in_imooc;

mysql> USE Tables_in_imooc;

mysql> CREATE TABLE IF NOT EXISTS tdb_goods(
-> goods_id SMALLINT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
-> goods_name VARCHAR(150) NOT NULL,
-> goods_cate VARCHAR(40) NOT NULL,
-> brand_name VARCHAR(40) NOT NULL,
-> goods_price DECIMAL(15,3) UNSIGNED NOT NULL DEFAULT 0,
-> is_show BOOLEAN NOT NULL DEFAULT 1,
-> is_saleoff BOOLEAN NOT NULL DEFAULT 0
-> );

mysql> SHOW COLUMNS FROM TDB_GOODS;
+————-+————————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————-+————————+——+—–+———+—————-+
| goods_id | smallint(5) unsigned | NO | PRI | NULL | auto_increment
|
| goods_name | varchar(150) | NO | | NULL | |
| goods_cate | varchar(40) | NO | | NULL | |
| brand_name | varchar(40) | NO | | NULL | |
| goods_price | decimal(15,3) unsigned | NO | | 0.000 | |
| is_show | tinyint(1) | NO | | 1 | |
| is_saleoff | tinyint(1) | NO | | 0 | |
+————-+————————+——+—–+———+—————-+

布置记录

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘奥迪Q55十VC
一5.6英寸台式机’,’台式机’,’Lenovo’,’339玖’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘Y400N
1四.0英寸台式机电脑’,’台式机’,’联想’,’489九’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘G150TH
15.陆英寸台式机’,’台式机’,’雷王’,’849九’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘X550CC
一五.6英寸台式机’,’台式机’,’Acer’,’279九’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘X240(20ALA0EYCD)
12.伍英寸超极本’,’拔尖本’,’联想’,’499九’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘U330P 壹三.3英寸超极本’,’一级本’,’联想’,’429玖’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘SVP132贰六SCB
一叁.三英寸触控超极本’,’一级本’,’索尼(Sony)’,’799玖’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘华为平板 mini MD531CH/A
七.玖英寸平板电脑’,’三星GALAXY Tab’,’苹果’,’19九陆’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘surface Air MD788CH/A 玖.7英寸三星GALAXY Tab (1六G
WiFi版)’,’平板电脑’,’苹果’,’3388′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘ GALAXY Tab mini ME279CH/A 配备 Retina 显示器 7.玖英寸三星平板 (1陆G
WiFi版)’,’GALAXY Tab’,’苹果’,’278八’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘IdeaCentre C340 20英寸一体电脑
‘,’台式机’,’联想’,’349玖’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘Vostro 3800-Highlander1206台式电脑’,’台式机’,’戴尔’,’289玖’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘iMac ME0八陆CH/A
21.伍英寸1体电脑’,’笔记本’,’苹果’,’9188′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘AT7-741四LP 台式电脑 (i伍-3450四核 四G 500G 2G独显 VCD 键鼠 Linux
)’,’台式机’,’宏碁’,’369九’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘Z220SFF
F4F06PA工作站’,’服务器/工作站’,’惠普’,’4288′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘PowerEdge T110
II服务器’,’服务器/工作站’,’戴尔’,’5388′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘Mac Pro MD878CH/A
专业级台式电脑’,’服务器/工作站’,’苹果’,’2888八’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘ HMZ-T3W
头戴展现设备’,’台式机配件’,’索尼(Sony)’,’699九’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘商务双肩背包’,’笔记本配件’,’索尼(Sony)’,’9九’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘X3250 M四机架式服务器
25八三i1四’,’服务器/工作站’,’IBM’,’688八’,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘玄龙舒适版台式机散热器’,’台式机配件’,’玖州黑风婆’,”,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘ HMZ-T3W
头戴显示设备’,’台式机配件’,’Sony’,’6999′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘商务双肩背包’,’台式机配件’,’Sony’,’9九’,DEFAULT,DEFAULT);

mysql> SELECT * FROM TDB_GOODS\G;

那儿展现数据看看有没有乱码,借使有,改gbk

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图