06WEBBASIC_07jQuery

来源：互联网发布：师洋淘宝店截图编辑：程序博客网时间：2024/05/17 05:57

DDL
DML
DQL
TCL

HTML解释执行，非编译执行
提高开发效率：框架 SpringMVC / struts2------->
针对：Servlet的框架： SpringMVC / struts2
针对：JDBC的框架：MyBatis / Hibernate
管理java创建的对象：Spring

针对前端的HTML/CSS/JS的框架：jQuery

面试问题：说说HTML的原理？？？？？？？？

AJAX：通讯。学XML传输。在这之前都是XML存储

双标签：<student></student>

单标签：<student/>

new Maven Project需要选war，war才是web项目
右键Deployment Descriptor:WebBasic,选择generate...红色即消失，消失原理，
十天后讲

元素：包含有属性，标签和内容？？？的整体

HTML
XHTML 严格遵守XML规范
网页是面向用户的，不能因为某一段语法错误都不显示了。
在用的都是HTML为主

html支持六级标题.一般3级就够了。
h1到h6

段落：p

列表。前边是点的为无序列表。数字的为有序
有序：ol
无序：ul

单标签：换行的：<br/>
<meta>

XML的属性位置是不固定的
顶部默认是锚点，不需要另外设置
<p>
<a herf="#">回到顶部</a>
</p>

colspan/rowspan跨行跨列，相当于表格的合并
必须是从左向右，不能跟表格一样两边都可以合并

rowspan=“2”跨2行

<div style="color:red width:960px;margin:0 auto

margin是整体居中。内容是align="center"

切记：换行是单标签<br/>

不能用div分table，不然破坏了table的结构。只能用<thead> <tbody> <tfoot>

简要描述行内元素和块级元素的区别。

参考答案

块级元素的前后都会自动换行，如同存在换行符一样。默认情况下，块级元素会独占一行。例如，<p>、<hn>、<div>都是块级元素。在显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。

行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。例如，<a>、<span>等。

我们可以这样理解：如果元素是块级的，则总是在新行上显示，好比是书中的一个新段落；而元素如果是行内的，那么只能在当前行中显示，就像是段落中的一个单词。

因此，块级元素常用来构建网页上比较大的结构，用于包含其他块级元素、行内元素和文本；而行内元素一般只能包含其他行内元素和文本。

——————————————————————————————————————————————————
day02

input元素（具有不同的外观）
文本框，密码框
单选框，复选框
按钮
隐藏域

换行p和br都可以。

——————————————————————————————————————————————

<p>
性别：
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
</p>

————————————————————————————————
label是将文本和选择框作为一个整体。就是控件+id

文本域双标签中间的字就是默认值，而不是用value

<style>
/*CSS的注释是酱紫的*/

</style>

h1 {color:red;font-size:12px;}
h1:选择器
color：属性
red：值
color：red：声明

CSS规则特性：
继承性：
颜色字体能继承，大小边框不行
层叠性：不冲突的声明可以叠加

优先级：哪个离样式近就优先级高。新的样式可以覆盖旧的

id在style中是以#开头
class类型的在style中是以.开头

——————————————————————————————————————————————————————

选择器组

派生选择器：

类选择器class范围小点
精准直接定位id

伪列选择器：用于设置同一个元素在不同状态下样式。
如导航网站点过的连接都变色，没点的是原来的颜色

：link向未被访问的超链接添加样式
：visited已访问的...
：

————————————————————————————————————————————————————
css声明：

boder样式单位：
em：lem等于当前的字体尺寸，2em等于当前字体尺寸的2倍，比如所有首行字放大的时候用
px
%

做pc端的可以固定宽为960px
手机的尺寸多，因此多用百分比

16进制颜色：
#4FC56D
红：4F
绿：C5
蓝：6D

-#EEEEEE双位相同的可以简写为：-#EEE
工作的时候颜色用取色器取色即可。如PS，FastStone

——————————————————————————————————————————————————

overflow当内容溢出元素框时的处理：

visible
scrol

————————————————————————————————————————————————————
1.box模型：
实际占宽=width+2padding+2margin+2border

实际占高=height+2padding+2margin+2border

p默认带边距
div默认不带

给元素设置内边距后，它看起来更大
给元素设置外边距后，它占有的空间变大了，就是跟其他元素的距离从默认的0变成了指定的距离

padding:10px 20px 30px 40px; 上右下左
margin:40px 30px 20px 10px;

2

————————————————————————————————————————————————
量尺寸：ps dreamweaver firework
工作中样式很少用id，不好复用。用class更灵活，便于扩张。将来学js和jaxon多id

在css中，
一开始做一些基础的声明，把边距都先改为0

设置body的边距为零，其子元素能继承吗？不能。只有颜色和字体能，其他都不能继承
可以选择*，代表一切

选择器的优先级：
元素选择器：1
类选择器：10
id选择器：100
.data:10
.content div:10+1

