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;

Jquery 和 Js的更多相关文章

  1. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  2. jQuery.template.js 简单使用

    之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...

  3. 修改 jquery.validate.js 支持非form标签

    尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...

  4. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  5. 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  6. 初探jquery.slimscroll.js和iscroll5.js

    网上关于实现各种滚动效果的插件不胜枚举,这里,我简单介绍一下自己用过的两款比较有代表性的插件: 1.jquery.slimscroll.js,需要先引入jquery类库,主要用于模拟传统的浏览器滚动条 ...

  7. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  8. Jquery客户端校验——jquery.validate.js

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  9. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  10. jQuery.rotate.js参数

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

随机推荐

  1. 第十一章、认识与学习 BASH Bash Shell 的操作环境

    bash中的变量动不动就说环境变量,真是奇怪,bash只是一个c语言编写的程序而已,跟环境变量有什么关系?如果知道dos的历史的话就知道有个时代是只有命令行界面而没有图形用户界面,这只小小的程序就包揽 ...

  2. 1109 html5 xhtml;

    XHTML 是 XML 风格的 HTML 4.01. HTML5 是下一代 HTML,取代 HTML 4.01. XHTML是基于XML发布的HTML规范,旨在规范HTML的格式. 两者提出的目的是不 ...

  3. hdoj 5494 Card Game

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5494 题意:首先一个数t代表测试样例组数  然后两个数n,m 代表数列中有n个数  从中取m个数   ...

  4. ReactiveCocoa框架学习2

    昨天内容回顾 信号类:表示有数据产生,信号类不发送数据 注意:不同的信号,订阅方式不同 RACSignal 创建RACDynamicSignal信号 -> didSubscribe(block) ...

  5. Spring技术内幕——深入解析Spring架构与设计原理(一)IOC实现原理

    IOC的基础 下面我们从IOC/AOP开始,它们是Spring平台实现的核心部分:虽然,我们一开始大多只是在这个层面上,做一些配置和外部特性的使用工作,但对这两个核心模块工作原理和运作机制的理解,对深 ...

  6. Spring Security4源码解读探寻权限机制

    我们知道springSecurity 会在用户登录的时候获取用户的角色权限, 你是一个普通用户可能没有管理员拥有的权限.用户登录后Authentication 获取用户的权限. 不通用户登录系统会生成 ...

  7. 怎样在win7下装ubuntu(硬盘版安装)

    1)首先还是分区,在计算机上右键--管理--磁盘管理 装Ubuntu分配的硬盘大小最好是(20G以上)不要太小,这里请注意,ubuntu和windows文件系统全然不同,所以我们划好要给ubuntu的 ...

  8. CCEditBox用法

    1.以下是CCEditBox的相关函数和类型说明: /* 编辑框的一些函数 setText("字符串"); //设置文本 setFontColor(color); //设置文本颜色 ...

  9. HDU2024JAVA

    C语言合法标识符 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  10. NDK开发之数组操作

    JNI把Java数组当作引用类型来处理,JNI提供了必要的函数来访问和处理Java数组. 下面一个一个来看. 1.创建数组 我们可以使用NewArray函数在原生代码中创建数组实例,其中可以是Int. ...