有时即使看不前进论文-jQuery动画特效篇&MySQL

  hi

早晓得新的乱斗模式后,没忍心住起来了几乎把,然后就无心论文了。。。用者来排除吧

1、jQuery

—–动画特效—–

—-调用show()和hide()方法显示和隐藏元素

show()hide()方式用于展示或潜伏页面被的元素,它的调用格式分别吗:

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

参数speed设置隐藏或显时的进度值,可也“slow”、“fast”或毫秒数价值,可选取参数callback为隐蔽或展示动作执行好后调用的函数名。

<body>
<h3>使用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();
$(“#hidval”).val(1);
} else {
$(“ul”).hide();
$(“#hidval”).val(0);
}
});
});
</script>
</body>

—-动画作用的show()和hide()方法

在达到同一不怎么节中,调用show()hide()计只有是促成之要素的亮和隐藏功能,如果在这些方式被加进“speed”参数可以实现动画效果的来得和潜伏,同时,如果上加了点子的回调函数,它用当亮或藏执行成功后为调用。

<body>
<h3>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()方法的动画片切换效果</h3>
<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>
<h3>使用slideUp()和slideDown()方法的滑效果</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”).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>
<h3>使用slideToggle()方法切换滑动效果</h3>
<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>
<h3>使用fadeIn()与fadeOut()方法实现要素淡入淡出的功效</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”).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~1.0,可摘参数callback为力量就后,回调的函数称作。

<body>
<h3>使用fadeTo()方法设置淡入淡出效果的未透明度</h3>
<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>
<h3>制作简便的卡通片效果</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>
<h3>制作活动位置的动画</h3>
<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>
<h3>调用stop()方法已当前享有动画效果</h3>
<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()计的力量是安一个延时值来延缓动画效果的实施,它的调用格式为:

$(selector).delay(duration)

内参数duration为延时值,它的单位凡毫秒,当跨越延时价值时,动画继续执行。

<body>
<h3>调用delay()方法延时执行动画效果</h3>
<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(‘R510VC
15.6英寸笔记本’,’笔记本’,’华硕’,’3399′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘Y400N
14.0英寸笔记本电脑’,’笔记本’,’联想’,’4899′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘G150TH
15.6英寸游戏本’,’游戏本’,’雷神’,’8499′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘X550CC
15.6英寸笔记本’,’笔记本’,’华硕’,’2799′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘X240(20ALA0EYCD)
12.5英寸超极本’,’超级本’,’联想’,’4999′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘U330P 13.3英寸超极本’,’超级本’,’联想’,’4299′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘SVP13226SCB
13.3英寸触控超极本’,’超级本’,’索尼’,’7999′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘iPad mini MD531CH/A
7.9英寸平板电脑’,’平板电脑’,’苹果’,’1998′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘iPad Air MD788CH/A 9.7英寸平板电脑 (16G
WiFi版)’,’平板电脑’,’苹果’,’3388′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘ iPad mini ME279CH/A 配备 Retina 显示屏 7.9英寸平板电脑 (16G
WiFi版)’,’平板电脑’,’苹果’,’2788′,DEFAULT,DEFAULT);

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

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

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘iMac ME086CH/A
21.5英寸一体电脑’,’台式机’,’苹果’,’9188′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘AT7-7414LP 台式电脑 (i5-3450四核 4G 500G 2G独立显 DVD 键鼠 Linux
)’,’台式机’,’宏碁’,’3699′,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
专业级台式电脑’,’服务器/工作站’,’苹果’,’28888′,DEFAULT,DEFAULT);

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘ HMZ-T3W
头戴著设备’,’笔记本配件’,’索尼’,’6999′,DEFAULT,DEFAULT);

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

INSERT tdb_goods
(goods_name,goods_cate,brand_name,goods_price,is_show,is_saleoff)
VALUES(‘X3250 M4机架式服务器
2583i14′,’服务器/工作站’,’IBM’,’6888′,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
头戴著设备’,’笔记本配件’,’索尼’,’6999′,DEFAULT,DEFAULT);

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

mysql> SELECT * FROM TDB_GOODS\G;

这时候显示数据看发生没发出乱码,如果发,改gbk

 

 

相关文章