jquery 订阅
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 [1] 展开全文
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 [1]
信息
发布时间
2006年1月
最新版本
jQuery 3.4.1
发布人
John Resig
发布地点
美国纽约
核心理念
write less,do more
内部引入库
Sizzle.js
中文名
极快瑞
第一个版本
jQuery 1.0(2006年1月)
外文名
jQuery
jQuery发展历程
2005年8月,John Resig提议改进Prototype的“Behaviour”库,于是他在blog上发表了自己的想法,并用了3个例子做简单的流程说明。第一个例子是为元素注册一个事件:他认为应该改写为:他认为应该改写为:第三个例子是为不断变化的元素注册不同的事件:他认为应该改写为:这些代码也是jQuery语法的最初雏形。当时John的想法很简单:他发现这种语法相对现有的JavaScript库更为简洁。但他没想到的是,这篇文章一经发布就引起了业界的关注。于是John开始认真思考着这件事情(编写语法更为简洁的JavaScript程序库),直到2006年1月14日,John正式宣布以jQuery的名称发布自己的程序库。随之而来的是jQuery的快速发展。2006年1月John Resig等人创建了jQuery;8月,jQuery的第一个稳定版本,并且已经支持CSS选择符、事件处理和AJAX交互。2007年7月,jQuery 1.1.3版发布,这次小版本的变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始,jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。同年9月,jQuery 1.2版发布,它去掉了对XPath选择符的支持,原因是相对于CSS语法它已经变得多余了。这一版能够对效果进行更为灵活的定制,而且借助新增的命名空间事件,也使插件开发变得更容易。同时,jQuery UI项目也开始启动,这个新的套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件(widget),以及一组用于构建高级元素(例如可拖放、拖拽、排序)的工具。2008年5月,jQuery 1.2.6版发布,这版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中,同时也修改了许多BUG,而且有不少的性能得到提高。因此,如果以前的jQuery版本升级到1.2.6,那么完全可以从代码中排除Dimensions插件(一个获得元素尺寸、定位的插件)。在jQuery迅速发展的同时,一些大的厂商也看中了商机。2009年9月,微软和诺基亚公司正式宣布支持开源的jQuery库,另外,微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。他将提供包括jQuery的智能提示、代码片段、示例文档编制等内容在内的功能。微软和诺基亚公司将长期成为jQuery的用户成员,其他成员还有Google,Intel,IBM,Intuit等公司。2009年1月,jQuery 1.3版发布,它使用了全新的选择符引擎Sizzle,在各个浏览器下全面超越其他同类型JavaScript框架的查询速度,程序库的性能也因此有了极大提升。这一版本的第2个变化就是提供live()方法,使用live()方法可以为当前及将来增加的元素绑定事件,在1.3版之前,如果要为将来增加的元素绑定事件,需要使用livequery插件,而在1.3版中,可以直接用live()方法。2010年1月,也是jQuery的四周年生日,jQuery 1.4版发布,为了庆祝jQuery四周岁生日,jQuery团队特别创建了jquery14.com站点,带来了连续14天的新版本专题介绍。在1.3及更早版本中,jQuery通过JavaScript的eval方法来解析json对象。在1.4中,如果你用的浏览器支持,则会使用原生的JSON.parse解析json对象,这样对json对象的书写验证则更为严格。比如:{foo: "bar"}的写法将不会被验证为合法的json对象,必须写成{"foo":"bar"}。如果你的程序打算升级到1.4版本,那么这一点要尤其注意。2010年2月,jQuery 1.4.2版发布,它新增了有关事件委托的两个方法:delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。这个方法比live()来的方便,而且也可以达到动态添加事件的作用。比如给表格的每个td绑定hover事件,代码如下:2011年1月,jQuery 1.5版发布。2011年11月,jQuery 1.7版发布。 [2-3] 
收起全文
精华内容
参与话题
问答
  • JQuery

    千次阅读 多人点赞 2020-05-11 09:40:19
    * jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨 是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装...

    概念:一个JavaScript函数库(框架)。简化JS开发
        * jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨    是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互
        * JavaScript框架:本质就是一些js文件,封装了js的原生代码
    分类:
        1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,
            功能不再新增。因此一般项目来说,使用1.x版本就可以了,
            最终版本:1.12.4 (2016年5月20日)
        2.x:不兼容ie678,很少有人使用,官方只做BUG维护,
            功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,
            最终版本:2.2.4 (2016年5月20日)
        3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,
            一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
            目前该版本是官方主要更新维护的版本。最新版本:3.3.1(2018年1月20日)

    JQuery对象和JS对象区别与转换:
        1. JQuery对象在操作时,更加方便。
        2 jQuery中选择器获取的是存储了HTML元素对象的数组
        3. JQuery对象和js对象方法不通用的!!!!!
        4. 两者相互转换
            * jq -- > js :  jq对象[索引] 或者 jq对象.get(索引)      即按照数组方式取
            * js -- > jq :  $(js对象)
        5. this表示当前js对象,${this}表示当前jq对象


    JQuery入口函数:
        $(document).ready(function(){
            // 执行代码
        });
        或者简写为:
        $(function(){
            // 执行代码
        });


        js入口函数:window.onload = function () {...}
        区别:

    • jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行,可定义多次。
    • JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行,且只能定义一次,多次定义后边将前边覆盖。
       
     



    # 选择器
        所有选择器获取的都是标签数组,包括id选择器!!!

    • 基本选择器
       

                1. 标签选择器(元素选择器)
                    * 语法: $("html标签名") 获得所有匹配标签名称的元素
                2. id选择器
                    * 语法: $("#id的属性值") 获得与指定id属性值匹配的元素
                3. 类选择器
                    * 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
                4. 并集选择器:
                    * 语法: $("选择器1,选择器2....") 获取多个选择器选中的元素之和
                5. 全部选择器
                    * 语法: $("*")         获取此页面中的所有元素

    • 层级选择器
       

                1. 后代选择器
                    * 语法: $("A  B ") 选择A元素内部的所有B元素        
                2. 子选择器
                    * 语法: $("A > B") 选择A元素内部的所有直接子元素B
                3. 亲弟弟选择器
                    * 语法: $("A + B ") 选择紧接在A元素之后同级B元素        
                4. 弟弟选择器
                    * 语法: $("A ~ B") 选择A元素之后的所有同级B元素

    • 属性选择器
       

                1. 属性名称选择器
                    * 语法: $("A[属性名]") 包含指定属性的选择器
                2. 属性选择器
                    * 语法: $("A[属性名='值']") 包含指定属性等于指定值的选择器
                            可选关系运算符:
                                !=  :属性值不等于该值
                               ^=  :属性值以该值开头
                                $=  :属性值以该值结尾
                                *=  :属性值中包含该值
                3. 复合属性选择器
                    * 语法: $("A[属性名='值'][]...") 包含多个属性条件的选择器,必须都符合

    • 过滤选择器
       

                过滤选择器的 :前面为选择器范围,不写默认则为全部选择器 * ,冒号左右不要加空格
                1. 首元素选择器
                    * 语法: :first 获得选择的元素中的第一个元素
                2. 尾元素选择器
                    * 语法: :last 获得选择的元素中的最后一个元素
                3. 非元素选择器
                    * 语法: :not(selector) 不包括指定内容的元素
                4. 偶数选择器
                    * 语法: :even 索引为偶数,从 0 开始计数
                5. 奇数选择器
                    * 语法: :odd 索引为奇数,从 0 开始计数
                6. 等于索引选择器
                    * 语法: :eq(index) 指定索引元素,从0开始
                7. 大于索引选择器
                    * 语法: :gt(index) 大于指定索引元素
                8. 小于索引选择器
                    * 语法: :lt(index) 小于指定索引元素
                9. 标题选择器
                    * 语法: :header 获得标题(h1~h6)元素,固定写法
                10. 动画选择器
                    * 语法: :animated 获得正在执行动画效果的元素
                11. 焦点选择器
                    * 语法: :focus 获得当前取得焦点的元素

    • 内容过滤选择器
       

                :前面为选择器范围,不写默认则为全部选择器 * 
                1. 内容包含选择器
                    * 语法: :contains(text) 获得选择的元素中的包含text的元素
                2. 内容为空选择器
                    * 语法: :empty 获得选择的元素中的所有不包含子元素或者文本的空元素
                3. 元素包含选择器
                    * 语法: :has(selector)  含有selector所匹配元素的元素,如:含有p标签的div标签  $("div:has(p)")
                4. 有内容选择器
                    * 语法: :parent 与empty相对,选择有子标签或内容的元素

    • 子元素过滤选择器
       

                :前面为选择器范围,不写默认则为全部选择器 * 
                1. 首子元素选择器
                    * 语法: :first-child 获得选择的每个父元素中的第一个子元素
                2. 指定首子元素选择器  jq1.9+
                    * 语法: E:first-child-type 获得子标签有E的父元素的第一个子元素E
                3. 尾子元素选择器
                    * 语法: :last-child 每个父元素中的最后一个子元素
                4. 指定尾子元素选择器  jq1.9+
                    * 语法: E:last-child-type 获得子标签有E的父元素的最后一个子元素E
                5. 指定序号子元素选择器
                    * 语法::nth-child(index),选择父元素中第index个子元素,从1开始
                6. 指定类型与序号子元素选择器
                    * 语法: E:nth-of-type(index)获得子标签有E的父元素的指定序号子元素E
                7. 唯一子元素选择器
                    * 语法: :only-child  获取元素中只有唯一一个子元素(可以有文本)的父元素
                8. 唯一指定子元素选择器
                    * 语法: E:only-of-type 只有唯一一个子元素且子元素为E的父元素

    • 表单选择器
       

                1.    :input
                2.    :text
                3.    :password
                4.    :radio
                5.    :checkbox
                6.    :submit
                7.    :image
                8.    :reset
                9.    :button
                10.   :file

    • 表单过滤选择器
       

                1. 可用元素选择器
                    * 语法: :enabled 获得可用元素
                2. 不可用元素选择器
                    * 语法: :disabled 获得不可用元素
                3. 选中选择器
                    * 语法: :checked 获得单选/复选框选中的元素
                4. 选中选择器
                    * 语法: :selected 获得下拉框选中的option元素

    # JQuery操作DOM
        ## 属性操作
            1.使用attr()
                获取: 对象.attr("属性名") //返回当前属性值,底层使用的是getAttribute
                    注意:此种方式不能获取value属性的实时数据,使用对象名.val()进行获取
                修改:对象.attr("属性名","属性值");
                删除:removeAttr("属性名") :删除该属性的值
            2.使用prop()
                使用方法同attr()一致,底层是property
            3.attr和prop区别
                * 如果操作的是元素的固有属性,则建议使用prop,某些特定属性attr获取不到
                * 如果操作的是元素自定义的属性,则建议使用attr


        ## 内容操作
            获取:
                1. html(): 获取元素内的标签体内容 ,底层调用的innerHTML 
                2. text(): 获取元素的标签体纯文本内容 ,底层调用的innerText
                3. val(): 获取元素的value属性值
            修改:
                1. html("新的内容"):  新的内容会将原有内容覆盖,HTML标签会被解析执行
                2. text("新的内容"):  新的内容会将原有内容覆盖,HTML标签不会被解析执行
                3. val("新的内容"): 设置元素的value属性值

        ## 样式操作
            1、使用css()
                对象.css("属性名")    //返回当前属性的样式值
                对象.css("属性名","属性值") //增加、修改元素的样式
                对象.css({"样式名":"样式值","样式名":"样式值"……})//使用json传参,提升代码书写效率。
            2、使用addClass()
                对象.addClass("类选择器名")    //追加一个类样式
                对象.removeClass("类选择器名")    //删除一个指定的类样式
                对象.toggleClass("类选择器名"): //切换class属性
                    * toggleClass("one"):
                        * 判断如果元素对象上存在class="one",则将属性值one删除掉。  如果元素对象上不存在class="one",则添加

        ## 文档结构操作

    • 内部插入
       

            1. append():父元素将子元素追加到末尾
                * 对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾
            2. prepend():父元素将子元素追加到开头
                * 对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头
            3. appendTo():
                * 对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾
            4. prependTo():
                * 对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头

    • 外部插入
       

            1. after():添加元素到元素后边
                * 对象1.after(对象2): 将对象2添加到对象1后边。对象1和对象2是兄弟关系
            2. before():添加元素到元素前边
                * 对象1.before(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系
            3. insertAfter()
                * 对象1.insertAfter(对象2):将对象1添加到对象2后边。是兄弟关系
            4. insertBefore()
                * 对象1.insertBefore(对象2): 将对象1添加到对象2前边。是兄弟关系
     

    • 包裹
       

            1.wrap(对象|html):将每个匹配元素用指定对象或html包裹起来
                * $("p").wrap("<div class='wrap'></div>"); //将所有p标签用html包裹
            2.unwrap():将元素取消一层包裹,即删除了直接父标签
                * 对象.unwrap()   //删除了对象的父元素
            3.wrapAll(对象|html):将匹配的元素用一个对象或html包裹起来
                * $("p").wrapAll("<div></div>"); //用一个div包裹所有匹配的p标签
            4.wrapInner(对象|html): 将元素的内容用对象或html包裹起来
                * $("p").wrapInner("<b></b>");//所有p标签内的每个子内容加粗

    • 替换
       

            1.replaceWith(对象|html):将所有匹配的元素(包含内容)替换成指定的HTML或DOM元素
                $("p").replaceWith("<b>hehe</b>");//所有p标签换成加粗的hehe
            2.replaceAll(对象|html):用指定的HTML或DOM元素替换所有匹配的元素(包含内容)
                 $(".re").replaceAll( $("p"));//所有p标签换成re对象

    • 删除
       

            1. remove(【exp】):移除元素,可用表达式指定对象
                * 对象.remove():将对象删除掉
                * $("p").remove($(".a")) 删除所有类名有a的p标签
            2. empty():清空元素的所有后代元素和文本。
                * 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性

    • 复制
       

            clone() :复制该元素,其他文档操作结果都是剪切效果
                * $("b").clone().prependTo($("p")); 将b复制一份到p标签前边,原b标签不变


    # 动画效果

    • 默认显示和隐藏元素
       

            1. show([speed,[easing],[fn]])
                speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000,600, 200),默认为0
                easing:用来指定切换效果,默认是"swing",可用参数"linear"
                    * swing:动画执行时效果是 先慢,中间快,最后又慢
                    * linear:动画执行时速度是匀速的
                fn:在动画完成时执行的函数,每个元素执行一次。
            2. hide([speed,[easing],[fn]])
            3. toggle([speed],[easing],[fn])
     

    • 滑动显示和隐藏方式
       

            1. slideUp([speed,[easing],[fn]])
            2. slideDown([speed],[easing],[fn]) 
            3. slideToggle([speed],[easing],[fn])
     

    • 淡入淡出显示和隐藏方式
       

            1. fadeIn([speed],[easing],[fn])
            2. fadeOut([speed],[easing],[fn])
            3. fadeToggle([speed,[easing],[fn]])
            4. fadeTo([speed,opacity,easing],[fn]]) 将对象调整到指定不透明度


                opacity:一个0至1之间表示透明度的数字


    # JQuery遍历

    • js的遍历方式
       

            * for(初始化值;循环结束条件;步长)
     

    • jq的遍历方式
       

            1. jq对象.each(callbackfn)
                1. 语法:
                    jquery对象.each(function([index],[element]){});
                        * index:就是元素在集合中的索引
                        * element:就是集合中的每一个元素js对象
                        * this:集合中的每一个元素js对象


                2. 回调函数返回值:
                    * true:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
                    * false:如果当前function返回为false,则结束循环(break)。
            2. $.each(object, [callbackfn])
            3. for..of: jquery 3.0 版本之后提供的方式
                for(元素对象 of 容器对象)


    # JQuery事件

    • jquery标准的绑定方式
       

            * jq对象.事件方法(【[data],fn】);
                可选事件方法:

    click([[data],fn])          单击事件
    dblclick([[data],fn])       双击事件
    blur([[data],fn])           失焦事件
    focusout([data],fn)         失焦事件,子元素失去焦点也会触发
    focus([[data],fn])          得焦事件
    focusin([data],fn)          得焦事件,子元素得焦也会触发


    change([[data],fn])         值改变事件,适用于文本、文本域、和select元素
    select([[data],fn])         textarea 或文本类型的 input 元素中的文本被选择
    submit([[data],fn])         提交表单时,会发生 submit 事件
    scroll([[data],fn])         滚动可滚动元素(如浏览器窗口,文本域)时

    keydown([[data],fn])        键盘按下
    keypress([[data],fn])       键盘按下
    keyup([[data],fn])          键盘弹起

    mouseover([[data],fn])      鼠标进入元素触发,进入子元素也触发
    mouseout([[data],fn])       鼠标离开触发,离开子元素也触发
    mouseenter([[data],fn])     鼠标进入元素触发,进入子元素不触发
    mouseleave([[data],fn])     鼠标离开触发,离开子元素不触发
    mousemove([[data],fn])      鼠标在该元素上移动
    mousedown([[data],fn])      按下鼠标,不需要松开
    mouseup([[data],fn])        松开鼠标


    resize([[data],fn])         调整浏览器大小时
    error([[data],fn])          错误事件

    unload([[data],fn])         离开页面时,会发生 unload 事件
       如 •点击某个离开页面的链接
        •在地址栏中键入了新的 URL
        •使用前进或后退按钮
        •关闭浏览器
        •重新加载页面

    注意

        1.如果事件方法中不写参数,则调用选中元素的对应事件或浏览器默认行为

        2.data:可传入data供函数fn处理。
        3.fn:在匹配元素的对应事件中绑定的处理函数。


     

    • on绑定事件/off解除绑定
       

            * jq对象.on(events,[selector],[data],fn)
                events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"
                selector:可选,一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的省略,当它到达选定的元素,事件总是触发。
                data:可选,json格式,当事件被触发时要传递event.data给事件处理函数。
                fn:该事件被触发时执行的函数。 false值也可以做一个函数的简写,返回false。
                例:$("p").on("click", {foo: "bar"},function(event) {
                            alert(event.data.foo);//打印出bar
                        })
                ps.同一对象绑定多个事件可使用链式编程 .on().on().on()...


            * jq对象.off("事件名称")
                * 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
     

    • 单次事件:one
       

            * jq对象.one(event,[data],fn)

                * 在该对象上,这个事件处理函数只会被执行一次

     

    • 悬停事件:hover
       

            * jq对象.hover([over,]out)
                over:鼠标移到元素上要触发的函数
                out:鼠标移出元素要触发的函数
            例:
                $("td").hover(
                      function () {
                         $(this).addClass("hover");
                      },
                      function () {
                         $(this).removeClass("hover");
                      }
                );

     

    • 事件切换:toggle
       

            * jq对象.toggle(fn1,fn2...)
                * 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.....

            * 注意
                1.所有在新版本删除的方法都可以jQuery Migrate(迁移)插件可以恢复此功能。迁移插件为:jquery-migrate-x.x.x.js
                    1.7中,live()和die()方法被删除

                    1.9中,toggle() 方法删除
                    3.0中,blind()方法(与on相同)和unblind()被删除
                    3.0中,delegate()和undelegate()被删除 

                2.返回false则可以阻止事件的执行

    更多免费技术资料可关注:annalin1203

    展开全文
  • Jquery入门到精通

    万人学习 2016-10-13 11:23:48
    jquery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。 使用户能更方便地处理HTML documents、... 本课程以jquery为核心,系统全面的掌握 jQuery Ajax jQuery常用插件 jQuery UI jQuery Mobile
  • jquery快速入门

    2020-06-11 18:31:20
    jQuery是-个快速、极简的JavaScript框架, 它是-个优秀的JavaScript代码库,设计的宗旨是“writeless,Do More”,即倡导写更少的代码,做更多的事情。它提供一种简便的JavaScript设计模式, 优化HTML文档操作、事件...
  • JQuery技术详解(一)

    万次阅读 多人点赞 2018-05-13 21:04:34
    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多   javascript高手加入其team。 jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情...

    简介:

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多

     

    javascript高手加入其team。
    jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
    它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
    jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
    jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

     

    jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

     

    工具:

    我们在使用MyEclipse中编写jQuery的时候,是没有任何提示的,所以写代码很难受的,我们需要借助额外的工具Aptana,这个在编写js,jQuery,Ajax等都会有相关的提示,具体如何在MyEclipse中添加这个工具,看如下的一篇文章:

    http://blog.csdn.net/jiangwei0910410003/article/details/28423545

     

    jQuery的一个简单例子:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!--引入jquery的js库-->  
    2.  <script type="text/javascript" src="script/jquery-1.4.2.js"></script>  
    3.  <script language="JavaScript">  
    4.    $(document).ready(function(){//等待dom元素加载完毕,类似window.onload;  
    5.        alert("您好,我是张三丰");  
    6.    });  
    7.  </script>  

    这里要注意的是一定要记得引入jquery的js库:jquery-1.4.2.js文件

     

     

    jQuery对象

    jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
    jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
    比如: 
    $("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 
    这段代码等同于用DOM实现代码: 
    document.getElementById(" test ").innerHTML; 
    虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错
    约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $. 
    var $variable = jQuery对象
    var variable = DOM对象

     

    DOM对象转化成jQuery对象

    对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象) 

    转换后就可以使用 jQuery 中的方法了

     

    jQuery对象转化成DOM对象

    两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); 
    (1) jQuery对象是一个数组对象,可以通过[index]的方法,来得到相应的DOM对象

    (2) jQuery本身提供,通过.get(index)方法,得到相应的DOM对象                        

     

    jQuery选择器

    选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
    jQuery 选择器的优点:
    简洁的写法                                                                                    
    ${“#id”}   等价于    document.getElementById("id");
    ${“tagName”}     等价于   document.getElementsByTagName("tagName");


    完善的事件处理机制
    val()获得第一个匹配元素的当前值.

    //若网页中没有id=value的元素,浏览器会报错
    document.getElementById("username").value;
       
    //需要判断document.getElementById("username")是否存在

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. if(document.getElementById("username")){  
    2.   var username=document.getElementById("username");  
    3.   alert(username.value);  
    4. }else{  
    5.   alert("没有该id元素");  
    6. }  


    //使用JQUERY处理即使不存在也不会报错
    var $username=$("#username");
    alert("^^^ "+$username.val());


    //注意:在javaScript中函数返回值为空,表示false

     

     

     

     

    基本选择器:

    基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).
    1、#id用法: $(”#myDiv”);    返回值  单个元素的组成的集合
    说明: 这个就是直接选择html中的id=”myDiv”
    2、Element用法: $(”div”)     返回值  集合元素
    说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a 等等.
    3、class 用法: $(”.myClass”)      返回值  集合元素
    说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).
    4、*用法: $(”*”)      返回值  集合元素
    说明: 匹配所有元素,多用于结合上下文来搜索
    5、selector1, selector2, selectorN      用法: $(”div,span,p.myClass”)    返回值  集合元素
    说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素
    p class=”myClass”

     

    基本选择器示例:

    改变 id 为 one 的元素的背景色为 #0000FF
    改变 class 为 mini 的所有元素的背景色为 #FF0033
    改变元素名为 <div> 的所有元素的背景色为 #00FFFF
    改变所有元素的背景色为 #00FF33
    改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>base_selecter.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.   
    12.   </head>  
    13.   <body>  
    14.     <input value="haha" type="text" id="username" name="username" />  
    15.     <span style="white-space:pre">    </span><input type="button" value="改变id为one的元素的背景颜色" id="b1" />  
    16.     <input type="button" value="改变所有div的背景颜色" id="b2" />  
    17.     <input type="button" value="改变所有div背景颜色 为绿色" id="b3" />  
    18.     <input type="button" value="改变所有span和id为two的背景颜色 " id="b4" />  
    19.     <table border="1" cellspacing="0" width="200">  
    20.         <tr>  
    21.             <td id="one"><a href="#">1</a></td>  
    22.             <td class="mini"><a href="#">2</a></td>  
    23.             <td>3</td>  
    24.         </tr>  
    25.     </table>  
    26.     <a href="#">嘿嘿</a>  
    27.     <div>div1</div>  
    28.     <div class="mini" id="two">div2</div>  
    29.     <div>div3</div>  
    30.     <span>span1</span>  
    31.     <span>span2</span>  
    32.   </body>  
    33.   <script language="JavaScript">  
    34.     //<input value="haha" type="text" id="username" name="username" />获得焦点  
    35.     $("#username").focus(function(){  
    36.         alert("aaa");  
    37.     });  
    38.       
    39.     //一、<input type="button" value="改变id为one的元素的背景颜色" name="ok"  />  
    40.     $("#b1").click(function(){  
    41.         $("#one").css("background-color", "red");     
    42.     });  
    43.       
    44.     //二、改变所有div背景颜色 为绿色  
    45.     $("#b2").click(function(){  
    46.         $("div").css("background-color", "green");  
    47.     });  
    48.       
    49.     //三、改变class是mini的所有背景颜色为蓝色  
    50.     $("#b3").click(function(){  
    51.         $(".mini").css("background-color", "blue");  
    52.     });  
    53.       
    54.     //四、改变所有span和id为two的背景颜色  
    55.     $("#b4").click(function(){  
    56.         $("span,#two").css("background-color", "yellow");  
    57.     });  
    58.       
    59.   </script>  
    60.     
    61.     
    62. </html>  

     

     

     

    层次选择器:

    如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
    1 、ancestor descendant
    用法: $(”form input”) ;   返回值  集合元素
    说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.
    2、parent > child 用法: $(”form > input”) ;    返回值  集合元素
    说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
    3、prev + next
    用法: $(”label + input”) ;   返回值  集合元素
    说明: 匹配所有紧接在 prev 元素后的 next 元素
    4、prev ~ siblings
    用法: $(”form ~ input”) ;    返回值  集合元素
    说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
    注意:  (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

     

    层次选择器示例:

    改变所有td中<a>标签的字体
    改变所有td中但不是td孙子以下的<a>标签的颜色
    改变id为one的下一个td背景色
    改变id为two的所有div的背景色

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>base_selecter.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.   
    12.   </head>  
    13.   <body>  
    14.     <input type="button" value="改变所有td中<a>标签的字体" id="b1" />  
    15.     <input type="button" value="改变所有td中但不是td孙子以下的<a>标签的颜色" id="b2" />  
    16.     <input type="button" value="改变id为one的下一个td背景色" id="b3" />  
    17.     <input type="button" value="改变id为two的所有div的背景色" id="b4" />  
    18.     <table border="1" cellspacing="0" width="200">  
    19.         <tr>  
    20.             <td id="one"><a href="#">1</a></td>  
    21.             <td class="mini"><a href="#">2</a><div><a>div中的</a></div></td>  
    22.             <td>3</td>  
    23.         </tr>  
    24.     </table>  
    25.     <a href="#">嘿嘿</a>  
    26.     <div>div1</div>  
    27.     <div class="mini" id="two">div2</div>  
    28.     <div>div3</div>  
    29.     <div>div4</div>  
    30.     <span>span1</span>  
    31.     <span>span2</span>  
    32.   </body>  
    33.   <script language="JavaScript">  
    34.   //层次选择器  
    35.   // 一、   改变所有td中<a>标签的字体  
    36.     $("#b1").click(function(){  
    37.         $("td a").css("background-color", "silver");  
    38.     });  
    39.       
    40.       
    41.     //二、 改变所有td中但不是td孙子以下的<a>标签的字体  
    42.     $("#b2").click(function(){  
    43.         $("td>a").css("background-color", "silver");  
    44.     });  
    45.       
    46.       
    47.     //三、改变id为one的下一个td背景色  
    48.     $("#b3").click(function(){  
    49.         $("#one+td").css("background-color", "red");  
    50.     });  
    51.       
    52.     //四、改变id为two的所有div的背景色  
    53.     $("#b4").click(function(){  
    54.         $("#two~div").css("background-color", "red");  
    55.     });  
    56.       
    57.   </script>  
    58.     
    59.     
    60. </html>  

     

     

     

    过滤选择器:

    过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
    按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

     

    基础过滤选择器:

    1、:first
    用法: $(”tr:first”) ;  返回值  单个元素的组成的集合
          说明: 匹配找到的第一个元素
    2、:last
    用法: $(”tr:last”)  返回值  集合元素
          说明: 匹配找到的最后一个元素.与 :first 相对应.
    3、:not(selector)
    用法: $(”input:not(:checked)”)返回值  集合元素
         说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
    4、:even
    用法: $(”tr:even”)  返回值  集合元素
         说明: 匹配所有索引值为偶数的元素,从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
    5、: odd
    用法: $(”tr:odd”) 返回值  集合元素
          说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.

    6、:eq(index) 用法: $(”tr:eq(0)”)    返回值  集合元素
          说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
    7、:gt(index) 用法: $(”tr:gt(0)”)    返回值  集合元素
    说明: 匹配所有大于给定索引值的元素.
    8、:lt(index) 用法: $(”tr:lt(2)”)    返回值  集合元素  
          说明: 匹配所有小于给定索引值的元素.
    9、:header(固定写法) 用法: $(”:header”).css(”background”, “#EEE”)    返回值  集合元素
          说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
    10、:animated(固定写法)   返回值  集合元素
          说明: 匹配所有正在执行动画效果的元素 

     

    基础过滤选择器示例:

    改变第一个 div 元素的背景色为 #0000FF
    改变最后一个 div 元素的背景色为 #0000FF
    改变class不为 one 的所有 div 元素的背景色为 #0000FF
    改变索引值为偶数的 div 元素的背景色为 #0000FF
    改变索引值为奇数的 div 元素的背景色为 #0000FF
    改变索引值为大于 3 的 div 元素的背景色为 #0000FF
    改变索引值为等于 3 的 div 元素的背景色为 #0000FF
    改变索引值为小于 3 的 div 元素的背景色为 #0000FF
    改变所有的标题元素的背景色为 #0000FF
    改变当前正在执行动画的所有元素的背景色为 #0000FF

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>baseFilter_selecter.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    12.     <style type="text/css">  
    13.         #mover{  
    14.             width:100px;  
    15.             height:200px;  
    16.             background-color:red;  
    17.         }  
    18.     </style>  
    19.   </head>  
    20.     
    21.   <body>  
    22.     <input type="button" value="改变第一个div的背景色" id="b1" />  
    23.     <input type="button" value="改变最后一个div的背景色" id="b2" />  
    24.     <input type="button" value="改变class不为one的所有div的背景色" id="b3" />  
    25.     <input type="button" value="改变索引值为偶数的div的背景色" id="b4" />  
    26.     <input type="button" value="改变索引值为基数的div的背景色" id="b5" />  
    27.     <input type="button" value="改变索引值大于3的div的背景色" id="b6" />  
    28.     <input type="button" value="改变索引值等于3的div的背景色" id="b7" />  
    29.     <input type="button" value="改变索引值小于3的div的背景色" id="b8" />  
    30.     <input type="button" value="改变所有标题元素的背景色" id="b9" />  
    31.       
    32.     <h2>h2</h2>  
    33.     <h5>h5</h5>  
    34.     <h3>h3</h3>  
    35.     <div class="one">div1</div>  
    36.     <div class="one">div2</div>  
    37.     <div>div3</div>  
    38.     <div>div4</div>  
    39.     <div>div5</div>  
    40.     <div>div6</div>  
    41.     <div>div7</div>  
    42.     <div class="one">div8</div>  
    43.     <div>div9</div>  
    44.       
    45.     <input type="button" value="增加动画效果" id="b10" /><br>  
    46.     <div id="mover">动画</div>  
    47.   </body>  
    48.   <script language="JavaScript">  
    49.     //一、改变第一个div的背景色  
    50.     $("#b1").click(function(){  
    51.         $("div:first").css("background-color", "yellow");  
    52.     });  
    53.       
    54.     //二、改变最后一个div的背景色  
    55.     $("#b2").click(function(){  
    56.         $("div:last").css("background-color", "red");  
    57.     });  
    58.       
    59.     //三、改变class不为one的所有div的背景色  
    60.     $("#b3").click(function(){  
    61.         $("div:not(.one)").css("background-color", "yellow");  
    62.     });  
    63.       
    64.     //四、改变索引值为偶数的div的背景色  
    65.     $("#b4").click(function(){  
    66.         $("div:even").css("background-color", "yellow");  
    67.     });  
    68.     //五、改变索引值为基数的div的背景色  
    69.     $("#b5").click(function(){  
    70.         $("div:odd").css("background-color", "yellow");  
    71.     });  
    72.     //六、改变索引值大于3的div的背景色  
    73.     $("#b6").click(function(){  
    74.         $("div:gt(3)").css("background-color", "yellow");  
    75.     });  
    76.     //七、改变索引值等于3的div的背景色  
    77.     $("#b7").click(function(){  
    78.         $("div:eq(3)").css("background-color", "yellow");  
    79.     });  
    80.       
    81.     //八、改变索引值小于3的div的背景色  
    82.     $("#b8").click(function(){  
    83.         $("div:lt(3)").css("background-color", "yellow");  
    84.     });  
    85.       
    86.     //九、改变所有标题元素的背景色  
    87.     $("#b9").click(function(){  
    88.         $(":header").css("background-color", "yellow");  
    89.     });  
    90.       
    91.     //十、  <div id="mover">动画</div>  增加动画效果  
    92.     $("#b10").click(function(){  
    93.         $(":animated").css("background-color", "yellow");  
    94.     });  
    95.     function ca(){  
    96.         $("#mover").slideToggle(800, ca);  
    97.     }  
    98.     ca();  
    99.   </script>  
    100.     
    101. </html>  

     

    内容过滤选择器:

    内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
    1、:contains(text) 用法: $(”div:contains(’John’)”)    返回值  集合元素
          说明: 匹配包含给定文本的元素.这个选择器比较有用,当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.
    2、:empty 用法: $(”td:empty”)   返回值  集合元素
          说明: 匹配所有不包含子元素或者文本的空元素
    3、:has(selector)
          用法: $(”div:has(p)”).addClass(”test”)    返回值  集合元素
          说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.
    4、:parent 用法: $(”td:parent”)   返回值  集合元素
          说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

     

    内容过滤选择器示例:

    改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF
    改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 #0000FF
    改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF
    改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF
    改变不含有文本 di; 的 div 元素的背景色

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>contentFilter_selecter.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    11.     <style>  
    12.         .mini{  
    13.             width:100px;  
    14.             height:50px;  
    15.             background-color:green;  
    16.         }  
    17.     </style>  
    18.   </head>  
    19.     
    20.   <body>  
    21.     <input type="button" value="改变含有文本di的背景色" id="b1" />  
    22.     <input type="button" value="改变没有文本的背景色" id="b2" />  
    23.     <input type="button" value="改变含有<p>的div元素的背景色" id="b3" />  
    24.     <input type="button" value="改变含有子元素或者文本的div" id="b4" />  
    25.     <input type="button" value="改变不含有文本di的div元素的背景色" id="b5" />  
    26.       
    27.     <div> id为one div</div>  
    28.     <div ><p> id为two class是mini div</p></div>  
    29.     <div class="mini"></div>  
    30.     <div> id为two class是mini</div>  
    31.       
    32.     <table border="1" cellspacing="0" width="200">  
    33.         <tbody>  
    34.             <tr>  
    35.                 <td>1</td>  
    36.                 <td>1</td>  
    37.                 <td></td>  
    38.                 <td></td>  
    39.             </tr>  
    40.         </tbody>  
    41.     </table>  
    42.       
    43.   </body>  
    44.   <script language="JavaScript">  
    45.     //一、改变含有文本di的背景色  
    46.     $("#b1").click(function(){  
    47.         $("div:contains('di')").css("background-color", "green");  
    48.     });  
    49.       
    50.     //二、改变没有文本的背景色  
    51.     $("#b2").click(function(){  
    52.         $("td:empty").css("background-color", "green");  
    53.     });  
    54.       
    55.     //三、改变含有<p>的div元素的背景色  
    56.     $("#b3").click(function(){  
    57.         $("div:has(p)").css("background-color", "yellow");  
    58.     });  
    59.       
    60.     //四、改变含有子元素或者文本的div  
    61.     $("#b4").click(function(){  
    62.         $("div:parent").css("background-color", "yellow");  
    63.     });  
    64.       
    65.     //五、改变不含有文本di的div元素的背景色  
    66.     $("#b5").click(function(){  
    67.         $("div:not(:contains(di))").css("background-color", "yellow");  
    68.     });   
    69.   </script>  
    70. </html>  

     

    可见度过滤选择器:

    可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
    1、:hidden 用法: $(”tr:hidden”)  返回值  集合元素
         说明: 匹配所有的不可见元素,input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.
    2、:visible 用法: $(”tr:visible”)  返回值  集合元素
        说明: 匹配所有的可见元素.

     

    可见度过滤选择器示例:

    改变所有可见的div元素的背景色为 #0000FF
    选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
    选取所有的文本隐藏域, 并打印它们的值

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>visiableFilter_selecter.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    12.     <style type="text/css">  
    13.         div.visiable{  
    14.             display:none;  
    15.         }  
    16.     </style>  
    17.   </head>  
    18.     
    19.   <body>  
    20.     <input type="button" value="改变所有可见的div的背景色" id="b1" />  
    21.     <input type="button" value="选取所有不可见的元素并将他们显示出来" id="b2" />  
    22.     <input type="button" value="选取所有的文本影藏" id="b3" />  
    23.       
    24.     <div>可见</div>  
    25.     <div>可见</div>  
    26.     <div class="visiable">不可见</div>  
    27.     <div class="visiable">不可见</div>  
    28.     <div class="visiable">不可见</div>  
    29.     <div>可见</div>  
    30.       
    31.     <input type="hidden" value="hidden1" />  
    32.     <input type="hidden" value="hidden2" />  
    33.     <input type="hidden" value="hidden3" />  
    34.   </body>  
    35.   <script language="JavaScript">  
    36.     //一、改变所有可见的div的背景色  
    37.     $("#b1").click(function(){  
    38.         $("div:visible").css("background-color", "yellow");  
    39.         $("div").show();  
    40.     });  
    41.       
    42.     //二、选取所有不可见div的元素并将他们显示出来  
    43.     $("#b2").click(function(){  
    44.         $("div:hidden").show();  
    45.     });  
    46.       
    47.     //三、选取所有的文本影藏,输出值  
    48.     $("#b3").click(function(){  
    49.         var $inputHid=$("input:hidden");  
    50.           
    51.         /**  
    52.          *   
    53.          * @param {Object} 每次遍历的索引  
    54.          * @param {Object} domEle  
    55.          */  
    56.         $inputHid.each(function(index,domEle){  
    57.             //jquery中的方法  
    58.             //alert($(this).val());  
    59.             //alert(index);  
    60.             //alert(domEle.value)  
    61.             alert($(domEle).val());  
    62.         });  
    63.           
    64.     });  
    65.   </script>  
    66.     
    67. </html>  

     

    属性过滤选择器:

    属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
    1、[attribute] 用法: $(”div[id]“) ;  返回值  集合元素
          说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.
    2、[attribute=value] 用法: $(”input[name='newsletter']“).attr(”checked”, true);    返回值  集合元素
          说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.
    3、[attribute!=value] 用法: $(”input[name!='newsletter']“).attr(”checked”, true);    返回值  集合元素
          说明: 匹配所有不含有指定的属性,或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.
    4、[attribute^=value] 用法: $(”input[name^=‘news’]“)  返回值  集合元素 
          说明: 匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!

    5、[attribute$=value] 用法: $(”input[name$=‘letter’]“)  返回值  集合元素 
         说明: 匹配给定的属性是以某些值结尾的元素.
    6、[attribute*=value] 用法: $(”input[name*=‘man’]“)   返回值  集合元素
         说明: 匹配给定的属性是以包含某些值的元素.
    7、[attributeFilter1][attributeFilter2][attributeFilterN] 用法: $(”input[id][name$=‘man’]“)  返回值  集合元素
         说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.

     

    属性过滤选择器示例:

    选取下列元素,改变其背景色为 #0000FF
    含有属性title 的div元素.
    属性title值等于"test"的div元素.
    属性title值不等于"test"的div元素(没有属性title的也将被选中).
    属性title值 以"te"开始 的div元素.
    属性title值 以"est"结束 的div元素.
    属性title值 含有"es"的div元素.
    选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>AttributeFilter_selecter.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    12.   </head>  
    13.     
    14.   <body>  
    15.     <input type="button" value="改变含有属性title的div" id="b1" />  
    16.     <input type="button" value="改变不含属性title的div" id="b2" />  
    17.     <input type="button" value="属性title等于test的div元素" id="b3" />  
    18.     <input type="button" value="属性title不等于test的div元素" id="b4" />  
    19.     <input type="button" value="含有title但是title!=test" id="b5" />  
    20.     <input type="button" value="属性title是以te开头的div元素" id="b6" />  
    21.     <input type="button" value="属性title是以est结尾的div元素" id="b7" />  
    22.     <input type="button" value="属性title包含es的div元素" id="b8" />  
    23.     <input type="button" value="选取有属性id的div元素  然后在结果中选取属性title值含有es的div元素" id="b9" />  
    24.       
    25.     <div title="test01"> div title=test01</div>  
    26.     <div> div </div>  
    27.     <div title="test"> div title=test</div>  
    28.     <div title="test" id="1"> div title=test</div>  
    29.     <div> div</div>  
    30.     <div title="01" id="1"> div title=01</div>  
    31.     <div title="01est" id="1"> div title=01est</div>  
    32.   </body>  
    33.     <script language="JavaScript">  
    34.         //一、改变含有属性title的div  
    35.         $("#b1").click(function(){  
    36.             $("div[title]").css("background-color", "yellow");  
    37.         });  
    38.           
    39.           
    40.         //二、改变不含属性title的div  
    41.         $("#b2").click(function(){  
    42.             $("div:not([title])").css("background-color", "yellow");  
    43.         });  
    44.           
    45.         //三、属性title等于test的div元素  
    46.         $("#b3").click(function(){  
    47.             $("div[title='test']").css("background-color", "yellow");  
    48.         });  
    49.           
    50.         //四、属性title不等于test的div元素     不含title或者含有title但不等于test的  
    51.         $("#b4").click(function(){  
    52.             $("div[title!='test']").css("background-color", "yellow");  
    53.         });  
    54.           
    55.         //五、含有title但是title!=test  
    56.         $("#b5").click(function(){  
    57.             $("div[title][title!=test]").css("background-color", "yellow");  
    58.         });  
    59.           
    60.         //六、属性title是以te开头的div元素  
    61.         $("#b6").click(function(){  
    62.             $("div[title^=te]").css("background-color", "yellow");  
    63.         });  
    64.           
    65.         //七、属性title是以est结尾的div元素  
    66.         $("#b7").click(function(){  
    67.             $("div[title$=est]").css("background-color", "yellow");  
    68.         });  
    69.           
    70.         //八、属性title包含es的div元素  
    71.         $("#b8").click(function(){  
    72.             $("div[title*=es]").css("background-color", "yellow");  
    73.         });  
    74.           
    75.         //九、选取有属性id的div元素  然后在结果中选取属性title值含有es的div元素  
    76.         $("#b9").click(function(){  
    77.             $("div[id][title*='es']").css("background-color", "yellow");  
    78.         });  
    79.           
    80.           
    81.     </script>  
    82. </html>  

     

    子元素过滤选择器:

    1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”)   返回值  集合元素
          说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.
    2、:first-child 用法: $(”ul li:first-child”)    返回值  集合元素 
          说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.
    3、:last-child 用法: $(”ul li:last-child”)      返回值  集合元素
          说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
    4、: only-child 用法: $(”ul li:only-child”)   返回值  集合元素 
          说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

     

    nth-child() 选择器详解如下:
    (1):nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
    (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
    (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
    (3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

     

    子元素过滤选择器示例:

    选取下列元素,改变其背景色为 #0000FF
    每个class为one的div父元素下的第2个子元素.
    每个class为one的div父元素下的第一个子元素
    每个class为one的div父元素下的最后一个子元素
    如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>AttributeFilter_selecter.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    12.   </head>  
    13.     
    14.   <body>  
    15.     <input type="button" value="每个class为one的div父元素下的第二个子元素" id="b1" />  
    16.     <input type="button" value="每个class为one的div父元素下的第1个子元素" id="b2" />  
    17.     <input type="button" value="每个class为one的div父元素下的最后一个子元素" id="b3" />  
    18.     <input type="button" value="找到class为one的且只有一个子元素的div" id="b4" />  
    19.     <input type="button" value="含有title但是title!=test" id="b5" />  
    20.     <input type="button" value="属性title是以te开头的div元素" id="b6" />  
    21.     <input type="button" value="属性title是以est结尾的div元素" id="b7" />  
    22.     <input type="button" value="属性title包含es的div元素" id="b8" />  
    23.     <input type="button" value="选取有属性id的div元素  然后在结果中选取属性title值含有es的div元素" id="b9" />  
    24.       
    25.     <div class="one"> div1   <font>one</font>   <font>two</font>   <font>three</font></div>  
    26.     <div class="one"> div2   <font>one</font></div>  
    27.     <div class="one"> div3   <font>one</font></div>  
    28.     <div class="one"> div4</div>  
    29.     <div class="one"> div5</div>  
    30.     <div class="one1"> div5   <font>one</font>   <font>two</font></div>  
    31.       
    32.   </body>  
    33.     <script language="JavaScript">  
    34.         //一、每个class为one的div父元素下的第2个子元素  
    35.         $("#b1").click(function(){  
    36.             $("div[class='one'] :nth-child(2)").css("background-color", "yellow");  
    37.         });  
    38.           
    39.         //二、每个class为one的div父元素下的第1个子元素  
    40.         /*法一  
    41.         $("#b2").click(function(){  
    42.             $("div[class='one'] :nth-child(1)").css("background-color", "yellow");  
    43.         });  
    44.         */  
    45.         //法二  
    46.         $("#b2").click(function(){  
    47.             $("div[class='one'] :first-child").css("background-color", "yellow");  
    48.         });  
    49.           
    50.         //三、每个class为one的div父元素下的最后一个子元素  
    51.         $("#b3").click(function(){  
    52.             $("div[class='one'] :last-child").css("background-color", "yellow");  
    53.         });  
    54.           
    55.         //四、找到class为one的且只有一个子元素的div  
    56.         $("#b4").click(function(){  
    57.             $("div[class='one'] :only-child").css("background-color", "yellow");  
    58.         });  
    59.           
    60.           
    61.     </script>  
    62. </html>  

     

    表单对象属性过滤选择器:

    此选择器主要对所选择的表单元素进行过滤
    1、:enabled 用法: $(”input:enabled”)    返回值  集合元素
          说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.
    2、:disabled 用法: $(”input:disabled”)    返回值  集合元素
          说明: 匹配所有不可用元素.与上面的那个是相对应的.
    3、:checked 用法: $(”input:checked”)   返回值  集合元素
          说明: 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option).这话说起来有些绕口.
    4、:selected 用法: $(”select option:selected”)   返回值  集合元素
           说明: 匹配所有选中的option元素.

     

    表单属性过滤选择器:

    利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值
    利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值
    利用 jQuery 对象的 length 属性获取多选框选中的个数
    利用 jQuery 对象的 text() 方法获取下拉框选中的内容

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>AttributeFilter_selecter.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    12.   </head>  
    13.     
    14.   <body>  
    15.     <input type="button" value="取出可用的input" id="b1" />  
    16.     <input type="button" value="取出不可用的input" id="b2" />  
    17.     <input type="button" value="利用jquery的length属性获取多选框选中的个数" id="b3" />  
    18.     <input type="button" value="输出被选中的多选框的值" id="b4" />  
    19.     <input type="button" value="用jquery的text方法获取下拉选的结果" id="b5" />  
    20.       
    21.       
    22.     <input type="text" value="可用" />  
    23.     <input type="text" value="不可用" disabled="true" />  
    24.     <input type="text" value="不可用" disabled="true" />  
    25.     <input type="text" value="可用" />  
    26.     <input type="text" value="可用" />  
    27.       
    28.     <input type="checkbox" name="lang" value="java"/>java  
    29.     <input type="checkbox" name="lang" value="c"/>c  
    30.     <input type="checkbox" name="lang" value="c#"/>c#  
    31.       
    32.     <select name="">  
    33.         <option value="">--请选择--</option>  
    34.         <option value="选项一">选项一</option>  
    35.         <option value="选项二">选项二</option>  
    36.         <option value="选项三">选项三</option>  
    37.     </select>  
    38.       
    39.   </body>  
    40.     <script language="JavaScript">  
    41.         //一、取出可用的input  
    42.         $("#b1").click(function(){            
    43.             $("input[type='text']:enabled").val("xxxxxxxxxxxx");  
    44.         })  
    45.           
    46.         //二、取出不可用的input  
    47.         $("#b2").click(function(){            
    48.             $("input[type='text']:disabled").val("xxxxxxxxxxxx");  
    49.         })  
    50.           
    51.         //三、利用jquery的length属性获取多选框选中的个数  
    52.         $("#b3").click(function(){            
    53.             var len=$("input[type='checkbox']:checked").length;  
    54.             alert(len);  
    55.         })  
    56.           
    57.         //四、输出被选中的多选框的值  
    58.         $("#b4").click(function(){            
    59.             $.each($("input[type='checkbox']:checked"),function(index, domEle){  
    60.                 alert($(domEle).val());  
    61.             });  
    62.         })  
    63.           
    64.         //五、用jquery的text方法获取下拉选的结果  
    65.         $("#b5").click(function(){            
    66.             var val=$("select option:selected").text();           
    67.             alert(val);  
    68.         })  
    69.           
    70.     </script>  
    71. </html>  

     

    表单选择器:

    1、:input 用法: $(”:input”) ;   返回值  集合元素
          说明:匹配所有 input, textarea, select 和 button 元素 
    2、:text 用法: $(”:text”) ;  返回值  集合元素
          说明: 匹配所有的单行文本框.
    3、:password 用法: $(”:password”) ; 返回值  集合元素
          说明: 匹配所有密码框.
    4、:radio 用法: $(”:radio”) ; 返回值  集合元素
         说明: 匹配所有单选按钮.
    5、:checkbox 用法: $(”:checkbox”) ; 返回值  集合元素
          说明: 匹配所有复选框
    6、:submit 用法: $(”:submit”) ;   返回值  集合元素
          说明: 匹配所有提交按钮.

    7、:image 用法: $(”:image”)   返回值  集合元素
          说明: 匹配所有图像域.
    8、:reset 用法: $(”:reset”) ;  返回值  集合元素
          说明: 匹配所有重置按钮.
    9、:button 用法: $(”:button”) ;  返回值  集合元素
          说明: 匹配所有按钮.这个包括直接写的元素button.
    10、:file 用法: $(”:file”) ;  返回值  集合元素
         说明: 匹配所有文件域.
    11、:hidden 用法: $(”input:hidden”) ; 返回值  集合元素
          说明: 匹配所有不可见元素,或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.
          注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,

     

    jQuery中的DOM操作

    DOM(Document Object Model—文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件
    DOM 操作的分类:
    DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
    HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时, 有许多专属于 HTML-DOM 的属性
    CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性

     

    内部插入节点:

    append(content) :向每个匹配的元素的内部的结尾处追加内容

    appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处

    prepend(content):向每个匹配的元素的内部的开始处插入内容

    prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处

     

    案例:

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>inner_insert.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.   
    12.   <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    13.   </head>  
    14.     
    15.   <body>  
    16.     <input type="button" value="反恐放到重庆后" id="b1" />  
    17.     <input type="button" value="反恐放到重庆后" id="b2" />  
    18.     <input type="button" value="反恐放到city第一位" id="b3" />  
    19.     <input type="button" value="反恐放到city第一位" id="b4" />  
    20.       
    21.       
    22.     <br>  
    23.     您喜欢的城市:<br>  
    24.     <ul id="city">  
    25.         <li id="bj" value="beijing">北京</li>  
    26.         <li id="sh" value="shanghai">上海</li>  
    27.         <li id="cq" value="chongqing">重庆</li>  
    28.     </ul>  
    29.     您喜欢的游戏:<br>  
    30.     <ul id="love">  
    31.         <li id="ms" value="moshou">魔兽</li>    
    32.         <li id="fk" value="fankong">反恐</li>  
    33.     </ul>  
    34.       
    35.   </body>  
    36.     
    37.   <script language="JavaScript">  
    38.     //一、反恐放到重庆后  
    39.     $("#b1").click(function(){            
    40.             $("#city").append($("#fk"));  
    41.     })  
    42.       
    43.     //二、反恐放到重庆后  
    44.     $("#b2").click(function(){    
    45.             $("#fk").appendTo("#city");  
    46.     })  
    47.       
    48.     //三、反恐放到city第一位  
    49.     $("#b3").click(function(){    
    50.             $("#city").prepend($("#fk"));  
    51.     })  
    52.       
    53.     //四、反恐放到city第一位  
    54.     $("#b4").click(function(){    
    55.             $("#fk").prependTo("#city");  
    56.     })  
    57.       
    58.   </script>  
    59.     
    60. </html>  

     

    外部插入节点:

     

    after(content):在每个匹配的元素之后插入内容

    before(content):在每个匹配的元素之前插入内容

    insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面

    insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面以上方法不但能将新创建的 DOM 元素插入到

    档中, 也能对原有的 DOM 元素进行移动.

     

    案例:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>outer_insert.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    11.   </head>  
    12.     
    13.   <body>  
    14.     <input type="button" value="将p2移动到重庆后" id="b1" />  
    15.     <input type="button" value="将p2移动到北京之前" id="b2" />  
    16.     <input type="button" value="将p2移动到重庆后" id="b3" />  
    17.     <input type="button" value="将p2移动到北京之前" id="b4" />  
    18.       
    19.       
    20.     <br>  
    21.     您喜欢的城市:<br>  
    22.     <ul id="city">  
    23.         <li id="bj" value="beijing">北京</li>  
    24.         <li id="sh" value="shanghai">上海</li>  
    25.         <li id="cq" value="chongqing">重庆</li>  
    26.     </ul>  
    27.       
    28.     <p id="p3">p3</p>  
    29.     <p id="p2">p2</p>  
    30.     <p id="p1">p1</p>  
    31.       
    32.   </body>  
    33.     
    34.   <script language="JavaScript">  
    35.     //一、after  将p2移动到重庆后  
    36.     $("#b1").click(function(){            
    37.         $("#city").after($("#p2"));  
    38.     })  
    39.       
    40.     //二、将p2移动到北京之前  
    41.     $("#b2").click(function(){            
    42.         $("#city").before($("#p2"));  
    43.     })  
    44.       
    45.     //三、after  将p2移动到重庆后  
    46.     $("#b3").click(function(){            
    47.         $("#p2").insertAfter($("#city"));  
    48.     })  
    49.       
    50.     //四、将p2移动到北京之前  
    51.     $("#b4").click(function(){            
    52.         $("#p2").insertBefore("#city");  
    53.     })  
    54.       
    55.   </script>  
    56.     
    57.     
    58. </html>  

     

    查找节点:

    查找属性节点: 通过 jQuery 选择器完成.

    查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值

     

    创建节点

    使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回.
    注意: 
    动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中; 
    当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)
    创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

     

    案例:

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>geAttri.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    12.   </head>  
    13.     
    14.   <body>  
    15.     <input type="button" value="创建上海节点并追加到天津后面" id="b2" />  
    16.       
    17.       
    18.     <br>  
    19.     <ul id="city">  
    20.         <li id="bj" name="beijing">北京</li>  
    21.         <li id="tj" name="tianjing">天津</li>  
    22.     </ul>  
    23.   </body>  
    24.     
    25.   <script language="JavaScript">  
    26.     //二、创建上海节点并追加到天津后面  
    27.     $("#b2").click(function(){            
    28.             var $shEle=$("<li id='sh' name='shanghai'>上海</li>");  
    29.             $("#city").append($shEle);  
    30.               
    31.               
    32.             //添加大连  
    33.             var $dlEle=$("<li></li>");  
    34.             $dlEle.attr("id", "dl");  
    35.             $dlEle.attr("name", "dalian");  
    36.               
    37.             $dlEle.text("大连");  
    38.               
    39.             $("#city").append($dlEle);  
    40.               
    41.     })  
    42.       
    43.       
    44.       
    45.     //三、  
    46.       
    47.       
    48.   </script>  
    49.     
    50. </html>  

     

    删除节点:

    remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
    empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).

     

    案例:

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>geAttri.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    12.   </head>  
    13.     
    14.   <body>  
    15.     <input type="button" value="删除北京节点 " id="b1" />  
    16.     <input type="button" value="清除city下所有节点 " id="b2" />  
    17.     <br>  
    18.     <ul id="city">  
    19.         <li id="bj" name="beijing">北京  <font>font</font></li>  
    20.         <li id="tj" name="tianjing">天津</li>  
    21.     </ul>  
    22.       
    23.       
    24.     <p>hello</p> how ara <p>you</p>  
    25.       
    26.   </body>  
    27.     
    28.   <script language="JavaScript">  
    29.     //一、删除北京节点  
    30.     $("#b1").click(function(){  
    31.         $("#bj").remove();  
    32.     })  
    33.       
    34.       
    35.     //二、清除city下所有节点  
    36.     $("#b2").click(function(){  
    37.         $("#city").empty();  
    38.           
    39.         alert($("#city").attr("id"));  
    40.     })  
    41.       
    42.   </script>  
    43.     
    44. </html>  

     

    复制节点:

    clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
    clone(true): 复制元素的同时也复制元素中的的事件 

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>clone.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    12.   </head>  
    13.     
    14.   <body>  
    15.     <button>保存</button><br><br><br>  
    16.     <p>段落</p>  
    17.       
    18.   </body>  
    19.   <script language="JavaScript">  
    20.     $("button").click(function(){  
    21.         alert(1);  
    22.     })  
    23.       
    24.     //克隆button并追加到P上 但事件不克隆  
    25.     //$("button").clone().appendTo($("p"));  
    26.       
    27.     //克隆button并追加到P上 克隆事件  
    28.     $("button").clone(true).appendTo($("p"));  
    29.       
    30.   </script>  
    31.     
    32. </html>  

     

    替换节点:

    replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
    replaceAll(): 颠倒了的 replaceWith() 方法.
    注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失

    案例:

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>replce.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    12.   </head>  
    13.     
    14.   <body>  
    15.     <button>保存</button><br><br><br>  
    16.     <p>段落</p>  
    17.     <p>段落</p>  
    18.     <p>段落</p>  
    19.       
    20.   </body>  
    21.   <script language="JavaScript">  
    22.     $("button").click(function(){  
    23.         alert(1);  
    24.     })  
    25.       
    26.     //用p替换button    
    27.     //$("p").replaceWith($("<button>保存</button>"));  
    28.       
    29.     //$("p").replaceWith($("button"));  
    30.       
    31.       
    32.     $("<button>保存</button>").replaceAll($("p"));  
    33.       
    34.       
    35.   </script>  
    36. </html>  

     

    属性操作:

    attr(): 获取属性和设置属性
    当为该方法传递一个参数时, 即为某元素的获取指定属性
    当为该方法传递两个参数时, 即为某元素设置指定属性的值
    jQuery中有很多方法都是一个函数实现获取和设置.如:attr(), html(), text(), val(),height(), width(), css() 等.
    removeAttr(): 删除指定元素的指定属性

     

    案例:

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>check.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    12.   </head>  
    13.     
    14.   <body>  
    15.     您的爱好:  
    16.         <br>  
    17.         <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选" />全选/全不选  
    18.         <br>  
    19.             <input type="checkbox" name="itmes" value="足球" />足球  
    20.             <input type="checkbox" name="itmes" value="篮球" />篮球  
    21.             <input type="checkbox" name="itmes" value="游泳" />游泳  
    22.             <input type="checkbox" name="itmes" value="唱歌" />唱歌    
    23.             <br>  
    24.             <input type="button" name="checkall" id="checkall" value="全选" />  
    25.             <input type="button" name="checkall" id="checkallNo" value="全不选" />  
    26.             <input type="button" name="checkall" id="checkRevese" value="反选" />  
    27.   </body>  
    28.    
    29.   <script language="JavaScript">  
    30.       
    31.     //<input type="button" name="checkall" id="checkall" value="全选" />  
    32.     $("#checkall").click(function(){      
    33.         $("input[type='checkbox']").attr("checked", "checked");  
    34.     })  
    35.       
    36.     //<input type="button" name="checkall" id="checkallNo" value="全不选" />  
    37.     $("#checkallNo").click(function(){  
    38.         $("input[type='checkbox']").removeAttr("checked");  
    39.     })  
    40.       
    41.     //<input type="button" name="checkall" id="checkRevese" value="反选" />  
    42.     $("#checkRevese").click(function(){  
    43.         $("input[name='itmes']").each(function(index, domEle){  
    44.             if ($(domEle).attr("checked")){  
    45.                 $(domEle).removeAttr("checked");  
    46.             }else{  
    47.                  $(domEle).attr("checked", "true");  
    48.             }  
    49.         })        
    50.     })  
    51.       
    52.     //<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选" />全选/全不选  
    53.     $("#checkItems").change(function(){  
    54.         if($(this).attr("checked")){  
    55.             $("input:[name='itmes']").attr("checked", "checked");  
    56.               
    57.         }else{  
    58.             $("input:[name='itmes']").removeAttr("checked");              
    59.         }  
    60.     })  
    61.       
    62.   </script>  
    63.     
    64. </html>  

     

    样式操作:

    获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
    追加样式: addClass()
    移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
    切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
    判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

    案例:

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>class.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.     <script language="JavaScript" src="../jquery/jquery-1.4.2.js"></script>  
    12.     <style type="text/css">  
    13.         #one{  
    14.             font-size:12px;  
    15.             height:130px;  
    16.             width:130px;  
    17.             border:1px solid;  
    18.         }  
    19.         .mini{  
    20.             background-color:red;             
    21.         }  
    22.     </style>  
    23.   </head>  
    24.     
    25.   <body>  
    26.     <div id="one">div1</div>  
    27.       
    28.     <input type="button" value="使用attr来改变背景色" id="b1" /><br>  
    29.     <input type="button" value="追加样式" id="b2" /><br>  
    30.     <input type="button" value="移除样式" id="b3" /><br>  
    31.     <input type="button" value="切换样式" id="b4" /><br>  
    32.     <input type="button" value="判断是否含有某个样式" id="b5" /><br>  
    33.       
    34.       
    35.   </body>  
    36.   <script language="JavaScript">  
    37.     //使用attr来改变背景色  
    38.     $("#b1").click(function(){  
    39.         $("#one").attr("class", "mini");  
    40.     })  
    41.       
    42.       
    43.     //追加样式  
    44.     $("#b2").click(function(){  
    45.         $("#one").addClass("mini");  
    46.     })  
    47.       
    48.       
    49.     //移除样式  
    50.     $("#b3").click(function(){  
    51.         $("#one").removeClass("mini");  
    52.     })  
    53.       
    54.     //切换样式  
    55.     $("#b4").click(function(){  
    56.         $("#one").toggleClass("mini");  
    57.     })  
    58.       
    59.     //判断是否含有某个样式  
    60.     $("#b5").click(function(){  
    61.         alert($("#one").hasClass("mini"));  
    62.     })  
    63.       
    64.       
    65.   </script>  
    66. </html>  

     

    设置和获取 HTML, 文本和值

    读取和设置某个元素中的 HTML 内容: html() . 该方法可以用于 XHTML, 但不能用于 XML 文档
    读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档.
    读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组

     

    常用的遍历节点方法

    取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
    取得匹配元素后面紧邻的同辈元素的集合:next(); 
    取得匹配元素前面紧邻的同辈元素的集合:prev()
    取得匹配元素前后所有的同辈元素: siblings()

     

    CSS-DOM操作:

    获取和设置元素的样式属性: css()
    获取和设置元素透明度: opacity 属性
    注:IE6,IE7不支持此属性,请使用Firefox1.5,或Opera9浏览 
    opacity:0.1

    获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”);
    获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效

    em是相对长度单位。相对于当前对象内文本的字体尺寸 

     

     

    jQuery解析并加载XML

    JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.

    JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历
     

    jQuery中的事件

     

    在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

     

     

    jQuery的表单验证

    下载地址和Demo 
    http://jquery.bassistance.de/validate/jquery.validate.zip 
    首页: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
    jQuery validation 1.7  ---验证插件 需要:jQuery 1.3.2 或 1.4.2版本

    下载之后可以查看他的demo,从demo中抽取出来案例

     

    jquery表单验证 默认值校验规则 

     

     

     

    jquery表单验证 默认的提示 

     

    表单验证:

    调用jquery.validate({});方法进行验证
    $("#empForm").validate({
          *     //自定义验证规则
          *     //自定义提示信息
    })

     

    jquery自定义验证规则

    这里的采用的都是标签的name属性值,而不是根据标签的id操作的

    比如:<input type="text" id="realNames" name="realname" />,定义规则的时候采用的name属性,这个原因很简单的,因为我们知道id是唯一的,但是对于后面的radio标签的时候我们想要定义规则的时候,如果要是用id来操作的话,就不行了,name属性是可以多个的,所以使用name

    realname:"required",其实这个required是一个函数,我们可以查看jquery插件的源码:

    后面的都是类似的,都可以在源代码中找到

     

    当然一个标签也可以定义多个规则:

    username: {
    required:true,
    minlength:"5",
    maxlength:"8"
    }

    这里的required:true的功能和上面的的realname那种方式是一样的,同时minlength和maxlength都是方法的,源码如下:

    我们需要传递一个参数值,然后进行判断的,这个后面我们会在自定义的方法中详细说明

     

    jQuery自定义消息:

    这个作用就是给上面的校验规则中定义相对应的说明提示

    这里面的提示信息,如果没有定义的话,会默认使用源码中的提示信息:

     

    jQuery的自定义校验规则:

    自定义校验规则可以通过自定义检验函数的方式新增加校验规则
    步骤如下:
    1. 在定义校验规则之前定义一个新的方法
    2. 在rules中指定某个域使用此校验规则
    3. 在messages中指定这个域使用此校验规则没有通过的提示
    信息 

     

    1. 在定义校验规则之前定义一个新的方法

     

     

    2. 在rules中指定这个某个域使用此校验规则

     

    3. 在messages中指定这个域使用此校验规则没有通过的提示信息 

     

     

    案例:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. $.validator.addMethod("checkId",function(value,element,params){  
    2.         if (value.length!= 15 && value.length!=18){  
    3.             return false;  
    4.         }  
    5.           
    6.         if (value.length==15){  
    7.                 var patten=/^\d{15}$/;  
    8.                 if (!patten.test(value)){  
    9.                     return false;  
    10.                 }  
    11.             }  
    12.               
    13.         if (value.length==18){  
    14.             patten=/^\d{18}|\d{17}[X]{1}$/;  
    15.             if (!patten.test(value)){  
    16.                 return false;  
    17.             }  
    18.         }  
    19.           
    20.         return true;  
    21.     }, "身份证不正确")  

     

    调用:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. cert:{  
    2.        required:true,  
    3.        checkId:"4"  
    4. }  

    我们在使用checkId方法的时候

     

    value:元素的值
    element 元素本身
    params 参数

    其中value就对应标签name为cert标签的value值,element就是这个标签,params就是传递的参数:4
     

    下面来看一下完整的一个校验的Demo:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>emp.html</title>  
    5.       
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.       
    10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.     <script language="JavaScript" src="./jquery-1.4.2.js"></script>  
    12.     <script language="JavaScript" src="./jquery.validate.js"></script>  
    13.   <script language="JavaScript">  
    14.       
    15.     // 增加方法的名称  
    16.     // 函数function  
    17.     //    *value:元素的值  
    18.     //    *element 元素本身  
    19.     //    *params 参数  
    20.       
    21.     //调用  
    22.     /**  
    23.      * cert:{  
    24.      *      required:true,  
    25.      *      checkId:"4"  
    26.      * }  
    27.      *   
    28.      * 返回值是false  
    29.      *   
    30.      */  
    31.       
    32.     $.validator.addMethod("checkId",function(value,element,params){  
    33.         if (value.length!= 15 && value.length!=18){  
    34.             return false;  
    35.         }  
    36.           
    37.         if (value.length==15){  
    38.                 var patten=/^\d{15}$/;  
    39.                 if (!patten.test(value)){  
    40.                     return false;  
    41.                 }  
    42.             }  
    43.               
    44.         if (value.length==18){  
    45.             patten=/^\d{18}|\d{17}[X]{1}$/;  
    46.             if (!patten.test(value)){  
    47.                 return false;  
    48.             }  
    49.         }  
    50.           
    51.         return true;  
    52.     }, "身份证不正确")  
    53.       
    54.       
    55.     $(document).ready(function(){       //这个方法纯粹是对向window.load事件注册事件的替代方法  
    56.         $("#empForm").validate({  
    57.             //验证规则            
    58.             //使用的是组件的name属性值,而不是id属性值  比如radio  只能通过name来确定了   
    59.               
    60.             //jquery 在执行验证时,利用lable显示错误提示信息               
    61.             /*  
    62.              * required:表示组件的输入值不能为空  
    63.              *   
    64.              */  
    65.             rules:{  
    66.                 //required:在插件源代码中查看函数  
    67.                 realName:"required",  
    68.                 username: {  
    69.                     required:true,  
    70.                     minlength:"5",  
    71.                     maxlength:"8"  
    72.                 },  
    73.                 pwd1:{  
    74.                     required:true,  
    75.                     minlength:"6",  
    76.                     maxlength:"12"  
    77.                                           
    78.                 },  
    79.                 pwd2:{  
    80.                     required:true,  
    81.                     minlength:"6",  
    82.                     maxlength:"12",  
    83.                     equalTo:"#pwd1"  
    84.                 },  
    85.                 sex:{  
    86.                     required:true  
    87.                 },  
    88.                 age:{  
    89.                     required:true,  
    90.                     range:[26,55]  
    91.                 },  
    92.                 edu:{  
    93.                     required:true  
    94.                 },  
    95.                 birthday:{  
    96.                     required:true,  
    97.                     dateISO:true  
    98.                 },  
    99.                 like:{  
    100.                     required:true  
    101.                 },  
    102.                 email:{  
    103.                     required:true,  
    104.                     email:true  
    105.                 },  
    106.                 id:{  
    107.                     checkId:["4"]  
    108.                 }  
    109.                       
    110.             },  
    111.             //显示验证出错提示信息  
    112.             //在插件源码中有默认值的             
    113.             messages:{  
    114.                 realName:"您的真实姓名不能为空",  
    115.                 username:{  
    116.                     required:"您的用户名不能为空",  
    117.                     minlength:"用户名不能小于5个字符",  
    118.                     maxlength:"用户名不能大于8个字符"  
    119.                 },  
    120.                 pwd1:{  
    121.                     required:"您的密码不能为空",  
    122.                     minlength:"用户名不能小于6个字符",  
    123.                     maxlength:"用户名不能大于12个字符"  
    124.                 },  
    125.                 pwd2:{  
    126.                     required:"确认密码不能为空",  
    127.                     minlength:"用户名不能小于6个字符",  
    128.                     maxlength:"用户名不能大于12个字符",  
    129.                     equalTo:"两次输入不一致"  
    130.                 },  
    131.                 age:{  
    132.                     required:"请输入您的年龄",  
    133.                     range:"请输入合法年龄"  
    134.                 },  
    135.                 edu:{  
    136.                     required:"请选择您的学历"  
    137.                 },  
    138.                 birthday:{  
    139.                     required:"请输入您的生日",  
    140.                     dateISO:"日期格式不正确"  
    141.                 },  
    142.                 email:{  
    143.                     required:"请输入您的邮箱",  
    144.                     email:"电子邮箱错误"  
    145.                 }  
    146.                   
    147.             }  
    148.         });  
    149.           
    150.           
    151.           
    152.     })  
    153.       
    154.           
    155.   </script>  
    156.     
    157.   </head>  
    158.     
    159.   <body>  
    160.     员工信息录入<br>  
    161.     <form id="empForm" name="empForm" method="post">  
    162.     <table border="1" cellpadding="0">  
    163.         <tr>  
    164.             <td>真实姓名(不能为空)</td>  
    165.             <td><input type="text" id="realName" name="realName" /></td>  
    166.         </tr>  
    167.         <tr>  
    168.             <td>用户名(不能为空,长度在5~8之间,可以包含中文字符(一个汉字算一个字符))</td>  
    169.             <td><input type="text" id="username" name="username" /></td>  
    170.         </tr>  
    171.         <tr>  
    172.             <td>密码(不能为空,6-12位字符或者数字,不能包含中文字母)</td>  
    173.             <td><input type="password" id="pwd1" name="pwd1"/></td>  
    174.         </tr>  
    175.         <tr>  
    176.             <td>重复密码(不能为空,6-12位字符或者数字,不能包含中文字母)</td>  
    177.             <td><input type="password" id="pwd2" name="pwd2" /></td>  
    178.         </tr>  
    179.         <tr>  
    180.             <!--  
    181.                 jquery执行验证时,利用label标签显示错误提示信息  
    182.                 <lable style="display:none" for="gender" class="error">请选择性别</lable>  
    183.                     * for="gender" 该标签的唯一标识  
    184.                     * style:设置标签的为不可见  
    185.                     * class="error":error:错误信息,用户error这个样式表修饰  
    186.                   
    187.                 <input type="radio" id="gender_male" value="m" name="gender"/>  
    188.                 执行: *jquery执行时先以组件中name属性的值为标识去查找lable标签  
    189.                         * 如果找到直接使用  
    190.                         * 如果没有找到 创建一个  
    191.                   
    192.                 底层代码:  
    193.                 errorClass:"error" --class="error"  
    194.                 errorElement:"lable" --<lable>  
    195.                 lable=$("<"+this.settings.errorElement+"/>") --<lable>  
    196.                 .attr({"for":this.idOrName(element),generated:true}) --<lable for>  
    197.                 .addClass(this.settings.errorClass) --<label for class="error">messages</lable>  
    198.                 .html(message || "");  
    199.             -->  
    200.             <td>性别</td>  
    201.             <td><input type="radio" name="sex" value="man" id="gender_male" /><input id="gender_feimale" type="radio" name="sex" value="woman" /><label style="display: none" for="sex" class="error">请选择性别</label></td>  
    202.         </tr>  
    203.         <tr>  
    204.             <td>年龄(26~55)</td>  
    205.             <td><input type="text" id="age" name="age" /></td>  
    206.         </tr>  
    207.         <tr>  
    208.             <td>学历</td>  
    209.             <td>  
    210.                 <select id="edu" name="edu">  
    211.                     <option value="">--请选择您的学历--</option>  
    212.                     <option value="benke">本科</option>  
    213.                     <option value="zhuanke">专科</option>  
    214.                     <option value="yanjiusheng">研究生</option>  
    215.                 </select>  
    216.             </td>  
    217.         </tr>  
    218.         <tr>  
    219.             <td>出生日期(1999/09/19)</td>  
    220.             <td><input type="text" id="birthday" name="birthday" /></td>  
    221.         </tr>  
    222.         <tr>  
    223.             <td>情趣爱好</td>  
    224.             <td><input type="checkbox" id="check1" name="like" />乒乓球<input type="checkbox" name="like" id="check1" />上网<input type="checkbox" name="like" id="check1" />code<label style="display: none" for="like" class="error">必须选择一个爱好</label></td>  
    225.         </tr>  
    226.         <tr>  
    227.             <td>电子邮箱</td>  
    228.             <td><input type="text" id="email" name="email" /></td>  
    229.         </tr>  
    230.         <tr>  
    231.             <td>身份证(15或18位)</td>  
    232.             <td><input type="text" id="id" name="id" /></td>  
    233.         </tr>  
    234.         <tr>  
    235.             <td></td>  
    236.             <td></td>  
    237.             <td><input type="submit" value="保存" id="ok"></td>  
    238.         </tr>  
    239.     </table>  
    240. </form>  
    241.   </body>  
    242.    
    243.     
    244. </html>  
    245. </span>  

    我们注意到Demo中有一个特别的地方就是那个性别的标签,源码中一般都是在一个标签后面自动使用lable标签来显示提示信息的,但是我们这里面不能使用默认的,不然这个默认的lable标签,看一下效果图:

     

    下面的图是正常操作显示的:


    再来看一下使用系统的label:

    插入的lable在第一个<input type="radio"...标签后面,而且提示信息是默认的,其实系统的这个默认的lable的产生原理,在代码中的注释说的很清楚了,就是自动生成一个lable标签,然后将提示信息添加进去即可。

     

    jQuery中封装的Ajax请求

    jQuery主要是封装了Ajax的一些方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到).

     

    1.load方法

    load( url, [data], [callback] ) :载入远程HTML 文件代码并插入至 DOM 中。

    url(String) : 请求的HTML页的URL地址。

    data(Map) : (可选参数) 发送至服务器的 key/value 数据。(json格式)

    callback(Callback) : (可选参数) 请求完成时(不需要是success)的回调函数。

    我们看到,方法中的三个参数只有第一个参数url是必选的,其他都是可选的,所以这个方法是有重载的形式的

     

    回调函数的参数说明:

    回调函数function(date,textStatus,xmlRequest):和Ajax中的函数一样的
    1) data 代表请求返回的内容
    2) textStatus 代表请求状态的对象
    3) XMLHttpRequest 对象

     

    这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some >selector"。

    这个方法可以很方便的动态加载一些HTML文件,例如表单。

    示例代码:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <span style="font-size:14px;">$("#one").load("load.jsp",{username:$("#username").val(),pwd:$("#pwd").val()},function(data, textStatus, xmlHttpReq){         
    2.             alert(data);                  
    3.         })</span>  

     

    下面是访问的load.jsp内容:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. <span style="font-size:14px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
    2. <%  
    3.     out.println("你好");  
    4.     String username=request.getParameter("username");  
    5.     String pwd=request.getParameter("pwd");  
    6.     System.out.println(username);  
    7.     System.out.println(pwd);  
    8.     System.out.println(request.getMethod());  
    9. %>  
    10.   
    11. <!-- h1标签内容 -->  
    12. <h1>H1</h1>  
    13.   
    14. <!-- h2标签内容 -->  
    15. <h2>H2</h2></span>  

     

     

    我们在之前介绍jsp的时候说过,其实我们看到这个jsp会输出“你好”,同时也会输出后面的标签内容,因为jsp引擎会将其翻译成servlet

     

     

     

    我们访问:

    http://localhost:8080/ajax/load/load.html

    显示结果:

    将请求到的html内容加载到one标签中进行显示

     

    下面在来看一下另外的一种形式:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. $("#one").load("load.jsp h1",{username:$("#username").val(),pwd:$("#pwd").val()},function(data, textStatus, xmlHttpReq){      
    2.                 alert(data);                  
    3.         })  

    我们看到第一个参数中在请求的load.jsp后面还有一个空格然后跟着一个h1标签,显示的结果:

     

    我们看到这个内容是h1的内容,我们看到load.jsp中会返回一个h1标签,将h1标签中内容进行显示,那个load.jsp后面跟着的是h1标签,所以显示的是load.jsp返回的h1标签的内容。
     

    其实我们通过上面的例子可以看到load的方式最大的作用就是将请求一段html代码,然后加载到指定的标签中。

     

    2.get方法

     jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求

    参数:

    url(String) : 发送请求的URL地址.

    data(Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示(json格式),会做为QueryString附加到请求URL中。

    callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

     

    回调函数的参数说明:

    回调函数function(date,textStatus,xmlRequest):和Ajax中的函数一样的
    1) data 代表请求返回的内容
    2) textStatus 代表请求状态的对象
    3) XMLHttpRequest 对象

     

     

     

    我们看到这个三个参数中第一个参数是必选的,其他的都是可选的

     

    看一下案例:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. $("#b1").click(function(){  
    2.         $.get("get.jsp", {username:$("#username").val(),pwd:$("#pwd").val()},function(data,textStatus){  
    3.             $("#one").html(data);  
    4.             alert(textStatus);  
    5.         });  
    6.     });  

     

    其中get.jsp的内容和上面的load.jsp内容是一样的

    这里面的作用就是将请求到的内容加载到指定标签中

     

    3.post方法

     jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求

    参数:

    url(String) : 发送请求的URL地址.

    data(Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示(json格式)。

    callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

     

    回调函数的参数说明:

    回调函数function(date,textStatus,xmlRequest):和Ajax中的函数一样的
    1) data 代表请求返回的内容
    2) textStatus 代表请求状态的对象
    3) XMLHttpRequest 对象

     

    type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

    这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用$.ajax。

     

    第一个参数是必选的,其他都是可选的

     

    示例代码:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. $("#b1").click(function(){  
    2.         var xmlReq=$.post("get.jsp",{username:$("#username").val(),pwd:$("#pwd").val()},function(data,textStatus){  
    3.             $("#one").html(data);  
    4.             alert(textStatus);  
    5.         });  
    6.         alert(xmlReq.readyState);  
    7.         alert(xmlReq.status)  
    8.     });  

     

     

    4.getScript方法

    jQuery.getScript( url, [callback] ) : 通过GET 方式请求载入并执行一个 JavaScript 文件。

    参数

    url(String) : 待载入 JS 文件地址。

    callback(Function) : (可选) 成功载入后回调函数。

    jQuery1.2 版本之前,getScript只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript加入脚本,请加入延时函数。

    这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码:

    加载并执行 test.js。

    jQuery 代码:

    $.getScript("test.js");

     

    加载并执行 test.js ,成功后显示信息。

    jQuery 代码:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. $.getScript("test.js", function(){  
    2.             alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同?");  
    3.             });  

     

     

    5.jQuery Ajax 事件

    Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件:局部事件 和 全局事件。

    局部事件就是在每次的Ajax请求时在方法内定义的,例如:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. $.ajax({  
    2.             beforeSend: function(){  
    3.             //Handle the beforeSend event  
    4.             },  
    5.             complete: function(){  
    6.            //Handle the complete event  
    7.             }  
    8.             //...  
    9.       });  

     

    全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播,在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. $("#loading").bind("ajaxSend", function(){  
    2.             $(this).show();  
    3.             }).bind("ajaxComplete",function(){  
    4.             $(this).hide();  
    5.             });  

     

    或者:

     

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. $("#loading").ajaxStart(function(){  
    2.             $(this).show();  
    3.             });  

     

    我们可以在特定的请求将全局事件禁用,只要设置下 global 选项就可以了:

     

    [html] view plain copy 在CODE上查看代码片派生到我的代码片

    1. $.ajax({  
    2.             url: "test.html",  
    3.             global: false,// 禁用全局Ajax事件.  
    4.             // ...  
    5.       });  

     

     

     

    下面是jQuery官方给出的完整的Ajax事件列表:

    ajaxStart(Global Event)
    This event is broadcast if an Ajax request is started and no other Ajaxrequests are currently running.

    beforeSend(Local Event)
    This event, which is triggered before an Ajax request is started, allows you tomodify the XMLHttpRequest object (setting additional headers, if need be.)

    ajaxSend(Global Event)
    This global event is also triggered before the request is run.

    success(Local Event)
    This event is only called if the request was successful (no errors from theserver, no errors with the data).

    ajaxSuccess(Global Event)
    This event is also only called if the request was successful.

    error(Local Event)
    This event is only called if an error occurred with the request (you can neverhave both an error and a success callback with a request).

    ajaxError(Global Event)
    This global event behaves the same as the local error event.

    complete(Local Event)
    This event is called regardless of if the request was successful, or not. Youwill always receive a complete callback, even for synchronous requests.

    ajaxComplete(Global Event)
    This event behaves the same as the complete event and will be triggered everytime an Ajax request finishes.

    ajaxStop(Global Event)
    This global event is triggered if there are no more Ajax requests beingprocessed.


    好了,下面开始说jQuery里面功能最强的Ajax请求方法 $.ajax(); 

     

    6.ajax方法

    jQuery.ajax( options ) : 通过HTTP 请求加载远程数据

    这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

    $.ajax()返回其创建的 XMLHttpRequest对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

    注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。


    当设置 datatype 类型为 'script' 的时候,所有的远程(不在同一个域中)POST请求都会转换为GET方式。

    $.ajax()只有一个参数:参数key/value 对象(json对象),包含各配置及回调函数信息。详细参数选项见下。

     

    jQuery1.2 中,您可以跨域加载 JSON数据,使用时需将数据类型设置为 JSONP。使用JSONP 形式调用函数时,如"myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。

    参数列表:

    参数名

    类型

    描述

    url

    String

    (默认: 当前页地址) 发送请求的地址。

    type

    String

    (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

    timeout

    Number

    设置请求超时时间(毫秒)。此设置将覆盖全局设置。

    async

    Boolean

    (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

    beforeSend

    Function

    发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
    function (XMLHttpRequest) {

                            this// the options for this ajax request

                            }

    cache

    Boolean

    (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。

    complete

    Function

    请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。
    function (XMLHttpRequest, textStatus) {

                            this// the options for this ajax request

                            }

    contentType

    String

    (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

    data

    Object,
    String

    发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

    dataType

    String

    预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

    "xml": 返回 XML 文档,可用 jQuery 处理。

    "html": 返回纯文本 HTML 信息;包含 script 元素。

    "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

    "json": 返回 JSON 数据 。

    "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

    error

    Function

    (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。
    function (XMLHttpRequest, textStatus, errorThrown) {

                            // 通常情况下textStatuserrorThown只有其中一个有值

                            this// the options for this ajax request

                            }

    global

    Boolean

    (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件

    ifModified

    Boolean

    (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

    processData

    Boolean

    (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

    success

    Function

    请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
    function (data, textStatus) {

                            // data could be xmlDoc, jsonObj, html, text, etc...

                            this// the options for this ajax request

                            }

    这里有几个Ajax事件参数:beforeSendsuccesscomplete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
    请认真阅读上面的参数列表,如果你要用jQuery来进行Ajax开发,那么这些参数你都必需熟知的。

     

    总结:jquery还有很多的内容这里就没有详细的介绍了,这个只有在后面的开发过程中慢慢的学习和总结,上面的例子的Demo下载地址是:

    http://download.csdn.net/detail/jiangwei0910410003/7514949

    里面除了上面的例子还有一些综合的案例演示

    展开全文
  • JS和JQUERY的区别

    万次阅读 多人点赞 2018-07-19 09:10:49
    jQuery与JavaScript与ajax三者的区别与联系 简单总结: 1、JS是一门前端语言。 2、Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。 3、jQuery是...

    jQuery与JavaScript与ajax三者的区别与联系

    简单总结:

    1、JS是一门前端语言。

    2、Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。

    3、jQuery是一个框架,它对JS进行了封装,使其更方便使用。jQuery使得JS与Ajax的使用更方便

     

    关系比喻:

    若把js比作木头,那么jquery就是木板(半成品)

    jQuery与ajax都是js的一个框架,各有各的功能,若js是父亲的话,jquery与ajax就是两个儿子 

     

     

    详细情况:

    1.javascript是一种在客户端执行的脚本语言。ajax是基于javascript的一种技术,它主要用途是提供异步刷新(只刷新页面的一部分,而不是整个页面都刷新)。一个是语言,一个是技术,两者有本质区别.
    2.javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript。
    
     

    1、JavaScript

     javaScript的简写形式就是JS,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能(其编写的程序可以被嵌入到HTML或XML页面中,并直接在浏览器中解释执行)。

    • 组成部分:

                 核心(ECMAScript)、文档对象模型(Document Object Model,简称DOM)、浏览器对象模型(Browser Object Model,简称BOM)

     

                                   

     

    • 描述:

     

          Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言,如今越来越广泛地使用于Internet网页制作上。

         Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加精彩的内容。

          Javascript短小精悍,又是在客户机上执行的,大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。

    2、Ajax

             AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词,是指一种创建交互式网页应用的网页开发技术。

    • 组成:

                基于XHTML和CSS标准的表示;

               使用Document Object Model进行动态显示和交互;

               使用XML和XSLT做数据交互和操作;

               使用XML HttpRequest与服务器进行异步通信;

               使用JavaScript绑定一切。

    • 描述:

                Ajax是结合了Java技术、XML以及JavaScript等编程技术,可以让开发人员构建基于Java技术的Web应用,并打破了使用页面重载的管理。

               Ajax技术使用非同步的HTTP请求,在Browser和Web Server之间传递数据,使Browser只更新部分网页内容而不重新载入整个网页。

              Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样,Web页面不用打断交互流程进行重新加裁,就可以动态地更新。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面

    3、jQuery

    jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

    • 特点:

               jQuery是当前很流行的一个JavaScript框架,使用类似于CSS的选择器,可以方便的操作HTML元素,拥有很好的可扩展性,拥有不少插件。 

    • 描述:

                对于程序员来说,简化javascript和ajax编程,能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。

               对于用户来说,改善了页面的视觉效果,增强了与页面的交互性,体验更绚丽的网页物资。

              javaScript框架实际上是一系列工具和函数。

    二、三者的关系

     

            下面我用一张导图来阐述这三者的关系:

     

     

    解释:

             javaScript是用于Web客户端开发的脚本语言,Ajax是基于JS语言,主要组合JS、CSS、XML三种技术的新技术,是用于创建交互式网页应用的网页开发技术。jQuery是JS的框架,基于JS语言,集合Ajax技术开发出来的JS库,封装JS和Ajax的功能,提供函数接口,大大简化了Ajax,JS的操作。

     

    项目中用jQuery比较多,具体讲讲他。

    jQuery能大大简化JavaScript程序的编写

    要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如:

    <script language="javascript" src="/js/jquery.min.js"></script>   //引用

    库文件既可以放在本地,也可以直接使用知名公司的CDN(CDN加载jquery的好处),好处是这些大公司的CDN比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。

    Google提供的

    http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

    jQuery官方的

    http://code.jquery.com/jquery-1.6.min.js

    jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下:

    1 定位元素 
    JS 
    document.getElementById("abc") 

    jQuery 
    $("#abc") 通过id定位 
    $(".abc") 通过class定位 
    $("div") 通过标签定位 

    需要注意的是JS返回的结果是这个元素,jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。 

    2 改变元素的内容 
    JS 
    abc.innerHTML = "test";                //现在的项目中有用到
    jQuery 
    abc.html("test"); 

    3 显示隐藏元素 
    JS 
    abc.style.display = "none";              //现在的项目中有用到
    abc.style.display = "block"; 

    jQuery 
    abc.hide(); 
    abc.show();

    abc.toggle();         //在显示和隐藏之间切换、
     


    4 获得焦点 

    JS和jQuery是一样的,都是abc.focus(); 

    5 为表单赋值 
    JS 
    abc.value = "test"; 
    jQuery 
    abc.val("test"); 

    6 获得表单的值 
    JS 
    alert(abc.value); 
    jQuery 
    alert(abc.val()); 

    7 设置元素不可用 
    JS 
    abc.disabled = true; 
    jQuery 
    abc.attr("disabled", true);

    8 修改元素样式
    JS
    abc.style.fontSize=size;
    jQuery
    abc.css('font-size', 20);

    JS
    abc.className="test";
    JQuery
    abc.removeClass(); 
    abc.addClass("test");

    判断复选框是否选中

    jQuery
    if(abc.attr("checked") == "checked")
    注意:网上说的.attr("checked") == true实际上不能用,上面这个测试过能用

    JS和JQUERY的区别

    ①.根据ID取元素

    {

    JS:取到的是一个DOM对象。

      例:var div = document.getElementByID("one");

    JQUERY:取到的是一个JQUERY对象。

      例:var div = $("#one");——括号里面是根据某个东西来找,相当于一个选择,如果我们要根据ID来找,在样式表里的ID是用#来表示的,所以在这里我们直接带入井号,整句的意思就是根据ID为one的来查找。

    }

    ②.根据class取元素,在数组里面如果要取DOM对象使用索引的方式,如果要取JQUERY对象使用eq()

    {

    JS:取到的是一个数组

      例:var div = document.ElementsByClassName("test");

    JQUERY:

      例:var div = $(".test");

    }

    ③.根据name取元素

    {

    JS:返回的是一个数组

      例:var bd = document.getElementsByName(uid);

    JQUERY:的方式是用 方括号,属性=一个值,不限制非要根据name来取值,JQUERY是根据属性来取元素

      例:$("[name='uid']");

    }

    ④.根据标签名取元素

    {

    JS:返回的也是一个数组

      例:var div = document.getElementsByTagName("div");

    JQUERY:和样式表里面给所有div加样式的方法一样,在双引号内直接写标签名

      例:$("div");

    }

    附:JQUERY的其他取值方式

    组合选取:var div = $("div span");——有很多组合方式

    *******************************************************************

    操作内容

      ①.非表单元素(如果是文本就用text方法,如果是html代码就用html方法)

        {

          例:div.text();——无参数的情况下是取值

          div.text("aaaa");——有参数的情况下是赋值

          div.html();——无参数的情况下是取值

          div.html("aaaa");——有参数的情况下是赋值

        }

      ②.表单元素

        {

          JS:div.value;——取值;div.value = xxx;——赋值

          JUQERY:div.val();——无参数是取值,有参数是赋值。

        }

    *******************************************************************

    操作属性

    JS里面用来操作属性的方法是

    div.setAttribute("","");——设置属性、修改属性

    div.removeAttribute("");——移除属性,引号里面写一个属性名

    div.getAttribute();——获取属性

    JQUERY里面用来操作属性的方法

    添加属性:div.attr("test","aa");——给这个attr方法加入参数,属性名叫做test,属性的值是aa

    移除属性:div.removeAttr("test");——移除test这条属性

    获取属性:div.attr("test");——在attr方法里面直接写入一个属性的名就可以了

    *******************************************************************

    操作样式

    JS里面操作样式的关键字是style

    例:div.style.backgroundColor = "red";——把这个div的背景色设置成为了红色

    JQUERY里面操作样式的关键字是css

    例:div.css("background-color","yellow");——把这个div的背景色变为黄色,在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化

      JS操作样式的方法只能获取内联样式,不能取内嵌的和外部的!!!!!

      JQUERY操作样式的方法可以是内联的也可以是内嵌的

     

    展开全文
  • jQuery中$()函数的7种用法汇总

    万次阅读 多人点赞 2018-05-15 13:44:39
    前言jQuery对象是一个类数组的对象,含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中,形成了统一(也是惟一)的操作入口。其中我们用的非常频繁的一个函数是$()或者说是jQuery...

    前言

    jQuery对象是一个类数组的对象,含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中,形成了统一(也是惟一)的操作入口。
    其中我们用的非常频繁的一个函数是$()或者说是jQuery(),当我们调用他的时候会根据传入的参数的不同而达到不同的效果。

    接下来会一一说一下这7中用法,欢迎大家指正其中不正确的地方。

    1 jQuery(selector,context)

    简要的说是:接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象。

    默认情况下,对匹配元素的查找都是从根元素ducument对象开始,也就是说查找范围是整棵文档树。但是如果给定了上下文context,则在指定上下文中查找

    html

        <span>body span</span>
        <span>body span</span>
        <span>body span</span>
        <div class="wrap">
            <span>wrap span</span>
            <span>wrap span</span>
            <span>wrap span</span>
        </div>

    js

        $('span').css('background-color','red');//所有的span都会变红
        $('span','.wrap').css('background-color','red');//只有.wrap中的span会变红

    2 jQuery(html,ownerDocument) 、jQuery(html,props)

    用所提供的html代码创建DOM元素

    对于jQuery(html,ownerDocument),参数html可以是单标签或者是多层标签之间的嵌套。第二个参数用于创建新DOM元素的文档对象,如果不传入则默认为当前的文档对象。

        //单标签  两种方式都可以往body中插入div
        /*   
         *   1  $('<div>').appendTo('body');
         *   2  $('<div></div>').appendTo('body');  
         */
        // 多标签嵌套
         $('<div><span>dfsg</span></div>').appendTo('body');
        

    另外:对于单标签,jQuery(html,props),props是一个包含属性和事件的普通的对象,用法如下。(该用法有待考证,请知道这一用法的童鞋告知一下,感激不尽)

            $('<div>我是div</div>',{
                title:'我是新的div',
                click:function(){
                    $(this).css('color','red');
                    console.log(this);
                }
            }).appendTo('body');
    

    3 jQuery(element or elementsArray)

    如果传入一个DOM元素或者是DOM元素的数组,则把DOM元素封装到jQuery对象中并返回。

    html

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

    js

             // 传入DOM元素
             $('li').each(function(index,ele){
                    $(ele).on('click',function(){
                        $(this).css('background','red');//这里的DOM元素就是this
                    })
            })
            
            //传入DOM数组
            var aLi=document.getElementsByTagName('li');
                aLi=[].slice.call(aLi);//集合转数组
                var $aLi=$(aLi);
                $aLi.html('我是jQuery对象');//所有的li的内容都变成'我是jQuery对象'
                
    
             

    4 jQuery(object)

    如果传入的是一个object对象,则把该对象封装到jQuery对象中并返回。

        var obj={name:'谦龙'};
        var $obj=$(obj);//封装成jQuery对象
        //绑定自定义事件
        $obj.on('say',function(){
            console.log(this.name)//输出谦龙
        });
        $obj.trigger('say');

    5 jQuery(callback)

    当传进去的参数是函数的时候,则在document对象上绑定一个ready事件监听函数,当DOM结构加载完成的时候执行

        $(function(){
        
        })
        //以上代码和下面的效果是一样的
        $(document).ready(function(){
            ...//代码
        })
    

    6 jQuery(jQuery object)

    当传进去的参数是一个jQuery对象的时候,则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素

        var aLi=$('li');
        var copyLi=$(aLi);//创建一个aLi的副本
        console.log(aLi);
        console.log(copyLi);
        console.log(copyLi===aLi);
    

    图片描述

    7 jQuery()

    如果不传入任何的参数,则返回一个空的jQuery对象,属性length为0

    注意这个功能可以用来复用jQuery对象,例如可以创建一个空的jQuery对象,然后在需要的时候先手动修改其中的元素,然后在调用jQuery方法。从而避免重复创建jQuery对象。

    展开全文
  • Jquery下载

    2017-09-13 11:13:28
    jquery-3.2.1 123
  • jQuery

    千次阅读 多人点赞 2018-08-20 16:23:45
    jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件。 代码容错性差。 浏览器兼容性问题。 书写很繁琐,代码量多。 ...
  • Jquery(终极完整版)

    2020-07-22 16:06:44
    Jquery 01Jquery概念 【1】概念: 一个JavaScript框架。简化JS开发 【2】jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨 是...
  • jQuery 中的$符号的详谈

    万次阅读 2018-12-15 16:49:32
    对于刚刚学习jQuery的人来讲,发现到处都在使用 $ 符合。有时候很是不理解。于是特总结出这篇 关于 $ 的具体含义。  当我们想要知道一个东西具体是上面的时候,上面类型的时候第一反应是上面?毫无疑问 ,当然是...
  • JQuery安装与下载教程

    万次阅读 多人点赞 2019-05-25 22:21:17
    jQuery安装与下载 JQuery 是一个javaScript库,是一个轻量级的"写的少,做的多"的JavaScript库。 jQuery 极大地简化javaScript编程 --juery相比js优点: jquery的onload加载事件速度更快,并且多个加载并行 ...
  • 笔者说:“ 以下代码为初入C语言的笔记与作业,谨以此记录我的C学习生涯,重要之处皆有注释,若有疑问大可评论区留言。” 本次代码来源@flczzhang,笔者写本段代码时运用两个数组,得以解决,而这位大佬用同一个字符...
  • #include <stdio.h> int main() { char s[1000]; int i,j; scanf("%s",s);//读入字符串(不需要&) for(i = j = 0; s[i]; i ++)//条件时s[i],即会遍历完整个字符串s ...逻辑与)更加...
  • jQuery 完整 ajax示例

    万次阅读 多人点赞 2019-06-17 18:20:50
    $(function(){ //请求参数 var list = {}; // $.ajax({ //请求方式 type : "POST", //请求的媒体类型 contentType: "application/json;chars...
  • jQueryAjax实例(附完整代码)

    万次阅读 多人点赞 2019-02-02 13:53:25
    目录写在前边什么是AjaxAjax基本结构实例实例1实例2小结 写在前边 作为一个前端刚入门没多久的小白,想在这里分享一下我的学习内容,就算是学习笔记了。因为前端的大部分学习都是通过网站上的教程,所以遇到不懂得...
  • jQuery发送Ajax请求

    万次阅读 多人点赞 2018-04-23 01:21:16
    Ajax用于浏览器与服务器通信而无需刷新整个页面,服务器将不再返回整个页面,而是返回少量...我们可以使用JavaScript扩展对象XMLHttpRequest实现Ajax,对于这种方法在这里不做介绍,下面直接了解jQuery实现Ajax的几种
  • JavaScript、AjaxjQuery的关系

    万次阅读 多人点赞 2014-07-31 10:15:37
    简单总结: 1、JS是一门前端语言。 2、Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间...jQuery使得JS与Ajax的使用更方便 详细情况: Actually only one of them is a programming lan
  • jQuery学习之旅 Item10 ajax快餐

    千次阅读 2015-10-28 19:11:48
    本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式.2. 前言Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会...
  • AjaxJQuery

    千次阅读 2019-04-06 10:46:32
    Ajax简介 Ajax的全称是:Asynchronous JavaScript And XML,指的是异步 JavaScript 及 XML(其实主要用的就是javascript技术),它不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的...
  • jquery与django实现ajax通信

    万次阅读 2015-12-14 10:28:05
    在浏览器中输入url后,浏览器就帮助我们完成get请求的发送与返回文件的解析,并刷新更新界面。但是如果我们不想更新界面,只想发送一个get或者post文件把数据(请求...实现ajax有两种方法,一种是用原生的javascript发
  • 本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每...
  • JQuery 中使用 Ajax 发送 GET、POST 请求

    万次阅读 2019-05-11 14:18:24
    What is Ajax ? Ajax = 异步 JavaScript 和 XML 一种用于创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步...How to use Ajax in JQuery ? 1. example ????!!! GET ????: ...
  • jQuery Ajax--Ajax事件

    千次阅读 2018-03-14 15:33:31
    Ajax事件 函数列表 函数 说明 ajaxStart() 用于为AJAX请求的ajaxStart事件绑定处理函数。 ajaxStop() 用于为AJAX请求的ajaxStop事件绑定处理函数 ajaxSend() 用于设置当AJAX请求即将被发送时...
  • I have done some research and I have concluded that using asynchronous jQuery Ajax requests would be the best to load them all at the same time as fast as possible. <p>Here is my code for this so ...
  • jqueryajax处理跨域的三大方式

    万次阅读 2019-03-11 10:00:48
    由于JS同源策略的影响,因此js只能访问同域名下的文档。因此要实现跨域,一般有以下几个方法: 一、处理跨域的方式: 1.代理 2.XHR2 ...但ie10以下不支持 ...只需要在服务端填上响应头: ...Access-Contr...
  • jQuery ajax - ajax() 方法

    2015-05-26 19:51:49
     转自:...jQuery ajax - ajax() 方法 jQuery Ajax 参考手册 实例 通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ $("#b01").click(function(){
  • jquery Ajax 全局调用封装

    万次阅读 2016-06-02 15:03:09
    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你...虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人】jQuery Ajax通用js封装第一步:引入jQuery库第二步:开发Ajax封装类,已测试
  • .net MVC中Jquery实现AJAX详解

    千次阅读 热门讨论 2017-01-24 12:52:25
    声明 这是我一边学,一边写的: 好处是:我从新手的角度...Ajax本质是一个web数据请求的手段,既然是请求,也就是有请,有求。也就是客户端(html页面)向服务器发送请求获得数据的手段。 世间万物万变不离其宗...
  • JQueryAjax的操作完整例子

    万次阅读 多人点赞 2018-01-20 10:30:35
    Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现;...
  • jQuery中的Ajax几种请求方法

    万次阅读 2010-05-24 12:52:00
    废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url,

空空如也

1 2 3 4 5 ... 20
收藏数 1,381,782
精华内容 552,712
关键字:

jquery