越精准分越高
分数高者优先

——————————————————————————————————————————————————————
web三要素：
服务器
浏览器
网络传输

当行高等于元素的高时，内容垂直居中

内边距：元素会变大
外边距margin：跟其他的距离，元素本身不会变大

表格特有属性：边框合并折叠，即取消中间的空格
border-collapse:collapse

css的边框单元格需要另外设置

—————————————————————————————————————————————————————————
定位：

就算被遮挡浏览器也会将文字显示

w3c建议用id，但是在生产环境中考虑到扩展性，都用class
在哪个元素写上clear，那么该元素就不受浮动影响，会出现在浮动元素的下方
clear:left;消除左浮动的影响，如果元素是右浮动的，就right。
clear谁，谁就出现在浮动的下方。

照片墙：通常用列表，不是div。只有一组相似的东西，就用列表。能缓存重用渲染，而且渲染效率更高。div会被每一次渲染div，渲染效率低

解决块元素横向摆放的问题用浮动

定位：
相对定位：不脱离流，小范围移动。案例：照片的抖动，鼠标移上去就移动2px，偏移量小。

绝对定位：想以谁为坐标，就给谁position属性。若父和爷都有position，实行就近原则，以父为目标
若父辈都没有，则以body。
偏移位置比较大，会离队

父辈的position一定要有，具体相对或绝对无关紧要

文字的透明度？？？？

固定定位：常用于“回到顶部”和广告条
元素永远挂在窗口上，不会随着滚动条而滚动

离谁近就以谁为基准

如何选择定位：
1.固定定位：看元素是否要挂在窗口上保持不动
2.浮动定位：看块元素是否要横向排列。float，红绿蓝案例
3.相对定位：看元素是否要释放位置，偏移量很小
4.绝对定位：15秒内没想出来一般就是绝对定位

——————————————————————————————————————————————————————————
堆叠：
z-index属性。数值越大越在上方，越小越在底部

list-style-type

——————————————————————————————————————————————————————————

元素的显示方式：
块：有宽高，垂直排列
h1，p,div,ol,ul,table,form
行内元素：从左至右。无宽高，
span,a,br,strong,i,em,u,del,b,label
行内块：有宽高，水平排列
input,img,select,textarea

如何修改显示方式：
通过display属性加以修改
block：块
inline：行内
inline-block：行内块
none：隐藏此元素
实际中一般不会修改显示

——————————————————————————————————————————————————————————
javascript

事件定义式----------相当于内部样式
嵌入式--------------相当于css的内联式
文件调用式----------相当于css的外联式

js中不区分单双引号
<script>可以在head写也可以在body里写，而css的style只能在head写

js中的函数都是公有的，不需要写修饰符

不区分变量的类型，都是var。未赋值的都是undefined

不区分整数小数，都是数字类型

浏览器提供的叫做外部对象

特殊类型：null undefined

内置对象：（基本类型）number String array boolean function

外部对象：windows：浏览器对象 document：文档对象

自定义对象：Object：自定义对象

后三个为重点，其中外部对象为重点的重点！自定义较简单，内置也较简单，数量比较多

字符串优先级最高，其次是布尔值
数字+布尔值：true转换为1，false为0

数据类型转换：
toString
——所有数据类型均可转换为String类型
parseInt
————强制转换成整数，不是四舍五入的。如果不能转换，则返回NaN（not a number）
parseFloat

typeof
————查询当前类型，返回string/number/boolean/object/function/undefined
isNaN
————判断传入的数据是不是NaN。判断被检测表达式经过转换后是否不是一个数。如果不是
数则返回true，否则返回false

//只要能转成数字，就认为是数字
//只要不能转换为数字，就认为是NaN
console.log(isNaN("abc")); //不能转，符合 not a number条件,因此true
console.log(isNaN(56)); //可以转，不符合非数字条件，则false
console.log(isNaN("5.6"));//可以转，不符合非数字条件，则false

————————————————————————————————————————————————
1.获取元素
document.getElementById(id)
2.如何获取表单控件的值
input.value
3.如何给span设置内容
span.innerHTML="";

只要从网页取元素，方式都是一样的
//获取文本框
var input = document.getElementById("num");

debug：
## 1，看报错信息

## 2.打桩

## 3.排除法+二分法
——删除一部分代码，看还是否报错，从而确定错误的范围
——建议每次删除一半
》这种方式是用来定位问题的

——————————————————————————————————————
运算符

js中5/2结果是2.5，因为整数和小数不区分

关系运算：

全等： = = = 也就是类型和数值相同
不全等：！= =

双等是equals
三等是类型和值都等

————————————————————————————————————————
错误小结：

var r = parseInt(Math.random()*100));
多了个右括号，因此一直提示缺少分号;

错误：span.innerHTML("输入非法");
该方法不是用括号，而是用等号！！！！！！！！！！，正解如下：

span.innerHTML="输入非法";

！！！！！！！！！￥￥￥￥￥￥￥￥￥￥$$$$$$$$$$$$$$$$$$!!!!!!!!!!!!!!!!!!1！！！！！！！！

js中的条件表达式
java中必须返回布尔值
js中的表达式可以是任意表达式，即可以返回任何为类型值
一切空值都false，一切非空值都是true
5个空值：
0
null
""
undefined
NaN

在js中：
var k=get(); //从外部获取的值
if(k!=null && k!=0 && k!="" && k!=undefined && k!=NaN){
alert("ok");
}
这样明显很繁琐，反观java如下：

而在java中则是如下判断：
if(k!=null && k.equals("")){...}

所以为了避免麻烦，js支持变量当条件

js还有如下判断：
以任何数字当条件，当k是5个值的时候，则是false，只有非这5个才是true，因此符合条件能够输出
if(k){
alert("ok");
}

————————————————————————————————————————————

//也可以这样
var g="abc";
//js中g可以当条件，右边也可以。左边true
g && console.log("yes"); //能输出

var g=null;
//js中g可以当条件，右边也可以。左边为空值，false，不满足。因此不输出
g && console.log("yes"); //不输出

——————————————————————————————————————————————————————

错题：
......
else if(n=0){ //如果输入的等于0 <------------------else if的判断少了等号
span.innerHTML=1;
}else{
var s=1;
/*for(var i=n;i>0;i--){*/
for(var i=n;i;i--){//跟上一句一样 <------------------有用的知识，面试参考
s*=i;
}span.innerHTML=s;

}
.....

else if的判断少了等号！！！！！！！！！！！！

——————————————————————————————————————————————————————
预保留的关键字：class int float等。声明所有变量都是var，而不是其他int 等等等

js常用的内置对象有：
String
Number
Boolean
Array 较难
Math
Date
RegExp 正则表达式较难
Function 较难

String在java中length是长度：str.length()
而在js中length是对象的属性：str.length

js中方法和属性都是公有，都是可以直接访问的

x.charCodeAt(index):js中返回指定位置字符的编码

lastIndexOf:从后往前找，第一个指定字符的位置

替换字符串
---x.replace(findstr,tostr)
findstr:要找的子字符串
tostr：替换为的字符串

——————————————————————————————————————
number：

toFixed(num):转换为字符串，并保留一定位数的小数，不足的补零，多余的进行四舍五入舍入,

举例：
var data = 23.56789;
alert(data.toFixed(2)); //23.57

——————————————————————————————————————
array：
js中一切都是对象，array是，甚至函数也是对象
js中的都是Object数组，也就不限定类型

var a1=new Array();
var a2 = new Array(7);
var a4=[100,“a”,true]
var a4=[100,200,300]

var a2 = new Array();
//js的加入方式跟java的Stack一样的push。js中集合就是数组，数组就是集合
a2.push("lisi");
a2.push(23);
a2.push(false);
console.log(a2[0]);

数组的倒转和排序

倒转：
x.reverse():反向数组，改变数组x中数值的顺序

排序：
x.sort([sortfunc]):数组排序
——sortFunction:可选项，用来确定元素顺序的函数的名称

迭代==循环

sort()方法可以传一个自定义的排序方法当作参数传进Array.sort();
js中方法可以当参数

后面讲的课程都会涉及底层原理

如何了解底层原理：
1.Spring的相关书
2.或者直接看源码

课上通过图简单了解

————————————————————————————————————————————————————

Math对象的常用方法
三角函数

计算函数

数值比较函数
Math.random();

——————————————————————————————————————————————
Date对象

回顾java日期：
java.util.Date SimpleDateFormat

java.sql.Date 年月日
java.sql.Time 时分秒
java.sql.Timestamp 年月日时分秒

js的Date：
当前软件需要的时间：客户端时间，服务器时间，数据库时间
答：需要的当前时间一定以服务器或者数据库时间为准，很少直接创建客户端时间（不准），如全世界都访问淘宝
但可能服务器发送过来一个时间需要处理，为了方便将其转为js中的日期，处理完再发送给服务器

读写时间毫秒数：getTime()/setTime()

读写时间分量：
getDate()
getDay()
getFullYear()

setDate()
setDay()
setFullYear()

转换为字符串
toString()
toLocaleTimeString()
toLocaleDateString()

getDay是一周当中的第几天，返回的是4为周四

在浏览器的控制台也能编码，作为小例子或查api

_----------_________________--------------_____---------____--------__--------------

RegExp对象
//直接写
var reg1=/^\d{3,6}$/;

//写在字符串
var reg2 = new RegExp("^\\d{3,6}$");

flags标识有：
g：全局模式没加模式默认是非全局模式
i：忽略匹配中的大小写检测

常用方法：
reg.exec(str) 检索字符串中指定的值，返回找到的值
reg.test(str) 检索字符串中指定的值，返回true或false----->工作中经常用

字符串支持正则的方法：

//1) str.replace(reg,"")
//2) str.match(reg)
//3) str.search(reg) 只返回匹配reg的字符串的索引，只返回索引

js只能通过class改变form的颜色，没办法用id或p等。只能class

js中\w就是包括字母数字和下划线

正则调用test，把被判断的值传进来
reg.test(pwd)

表单元素有onsubmit事件，当此事件触发时浏览器就会提交数据

任何事件都可以取消，只要在事件调用函数内返回false即可
此处是返回值，不是条件，不能用空值代替false

return是一个返回值，不是条件。

<form action="http:www.tmooc.cn"
onsubmit="return checkCode() && checkPwd()" >
上面一句判断不严谨

<form action="http:www.tmooc.cn"
onsubmit="return checkCode()+checkPwd()==2;" >
js中布尔值相加，只有两个都是true也就是1才能提交表单

——————————————————————————————————————

首字母大写的Function对象，关键字小写function

默认返回undefined
也可以返回具体值或boolean等

js函数没有重载
调用想传几个就可以传几个。js会将参数封装到arguments数组中
将数组给了函数
js直接
function x(a,b){
arguments[i]
}
arguments名字是定死的。
参数0=arguments[0]
参数1=arguments[1]
...
声明多少个参数就生成多少arguments

以参数列表给arguments赋值，没有的就不管了,比如只有3，5参数的话，9就不管了

如x() 没有参数0，而是undefined
x(3)
x(3,5)
x(3,5,9)

能够直接调用的函数：全局函数。

parseInt

eval:比如计算器中：把1+3计算了再+4
var s="2+3";
alert(s);//2+3
alert(eval(s)) //5

————————————————————————————————————————————————————
鼠标事件：
onclick
onblur ：光标从文本框移除后

VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVvvv

var g=null;
//js中g可以当条件，右边也可以。左边为空值，false，不满足。因此不输出
g && console.log("yes");

###############################################################

else{
var s=1;
/*for(var i=n;i>0;i--){*/
for(var i=n;i;i--){//跟上一句一样
s*=i;
}span.innerHTML=s;

###############################################################

<form action="http://doc.tedu.cn"
onsubmit="return checkUser()+checkPwd()==2;"

………………………………………………………………………………

！！！！！！！！！！！！！document.getElementById("ss").value;！！！！老是忘了value

——————————————————————————————————————————————————---

获取和输出值：
input.value
input.value=""

span.innerHTML
span.innerHTML="" 显示值

往段落p写内容跟span一样的

eval使用案例：计算器，把前面输入的1+2直接计算后显示3，再输入+3就继续加上然后显示加上3的值；

——————————————————————————————————————————————————
<script>
function cal(){ //获取的都是字符串
//获取文本框的值
var input= document.getElementById("ss")
var ss= input.value;
//文本框要做验证，用正则表达式.防止输入的是=-+等非数字
try{
//执行算式
var result = eval(ss);
//执行如果是成功的，把结果写到input
input.value=result;

}catch(ex){ //也就是var ex
//input文本框内显示错误
input.value="Error";
}

}

</script>
</head>
<body>
<input type="text" id="ss"/>
<input type="button" value="=" onclick="cal();"/>

————————————————————————————————————————————————————————

外部对象：工作中天天用，显示直观的
BOM：Browser Object Model
以浏览器为对象，划分为各个模块，各个模块暴露给js，js可以调用。具体看
day07的BOM图
通过使用BOM，可移动窗口，更改状态栏文本等等，

DOM
D：document
document.getElements

1.外部对象就是浏览器的API
2.

学每一个对象的结构，每一个的方法，如何使用

——————————————————————————————————————
Window对象
alert()
confirm()

setTimeout()
clearTimeout()

setInterval()
clearInterval()

-----------------------------------_--------------------___------------

从window开始，下级对象就开始难，特别是document是其中最复杂的！！

定时器：<-----------------------------------------------重要！！！

多用于网页动态时钟，制作跑马灯效果，倒计时等

周期性定时器
以一定周期执行
一次性定时器

周期性定时器：setInterval(todoFunction ，Millistime)

<p>的输出方式和<span>一样，都是.innerHTML=;
！！！！！！！！！注意，不要老是写成innerHTML()，而是=

完整的，应该写window.alert()/window.prompt()
只有window才可以省略

day07的重点：定时器

document的api加起来比其他loction/navigator/history等等都多
作为新手，location和history用得比较多
screen：设计师，架构师做的，判断是pc/手机的屏幕从而确定调用哪一套屏幕
和navigator：如刷票，需要变换ip，变换浏览器信息。再比如判断访问网站的客户端的浏览器版本
老手用得多

——————————————————————————————————————————————
Location对象
属性：
location.href="http://www.tmooc.cn";
方法：
location.reload();

——————————————————————————————————————————————

history对象
方法：
back()
foward()
go(num) ：num如果是-2则相当于单击两次后退按钮

---——————————————————————————————————————————

screen属性：用于获取屏幕的分辨率和色彩
常用属性：
-width/height
-availWidth/availHeight

----------------------------------------------------------------------------------------

navigator对象：获取客户端浏览器和操作系统
navigator.userAgent

_————————————————————————————————————————————————

document：文档节点/根节点
body/p；元素节点
class：属性节点
注释内的：注释节点
h1内的/h2内的/p内的:aaa bbb文字：文本节点

DOM操作
查找节点
读取节点信息：如.value
修改节点信息：如span.innerHTML=
创建新节点
删除节点

节点信息：
nodeName：节点名称
文本节点：永远是#text
文档节点：永远是#document
nodeType：节点类型

——————————————————————————————————————————
元素节点：
innerText：子标签无效
innerHTML：包含子标签
————————————————————————————————————————
这里不能取到p，因为p还没被加载
<script type="text/javascript">
//在函数之外的代码在一开始执行，body在后，这时候还没加载body
var p2=document.getElementById("p2");
-————————————————————
但是以下可以，顺序就变了：这里能取到p了
//onload是网页加载事件，在网页加载完成后自动触发，触发时自动调用等于号也就是绑定的函数。
window.onload = function (){
var p2=document.getElementById("p2");
console.log(p2.nodeName);
console.log(p2.nodeType);
}

————————————————————————————————————————————————————————

document对象
添加新节点：
parentNode.appendChild(newNode)

插入：
parentNode.insertBefore(newNode,refNode)
refNode:参考节点，新节点位于此节点之前添加

如果节点下无任何子节点是不能插入的，可以添加新节点

删除节点：
node.removeChild(childNode)
删除某个子节点，childNode必须是node的子节点
由父节点删除其下属的某个节点

也可以某节点调其父节点的方式删除自己，如下:

A
B C
D E

c.removeChild(E);
//or
E.parentNode.removeChild(E);

————————————————————————————————————
td----->column
tr ---> row
th --->加粗的td
放在table下的<th>跟放在<table>下的<thead>下的<th>一样，
反正，无论td还是th都放在行下，也就是tr下

th和td一样，th是特殊的td，加粗的td

——————————————————————————————————————————————————————

var obj= e.target || e.srcElement; ----------------------------------->?????????????????????
获取event对象的两种判断
为什么要try catch，什么时候要try catch，是只有用eval等特例才需要try catch吗？？？？？？？？？？？？？？？？

自答：因为是磁盘IO操作

——————————————————————————————————————————————————————
能操作能输入的都有值，就算是input的radio也有值，下拉选select和文本域textarea都有值比如label就没有值
内容就是双标签中的文本。
比如按钮就没办法写字，按钮就属于input的一种

段落有内容，但没有值.
input有值，没有内容。

有内容的用.innerHTML
有值的用.value

//只有如下表单控件有值
//input,select,textarea.

总之，只有input,select,textarea. 才能用value，其他都用innerHTML

<img/>图片不能输入则没有值，是单标签因此没有内容，只有属性如id,src

——————————————————————————————————————————————————————

接day07的demo6.html
//3.读写节点的值
//只有如下表单控件有值
//input,select,textarea.
var input=document.getElementById("b1");
console.log(input.value);
input.value="BBB";
//4.读写节点的属性
//4.1通过(标准的)方法读写属性（*）
//4.2通过属性名读写属性
//1）标准的属性名（*）

//className,id,style-->className用得多，外联内联样式多，在day06模拟登录的案例用过，而style用得少

//2）非标准的属性名

应该学习标准的api。*号的重点学记

获取节点属性：
getAttribute()
setAttribute()
removeAttribute()
————————————————————————————————————————————————————

如何修改显示方式：
通过display属性加以修改
block：块
inline：行内
inline-block：行内块
none：隐藏此元素
实际中一般不会修改显示

-------------------————————————---------------------------------------————————
day08
图片轮播

style内的注释不能用//，只能用/**/ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

//1.根据id查询
//document.getElementById("id");

//2.根据标签名查询
//document.getElementsByTagName("标签名");

//3.根据层次查询
//查询某节点的亲属（父亲，孩子，兄弟）
var bj = document.getElementById("bj");
//3.1查询父亲
var ul = bj.parentNode;
console.log(ul);
//3.2查询孩子
//带文本（空格）
console.log(ul.childNodes);

//4.根据元素的name属性查询，往往在单选上。如radio。或者多选checkbox
var radios = document.getElementsByName("sex");

对节点的增删改工作中天天用哟

select.value
1.默认返回你选中的那个option的内容
如果selcet.value返回的序号跟城市数组（如案例的城市）的排列顺序一致即可
2.当增加value属性后，返回你选中的那个option的value值。注意：value的值由你来设置，看具体情况
如：

p = document.getElementById("province");
var cities = province_cities[p.value];

th和td一样，th是特殊的td，加粗的td

this在button事件中就是正在点的那个元素的值

colspan合并列
colrow合并行

只要是网页上获取的都是字符串，value跟innerHTML都是获取到字符串。当做加法的时候必须要转成int或者float
但是乘法可以不用
var mny = price*text.value;

因为乘法有自动转型

DOM操作是工作中用得最多的地方

————————————————————————————————————————————————-
自定义对象。数据类型中的第四种
--直接创建对象
--使用构造器创建对象
--使用JSON创建对象

自定义对象
1.直接量，JSON对象
-{}大括号代表对象，里面包含多组键值对。key:value,key:value,key:value
function，date等只要是对象在js都能当成值
-key通常是字符串，
-value可以是各种类型的
2.构造器------------------->用来new的函数/首字母大写
使用中不是调用，而是new它
2.1内置构造器
---->特殊：Array,Date,RegExp,Function
---->通用：Object
(var teacher = new Object();//别人new的时候不知道结构，有什么数据)
2.2自定义构造器，函数首字母大写
--声明参数，让调用者直观地了解对象的结构

3.归纳
3中方式创建的对象都一样，都是Object
若创建的对象给别人使用，建议用2.2
若创建的对象给自己用，用1或者2.1都行

函数就是构造器，
大写开头就是构造器，小写开头的不是

外部对象用得多
——————————————————————————————————————————————

js的后绑定有什么好处？Spring有什么好处？？

2.3如何取消事件

event
#3.事件对象
3.1什么是事件
---某些特殊的业务里可能需要使用如下内容：
----鼠标点击的坐标，具体点击了哪个按键等等
----事件触发的时候，浏览器会创建一个对象记录这些内容，记录的是给我们后续用的
----调用这个对象就可以获取这些特殊的内容
----这个对象叫做事件对象event

3.2任何获取事件对象
---直接定义事件
----在调用函数时传入event
----在函数上通过参数接收该值

---后绑定事件
----浏览器在调用函数时自动传入event
----在函数

-----------------————————————-------------————————————————————---

js的事件处理机制：
-4.1冒泡机制
--如果内外元素都触发了单击事件
--点击内层元素，外层的单击事件也会触发
--触发的顺序：由内向外
--这种处理机制称其为冒泡机制

-4.2作用
--简化事件的定义
--本来众多子元素都要定义单击事件
--现在只需在父元素上定义一次事件即可
--此时必须要知道事件源是谁
--事件源：点击的具体位置，事件的来源

事件对象是浏览器提供的
有些浏览器用event.stopPropagation();
有些浏览器用event.cancelBubble=true;

{
"pageX":"23";
"stopPropagation":function(){}

}

-4.3如何停止冒泡
--调用event的api可以停止

-4.4如何获取事件源
--调用event的api可以获取

————————————————————————————————————————————
eval可以把字符串做计算

js：
解释型，不需要编译，运行在网页上。语法跟java相识。
类型：4种数据类型
.................................................

——————————————————————————————————————————
补充：day06
怎么查询节点？
根据id查，根据name查，根据层次查也就是子父节点的

节点信息：
nodeName：节点名称
-元素节点和属性节点：标签或属性名称
-文本节点：永远是#text
-文档节点：永远是#document
nodeType：节点类型
-返回值
-元素节点：返回1
-属性节点：返回2
-文本节点：返回3
-注释节点：返回8
-文档节点：返回9

—————————————————————————————————————————————
________________________________________________________________________________________________

JQuery

简介：js框架，轻量级的js库。封装了js，css，DOM，提供了一致的间接的api。兼容css3，及各种浏览器
耦合度越高，就越重，耦合度越低，量级越轻。
很容易实现后绑定事件
极大简化js编程。用jQuery比js效率更高
jq2.x开始不再支持IE6 7 8
获取事件源，api不是统一的，有两种，但在jq中只需要一种..

SpringMVC,Struts2,Mybatis,hibernate也都是轻量级框架

$("p")---->jq的选择器
css ---->jquery的

function bigger(){
//获取段落原始的字号（16px）
//获取字面上所有p。$("p")相当于document.getElementsByTagName("p");
var size = $("p").css("font-size" );
//为方便计算，去掉单位.把px用空字符串替换
size = size.replace("px","");
//+1后再将其设置给所有段落。用js的话改样式的话需要style或className，而且循环一个个改
$("p").css("font-size",++size+"px");
}

jquery封装的方法类似如下：
var ps = document.getElementsByTagName("p");
var jobj = new Object()
jobj.data = ps
jobj.css=function){}
jobj.width=function){}

