黑马程序员技术交流社区
标题: 【石家庄校区】JQuery,BootStrap,及数据库多表查询 [打印本页]
作者: ...句号 时间: 2018-1-23 15:14
标题: 【石家庄校区】JQuery,BootStrap,及数据库多表查询
本帖最后由 ...句号 于 2018-1-23 16:29 编辑
JQuery,BootStrap,及数据库多表查询
JQuery的概述
JQuery是一个JS的框架(JS的类库).对传统的 JS进行了封装
JS的常用的框架:
JQuery,ExtJS,DWR,Prototype...
JQ的使用:
学习JQuery的语法.
JQuery的入门:
引入Jquery的js文件
<script src="../../js/jquery-1.11.3.min.js"></script>
传统JS的方式:页面加载的事件只能执行一次;
JQ在dom树被绘制完成后就执行,比JS的事件加载早,可以被执行多次
总结:
1.JQ的入口函数,比JS的入口函数效率高,并且可以执行多次
2.JQ对象和JS对象的区别:
JQ是一堆的JS,是个数组
3.注意事项:
JS对象只能使用JS的方法和属性
JQ对象只能使用JQ的方法和属性
4.相互转换:
JQ--->Js 通过数组的角标获取
JS--->JQ 通过$()这个将js括起来既可以实现
JQ显示和隐藏
JQ的效果操作:
show();
使用一:JQ对象.show();
使用二:JQ对象.show("slow");//slow,normal,fast
使用二:JQ对象.show(毫秒值);//1000
使用二:JQ对象.show(毫秒值,function(){});
hide();
使用一:JQ对象.hide();
使用二:JQ对象.hide("slow");//slow,normal,fast
使用二:JQ对象.hide(毫秒值);//1000
使用二:JQ对象.hide(毫秒值,function(){});
slideDown(); --向下滑动
使用一:JQ对象.slideDown();
使用二:JQ对象.slideDown("slow");//slow,normal,fast
使用二:JQ对象.slideDown(毫秒值);//1000
使用二:JQ对象.slideDown(毫秒值,function(){});
slideUp(); --向上滑动
使用一:Jq对象.slideUp();
使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
使用三:Jq对象.slideUp(毫秒值); // 1000
使用四:Jq对象.slideUp(毫秒值,function(){});
fadeIn(); --淡入
使用一:Jq对象.fadeIn();
使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
使用三:Jq对象.fadeIn(毫秒值); // 1000
使用四:Jq对象.fadeIn(毫秒值,function(){});
fadeOut(); --淡出
使用一:Jq对象.fadeOut();
使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
使用三:Jq对象.fadeOut(毫秒值); // 1000
使用四:Jq对象.fadeOut(毫秒值,function(){});
animate(); --自定义动画
toggle(); --单击切换函数
Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
基本选择器:
id选择器
用法:$(“#id”)
类选择器
用法:$(“.类名”)
元素选择器
用法:$(“元素名称”)
通配符选择器
用法:$(“*”)
并列选择器
用法:$(“选择器,选择器,选择器”)
层级选择器
后代选择器：使用空格 所有后代包含孙子及以下的元素
子元素选择器：使用> 第一层的元素（儿子）
下一个元素:使用+ 下一个同辈元素
兄弟元素:使用~ 后面所有的同辈元素
基本过滤选择器:
:first
:last
:not(selector)
:even 找出偶数的元素
:odd 找出奇数的元素
:eq(index) 匹配一个给定索引值的元素
:gt(index)
:lt(index)
:header
:animated
:focus
属性选择器:
[attribute]
$("div[id]") 查找所有含有 id 属性的 div 元素
[attribute=value] 返回值:Array<Element(s)>
$("input[name='newsletter']").attr("checked", true);
查找所有 name 属性是 newsletter 的 input 元素
表单选择器:
:input $(":input") 查找所有的input元素
:text $(":text") 查找所有文本框
:password $(":password") 查找所有密码框
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
表单对象属性
:enabled
:disabled
:checked
:selected 被选中
【JQuery中添加和移除样式】
* 如果样式没有事先定义,可以使用css方法为奇数行或者偶数行设置背景颜色.
* 如果已经在css文件中事先将样式定义完成了,不能使用css方法了.使用JQ中的CSS类中的方法：
* addClass();
* removeClass();
代码实现:
<script>
$(function(){
/*$("tr:odd").addClass("odd");
$("tr:even").addClass("even");*/
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
});
</script>
JQuery对属性的操作的方法
prop();新版本的方法.
使用方法一：$(“”).prop(“src”);
使用方法二：$(“”).prop(“src”,”test.jpg”);
使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
removeProp();
addClass()
removeClass();
text(); $('p').text(); 返回p元素的文本内容
prop()和css()的区别:
prop():可以设置所有的属性键值对
css():只能设置样式键值对
JQuery的DOM(文档)操作
常用的方法:
append(); ---在某个元素后添加内容.
appendTO(); ---将某个元素添加到另一个元素后.
remove(); ---将某个元素移除.
JQuery的遍历
遍历的方式一：
* $.each(objects,function(i,n){
});
遍历的方式二:
* $(“”).each(function(i,n){
});
JQuery的常用事件
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])
JQ的事件切换：
* toggle(); --单击事件的切换
* hover(); --鼠标悬停的切换
JQuery的查找
* find();
JQuery的事件处理
作用: trigger和triggerHandler两个方法的本质作用,调用其他元素中已经绑定的事件
trigger --- >不仅执行函数体,而且触发浏览器默认的这个函数的操作
triggerHandler---->只执行函数体,并不会触发浏览器默认的操作
BootStrap的概述
栅格系统怎么就响应式了
划分成12列 -----1200 用 col-lg(电脑) 960 col-md(电脑) 760 col-sm(平板) col-xz(手机)
因为用到css3中的媒体查询的技术----时刻监控着屏幕的宽度,根据不同宽展示不同的布局
数据库的多表设计
数据库都是关系型数据库,存的是实体之间的关系,
实体的关系总结起来有三种:
一对多:
多对多
一对一
多表的设计
一对多的关系的建表原则
在多的一方创建一个字段,这个字段作为外键指向一的一方的主键
多对多的关系的建表原则
在创建一个第三种表,中间表中至少需要有两个字段分别作为外键指向多对多双方的各自的主键
一对一的关系的建表原则
唯一外键对应:假设一对一的双方是一对多的关系,在多的一方创建外键指向一的一方的主键,需要在外键上添加一个unqiue约束;
主键对应:将一对一的双方的主键建立映射.
约束,用来保证数据的完整性
多表约束:就是外键约束,用来保证数据的完整性
***** 给orders表中的cid添加外键约束.
* alter table orders add foreign key (cid) references customer(cid);
多表查询的SQL
多表查询的方式:
交叉连接:
select * from A,B; 获得的是两个表的笛卡尔积.
内连接:
显式内连接:select * from A inner join B on 条件(主键ID和外键ID相匹配);
隐式内连接:select * from A,B where 条件;
外连接: outer join --- outer可以省略
左外连接: left outer join --- select * from A left outer join B on 条件;
右外连接: right outer join ---- select * from A right outer join B on 条件;
多表查询的子查询
一个SQL语句查询的过程中需要依赖另一个查询语句
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |