Jquery 和 Js
jQuery
[一] jQuery
1： javaScript和 javaScript库：
（1） javaScript自身存在的3个弊端：复杂的文档对象模型（DOM），不一致浏览器的实现和便捷的开发，调试工具的缺乏
（2） javaScript库：
prototype（...）是最早成型的 javaScript库之一，但是由于 prototype成型年代较早，从整体上对面向对象的编程思想把握的不是很到位，导致其结构松散。
Dojo（...）的强大之处在于Dojo提供了 javaScript库所没有功能，例如离线存储的API、生成图标的组件，缺点为 学习曲线陡、文档不全，最严重的是API不稳定。
YUI（...）是一套完备的，扩展性良好的富交互网页程序工作集。
Ext JS（...）简称Ext，Ext 作为界面的扩展库来使用
MooTools（...）为轻量，简洁，模块化和面向对象的 javaScript框架，虽然与prototype的语法几乎一样，但却具有更强大的功能、更好的扩展性和兼容性。
JQuery （）是一个轻量级的库，拥有强大的选择器，出色的DOM操作封装，可靠的事件处理机制 ，完善的Ajax，完善的浏览器兼容性和链式操作方式等功能，不污染顶级变量，隐式迭代，行为层与结构层的分离，丰富的插件支持，完善的文档，开源
（3）JQuery的代码的编写（$是JQuery的简写形式）
〈1〉书写风格：对于同一对象不超过3个的操作，可以直接写成一行；对于同一对象的较多操作，建议每行写一个操作；对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以适当的缩进
〈2〉为代码添加注释
（4）JQuery对象和DOM对象的区别：
DOM（Document Object Model,文档对象模型），每一份DOM都可以表示成一棵树，可以通过JavaScript中的 getElementByIdNagName或者getElementById 来获取节点。
例如：var domObj = document.getgetElementById("id"); //获得DOM对象
var ObjHTML = domObj.innerHTML; //使用JavaScript中的属性---innerHTML
JQuery对象就是通过JQuery包装DOM对象后产生的对象。
在JQuery对象中无法使用DOM对象的任何方法，同样，在DOM对象中无法使用JQuery对象的任何方法。
〈4〉对象转换及定义变量风格：
如果获取的对象是JQuery对象，就要在变量前加上$，例如：var $variable = JQuery对象；
如果获取的对象是DOM 对象，则格式如：var variable = DOM对象；
《1》将一个JQuery对象转化为DOM对象的两种方法，即[index]和get(index)
var $cr = $("#cr") //JQuery对象 ; var cr = $cr[0] //DOM对象； alert（cr.checked） //检测checkboxx是否被选中；
var $cr = $("#cr") //JQuery对象 ; var cr = $cr。get(0) //DOM对象； alert（cr.checked） //检测checkboxx是否被选中；
《2》DOM对象转化为JQuery对象：对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个JQuery对象，方式为$（DOM对象）。例：var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //JQuery对象
（5）解决JQuery库和其它库的冲突：在jquery中，几乎所有的插件都被限制在它的命名空间中。
《1》JQuery库在其它库之后导入：在其它库和JQuery 库都被加载完毕后，可以在任意时候调用 JQuery.noConflict()函数来将$的控制权移交给其他的JavaScript库
《2》jQuery库在其它库之前导入，那么就可以直接使用“JQuery”来做一些JQuery的工作，同时，可以使用$()方法作为其它库的快捷方式。这里无需调用JQuery.noConflict()函数。
〈6〉JQuery开发工具和插件：Dreamweaver；Aptana；jQueryWTP和Spket；Visual Studio 2008
[二]jQuery选择器
1：CSS（Cascading Style Sheets，层叠样式表）选择器：
常用的CSS选择器：标签选择器（E{CSS规则}）；ID选择器（#ID{CSS规则}）；类选择器（E.className{CSS规则}）；群组选择器（E1,E2,E3{CSS规则} ）；后代选择器（E F{CSS规则}）；通配选择符（*{CSS规则}）
注：把css应用到网页中有三种方式：行间样式表，内部样式表和外部样式表，内部样式表的缺点是不能被多个页面重复使用
2：jQuery选择器：jQuery选择器的写法与CSS选择器的写法十分相似，但效果不同，CSS选择器找到元素后是添加样式，而jQuery选择器找到元素后是添加行为。但jQuery中涉及的操作CSS样式的部分比单纯的CSS功能更为强大，且拥有跨浏览器的兼容性。
jQuery选择器的优势：简洁的写法；支持CSS1到CSS3选择器；完善的处理机制 、
3：jQuery选择器：基本选择器；层次选择器，过滤选择器和表单选择器。
基本选择器：为jQuery最常用的选择器，也是最简单的选择器，它通过元素id,class和表签名等来查找DOM元素，在网页中，每个id名称只能使用一次，class可重复使用。
层次选择器：可通过DOM元素之间的层次关系来获取特定元素，例后代元素，子元素，相邻元素，同辈元素。
过滤选择器：主要通过特定的过滤原则筛选出所需的DOM元素，选择器都以一个冒号（：）开头。按照不同的过滤原则，过滤选择器可分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤选择器
表单选择器：可极其方便的获取表单中的某个或某类元素。
4：选择器中的一些注意事项：
（1）选择器中含有"."、"#"、“（”、“]”等特殊字符，不可按普通方式去处理，解决此类问题的方法为使用转义字符转义。
（2）属性选择器中的@符号问题：正确的写法是去掉@符号。
（3）选择器中含有空格不容忽视
[三]jQuery中的DOM操作
DOM是document object model的缩写，意思是文档对象模型。
1：DOM操作分：DOM Core(核心)、HTML-DOM和CSS-DOM。
DOM Core并不专属JavaScript，任何一种支持DOM 的程序语言都可以使用它。它的用用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。
HTML-DOM相较DOM 而言，代码通常比较简短，不过它通常只能处理Web文档。
CSS-DOM是针对CSS操作的，在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。
2：jQuery中的DOM 操作
（1）查找节点：查找元素节点；查找属性节点。
（2）创建节点：创建元素节点；创建文本节点；创建属性节点
（3）插入节点：
（4）删除节点：remove()方法；detach()方法；empty()方法
（5）复制节点：
（6）替换节点：replaceWith()和replaceAll()方法（如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定）
（7）包裹节点：将某个节点用其他标记包裹起来，方法：wrap();wrap All()和wrapInner()
wrap() 方法是将所有的元素进行单独的包裹
wrap All() 方法是将所有的匹配元素用一个元素来包裹
wrapInner() 方法是将每一个匹配的元素的子元素内容（包括文本节点）用其他结构的标记包裹起来
（8）属性：attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。
（9）样式操作：
获取和设置class都可以使用attr()方法完成。 追加样式可以使用addclass()方法来完成。
移除样式可以使用removeClass()方法来完成操作。
切换样式：可用toggle()方法（隐藏与显示行为的重复切换）；toggleClass()方法（删除与添加样式的重复切换）
判断是否含有某个样式：hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。
3：设置和获取HTML、文本和值： html()方法、text()方法、val()方法
4：遍历节点：children()方法，该方法用于获取匹配元素的子元素集合。
next()方法，该方法用于取得匹配元素后面紧邻的同辈元素。
Prev()方法，该方法用于取得匹配元素前面紧邻的同辈元素。
sibling()方法，该方法用于取得匹配元素前后所有的同辈元素。
closest()方法，该方法用于取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身，否则向上查找父元素，逐级向上查找匹配选择器的元素。如果什么也没找到，则返回一个空的JQuery对象。
5：
[四]jQuery中的事件和动画
1：加载DOM：在常规的JavaScript代码中，通常使用window.onload方法；在jQuery中，使用的是$(document).ready()(注：$(document)可简写为$()),由于页面加载问题，还可以使用jQuery中的另一个关于页面加载的方法--load()方法，方法如：
在jQuery中：$(window).load(function(){........})；在JavaScript中：window.onload = function(){........}
2：事件绑定：可以使用bind()方法来对匹配元素进行特定事件的绑定：
bind（type[.data].fn）：第一个参数为事件类型；第二个参数为可选参数，作为even.data属性值传递给事件对象的额外数据对象；第三个参数则是用来绑定的处理函数。
改变事件绑定类型：鼠标事件：mouseover事件和mouseout事件；
3：合成事件：jQuery中有两个合成事件----hover()方法和toggle()方法，类似于ready()方法；
hover()方法用于模拟光标悬停事件。格式：hover()(enter.leave);
toggle()方法用于模拟鼠标连续点击事件。格式：toggle(fn1,fn2.....fnN)。
toggle()方法在jQuery中的另一用法：切换元素的可见状态。
4：再次加强效果：单击“...”后，不仅显示“内容”，而且高亮点击的“...”。首先在CSS中定义一个高亮的样式。
5：冒泡事件：stopPropagation()方法阻止事件冒泡。preventDefault()方法来阻止元素的默认行为。
6：事件对象的属性：event.type方法的作用是获取到事件的类型。
event.preventDefault()方法是用来阻止元素的默认行为。注：在IE浏览器中无效。
event.stopPropagation()方法是用来阻止事件的冒泡。
event.target的作用是获取到触发事件的元素。
event.relatedTarget。
event.pageX和 event.pageY：该方法是用于获取光标相对于页面的x坐标和y坐标（注：在Firefox中使用），在IE浏览器中是用 event.x和event.pagey。
event.which()：该方法是在鼠标单击事件中获取鼠标的左、中、右键，在键盘事件中获取键盘的按键。
event.mataKey：规定event.mataKey为键盘事件中获取<ctrl>按键。
一：获取时间
1: function setDate(){ //显示时间的方法
var data = new Date();
var year = data.getFullYear(); //获取年
var month = data.getMonth() + 1; //获取月
var day = data.getDate(); //获取日
var hours = data.getHours();
var minutes = data.getMinutes();
var time = year + "/" + month + "/" + day + "/" + " " + hours + ":" + minutes;
$("#time").val(time);
}
<body><input type="text" name="showDate" id="time" style="height:25px; width:200px; margin-left:0px;"></body>
2：$(document).ready(function(){
setInterval("setDate()", 1000); //设置时间间隔
});
function setDate(){ //显示时间的方法
// var MD = new Date();
$("#time").val(Date().substr(8,15));
}
<body><input type="text" name="showDate" id="time" style="height:25px; width:200px; margin-left:0px;"></body>
二：将时间戳格式化
1：$time = date("Y-m-d H:i",time()); 这是在时间传入数据库之前将时间戳格式化
2：$time = time(); 获取时间戳
3：$row['create_time'] = date('Y-m-d H:i:s', $row['create_time']); 存入数据库的时间格式为时间戳，在读数据库时将时间戳格式化
三：去除p标签的行高 line-height:0px;