选择器-->DOM数组--（new）--> [jQuery对象，包含了DOM数组，该对象内包含了处理数组的方法，提供了jQueryAPI]

jQuery对象不等价于DOM对象，只是对DOM数组的封装

1.jQuery对象可以调用jQuery的API
2.jQuery对象可以调用DOM的API
3.jQuery对象是对DOM数组的封装

DOM对象只能调用DOM的api

如果要调用对方的api，可以转换：
jquery转成DOM：obj[i]
DOM可以转成jQuery:$(dom)

————————————————————————————————————————————————————————
选择器：----------------------------->重点

跟css类似，很多都一样
基本选择器：
元素选择器:$("标签名")
层次：
$("select1 select2") 跟css一样选择1下的子孙
$("select1>select2") 跟css一样选择1下的子
$("select1+select2")选中select1元素的，满足select2的下一个弟弟
$("select1~select2")选中select1元素的，满足select2的所有弟弟
过滤：
--基本过滤选择器***********重点**************重点************重**************！！！！！！！！！！！！！！！！！！！！！：
--first
--last
--not(selector) 把selector排除在外
--even 挑选偶数行
--odd 挑选奇数行
--eq(index) 下标等于index的元素
--gt(index) 下标大于index的元素
--lt(index) 下标小于index的元素
$("tr:first")

