澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

我的ASP.NET学习笔记05Javascript基础知识01
分类:数据库

mysql数据库基础知识

javascript

JQuery_1_选择器

什么是数据库

数据库顾名思义,就是用来存储数据的工具,用一个比例形象的例子来比喻,就是Excel,一个Excel文件就可以看成是一个数据库。

 

什么是JQuery

JQuery实际上就是一个javascript文件,它是一堆由javascript写好的工具程序,一个被封装好的js工具库。它在js基础之上做了很多的优化,让网页脚本的编写过程更加的便捷高效。

JQuery有很多的版本,但各版本之间的差异都不是太大,基础语法的通用。

 

关系型数据库

就是以行与列构成的二维数据表的形式,用来存储数据的,并且将多张数据表存储在一个单元中的存储形式,就称为关系型数据库。

javascript概念

简称js,它可以针对网页上面的元素,让其动态的产生变化。

如何使用JQuery

1、首先,我们必须下载或复制JQuery的库文件,也就是文件名”jquery-版本号[.min].js”的脚本文件,(其中包含min的是没有换行、制表符和空格的压缩版本)。

2、在网页中引用JQuery文件:

<script type="text/javascript" src= "js/jquery-1.7.1.min.js" > </script>

 

 

数据表

由行与列构成的二维结构的存储数据的表格。

javascript的使用范围

javascript是由浏览器来执行的。包含在网页中被浏览器连同html、css一同解析并执行,它的运行必须依附于网页与浏览器,而不能够直接被执行。

 

选择器

选择器的意义,就是确定代码执行的对象,就是确定代码执行的目标对象。

记录

就是数据表中行,一横行数据我们就称为一条数据记录。

通常而言,每条数据记录都有一个ID号,我们可以把这个id理解成是excel中的行号,用来对每条记录进行区分与标记。

javascript是由对象和事件驱动的

javascript的执行方式,是由html元素对象的事件触发的,简单的说,就是当某一html元素发生了某事件时,对应的js代码就会被执行。

 

选择器的基本格式

$符号代表选择器,它的作用类似于javascript如下指令:

document.getElementByID

document.getElementsByClassName

document.getElementsByTagName

 

主键

很多时候我们将id称为主键,主键这是指这张表的排列顺序的依据。

在网页中加入并执行javascript的三种方式

语法:

$(表达式)

表达式可以是一个字符串,也可以是一个变量或html代码。

注意:JQuery语句通常都是以$开头的。

字段

数据字段,就是数据表中的列。

每一个字段都需要指定一个名称,用来说明该列数据的作用,就叫作字段名。

直接写在html标签之中

比如:

<input type="button" value="hello" onclick="alert('hello javascript')" />

直接在html标签中onclick、onchange等事件之中写入js代码

$(document)

获取当前网页的文档对象。

常用的数据库的类型

Mysql 性能强悍,可以免费使用。

MSSQL server 微软公司的数据库软件,通常用于搭配微软体系的编程语言。

Access是office的办公套件之一。

Oracel 性能非强悍,也非常昂贵。

写在html网页内的<script>标签中

通常我们都是在网页的<head>或<body>范围内加入<script type=”text/javascript”></script>标签,在<script>的开始与结束标签中间写入javascript代码。

 

示例:

<script type="text/javascript">

alert('hello javascript');

</script>

 

$(document.body)代表网页的<body>部分

$(document.body).css({"background-color":"green"});

 

 

安装与使用mysql

安装mysql的方式很多,我们使用phpstudy这个软件来安装php + mysql的运行环境。安装之后,我们就拥有了mysql的服务。而且还有两款mysql客户端。

 

Mysql分为客户端与服务端。服务端仅仅用于对软件程序提供数据通信,普通用户无法直接看到其中的数据内容。

 

客户端用来将服务端的数据,以用户可以理解的方式展示在其界面上。

 

将javascript代码放在独立的js脚本文件之中

javascript的脚本文件,是扩展名为js的文本文件。然后在网页中添加<script></script>标签,在标签中添加src属性,这个属性的值就是js脚本文件的路径。

比如:

<script type="text/javascript" src="aaa.js">

</script>

 

注意:在引用了外部js脚本文件的<script>之中,不要加入js代码。

 

HTML标签选择器

就是在选择器的表达式中直接使用html标签名,示例:

<p>天气凉了</p>

<div id="box1">魂牵梦萦</div>

<div id="box2">朝秦暮楚

<p>注意添衣</p>

</div>



//$("p").css({"font-size":"88px"});

$("div p").css({"font-size":"88px"});

 

phpMyAdmin

phpMyAdmin是最常用的mysql客户端,它是基于php语言的。

在桌面右下角的phpstudy图标上右击弹出菜单中选择phpMyAdmin就可以启动进入了。启动之后,需要输入用户与密码进行登陆,默认的用户名密码都是root。

 

编程语言的基本概念

选择器的find()方法

意思是在选择器选定的集合之中,再次进行二次筛选,在选择器选定的结果里,再次按条件进行查找。

$(document).find("div p").css({"font-size":"88px"});

//在网页正文中寻找第一个div里的p标签。

 

 

新建数据库

1、 要指定数据库的名称。

2、 通常选择utf8_unicode_ci字符集,在只有中文的情况下,可以选择gbk_chinese_ic或gb2312_chinese_ci 。

 

顺序流程

就是让程序按照从上到下的顺序依次执行。

在javascript中,每一条语句的结尾处,都必须写一个分号 ; 以告诉计算机该语句已经完结。

 

ID选择器

$("#box1").css({"font-size":"88px"});

 

在选择器的表达式中用#以及其后的ID名称来获取这个ID所指向的元素对象。

新建数据表

1、 选中数据库之后,点击右侧的“新建数据表”,填写“数据表名”。

2、 指定数据表的字段,也就是列。在指定字段的过程中我们要对字段添加字段名、数据类型、数据长度、是否是主键、是否自增。(多数情况下,主键是名为id的整数类型,而且是自增的。)

3、 为字段指定这一列的数据类型。

变量

所谓变量,就是一个存放数据的容器,相当于数学方程式中的未知数x、y、z

一个变量之中只能放一个数据

Class样式类选择器

$(".style1").css(

{

"font-size":"38px",

"background-color":"yellow"

}

);

针对所有class属性为.style1的元素。

css之中包含的实际上是一个JSON对象。

$(“*”)
选择所有元素

$("*").css({

"font-size":"38px",

"background-color":"orange"

});

 

自增auto_increment

自增字段中通常存放的是整数类型的数据,用于表示数据库中的记录的序号。

自增字段的值不需要手动输入,其中的编号是自动产生的,每当向这表里面添加一条新记录的时候,自增字段会自动取出上一行字段值,然后加一,作为新记录的主键值。(主键绝对不会发生重复,即使上一条记录被删除了)。

声明变量语法:

在使用一个变量之前,我们必须首先声明这个变量,也就是告诉计算机我们要创建一个变量。

var 变量名 [ = 变量值 ]

我们可以在声明变量的同时赋值,也可以在声明之后再来赋值。

也可以同时声明多个变量

var a =1,b;

b=5;

alert(a+b);

 

注意:javascript中对字母的大小写是有严格的区分的,即使字母相同,但大小写不同也会被认为是两个变量。

小练习

将一个span中的div通过jquery的css方法,设置其样式为高200像素宽300像素背景为兰色字体为40px。

 

如何设置一个字段为自增

1、在创建表或在修改字段结构的时候,设置字段的数据类型为int,然后选中auto_increment上的勾。

2、当插入一条数据时,不要手动填写主键字段。

3、主键生成的数字绝对不会重复,即使记录被删除。

赋值

赋值号也就是=等号,通常是将=右边的值赋值给=左边的变量。

var a =1;

a=a+2; //=代表赋值而不是相等

alert(a);

 

并列选择:

$("#box1,.style1").css({

"font-size":"38px",

"background-color":"orange"

});

 

在表达式中,用逗号来分隔多个选择器。

如何设置主键

1、在创建表或在修改字段结构的时候,在主键字段的”索引”下拉菜单中选择“primary”。(一张表只允许设置一个主键,通常它是int自增的。)

 

javascript中的注释

注释单行代码: //

注释多行代码: /*   被注释的内容    */

 

父子层级关系选择

按照元素之间的包含关系来进行选择,父与子元素用空格或>来分割。

$("#box2>p").css({

"font-size":"38px",

"background-color":"orange"

});

 

小练习:

1、 新建一个产品product数据库

2、 在数据库中添加产品product表,并建立字段pId (主键)、pName(产品名称)、pModel(产品型号)、pPrice(产品价格)

3、 添加5条产品信息

4、 在数据库中再添加一个产品入库表(saveInLib),并建立字段:sid(主键)、pName(产品名称)、saveInTime(入库时间)、saveInCount(入库数量)。

5、 添加5条产品入库记录。

 

小练习:

1、在网页中调用一个外部的脚本文件,在脚本文件中实现,工资的计算功能,需要定义的变量如下:jbgz=4500(基本工资)、cd=2(迟到次数)、kg=3(旷工次数)、gzr=22(本月工作日),求本月实际工资。迟到一次扣30,旷工一次扣3天工资。

提示:

首先算出每日的工资。

 

相邻选择器

mySQL中的数据类型

在mySQL中每个字段,都必须明确它存放的数据的类型,一旦指定了类型,该字段(列)中的数据都必须符合这个类型的范围,否则就会引起错误。

 

并且字符等类型需要指定内容的最大长度。

 

javascript中的数据类型

选择下一个元素

当jquery匹配选择器的时候,会首先找到+左边的元素,然后从该元素开始向后查找+右边的元素,直到找到第一个符合的元素为止。

$(“#box1+div”) //查找box1后面的第一个div

$(".style1+p") //注意:包含层级必须是同一级别的才可以

 

int整数类型

只能存放整数

什么数据

在计算机编程的角度来看,数据的概念并不仅限于数字,它包含了数值、文本、日期、是与否、图片。就是能够被存储并处理的信息。

var a ="1" ,b="2";

alert(a+b);

 

计算机对不同类型的数据会有不同的处理方式。

选择之后所有匹配的元素

$(".style1~p")

 

首先找到~左边的元素,然后从该元素开始向后查找~右边的元素,找到所有符合条件的元素为止。

varchar字符类型

可以存储任一字符,包括符号、数字、字母,但是他们都会被当成字符为处理。

数值类型Number

在javascript中数值类型包含了整数、小数、负数

var a=1

不需要明确的说明一个变量的类型,系统会自动的根据它的值来判断其是什么类型。

选择符合条件的第一个/最后一个元素

$("p:first")

$("p:last")

 

Date日期

用于存储日期和时间

澳门太阳娱乐集团官网,字符串类型String

var a ="我是一个字符串";

注意:字符串类型的值必须要放在一对双/单引用号之中。

 

当数值与字符类型进行运算的时候,数值会自动被转换为字符类型。

比如:

var name ="张三";

var a = 2600;

alert(name+"本月工资是"+a+"元");

 

 

在选择结果中排除

$("p:not(.style1)").css({"background-color":"orange"});

//在<p>中排除样式类名为style1的元素。

 

数值类型

TinyInt 非常小的整数存储格式,1字节(8位的二进制数),它的取值范围是:不带符号时0 ~ 255,带正负号时-128 ~ 127

SmallInt 小整数,2字节,不带符号时0~65535,带正负号时-32768~32767

MediumInt 中等整数,3字节,不带符号时0~16777215,带正负号时-8388608 ~ 8388607

Int 标准整数,4字节,不带符号时0 ~ 4294967295 ,带正负号时-2147483648 ~ 2147483647

BigInt 大整数,8字节,不带符号时0~18446744073709551615

 

Float 单精度浮点数,4字节,最小值,正负1.175494351E-58(1.175494351*10-58)最大值,正负3.102823466E+38(3.102823466E*1038)

Double 双精度浮点数,8字节,最小值,正负2.22507385072014E-308,最大值:正负1.17976931348623157E+308。

 

Decimal 以字符串形式存储浮点数。它的取值范围不是固定的,取决于用户指定的长度。

逻辑类型boolean

也叫布尔类型,它只有两种数值,true或false,分别代表真和假,成立或者不成立,甚至代表1和0

var a = true;

var b = false;

alert(b);

 

用于表示一个条件是否成立。

选择查询结果中的排列次序为偶数/奇数的元素

$("p:even").css({"background-color":"orange"});

//选择偶数次序的元素

$("p:odd").css({"background-color":"#aaa"});

//选择奇数次序的元素

 

数值类型的字段可以设置的参数:

typeof( )类型判断方法

用于判断一个变量或表达式之中存放的数据的类型。

选择指定次序的元素

$("p:eq(0)").css({"background-color":"orange"});

//选择页面上的第一个<p>段落(第一个元素的序号为0)

 

unsigned属性

“整理”菜单中的unsigned选项,代表无符号,代表这一字段中的数值不能为负数,因为无符号就是代表没有正负号。如果“整理”菜单留空,什么都不选的话,就是代表有符号,可以为正数也可以为负数。

示例:

var a = true;

var b = 4324;

var c = "hello";

alert(typeof(c)); //显示string

 

选择大于/小于指定序号的元素

$("p:lt(3)").css({"background-color":"orange"});

//结果集的第3个元素之前的所有元素

$("p:gt(3)").css({"background-color":"orange"});

//结果集的第3个元素之后的所有元素

 

unsigned zerofill属性

当数据的宽度小于类型的最大宽度时,则在数据前面自动填充0

undefined

代表变量未定义,数值不明确。

 

比如:

alert(typeof(d));   //d从来没有定义过

 

选择包含指定文本的元素

$("p:contains('Hello')").css({"background-color":"orange"});

//在结果集中查找包含了指定内容的元素。

 

auto_increment

自增

NaN

是”Not a Number”,意思是指这不是一个数字。

比如:

var a = "ccc";

var b = 4324;

alert(a*b);

 

选择不包含任何子元素或内容的标签

$("p:empty").css({"background-color":"orange","height":"30px"});

//在选择器的查找结果中筛选内部为空的元素

 

默认à定义

这个选项代表,填充数据时如果该字段为空值时,所使用的默认值。

Null

代表空值,也就是一个变量的值已经被清空了。

a = null ; //代表清空一个变量。

 

 

包含指定的子元素的父元素

$("div:has('.style1')")

 

在所有div中查找,包含使用了.style1的子元素的div。

字符串数据类型

字符类型可以存储任何值,甚至是二进制形式的图像、声音、视频。

CHAR[M] 代表M字节的字符。

varChar 常用的字符存储格式,使用时需要指定最大内容长度。

转义字符

由于一此字符在javascript中已经有了特殊的用途,因此当我们需要使用这些字符的时候,就要对其进行转义,js才能将其作为一个普通的文本来处理了。

 

alert("我叫"雷锋"");

 

” 双引号

’ 单引号

n 换行符

r 回车

\ 斜杠

选择指定元素的父元素

$(".style1:parent").css({

"background-color":"orange",

"height":"30px"

});

 

存储大容量的文本

TinyBlob ,blob,TinyText,text

前两个是代表二进制字符串,后两个是代表非二进制字符串,都可以存储大量的文本信息。

MediumBlob,MediumText

LongBlob,LongText

单词总结

click 单击

alert 提示,警报,提示框

script 脚本,剧本

Number 数字

String 字符串

true 真,正确

false 假,错误

Boolean 布尔类型,逻辑类型

define 定义

 

选择所有的隐藏元素

$("p:hidden").css({

"background-color":"red",

"display":"block"

});

 

 

枚举类型

ENUM / SET 类型

设置其默认值为(‘值1’, ‘值2’, ‘值3’,…),由用户指定多个可选值,字段中的值必须是其中之一,最多只能有65535个可选值。

 

javascript中的数据类型转换

小练习:

制作一个显示学生姓名的表格,然后设置奇数行的背景色为淡灰色,偶数行的背景色为憕色,如果单元格中没有内容,背景色为红色。

 

日期时间类型

Date 1000-01-01 ~ 9999-12-31

TIME -838:59:59~838:59:59

DateTime 1000-01-01 00:00:00 ~ 9999-12-31 23:59:59

TimeStmp 1970-01-01 00:00:00 到2037年的之间的某一个时刻

Year 存储1901~2155年的一个年份。

 

将其他类型的数据转换为字符型

语法: String(数据);

示例:

var a=10,b=88553344;

alert("0"+String(a)+"-"+String(b));

 

JQurey元素的属性

小练习:

1、 创建一张员工数据表,employee,包含字段:eId(标准整数,主键、自增)、姓名eName(varchar,50)、年龄eAge(tinyInt,无符号)、工号eNum(smallInt,不足的位数用0填充)、学历(枚举:初中~研究生)、性别(枚举:男,女)、出生日期(DateTime)、基本工资(Float,默认:1300)、自我介绍text。然后输入五名员工的信息。

 

 

T-SQL语言基础之增删改查

将其他类型的数据转换为数值型

语法:Number(数据);

示例1:

var a=Number("3.1415926");

alert(10+a);

 

示例2:

var a=Number(false);

alert(a);

 

布尔类型在计算机中存储的时候,其真正的值就是一个二进制数,true=1,false=0

Html()方法

获取或设置一个容器类元素内部包含的内容,也就是其开始标签与闭合标签中间的内容。

示例:

alert( $("#box1").html()); //获取内容

$("#box1").html("今天<p>星期五</p>"); //修改box1中的内容

 

SQL语句

是一门专门用于数据库操作的语言,SQL语句的语法不仅仅适用于mysql数据库,同时也适用于几乎所有的主流数据库。当然不同公司出口的数据库在语法细节上还是有些差异。

 

其他一些将字符型转换为数值型的方法

parseInt() 将字符串转换为整数

parseFloat() 将字符串转换为包含小数的数值

这两个方法遇到字符串中的非数值字符时,会自动停止转换,返回已经转换完的部分。但是上一节中的Number()方法遇到非数值字符时会自动返回NaN

 

示例:

var a=parseFloat("3.94ccc111");

 

Text()方法

与Html相似,获取元素的内容,但是会对内容中的html标签进行一定的处理。

$("#box1").text("今天<p>星期五</p>"); //写入内容时,html元素会被转义,从而不会被浏览作为html标签来解析。

$("#box1").text(); //获取内容时清除掉其中的html

 

select语句

查询语句,专门用于在数据表中按照用户指定的条件进行查询。

将其他数据类型转换为布尔类型

语法:Boolean(数据)

小练习:

1、 在网页中加入一个5行以上的表格。用JQuery向表格的第三行写入文字“云深不知处,身在此山中”。

2、 手动在第四行写入“明日复明日,明日何其多。”。然后用JQuery查找包含“明日”的行,将其文本内容改为“雷令风行”。

3、 给表格第一行加入id为tr1, 用jquery匹配tr1的下一行,并在写一行写入文本:“山中自有黄金屋”

 

 

通过JQuery操作hmtl元素及其属性

简要语法描述:

SELECT <字段1,字段2,字段3…..> FROM <数据表名> [WHERE 筛选条件]

其中字段部分代表你想要从这张数据表中查询哪些字段(列),如果要查询所有字段,可以 * 号表示。

示例:

SELECT pName FROM product

//从产品表中查询所有产品名称

SELECT pName,pPrice FROM product

//从产品表中查询所有产品名称和价格

SELECT * FROM product

//从产品表中查询中所有产品的字段

SELECT pName,pPrice-30 FROM product

//在查询时给所有产品减30元

SELECT pName as '产品名',pPrice as '价格' FROM product

//在查询时修改结果集中的字段名

SELECT 3.1415926 *12 *12

//用select语句来进行数学运算

 

值为true的情况

非零的数字时(无论正负)、非空的字符串

Ready事件

where子句

定义一个查询条件,然后在查询过程中用这个条件来筛选符合条件的记录。

 

SELECT * FROM product WHERE pPrice >=1000

查询价格大于等于1000的产品

SELECT * FROM product WHERE pPrice <>3000

SELECT * FROM product WHERE pPrice !=3000

查询价格不等于3000的产品

SELECT * FROM product WHERE pName = '中兴z954'

 

查询产品名称是中兴z954的产品信息(在mysql中双引号与单引号都表示字符串,但是推荐使用单引号,因为我们将来要学习的mssql server 中字符串用单引号表示)

值为false的情况

零、空字符串、未定义变量undefined、空值null、NaN

 

 

$(document).ready();

通常JQuery的选择器都需要在其指定的HTML元素加载完成之后再来执行,因此我们一般都是在页面全部加载完毕之后再业执行JQuery代码,否则很可能元素还没有被浏览器构建入DOM模型,我们就去提前使用元素,会造成程序错误。

 

ready()事件的意思就是指页面全布加载完毕触发,DOM模型构建完成之后。

它相当于是body的onload()事件。

逻辑与and

SELECT * FROM product
WHERE pPrice <800 AND pId >6 AND pName ='Nokia v998'

 

Javascript中的对话框

语法:

$(document).ready( function(e){

//需要在页面加载之后运行的代码;

} );

 

逻辑或or

SELECT * FROM product

WHERE pPrice <800 OR pId >6

 

alert提示框

alert是最常用最简单的对话框,通常用于显示提示信息,单击上面的按钮就可以关闭对话框。

 

示例:

<body onload=" $('#box1').text('今天<p>星期五</p>');">

相当于:

<script type="text/javascript">

$(document).ready(function(e) {

    $("#box1").text("今天<p>星期五</p>");

});

</script>

 

逻辑非not

SELECT * FROM product

WHERE not pName = '中兴z954'

 

 

confirm确认框

语法:

confirm(“提示信息”);

 

 

 

弹出确认窗口,这个窗口有”确认”和”取消”两个按钮,点击”确认”返回true,点击”取消”返回false

 

示例:

var a= confirm("你确认登陆么?")

//变量a用于接收confirm的结果。

alert(a);

 

 

注意:

Ready()事件可以包含绝大多数的javascript和jquery代码,但是要注意作用域的问题,在ready()中内部定义的变量和函数,是无法在外部访问到的。

 

insert插入数据

向指定的数据表的指定字段插入一条记录。

prompt输入框

接收用户输入的一段字符串。

语法:

prompt(“提示信息”,文本框的初值);

 

 

 

示例:

var a = prompt("请输入你的姓名:","默认用户");

alert("欢迎光临,"+a);

 

 

JQuery操作html元素

语法:

INSERT INTO 表名(字段1,字段2,字段3,……) values(值1,值2,值3,….)

其中,字段的位置与值的位置必须一一对应。

open方法

弹出一个新的浏览器窗口,在其中打开一个网页。

window.open("aa.html","aa",'height=300,width=500,

status=yes,toolbar=no');

 

 

这条语句打开了一个新的窗口,页面地址为aa.html,窗口ID是aa,高是300,宽500,显示状态栏,不显示工具条、菜单。

 

length属性和.size()方法

代表选择器所匹配到的元素的个数。

比如:

$("div").length;

$("div:lt(3)").size(); //第三个元素之前的元素个数

$("div:lt(3)").length;

 

示例:

INSERT INTO userinfo(uName,uPhone,uIDCard)

VALUES('江小白','010-89562321','5001234567814541X')

 

向数据表中插入一条用户信息

 

INSERT INTO userinfo(uName) VALUES('张小强')

插入一条用户信息,但是只有姓名,其他字段自动留空或使用默认值(如果其中某个字段设置为不允许为null,而没有默认值的话,就必须要给这个字段赋值了)。

 

INSERT INTO userinfo VALUES

(3,'王小虎','010-89562321','5001234567814541X')

 

可以省略字段名,但是所有的字段都必须按照顺序来依次赋值。包含主键ID(要按照顺序来填写主键值)

 

一次性插入多条语句

insert into student(sName,sAge,sSex,sPhone)

values('小黑',20,'女','010-89562314'),

('小强',20,'男','020-89562314'),

('小红',20,'女','021-89562314'),

('小黄',20,'男','019-89562314'),

('小李',20,'女','022-89562314')

 

 

小练习:

首先弹出确认框“您是否是男士”,点确定显示” 您是男士:true”或您是男士:false”。

 

Get( )方法

它类似于$(“div:eq(n)”),作用是在选择器匹配到的元素集合中得到指定次序的元素。

但是它同时有另一个功能,就是将JQuery对象转换为javascript对象。也就是不再支持html()或css()这类JQuery方法,而是可以支持innerHTML或style这类javascript的系统函数。

示例:

$("div").get(3).innerHTML //得到第四个元素的内容

 

 

Update修改数据

根据指定的条件确定需要修改的行,然后修改指定字段的数据。

运算符与表达式

each( )方法

它的作用是遍历选择器得到的集合中的每个元素。

each方法的参数

示例:

//each所执行的函数包含两个参数,index代表当前元素在集合中的次序,element代表当前元素对象

    $("div").each(function(index, element) {

        alert(index +"----"+ element.innerHTML);

});

 

 

语法:

update 数据表名 set 字段1=值1,字段2=值2,……..WHERE 条件

虽然where是一个可选参数,但是通常情况下都需要写where条件,如果不写就是修改整张表的所有行。

算术运算符

加 + 减 – 乘 * 除 /  求余%

attr( ) 元素属性集合

获取、设置或添加html元素的属性或属性的集合。

示例:

alert($("#box1").attr("title")) //显示提示内容

$("#img1").attr("src","22.jpg"); //修改图片路径



$("#img1").attr(

{

"width":"700",

"height":"550",

"src":"22.jpg"

}

); //同时修改图片的宽、高和路径

 

示例:

UPDATE userinfo SET uName = '江老怪' WHERE uid = 1

 

修改第1条记录的姓名为江老怪

UPDATE userinfo SET uName = '江老怪'

 

修改所有行的用户名为江老怪

UPDATE userinfo

SET uName = '小二黑',uPhone='111111',uIDCard='11111111' WHERE uid = 3

 

 

求模

取余数:

比如:13%5=3 余数为3

remove()删除元素

清除选择器指定的元素

示例:

alert(1);

$("div:eq(3)").remove();

 

delete删除

根据条件删除指定的记录

逻辑运算符

为元素添加css样式类

addClass()将已存在的css样式类添加到指定的html元素上。

示例:

alert(1);

$("div:eq(3)").addClass("boxStyle");

 

 

语法:

delete from 表名 where 条件

虽然where是一个可选参数,但是通常情况下都需要写where条件,如果不写就是删除整张表的所有行。

真知表

两个布尔值,进行逻辑运算的时候。所谓逻辑运算就是将两个逻辑条件联合起来,一起进行判断。

布尔值1

布尔值2

逻辑与

逻辑或

true

true

true

true

false

false

false

false

true

false

false

true

 

 

两者为true则为true

两者为false则为false

两者为不同则为false

 

两者之间只要有一个成立则整句话成立。

两者都不成立,则整句话都为false

 

去除html元素的样式类

removeClass()清除指定元素上已有的样式类。

示例:

alert(1);

$("div:eq(0)").removeClass("boxStyle");

 

 

示例:

DELETE FROM userinfo WHERE uid = 2

 

 

逻辑与 &&

对 && 左右两边的两个条件进行判断,当两个条件都为true时,运算结果为true,当其中至少有一个为false时,运算结果为false。

示例:

var a = false;

var b = false;

alert(a&&b);

 

获取或设置表单元素的值

val()用于获取或设置表单元素的value属性的值。

示例:

alert($("input:eq(1)").val());

$("input:eq(0)").val("明天是星期六");

 

小练习:

1、 记忆背诵增删改查指定的语法。

2、 手动新建一个数据库product,在其中新建数据表product,这个表中的字段:pid(主键)、pName(产品名)、pModel(型号)、pIntro(简介)、pFrom(产地)、pPrice(价格) 。

3、 用insert语句添加10条不同的产品数据

4、 查询

a) 查询所有产品数据

b) 查询所有产品的产品名和价格

c) 查询所有价格在2000以上的产品

d) 查询所有产品为重庆并且价格大于3000的产品

e) 查询所有产地不是重庆的产品

5、 将第5条记录的产品号修改为T1000

6、 删除所有价格小于5元的产品。

 

将第三题之后的sql语句复制到一个word文档中,然后组长检查组员,班长检查组长。

3、5、6每题20分。

第4题中的每个小题8分共40分

 

命令行与高级查询

逻辑或||

对 || 左右两边的两个条件进行判断,当两个条件其中至少一个条件为true时,运算结果为true,当两个都为false时,运算结果为false。

示例:

var a = false;

var b = false;

alert(a||b);

 

小练习:

1、 在页面上添加5个div,并且定义一个数组,这个数组包含5个元素“登黄鹤楼”,“白日依山尽”,“黄河入海流”,“欲穷千里目”,“请上二楼”。用JQuery的each(),遍历页面上的5个div,将这个5条诗句分别加入5个div中。

2、 定义两个css样式类,一个为背景淡黄色,一个为背景淡绿色,奇数行使用淡黄样式类,偶数行使用淡绿样式类。

3、 用css()方法,定义字体:为华文行楷,字号30px。

4、 在页面上定义9个div,里边输入1-9的数字,用css()和addClass()方法将这9个div以9宫格方式排列,在页面上添加一个文本框和按钮,当我在文本框中输入1-9的数字并按按钮之后,其相应的数字的div就消失不见。

 

Mysql命令行

1、 在phpstudy的右键菜单中,mysql工具 à mysql命令行

2、 弹出的命令框中提示”enter password”,输入默认密码root

3、 如果看到”you mysql connection”就说明你登陆成功了。

4、 在命令行中,每一条指令都必须以分号;结束,否则系统会认为你这条指令还没有完成,始终要求你继续输入。

 

逻辑非 !

颠倒真假, ! false=true并且 !true = false

alert( ! false);

 

DOM文档处理

查看数据库列表

show Databases

三元运算符

语法:

逻辑表达式 ? 表达式1 : 表达式2 ;

作用:

首先判断 ? 之前的逻辑表达式的值,如果是true则返回表达式1的值,如果是false则返回表达式2的值。

 

示例:

var a = confirm("请问您是否是男士");

var s = a?"你好先生":"你好女士"

alert(s);

 

向html元素的内部的末尾添加内容

append()方法,向指定的容器类元素的内部的最后面添加内容。

示例:

alert(1);

    $("div:first").append("快乐");

alert(1);

    $("div:eq(3)").append("<b style='color:red'>快乐</b>");

 

选择数据库use

小练习

1、 弹出一个确认框并提示,请问您是否是注册用户。如果点确定就显示“你好欢迎光临”,如果点消除则显示“不好意思,您无权登录”。

2、 有一个age年龄变量值是11,弹出确认框询问“今天是否是你生日”,如果点确认则age加1为12,如果点取消,则age还是11。

 

将html元素移动到另一个元素的内部的末尾

appendTo()方法,示例:

alert(1);

$("#img1").appendTo("div:eq(1)");

//将图片移动到div内部的最后的位置

 

 

格式:

use 数据库名

选定指定数据库为当前默认被操作的数据库。

在使用操作数据表中的数据之前,必须要选定一个当前数据库。

 

比较运算符

比较运算符的运算结果为布尔值

<小于 >大于 >=大于等于 <=小于等于

==相等 !=不等于

注意:(数值18与字符”18”是相等,javascript字符类型的数值与数值类型的值,只要数字相等,那么用==来判断的话就是相等的。)

 

如果要严格区分类别的话,可以使用:

=== 严格相等,就是值与类型都必须相同。

!== 严格不相等,就是值或类型必须不相同。

 

向html元素内部的开始位置添加内容

prepend()将字符或html代码添加到指定元素内部的最前方,比如:

$("div:eq(2)").prepend("<input type='text' value='1月1日'  />");

$("div:first").prepend("<img src='img/22.jpg' width='100' />");

 

罗列出当前数据库中的数据表

show tables

复合运算符

将html元素移动到内部的最开始的位置

prependTo()方法,示例:

alert(1);

$("#img2").prependTo("div:eq(3)");

//将图片移动到第四个div的内部最开始的位置。

 

罗列出数据表中的字段

格式:show columns from 表名

Describe 数据表名

 

赋值

很多时候我们需要对一个变量进行加减乘除,然后将运算结果再赋值回这个变量本身,在这种情况下,我们可以通过复合运算符来简化这个过程。

 

a=a+1 可简化为  a+=1

a=a-1 可简化为  a-=1

a=a*1 可简化为  a*=1

a=a/1 可简化为  a/=1

 

添加内容到指定的元素之后

after()方法:比如:

$("#img1").after("<select><option>中国</option><option>韩国</option></select>");

 

数据库与数据操作

累加

a++ 针对数值类型进行累加操作,每次加1,相当于a=a+1 ;

a-- 针对数值类型进行递减操作,每次减1,相当于a=a-1 ;

 

a++ 先返回值再相加

++a 先相加再返回值

 

示例:

alert((--age)*10)

 

 

将元素移动到指定的元素之后

有两种方法可以达到这个效果

$("#img1").after($("div:first"));

$("div:eq(1)").insertAfter($("#img2"));

 

这两种方法都可以让div出现在图片的后面,但是要注意他们的写法和顺序。

移动时这两个方法的参数应该是选择器选中的元素对象。

创建一个新的数据库

命令格式:create database 数据库名

运算符的优先级

()

括号

++、--

递增递减

!

逻辑非

*   /

乘除

+   -

加减

%

求模,取余数

< 、<= 、> 、>=

大于  小于

? :

三元运算符

=   +=  -=  *=  /=

复合赋值

 

比如: 

var x = 5+4*2/4

var y = 4>=9%5&&(3==4*2/4)?x+=3:x++;

 

 

添加内容到指定元素之前

before()方法,向元素之前添加文本和html代码

示例:

$("div:first").before("<input type='button' value='按钮'  />");

 

在当前数据库中创建数据表

注意,在创建之前必须选择当前数据库。

格式:create table 表名(字段1 数据类型,字段2 数据类型,……)

示例:

create table stdInfo(

sName varchar(20),

sAge int,

sSex varchar(5)

);

 

表达式

由多个运算符与数据组成的可以运算并能够得到一个单一结果的算式。

 

通常分为:

算术(数值)表达式,最终的结果是数值。

 

字符串表达式,最终的结果是字符串。

 

关系(比较)表达式,通常是由大于、等于这些比较运算符组成的返回布尔值的表达式。

 

逻辑表达式,通常是由&&或||等等逻辑运算符组成的返回布尔值的表达式。

 

移动元素到另一个元素的前面

也是有两种方法:

alert(1);

$("div:first").before($("#img1"));

//将图片移动到div的前面去

alert(1);

$("div:eq(1)").insertBefore($("#img1"));

//将div移动到图片前面去

 

 

创建包含自增主键的数据表

示例:创建客户表:

create table customers(

 id int not null auto_increment,

 name varchar(20) not null,

 age int not null,

 address varchar(100) not null default 'empty',

 primary key(id)

);

 

说明:

not null 代表该字段不允许出现空值,就是说当你使用insert语句插入数据记录的时候,必须向这个字段赋值,否则数据操作将发生错误。

auto_increment 自增

Default 默认值

Primary key 指定数据表的主键

小练习

1、 计算一个长方形的面积,长宽值是由用户从键盘输入的,输入时要有提示信息,第一次输入长度,第二次输入宽度,最终显示一句话:“您计算的长为XX米宽为XX米的长方形的面积为XXX平方米”。

2、 依然是工资,提示用户输入:基本工资,本月工作天数,本月迟到次数(一次扣30元),旷工次数(一天扣三天工资)。最后,显示本月实际工资。附加:如果旷工超过三次,就不再显示工资数,而是显示“您本月考勤异常。”

 

为指定的html元素添加一个容器标签将其包裹起来

wrap(),在元素的外层添加一个容器元素。

$("span:first").wrap("<b></b>");

$("span:first").wrap("<font color="red"></font>");

 

删除数据表

格式:drop table 数据表名

wrapAll()对所有匹配的元素外侧添加父级元素

$("div").wrapAll("<font color="red"></font>");

 

删除数据库

格式:drop database 数据库名

清除指定html元素的父级标签

unwrap()方法

$("span:first").unwrap()

 

更改表结构:增加字段

添加一个字段

alter table student add sScore float null;

 

其中:

add 代表增加一列

Null 代表这个字段允许空值。

student 是数据表名

sScore 是新增的字段名,后面是数据类型。

用新元素或内容替换指定的html元素

更改表结构:删除字段

alter table student drop column sScore;

 

其中:

drop column 代表删除字段操作

sScore 要被删除的字段名

student 是表名

replaceWith()

$("div:first").replaceWith("<p>明天星期天呀</p>");

 

重命名数据表

rename table student to sInfo;

 

注意:to前面是修改前的原表名,to后面是修改后的新表名。

替换所有匹配的元素

$("div").replaceWith("<p>明天星期天呀</p>");

 

更改表结构:添加自增主键

alter table product

 add pid int

 not null

 primary key

 auto_increment

 first;

 

其中

primary key 设置新字段为主键

first 将新字段放在其他字段的前面,处于第一位。

 

清除一个元素的内容

empty()清空一个元素开始与结束标签之间的所有内容

$("font:first").empty();

 

小练习:

请同学把所有SQL都写到一个SQL文件中,按“班级-姓名(可以是拼音).SQL”的方式保存

某学校的学生管理数据库中有学生表(T_STUDENT)、班级表(T_CLASS),表结构及存储的数据如下表所示:

学生表(T_STUDENT):

STU_ID

(int, 主键,学号)

STU_NAME

(nvarchar(10),姓名)

STU_AGE

(int,年龄)

STU_CID

(int,外键,班级号)

1

张三

18

1

2

钱四

16

2

3

王玲

17

3

5

李飞

19

4

9

赵四

18

5

10

李可

20

6

11

张飞

18

7

12

周瑜

16

8

13

王亮

17

7

14

董庆

19

1

15

赵龙

18

2

16

李丽

20

3

班级表(T_CLASS):

CLS_ID

(int, 主键, 班级号)

CLS_JOB

(nvarchar(50), 专业名)

CLS_DEPART

(nvarchar(50), 系名)

CLS_DATE

(int, 入学年份)

1

软件

计算机

2013

2

微电子

计算机

2013

3

无机化学

化学

2014

4

高分子化学

化学

2012

5

统计数学

数学

2015

6

现代语言

中文

2016

7

国际贸易

经济

2013

8

国际金融

经济

2014

 

用 SQL 语言完成以下功能

  1. 建库、建表,要求添加主键
  2. 插入指定的数据
  3. 找出所有年龄小于19岁的学生学号、姓名、年龄。
  4. 学生张三转到化学系 111 班,请更新相关的表。
  5. 删除班级表的主键这一列。
  6. 将学生表改名为T_STD
  7. 为班级表添加字段CLS_COUNT人数字段
  8. 为班级表添加主键。
  9. 删除班级表

 

 

mysql_4_聚合函数

清除选择器得到的元素集合中的指定元素

detach()二次查找并删除

$("div").detach(".box2");

 

 

mysql数据库的备份与恢复

复制一个html元素

clone()方法

$("#img2").clone().appendTo("div:eq(3)");

//将图片复制到div中

$("#img1").clone().prependTo("div:first");

 

备份

在phpmyAdmin中使用“导出”功能将数据表的结构与数据保存为一个.sql文件(保存格式选择SQL)

小练习:

1、 在不写html的情况,用JQuery构建一个网页的新闻列表,要求至少6行,每一行的p段落都有一个id属性:p1、p2。。。p6(要求使用循环来实现)。
$(“body”).append(“<p id=p”+i+”></p>”);

2、 向p1到p6之间的列表中添加新闻的标题。

3、 向p1到p6之间的列表的最前面添加序号。

4、 向p1到p6之间的列表的最后面添加日期。

5、 所有p标签外侧用div包裹起来。

6、 定义一个css样式类,宽度700px,居中,字体微软雅黑红色,然后将这个样式类添加到div之上。

7、 将最后一条新闻移动到最上方。

8、 将第二条新闻复制一份到最下方。

 

JQuery中的样式和事件

恢复

在phpmyAdmin中点击“导入”,选择.sql文件的路径(格式选择SQL),点击执行。

 

用Jquery控制元素的css样式

mysql中的聚合函数

就是对指定字段中的一列数据进行统计和运算的函数。

css方法

用于获取和设置页面上的元素的样式属性。

GROUP BY分组

在指定字段中将数据内容重复的记录,聚合为一组。剔除重复的值。

示例:

SELECT * FROM student GROUP BY sSex

SELECT sName FROM student GROUP BY sAge

 

获取css样式的值:

alert($("div:first").css("height"));

 

css方法中只有一个传入值时是获取css的值。(width、height、top、left等等值是包含”px”的字符串)。

COUNT 统计个数

用于统计(按条件)查询出聚合后的记录或查询的结果一共有多少条。示例:

SELECT COUNT(*) FROM student //统计表中一共有多少条记录

SELECT COUNT(1) FROM student //同上,性能更强。

SELECT COUNT(1) FROM student WHERE sAge>17 //统计符合条件的记录总数

SELECT COUNT(1),sSex FROM student GROUP BY sSex

//将GROUP BY与COUNT两个函数结合起来使用,按性别进行分组统计。

 

修改元素的单个css值:

$("div:first").css("width","500px");

 

css方法中有两个传入参数时:第一个是css属性名,第二个是css属性值。

AVG求平均值

格式:AVG(字段名)

对指定的字段中(一列中) 的数据值进行求平均值的运算。

SELECT AVG(sAge) FROM student

SELECT AVG(sScore) FROM student WHERE sAge<=18

SELECT AVG(sScore),sSex FROM student GROUP BY sSex

 

 

修改元素的多个样式属性:

    $("div:first").css(

{

"height":"600px",

"width":"500px",

"background-color":"blue"

}

);

 

GROUP_CONCAT分组连接

将一张表中的多行记录中的指定的字段值,连接成一个字符串。每个值之间以逗号进行分隔。通常用于得到聚合后的每个分组中包谷的成员。

SELECT GROUP_CONCAT( sName ) FROM student

//连接所有学生的姓名

SELECT GROUP_CONCAT( sName ) FROM student WHERE sAge>18

//连接所有18岁以上的学生姓名

SELECT GROUP_CONCAT(sName),sSex FROM student GROUP BY sSex

//得到所有男生和女生的名单

 

 

获取或修改一个元素的位置:Offset方法

ORDER BY排序

按照指定的字段的值的大小的次序,来排列查询的结果。

SELECT * FROM student ORDER BY sScore

//通过成绩来排列学生。默认为升序(从小到大)

SELECT * FROM student ORDER BY sScore DESC

//通过成绩来排列学生。添加DESC就是降序(从大到小)

 

 

获取元素的位置

offset获取元素位置的时候,它返回的是一个对象,这个对象包含top和left两个数值属性(单位是像素)示例:

var p = $("div:first").offset();

alert("这个元素的位置是高:"+p.top+"横向距离:"+p.left);

 

 

最大值最小值MAX()、MIN()

在查询结果中的指定字段中找到最大的值或最小的值。

SELECT MAX(sScore) FROM student

//得到成绩最高分数

SELECT MIN(sScore),sSex FROM student GROUP BY sSex

//分别得到男生和女生最低分

 

 

让元素变为浮动层并改变位置

<p style=" width:50px; height:50px; position:absolute; top:150px; left:250px;"></p>



var p = $("p:first").offset({top:400,left:300});

//让一个元素变成浮动层,并且按照指定的top和left位置来移动这个元素。(top和left相对于网页的左上角)

 

 

求和sum()

在查询结果中对指定字段的值求和。

SELECT SUM(sSCore) FROM student

//全班总分

SELECT SUM(sSCore),sSex FROM student GROUP BY sSex

//查看男生总分和女生总分

 

 

获取元素相对于父元素的相对位置

position()方法返回一个位置对象,这个对象包含了top和left两个属性。

$(document).ready(function(e) {

//var p = $("div>div").offset();

var p = $("div>div").position();

alert("元素相对于其父元素的位置的纵向是:"+p.top+"横向:"+p.left);

});

 

小练习:

1、用Create指令创建一个产品销售记录数据表,包含字段:产品名、销售地区、销售数量、销售金额。(10分)

2、假设本公司出售的产品只有三种,销售地区也只有三个。用insert语句插入十条产品销售记录。(产品与销售地区肯定有重复值。)(15分)

3、统计每种产品的销售总额(10分)

4、统计每种产品的平均销售额。(10分)

5、统计每种产品的销售总数量。(10分)

6、在每个地区销售的每种产品的名称,连接成一个以逗号分隔的字符串。(15分)

7、同时统计每种产品的最大销售额。(10分)

8、统计产品在每个地区的最低销售额。(10分)

9、得到总销售额。(10分)

 

 

 

 

 

 

 

mysql_高级查询

滚动条相对于页面顶部的位置

scrollTop方法:获取和设置滚动条相对于页面顶部的距离。

示例:

alert($(document).scrollTop()); //获取滚动条目前的位置

$(document).scrollTop(100); //修改滚动条的位置

 

 

数据过滤通配符

通配符,就是指能够通用的匹配其他字符的符号。

height()方法获取或修改一个元素的高度

示例:

$("div>div").height(100); //修改没元素的高度

alert($("div>div").height()); //获取元素的高度

 

%通配符

%代表任意个数的任一字符,它通常是用在select语句中与LIKE关键配合使用的。

width()方法获取或修改一个元素的宽度

示例:

$("div>div").width(200);  //修改没元素的宽度

alert($("div>div").width()); //获取元素的宽度

 

示例:

SELECT * FROM student WHERE sName LIKE '王%'

 

查找所有姓王的学生

LIKE关键字在这里代表模糊查询,不是像=那样必须完全匹配。

 

SELECT * FROM student WHERE sName LIKE '%五'

 

查找以“五”字结尾的数据

 

SELECT * FROM student WHERE sName LIKE '%老%'

 

查找中间包含“老”字的字符。

注意:即使数据的开头或结尾为空,依然可以匹配到数据,因为%不但代表任意个数的任意字符,它同样也可以代表没有字符。

元素内部的高度和宽度

innerWidth和innerHeight

获取元素内部的高度和宽度,内部宽高是指加上padding的高度,而不包括border和margin的。

<div style="background:#F00; width:50px; height:50px; top:70px; left:30px; border:30px solid green; margin:10px; padding:13px;"></div>



alert($("div>div").innerWidth());

 

注意事项:

1、%不但代表任意个数的任意字符,它也可以空字符。

2、数据尾部的空格可能会干扰通配符的搜索,比如:现有数据’abc  ’,如果它最后有一个或多个空格的话,则 %abc将不会查找到该数据,因为后面多余的空格也是字符。解决方法是前后都加上%。

3、%不能匹配null值。

 

小练习:

1、 在页面上定义一个宽50高50的红色div,让它自动向右上方移动。

2、 接上题,移动到横向500纵向500的时候,再向上移动。

 

3、用css方法设置一个宽600px高50px的标题栏,用offset方法设置其浮动位置在页面的顶部,要求当你拖动浮动条的时候,这个标题栏始终在显示区域的最上方。(提示:可以setInterval方法)。

 

_(下划线)通配符

_ 通配符的作用与%类似,但是它只能匹配单个任意字符。

 

JQuery中的事件绑定

示例:

SELECT * FROM student WHERE sName LIKE '小_'

SELECT * FROM student WHERE sName LIKE '小__'

 

查找以“小”开头的之后任意两个字符的数据,而且必须是两个字。

 

注意:下划线与%不同的是前者不匹配字符,必须得有一个字符才能匹配。

 

SELECT * FROM student WHERE sName LIKE '_老_'

 

 

页面载入事件

Ready(function(e){   }),当网页内容全部加载到浏览器中,并且完成dom模型构建之后触发的事件。它与<body>的onload事件作用一样。

SELECT 查询中的关键字

事件绑定函数

Bind函数:把指定的事件,绑定到选择器指定的元素上。

    $("#littleButton").bind(

"click",

function(){

alert("我是一个按钮");

}

 );

 

in关键字

在一个集合中进行匹配,只要数据与集合中的任意一项相同,就以为数据满足条件。

 

SELECT * FROM student WHERE sAddress IN('北京','西安','天津','山东')

 

查找地址是 北京,西安,天津 或 山东的学生信息

 

绑定仅执行一次的事件

One函数:为选择器指定的html元素绑定一个仅会执行一次的事件,之后这个事件就不会再被触发了。

示例:

$("#littleButton").one("click",function(){

alert("今天星期四");

});

 

limit关键字

limite后面需要跟两个数字,代表从指定的记录开始(使用数据记录在物理上的次序而不是ID),查找多少条记录出来。

自动触发指定元素的指定事件

trigger()方法:自动触发执行指定元素上的指定事件,而不需要用户手动操作。

$("#littleButton").trigger("click");

 

注意:

1、 次序是从0开始的,也就是说第一条记录的序号是0

2、 这里的序号不等于ID,它仅仅是代表排列次序。

3、 LIMIT关键字是mysql所独有的,比如:mssql和Oracle中就没有Limit关键字。

 

SELECT * FROM student LIMIT 3,2

 

从第4条记录开始,获取之后的两条记录。

 

取消指定元素上的指定的事件

unbind():取消指定html元素的指定事件的绑定,令其不再生效。(只能取消通过jquery上的bind绑定的事件,html元素上本身的事件无效,比如:onClick)

示例:

$("#littleButton").bind("click",function(){

alert(111);

});

$("#littleButton").unbind("click");

 

 

join关键字 – 链表

join关键字用于在数据库中同时查询多张存在关联关系的数据表。

 

事件委派:给还不存在的元素绑定事件

live()方法

示例:

$(".btn1").live("click",function(){

alert("这是在按钮出现之间绑定的事件");

});

alert(1);

$("body").append("<input type='button' value='被追加的按钮' class='btn1' /> ");

 

 

as关键字

用于对字段段取一个别名

SELECT sName as '姓名',sAge as '年龄',sAddress as '地址' FROM student

 

 

解除live方法委派的事件

die()方法示例:

$(".btn1").live("click",function(){

alert("这是在按钮出现之间绑定的事件");

});

$("body").append("<input type='button' value='被追加的按钮' class='btn1' /> ");

$(".btn1").die("click");

 

 

多表查询

为一个html元素的一个事件切换多个动作

toggle():可以为指定的html元素的指定事件绑定多个会依次切换的函数。比如:

$("#littleButton").toggle(

function(){  alert("你好呀,吃了么?") },

function(){  alert("还没吃?") },

function(){  alert("那赶快回家去吃吧!") },

function(){  alert("你妈喊你回家吃饭") }

);

 

 

内连接

就是指仅仅查询两张表中有关联关系的数据,而没有关联关系的数据是不会被查询出来的。

 

 
   

 

常用事件

方式一:select同时from多张多

在select的from语句后同时写入多张表的名字,然后在where条件语句中写入多表之间的连接条件。

 

示例:

SELECT * FROM student,score WHERE student.sid = score.sid

 

注意:内连接之中,要分主表和附表,附表只是用于对主表所缺少的内容进行补充,比如上例中,主表是学生成绩,student学生只是在补充主表中缺少的学生姓名等数据。

SELECT

student.sName as '姓名',

   student.sAge as '年龄',

   score.sProject as '科目',

   score.score+10 as '成绩',

   score.sid as '编号'

FROM student,score

WHERE student.sid = score.sid

 

 

在多表查询的时候,为了避免由于字段名重复而产生错误,我们可以在字段名前面加上表名,以示区分。

 

单击Click()

方法二:inner join

使用inner join同样可以完成上例中的功能,而且主表与附表、连接条件一目了然。INNER JOIN子句的前面是主表,后面是附表,ON后面是表连接的条件。

 

SELECT

   student.sName as '姓名',

   student.sAge as '年龄',

   score.sProject as '科目',

   score.score as '成绩',

   score.sid as '编号'

FROM score INNER JOIN student

ON score.sid = student.sid

 

 

注意:省略INNER直接写JOIN关键字,也是内部连接。

 

绑定单击事件

$("#littleButton").click(function(){

alert("哎呀");

});

 

左连接

在两张表联合查询的时候,我要显示主表中包括没有关联关系的数据在内的所有数据。

 

SELECT * FROM score

LEFT JOIN student

ON score.sid = student.sid

 

 
   

 

自动触发单击事件,而不需要用户手动点击

$("#littleButton").click();

 

右连接

查询附表(JOIN关键字之后的表)中包含没有关联关系的数据在内的所有数据。

SELECT * FROM score

RIGHT JOIN student

ON score.sid = student.sid

 

双击dblclick()

多张表连接

示例:

SELECT * FROM score

INNER JOIN student ON score.sid = student.sid

INNER JOIN class ON student.cid = class.cid

 

绑定双击事件

$("#littleButton").dblclick(function(){

alert("哎呀");

});

 

通过关键字IN来进行关联查询

查询所有数学成绩在60分以上的学生的信息。

Select * from student where

sid in

(

    SELECT sid FROM score

    WHERE score >60 And sProject = '数学'

)

 

IN在此处表示,sid必须与()内的查询结果之一相等。

 

自动触发双击事件,而不需要用户手动点击

$("#littleButton").dblclick();

 

在文本框中选中文字

select()方法,绑定选中文字时所要执行的函数。

示例:

$("#ttBox").select(function(e){

alert("哎呀,我被选中了。");

});

自动触发在文本框中选中文字的事件,并且自动选中文字:

$("#ttBox").select();

 

获取焦点

focus()

鼠标悬停

hover()

失去焦点

blur()

鼠标按下

mousedown()是指鼠标按下还没有抬起时触发,并且其函数可以接收到一个事件参数,这个参数中包含当前鼠标的横坐标与纵坐标,示例:

$("#littleButton").mousedown(function(e){

alert("当前按下的位置是x:"+e.clientX+"---Y:"+e.clientY);

});

 

这里得到的是点击位置相对于整个页面的左上角的位置。

鼠标移出时

mouseout()

它的用法和语法与mousedown一样。

鼠标移动时

mousemove()

它的用法和语法与mousedown一样。

松开抬起鼠标键时

mouseup()

它的用法和语法与mousedown一样。

表单提交事件

submit() 绑定表单提交时要执行的动作。

键盘事件

keydown 按下一个键时

keyup 松开抬起一个键时

keyPress 按下并松开一个键时

示例:

$(document).keydown(function(e){

alert("您刚才按下的是:"+e.keyCode);

});

JQuery与javascript中有差异的事件

scroll()当滚动条滑动时所触发的事件

严格的说应该是浏览器窗口中显示的网页的位置发生改变时。

$(document).scroll(function(){

alert($(document).scrollTop());

});

 

mouseenter()当鼠标进入到元素所占的区域范围内时

与mouseover(),在较简单的情况下我们是看不出这两种事件的区别的,但是当在执行一些动画效果或者其他较复杂的情况下,就会发现。mouseenter()事件只会被执行一次,mouseover()事件会在你的鼠标停留在元素之上的过程中一直重复执行。

mouseleave()当鼠标离开一个元素的显示范围时

它与mouseout()类似,但是它需要与mouseenter()搭配在一起使用的,也就是进入元素范围时用mouseenter(),离开元素时用mouseleave

小练习:

1、 用bind()向页面上的一个按钮添加鼠标移入事件,移入按钮范围时,按钮文字变成“欢迎光临”,移出按钮文字变成“后会有期”。

2、 用toggle()绑定多个函数给一个按钮,就是当你第一次单击这个按钮时,它提示“你为什么要点我”,第二次提示“说了你还点”,第三次提示“你再点一下试试”,第四次提示“好吧,你赢了。”

3、 实现一个做选择题的功能,在页面上有一个P段落和四个单选按钮,当你选择四个单选按钮中的任意一个时,会提示用户是否回答正确。其中的事件绑定必须要用JQuery实现。

4、 设置一个宽600px高50px的标题栏,背景色为橙色,用offset方法设置其浮动位置,要求当拖动页面滚动条时,这个标题栏始终位于当前显示区域的最上方(提示:要求使用scroll()事件)

5、 定义一个长度都是50px的红色div,要求在屏幕任意位置点击鼠标时,这个div立刻移动到当前鼠标点击的位置。

 

 

 

JQuery_动作与效果

基本效果

隐藏一个元素

Hide()方法:

语法:

选择器.hide(速度,fn);

示例:

$("#box1").hide(); //直接隐藏没有任何动画

$("#box1").hide(2000); //在2秒之内逐渐向左上角缩小隐藏

//隐藏过程的动画结束之后,执行这个包含alert的函数

$("#box1").hide(2000, function(){

alert("我隐藏起来了,你看不到");

});

 

说明:

速度代表隐藏过程的时间,单位毫秒。

Fn代表隐藏动画结束之后自动执行的函数。

 

显示已经被隐藏的元素

Show()方法

语法:

选择器.show(速度,fn);

说明:

无论是被css的display:none属性隐藏的元素,还是被上面的hide()方法隐藏的对象,都可以使用show()来令其显形。

 

示例:

$("#box1").show();

$("#box1").show(3000);

$("#box1").show(3000,function(){alert("我又回来了")});

 

 

显示或者隐藏一个元素

Toggle

语法:

Toggle(速度,fn)

说明:

如果这个元素是可见的就执行隐藏操作,如果不可见就执行显示操作。

示例:

function hide_show(){

$("#box1").toggle(300,function(){

alert("我来了,又走了");

});

}

<input type="button" onclick="hide_show()"  value="hide_show" />

<div style="width:400px; display:none;" id="box1">

    <img src="img/aa.jpg" width="400" />

</div>

 

滑动效果

滑动隐藏一个元素

slideUp()方法:

示例:

$("#box1").slideUp(2000,function(){

alert("图像收起来了");

});

 

滑动显示一个元素

slideDown()方法:

示例:

$("#box1").slideDown (2000,function(){

alert("图像拉下来了");

});

 

滑动隐藏或显示一个元素

sildeToggle()方法:

元素可见就滑动隐藏,反之则滑动显示。

function hide_show(){

$("#box1").slideToggle(100,function(){

alert("隐藏则显示,显示则隐藏。");

});

}

<input type="button" onclick="hide_show()"  value="hide_show" />

 

淡入淡出效果

以淡出效果隐藏一个元素

fadeOut()方法

示例:

$("#box1").fadeOut(3000,function(){

alert("我走了");

});

 

以淡入效果显示一个元素

fadeIn()方法

示例:

$("#box1").fadeIn(3000,function(){

alert("我又来了");

});

 

改变元素的透明度

fadeTo方法()

在指定的时间内以动画的形式修改一个元素的透明度。

语法:

选择器.fadeTo(速度,透明度,fn);

其中:

透明度是一个1到0之间的小数,代表透明的百分比。

fn是动画完成后执行的代码。

示例:

$("#box1").fadeTo(2000,0.5);

$("#box1").fadeTo(2000,0.5,function(){

alert("变淡了");

});

 

淡入显示或淡出隐藏

fadeToggle()方法

 

动画效果

自定义动画

Animate可以通过多种css属性的逐渐变化来实现动画效果。

语法:

选择器.animate({

“css属性名1” : ”属性值1”,

“css属性名2” : ”属性值2”,

},动画时长);

作用:

让指定的html元素由目前的css属性开始逐渐向指定的css属性变化,其变化过程会形成一个指定时长的动画。

示例1:

$("#box2").animate({

"width":"500px",

"height":"300px",

"font-size":"100px",

opacity:0.5 //代表透明度

},2000);

 

示例2:

$("#box2").animate({

"width":"toggle",

"height":"toggle",

opacity:"toggle"

},2000);

 

支持的属性:

Height/width:值可以为toggle,也在当前属性值与0值之前切换。

Left/right/top/bottom:前提是元素必须是浮动的。

opacity 值可以为toggle,透明度是0到1之间的一个小数。

停止正在运行的动画

选择器.stop();

如果选择器指定的元素正在执行动画,则立即停止动画的执行。

Delay延迟动画或其他方法的执行。

$("#box2").delay(5000).slideUp(2000);

 

延迟5秒再执行动画

关闭页面上所有动画

$.fx.off=true;

小练习:

 

 
   

1、按照上图制作一个滑动菜单,要求点击标题栏展开其下方的子菜单项,其他菜单栏收起,要求必须有滑动动画效果。按图进行css切图。

 

2、用Animate制作一个你“点不到我”的按钮,也就是鼠标指向其上时,就会随机移动到其他地方。

提示:获取浏览器显示区域的宽度和高度。

document.documentElement.clientWidth;

document.documentElement.clientHeight;

 

 

3、制作一个百度弹出登录框,要求点击登录直接在页面以浮入动画弹出一个浮动的登陆框,而且无论滚动条在什么地方,这个登录框始终在屏幕中央,点击X 关闭。

 
   

 

4、如下图所示,产品图片可以自动向左滑动,当鼠标点击左右键时,可以向左右移动一条图的位置。用户不操作时,每5秒向左移动一个图片的位置,

 

 
   

5、下拉菜单效果,当鼠标移动到菜单上时,就滑动显示出下拉菜单,并且当鼠标移动到菜单项上时,文字变绿并向后滑动10px;

 
   

 

6、点击标签栏,显示不同的内容

 
   
 
   

7、当鼠标移动到图片上时,滑动交错动画显示出两个从上到下和从上到上的透明div,并且滑动交错显示出从左到右的标题和从右到左的文字简介。

 

 
   

 

 
   

 

 
   

 

评分标准:

一道题20分,第7和4题是附加题。

 

 

 

JQuery中的ajax

什么是ajax

称为异步加载,就是指在不刷新网页的情况下,去读取另一个网页的内容,然后以字符串的形式得到另一个网页的所有代码。

 

Load方法

得到另一个网页的代码,并将得到的代码插入到指定的位置。

示例:

$("#box").load("bb.html");

 

语法:

选择器.load(url,[data,][callback]);

说明:

1、 选择器用来指定的一个html容器,这个容器来存放从另一个网页中得到的html代码。也就是将另一个网页的所有代码放在当前这个选择器指定的元素的开始标签和结束标签中间。

2、 url参数,就是要请求的那个网址。

3、 data参数,是一个json,是指需要发送给另一个网页的参数,比如:{“userName”:”小白”,”password”:”123456”}

4、 callback,是指完成读取之后会被执行的一个函数,这个函数有两个参数,分别是:

a) responseText 得到的另一个网页的源代码的字符串

b) textStatus 读取另一个网页是否成功,success代表读取成功,error读取失败。

示例:

$(“box”).load(

“11.html”,

{“userID”:”008”,”userType”:”admin”},

function(responseText, textStatus)

{ //第一个参数是另一个网页的所有代码,第二个参数是读取是否成功,这个两个参数的名字是可以改变的。

alert(responseText + ”-------” +  textStatus);

}

);

 

 

$get方法

使用Get方式来进行异步请求,通常而言用于向服务器端传递,然后再获取返回的网页的代码。

示例:

    $.get(

"Untitled-1.html",

{"un":"小白","pwd":"123"},

function(r,s){

alert(s);

alert(r); //得到的是一个文档对象

}

);

 

语法:

$.get(url,[data],[callback]);

 

参数说明:参见load方法。

 

$post方法

示例:

    $.post(

"Untitled-1.html",

{"un":"小白","pwd":"123"},

function(r,s){

alert(s);

alert(r);  //得到的是一个文档对象

}

);

 

语法:

$.post(url,[data],[callback]);

 

参数说明:参见load方法。

 

$.getJSON方法

异步读取另一个页面中的json数据,并将其解析成javascript对象。

示例:

json1.js

{ "studentName":"小强", "studentAge":18 }

html文件

$.getJSON("json1.js",function(std,s){

// std是一个js对象

alert(1);

alert("我叫"+std.studentName+"今年"+std.studentAge+"岁");

});

 

$.getScript方法

允许我们跨域(读取另外一个网站的)读取并执行一个javascript脚本程序。

示例:

if(confirm("是否执行js文件"))

$.getScript("json1.js");

或

$.getScript("json1.js",

function(){

alert("远程脚本已经执行完毕")  

}

);

 

练习:

1、 建立三个网页index.html,text.html和text2.html,在index.html页面中包含两个div,分别将另外两个网页内容添加到这个div中。内容自定

2、 定义一个json文件,这段json之中包含一个数组,数组之中包含五条产品信息(产品名:pName,产品型号:pModel,产品价格pPrice),读取这些产品信息,并将五条产品信息显示在一个表格中。

3、 模拟优酷评论,定义一个外部的json文件,这段json之中包含10条评论信息(用户名:uName,评论时间uTime,评论内容uText),当网页的滚动条滑动到800px的时候,向一个div中读取这些评论的信息,并将五条产品信息显示在一个表格中。(提示:避名scroll事件由于多次触发而导致重复读取评论内容。)

 

本文由澳门太阳娱乐集团官网发布于数据库,转载请注明出处:我的ASP.NET学习笔记05Javascript基础知识01

上一篇:没有了 下一篇:MySQL常用命令(二)
猜你喜欢
热门排行
精彩图文