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;