--内容过滤..:
--contains(text) 匹配包含给定文本的元素
--empty 匹配所有不包含子元素或文本的空元素
$("p:contains('月饼')")

--可见性过滤..:
--hidden 匹配所有的不可见元素，或type为hidden的元素
--visible 匹配所有的可见元素
$("input:hidden")

--属性过滤..:
--[attribute] 匹配具有attribute属性的元素
--[attribute=value] 匹配属性等于value的元素
--[attribute!=value]匹配属性不等于value的元素
$("input[value='你好']")
a[href]------->选择带有href的a，比如锚点就没有href，如<a></a>

--状态过滤选择
--enabled 匹配可用的元素
--disabled 匹配不可用的元素

<input type="text" disabled/>
--checked 匹配选中的checkbox
--selected 匹配选中的option
$("input:selected")

表单选择器：
--text
--password
--radio
--checkbox
--submit
--reset
--button
--file
--hidden

$("input:radio") //选择单选项radio，也可以不写input这样
$(":radio")
联想：
之前学过的

DOM如何读写节点 nodeType,跟nodeName一起学的
读写值.value。
读写内容：innerHTML
读写属性：getAttribute/setAttribute

重点：过滤选择器，其中基本过滤选择器是重点的重点！！！！！！！！！！！！！！！！！！！！！！！！！！！

——————————————————————————————————

jQuery读写节点：
读写节点的HTML内容
obj.html()/obj.html("<span>123</span>") 等价与DOM的innerHTML
读写节点的文本内容
obj.text() / obj.text("123") 等价与DOM的innerText
读写节点的value属性值
obj.val() /obj.val("abc");
读写节点的属性值
obj.attr("属性名") /obj.val("属性名","属性值")

标准的可以.的属性
style
id
className
....

————————————————————————————————————————
增删节点：

创建DOM节点：比DOM的createElement()简单
$("节点内容") 如：$("<span>你好</span>")

创建之后还要挂靠的节点树上，否则不显示
——————————————————————！！！！！！！！！！！！！！
插入DOM节点：
parent.append(obj)
parent.prepend(obj)
brother.after(obj)
brother.before(obj)

删除DOM节点：
obj.remove()
obj.remove(selector)只删除满足selector的节点
obj.empty()清空节点

把节点置空也行 $().html("");
——————————————————————————
选择器也能选择亲属
方法也能选择亲属

$("p u").xxx()要处理的节点不是自己写的，
假如使用外部提供的get方法，业务处理完后但是要处理其他节点时，因为不是自己写的，该方法内的节点如何
获取的并不知道，因此这种场景就需要使用方法来选择亲属
var obj = get()
obj.xxx()
obj.children()

——————————————————————————
遍历节点：

children()/children(selector) 直接子节点
next() /next(selector) 下一个兄弟节点
prev() /prev(selector) 上一个兄弟节点
siblings() /siblings(selector) 所有兄弟
find(selector) 查找满足选择器的所有后代
parent() 父节点

————————————————————————
一，开发项目时所遇到的对象：
# 1.$()
-通过$()获得的对象为jQuery对象
$("img")
$(img) 将对象img转换为jQuery对象

# 2.赋值（修改）
-赋值方法通常返回的是jQuery对象
# 3.取值（读取）
-返回的是文字，那么就是DOM对象，如$().html()/.value()
-返回的是元素，那么就是jQuery对象，如.siblings

# 测试
-以控制台输出内容为准

规范：为了便于阅读，jQuery对象都在前面加$

//通过$()转换DOM为jquery对象。或者不转换，直接调用innerHTML也行
//$(btn).parent().siblings()[0].html();

