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>按键。
var time = year + "/" + month + "/" + day + "/" + " " + hours + ":" + minutes;
<body><input type="text" name="showDate" id="time" style="height:25px; width:200px; margin-left:0px;"></body>
<body><input type="text" name="showDate" id="time" style="height:25px; width:200px; margin-left:0px;"></body>
3:$row['create_time'] = date('Y-m-d H:i:s', $row['create_time']); 存入数据库的时间格式为时间戳,在读数据库时将时间戳格式化