//$($obj[i])==$obj.eq(i) // $obj代表一个对象
$(btn).parent().siblings().eq(0).html();
//$("li:eq(0)")
//$("li").eq(0)

————————————————————————————————————
$obj.attr("style")
$obj.attr("class")-->这个用得多，因为外部样式
但是jQuery简化的方法更方便

样式操作：
addClass("") 追加样式 ------>重点！！
removeClass("") 移除指定样式------>重点！！
removeClass() 移除所有样式
toggleClass("") 切换样式
hasClass("") 判断是否有某个样式
css("") 读取css的值 ------>相当于style
css("","") 设置多个样式 ------>相当于style

如：
<p class = "big"></p>
<p class = "important"></p>
<p class = "important big"></p> 可以追加多个属性值

--——————————————————————————————————————————————————

后绑定：在页面加载完后，js取到对象，然后修改属性

jQuery也支持直接绑定，但是直接绑定的缺点是：耦合度高

后绑定的jQuery不用写window.onload=function(){}
而是$(function(){
$("p") //选择器绑定事件调jQuery方法
$("p").bind("click",fun);
$("p").click(fun) //可以简化成这样

p.onclick=function.. //javascript则是这样写的
});

使用jQuery实现事件绑定
语法：
-$obj.bind(事件类型，事件处理函数)
-如：$obj.bind('click',fn);

——————————————————————————————————————————

合成事件--js没有的
联想：js的鼠标悬停和离开事件onmouseover/onmouseout

hover(mouseenter,mouseleaver) js本身不带这个属性，因此在后绑定事件时使用，而不是直接在<p></p>中
toggle()

使图片放大缩小的方法：
$obj.addClass();
$obj.width().height()----修改内联样式，不建议使用
$obj.css("width",:"250px")---修改内联样式，不建议使用
$obj.toggleClass(“big”)

双击：dblclick
光标移除：onblur
光标切入：onfocus

——————————————————————————————————————————

模拟操作
$obj.trigger(事件类型)
如:$obj.trigger("focus"); ----->建议用这个，下面的简写容易搞混
简写形式：$obj.focus();

——————————————————————————————————————————————

function total(){
var $trs = $("#goods tr");
var sum=0;
for(var i=0;i<$trs.length;i++){
var td=$trs.eq(i).children().eq(3);
var m = td.text();
sum += parseFloat(m);
}
$("#total").text(sum);
}

text：纯文本
html：支持标签

innerText：子标签无效
innerHTML：包含子标签
_________________________________________________________________________________________________

function total(){
var $trs = $("#goods").children();
console.log($trs.length);
var sum=0;
for(var i=0;i<$trs.length;i++){
console.log($trs);
var h=$trs.eq(i).find("td:eq(3)").html();
//var h=$trs.eq(i).children().eq(3).html();
console.log(h);
sum+=parseFloat(h);
}

$("#total").html(sum);
}
_________________________________________________________________!!!!!!!!!!!__!!__!_!_!_!_!_!_!_!_!_!_!_!_!_!

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

注意：

1）

但凡属于<input>的，要注意不要忘了上一级$("input:button")
如：
$(":button").click(function (){

2）

jQuery的parent()不要忘了双括号！

3） hover(mouseenter，mouseleave) 模拟光标悬停事件不要忘了中间的，号！！！！！！

$(function) 相当于window.onload()
$().click(funtion(){})

——————————————————————————————————————————————
显示/隐藏的动画效果

show() /hide()
slideUP()/slideDown()
fadeOut()/fadeIn();
括号内可以传参数，为定时
如：
$("#d1").show(3000);

函数能否做为参数？原理是什么？在什么场合下用过到？
答：能！js中全部都是对象，函数也是对象。场合：定时器

//参数2是一个函数，jQuery会在动画完成后调用次函数，该函数叫回调函数，
//回调函数：完成后自动调用的函数
$("#d1").hide(3000,function(){});

//显示与隐藏的动画原理：通过定时器不断修改元素的样式。（大小，透明度）
//定时器相当于支线程，f2相当于主线程，二者并发执行，主线程不会等待支线程，
//而是立刻输出了over，支线程3秒后才完成

close/class是保留字

——————————————————————————————————————————————

自定义动画效果：
animate（偏移位置，执行时间，回调函数）
--偏移位置：{}描述动画执行之后元素的样式
--执行时间：毫秒数
--回调函数：动画执行结束后要执行的函数

$("#d1").animate({"left":"500px"},3000);
以left为准，向右偏移500px，3秒后到达位置。

回顾CSS：
默认定位
特殊定位：浮动/相对/绝对/固定

相对/绝对/固定
共同点：设置偏移量的方式一致，以父元素为准，正负。
不同：移动方向不同

jQuery:
e.target
e.propagation()

animate：底层通过不断修改偏移量。
需要偏移位置的：绝对/固定/相对

0 0