jquery_jquery1 - CSDN
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入门到精通

    2018-10-22 21:38:05
    jquery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。 使用户能更方便地处理HTML documents、... 本课程以jquery为核心,系统全面的掌握 jQuery Ajax jQuery常用插件 jQuery UI jQuery Mobile
  • 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

    展开全文
  • 详细介绍了一个js类库的实战应用,这里主要讲解jquery。是一个可以很容易就做各种网页特效的面相对象的方法函数集合类库。
  • JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能,能完成基本的网页特效!
  • JQuery技术详解(一)

    2018-10-16 13:53:27
    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

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

    展开全文
  • .jQuery详细介绍与使用

    1. jQuery介绍与基本使用

    文档:https://jquery.cuishifeng.cn/index.html

    jQuery简介

    • jQuery由美国人John Resig2006年创建
    • jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装
    • 它的设计思想是write less,do more

     初识jQuery:

    实现隔行变色效果,只需一句关键代码
    • $("tr:even").css("background-color","#ccc");

    jQuery能做什么:

    • 访问和操作DOM元素
    • 控制页面样式
    • 对页面事件进行处理
    • 扩展新的jQuery插件
    • Ajax技术完美结合

    注意:jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率

    jQuery的优势:

    • 体积小,压缩后只有100KB左右
    • 强大的选择器
    • 出色的DOM封装
    • 可靠的事件处理机制
    • 出色的浏览器兼容性
    • 使用隐式迭代简化编程
    • 丰富的插件支持

     获取jQuery:

    进入jQuery官网:http://jquery.com

    jQuery库文件:

    • jQuery库分开发版和发布版

    • 在页面中引入jQuery
      • <script src="js/jquery-1.8.3.js" type="text/javascript"></script>

    jQuery基本语法:

    使用jQuery弹出提示框

    $(document).ready()

    • $(document).ready()window.onload类似,但也有区别

    DOM对象和jQuery对象

    • DOM对象:直接使用JavaScript获取的节点对象
    var objDOM=document.getElementById("title"); 
    
    var objHTML=objDOM.innerHTML;  
    
    • jQuery对象:使用jQuery包装DOM对象后产生的对象,它能够使用jQuery中的方法
    $("#title").html( );
    等同于
    document.getElementById("title").innerHTML;

    注意:DOM对象和jQuery对象分别拥有一套独立的方法,不能混用

     jQuery语法结构

    语法:$(selector).action() ;

    • 工厂函数$():将DOM对象转化为jQuery对象
    • 选择器 selector:获取需要操作的DOM 元素
    • 方法action()jQuery中提供的方法,其中包括绑定事件处理的方法

    示例:$("#current").addClass("current");     

     jQuery代码风格

    • $”等同于“ jQuery
    $(document).ready()=jQuery(document).ready()
    $(function(){...})=jQuery (function(){...})      
    
    •  操作连缀书写
     $("h2").css("background-color","#CCFFFF").next().css("display","block");
    

    常用语法举例

     DOM对象转jQuery对象

    • 使用$()函数进行转化:$(DOM对象)
    var txtName =document.getElementById("txtName"); //DOM对象
    
    var $txtName =$(txtName);   //jQuery对象
    

    注意:

    • jQuery对象命名一般约定以$开头
    • 在事件中经常使用$(this)this是触发该事件的对象 

     

     jQuery对象转DOM对象

    • jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象
    var $txtName =$ ("#txtName");      //jQuery对象
    
    var txtName =$txtName[0];            //DOM对象
    
    • 通过get(index)方法得到相应的DOM对象
    var $txtName =$("#txtName");        //jQuery对象
    
    var txtName =$txtName.get(0);       //DOM对象
    

    总结:

    • jQuery的基本语法结构是
      $(selector).action() ;
    • 常用选择器
    • ID选择器
    • 标签选择器
    • 类选择器
    • 设置样式的方法
    • css()
    • addClass()
    • DOM对象和jQuery对象可以相互转化

    代码:

    <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jQuery的简洁入口
            $(function(){
                $("h1").css("color","green");
                //获取id属性值为bid的按钮并绑定点击事件。
                $("#bid").click(function(){
                    alert("ok");
                });
            });
            /*
            //jQuery的标准入口
            $(document).ready(function(){
                //获取h1标签,并设置css样式
                $("h1").css("color","blue");
            });
            /*
            //当前页面加载完成后执行
            window.onload = function(){
                //使用jquery编写js程序
                //获取h1标签,并设置css样式
                $("h1").css("color","red");
                //获取id属性值为bid的按钮并绑定点击事件。
                $("#bid").click(function(){
                    alert("ok");
                });
            }
            */
        </script>
    </head>
    <body>
        <h1>jQuery实例--基本使用</h1>
        <button id="bid">点击我</button>
    </body>

     

    2、jQuery选择器

    文档:https://css.cuishifeng.cn/

    • jQuery选择器类似于CSS选择器,用来选取网页中的元素
      $("h3").css("background","#09F");
    • 获取并设置网页中所有<h3>元素的背景
    • “h3”为选择器语法,必须放在$()
    • $(“h3”)返回jQuery对象
    • .css()是为jQuery对象设置样式的方法

     jQuery选择器分类

    • jQuery选择器功能强大,种类也很多,分类如下:
    • CSS选择器
    • 基本选择器
    • 层次选择器
    • 属性选择器
    • 过滤选择器
    • 基本过滤选择器
    • 可见性过滤选择器

    2.1 基本选择器

    • 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

    名称

    语法构成

    描述

    示例

    标签选择器

    element

    根据给定的标签名匹配元素

    $("h2" )选取所有h2元素

    类选择器

    .class

    根据给定的class匹配元素

    $(" .title")选取所有classtitle的元素

    ID选择器

    #id

    根据给定的id匹配元素

    $(" #title")选取idtitle的元素

    并集选择器

    selector1,selector2,...,selectorN

    将每一个选择器匹配的元素合并后一起返回

    $("div,p,.title" )选取所有divp和拥有classtitle的元素

    交集选择器

    element.classelement#id

     

    匹配指定classid的某元素或元素集合

    $("h2.title")选取所有拥有classtitleh2元素

    全局选择器

    *

    匹配所有元素

    $("*" )选取所有元素

     

    标签选择器

    • 标签选择器根据给定的标签名匹配元素

     

    类选择器

    • 类选择器根据给定的class匹配元素

    ID选择器

    • ID选择器根据给定的id匹配元素

    并集选择器

    • 并集选择器用来合并元素集合

    交集选择器

    • 交集选择器可以对元素集合根据classid再筛选

    全局选择器

    • 全局选择器可以获取所有元素

    <body>
        <h1 id="hid">jQuery实例--基本选择器</h1>
        <ul>
            <li>aaa</li>
            <li class="cc">bbb</li>
            <li>ccc</li>
        </ul>
        <h2>aaaaaaaaaa</h2>
        <ol>
            <li class="cc">dddd</li>
            <li>eeee</li>
        </ol>
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                // document.getElementById("hid"); //获取id值为hid元素节点
                //等价于上面语句,获取id值为hid元素节点,并设置css样式
                $("#hid").css("color","blue");
    
                //document.getElementsByTagName("li"); //获取网页中所有li元素节点
                //获取网页中所有li元素节点,并设置css样式
                //$("li").css("color","red");
                
                //获取class属性值为cc所有元素节点,并设置css样式
                $(".cc").css("color","red");
    
                //选择器组,统一设置指定css样式
                $("h1,h2,h3,h4,h5,h6").css("background-color","#ddd");
            });
           
        </script>
    </body>

    2.2 层次选择器

    • 层次选择器通过DOM 元素之间的层次关系来获取元素

    名称

    语法构成

    描述

    示例

    后代选择器

    ancestor descendant

    选取ancestor元素里的所有descendant(后代)元素

    $("#menu span" )选取#menu下的<span>元素

    子选择器

    parent>child

    选取parent元素下的child(子)元素

    $(" #menu>span" )选取#menu的子元素<span>

    相邻元素
    选择器

    prev+next

    选取紧邻prev元素之后的next元素
    (后面紧跟的兄弟节点)

    $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>

    同辈元素
    选择器

    prev~sibings

    选取prev元素之后的所有siblings元素
    (后面所有的兄弟节点)

    $(" h2~dl " )选取<h2>元素之后所有的同辈元素<d>

     

     

     

     

     

     

     

     

    后代选择器

    • 后代选择器用来获取元素的后代元素

    子选择器

    • 子选择器用来获取元素的子元素

    相邻选择器

    • 相邻选择器用来选取紧邻目标元素的下一个元素

    同辈选择器

    • 同辈选择器用来选取目标元素之后的所有同辈元素

    <body>
        <h1 id="hid">jQuery实例--层级选择器</h1>
        <ul>
            <li>aaaaaa</li>
            <li>bbbbbb</li>
            <li>cccccc</li>
            <ol>
                <li>ddddd</li>
                <li>ddddd</li>
                <li>ddddd</li>
            </ol>
        </ul>
        <li>ccccc</li>
        <li>ddddd</li>
        <li>eeeee</li>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取ul中所有子元素节点li(包括后代节点),并设置样式
                $("ul li").css("color","red"); 
                
                //获取ul中所有直接子元素节点li(包括后代节点),并设置样式
                $("ul>li").css("color","red");
    
                //获取ul同级紧邻后面的第一个兄弟节点li,并设置样式
                $("ul+li").css("color","red");
    
                //获取ul后面所有同级兄弟li元素节点,并设置样式
                $("ul~li").css("color","red");
            });
           
        </script>
    </body>

    2.3  基本筛选器(基本过滤选择器)

    • 过滤选择器通过特定的过滤规则来筛选元素
    • 语法特点是使用“:”,如使用$(“li:first”)来选取第一个li元素
    • 主要分类如下:
    • 基本过滤选择器
    • 可见性过滤选择器
    • 表单对象过滤选择器
    • 内容过滤选择器、子元素过滤选择器……
    • 基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元

    名称

    语法构成

    描述

    示例

    基本过滤选择器

    :first

    选取第一个元素

    $(" li:first" )选取所有<li>元素中的第一个<li>元素

    :last

    选取最后一个元素

    $(" li:last" )选取所有<li>元素中的最后一个<li>元素

    :even

    选取索引是偶数的所有元素
    index0开始)

    $(" li:even" )选取索引是偶数的所有<li>元素

    :odd

    选取索引是奇数的所有元素
    index0开始)

    $(" li:odd" )选取索引是奇数的所有<li>元素

     

     

     

     

     

     

     

    • 基本过滤选择器可以根据索引的值选取元素

     

    名称

    语法构成

    描述

    示例

    基本过滤选择器

    :eq(index)

    选取索引等于index的元素
    index0开始)

    $("li:eq(1)" )选取索引等于1<li>元素

    :gt(index)

    选取索引大于index的元素
    index0开始)

    $(" li:gt(1)" )选取索引大于1<li>元素
    (注:大于
    1,不包括1

    :lt(index)

    选取索引小于index的元素
    index0开始)

    $(“li:lt(1)” )选取索引小于1<li>元素
    (注
    :小于1,不包括1

     

     

     

     

     

     

    • 基本过滤选择器还支持一些特殊的选择方式

    名称

    语法构成

    描述

    示例

    基本过滤选择器

    :not(selector)

    选取去除所有与给定选择器匹配的元素

    $(" li:not(.three)" )选取class不是three的元素

    :header

    选取所有标题元素,如h1~h6

    $(":header" )选取网页中所有标题元素

    :focus

    选取当前获取焦点的元素

    $(":focus" )选取当前获取焦点的元素

    <body>
        <h1 id="hid">jQuery实例--基本筛选器</h1>
        <ul>
            <li>aaaaaa</li>
            <li class="cc">bbbbbb</li>
            <li>cccccc</li>
            <li class="cc">ddddd</li>
            <li>eeeee</li>
            <li>ffffff</li>
        </ul>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取所有li节点并设置样式
                $("li").css("color","red");
    
                //获取第一个li节点并设置样式
                $("li:first").css("color","red");
    
                //获取最后一个li节点并设置样式
                $("li:last").css("color","red");
    
                //获取偶数索引号对应的所有li节点并设置样式
                $("li:even").css("color","red");
    
                //获取奇数索引号对应的所有li节点并设置样式
                $("li:odd").css("color","red");
    
                //获取class属性值为cc的所有li节点并设置样式
                $("li.cc").css("color","red");
    
                //获取class属性值不为cc的所有li节点并设置样式
                $("li:not(.cc)").css("color","red");
    
                //获取索引位置为2的li节点并设置样式
                $("li:eq(2)").css("color","red");
    
                //获取前2个li节点并设置样式
                $("li:lt(2)").css("color","red");
    
                //获取所有li节点并添加鼠标移入和移出事件
                $("li").mouseover(function(){
                    $(this).animate({paddingLeft:"+=20"},800);
                }).mouseout(function(){
                    $(this).animate({paddingLeft:"-=20"},500);
                });
            });
           
        </script>
    </body>

     

    2.4 内容选择器和可见选择器

    • 内容选择器根据要求选择内容符合的元素
    名称 语法构成 描述 示例
    内容选择器 :contains(text) 匹配包含给定文本的元素 $("td:empty")查找所有包含 "John" 的 div 元素
    :empty 匹配所有不包含子元素或者文本的空元素 $(" li:last" )查找所有不包含子元素或者文本的空元素
    :has(selector) 匹配含有选择器所匹配的元素的元素 $("div:has(p)").addClass("test");给所有包含 p 元素的 div 元素添加一个 text 类
    :parent 匹配含有子元素或者文本的元素 $("td:parent")查找所有含有子元素或者文本的 td 元素
    • 可见性过滤选择器可以通过元素显示状态来选取元素

    名称

    语法构成

    描述

    示例

    可见选择器

    :visible

    选取所有可见的元素

    $(":visible" )选取所有可见的元素

    :hidden

    选取所有隐藏的元素

    $(":hidden" ) 选取所有隐藏的元素

     

     

     

     

    <body>
        <h1 id="hid">jQuery实例--内容选择器</h1>
        <div>John Resig</div>
        <div>George Martin</div>
        <div>Malcom John Sinclair</div>
        <div>J. Ohn</div>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                $("div:contains('John')").css("color","red");
            });
           
        </script>
    </body>

     

    2.5 属性选择器

    • 属性选择器通过HTML元素的属性来选择元素

     

    名称

    语法构成

    描述

    示例

    属性选择器

    [attribute]

    选取包含给定属性的元素

    $(" [href]" )

    选取含有href属性的元素

    [attribute=value]

    选取等于给定属性是某个特定值的元素

    $(" [href ='#']" )

    选取href属性值为“#”的元素

    [attribute !=value]

    选取不等于给定属性是某个特定值的元素

    $(" [href !='#']" )

    选取href属性值不为“#”的元素

    属性选择器

    [attribute^=value]

    选取给定属性是以某些特定值开始的元素

    $(" [href^='en']" )

    选取href属性值以en开头的元素

    [attribute$=value]

    选取给定属性是以某些特定值结尾的元素

    $(" [href$='.jpg']" )

    选取href属性值以.jpg结尾的元素

    [attribute*=value]

    选取给定属性是以包含某些值的元素

    $(" [href* ='txt']" )

    选取href属性值中含有txt的元素

    [selector] [selector2] [selectorN]

    选取满足多个条件的复合属性的元素

    $("li[id][title=新闻要点]" )

    选取含有id属性和title属性为新闻要点的<li>元素

    1
    <body>
        <h1 id="hid">jQuery实例--属性选择器</h1>
        <form>
            姓名:<input type="text" name="uname" value="zhangsan"/><br/><br/>
            年龄:<input type="text" name="age"/><br/><br/>
            邮箱:<input type="text" name="email"/><br/><br/>
            电话:<input type="text" name="phone"/><br/><br/>
            地址:<input type="text" name="address"/><br/><br/>
        </form>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取所有含有value属性的input元素标签,并设置样式
                //$("input[value]").css("border","1px solid red");
    
                //获取name属性值为phone的input元素标签,并设置样式
                //$("input[name='phone']").css("border","1px solid red");
    
                //获取name属性值不为phone的input元素标签,并设置样式
                //$("input[name!='phone']").css("border","1px solid red");
    
                //获取name属性值是以a字符开头的所有input元素标签,并设置样式
                //$("input[name^='a']").css("border","1px solid red");
    
                //获取name属性值是以e字符结尾的所有input元素标签,并设置样式
                //$("input[name$='e']").css("border","1px solid red");
    
                //获取name属性值中含有m字符的所有input元素标签,并设置样式
                $("input[name*='m']").css("border","1px solid red");
            });
           
        </script>
    </body>

    2.6 子元素选择器

    名称 语法构成 描述 示例
    子元素选择器 :first-child 匹配所给选择器( :之前的选择器)的第一个子元素 $("ul li:first-child")在每个 ul 中查找第一个 li
    :last-child 匹配最后一个子元素 $("ul li:last-child")在每个 ul 中查找最后一个 li
    :nth-child 匹配其父元素下的第N个子或奇偶元素(index从1开始) $("ul li:nth-child(2)")在每个 ul 查找第 2 个li
       
    <body>
        <h1 id="hid">jQuery实例--子元素选择器</h1>
        <ul>
            <li>aaaaaaa</li>
            <li>bbbbbbb</li>
            <li>ccccccc</li>
            <li>ddddddd</li>
            <li>eeeeeee</li>
        </ul>
        <ul>
            <li>1111111</li>
            <li>2222222</li>
            <li>3333333</li>
            <li>4444444</li>
            <li>5555555</li>
        </ul>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取每组ul中的第一个li节点并添加样式
                //$("ul li:first-child").css("color","red");
    
                //获取每组ul中的最后一个li节点并添加样式
                //$("ul li:last-child").css("color","red");
    
                //获取每组ul中的第三个li节点并添加样式
                $("ul li:nth-child(3)").css("color","red");
            });
           
        </script>
    </body>

    2.7 表单选择器

    获取对应的type:

    语法

    描述

    示例

    :input

    匹配所有inputtextareaselectbutton 元素

    $("#myform  :input")

    选取表单中所有的inputselectbutton元素

    :text

    匹配所有单行文本框

    $("#myform  :text")

    选取email 和姓名两个input 元素

    :password

    匹配所有密码框

    $("#myform  :password" )

    选取所有<input type="password" />元素

    :radio

    匹配所有单项按钮

    $("#myform  :radio")

    选取<input type="radio" />元素

    :checkbox

    匹配所有复选框

    $(" #myform  :checkbox " )选取

    <input type="checkbox " />元素

    :submit

    匹配所有提交按钮

    $("#myform  :submit " )选取

    <input type="submit " />元素

    名称 语法构成 描述 示例

    表单对

    象属性

    :enabled 匹配所有可用元素 $("input:enabled")查找所有可用的input元素
    :disabled 匹配所有不可用元素 $("input:disabled")查找所有不可用的input元素
    :checked

    匹配所有选中的被选中元素(复选框、单选框等,select中的option),

    对于select元素来说,获取选中推荐使用 :selected

    $("input:checked")查找所有选中的复选框元素
    :selected 匹配所有选中的option元素 $("select option:selected")查找所有选中的选项元素
    <body>
        <h1 id="hid">jQuery实例--表单中选择器</h1>
        <ul>
            <li><input type="checkbox" name="likes[]" value="1"/> aaaaaaa</li>
            <li><input type="checkbox" name="likes[]" value="2"/> bbbbbbb</li>
            <li><input type="checkbox" name="likes[]" value="3"/> ccccccc</li>
            <li><input type="checkbox" name="likes[]" value="4"/> ddddddd</li>
            <li><input type="checkbox" name="likes[]" value="5"/> eeeeeee</li>
        </ul>
       <button onclick="doFun()">获取</button>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            function doFun(){
                //获取所有多选框中选择中的元素节点
                //var list = $("input[type='checkbox']:checked");
                var list = $(":checkbox:checked");
                alert(list.length);
                
                //获取li元素节点(条件是里面的多选框必须选中),并设置样式
                $("li:has(input:checked)").css("color","red");
            }
           
        </script>
    </body>

    注意: 

    特殊符号的转义

    • 选择器中的特殊符号需要转义,在如下html代码中
    <div id="id#a">aa</div>
    
    <div id="id[2]">cc</div>
    
    • 获取这两个元素的选择器:

    选择器中的空格

    • }选择器的书写规范很严格,多一个空格或少一个空格,都会影响选择器的效果

    3、 jQuery属性

    3.1 属性操作

    获取与设置节点属性

    • attr() 和 prop()用来获取与设置元素属性
    • prop()不可以添加不能存在的属性,只支持且相对attr()更适合HTML DOM的属性操作

    • removeAttr()用来删除元素的属性

    <body>
        <h1 id="hid">jQuery实例--jQuery属性操作</h1>
        
        <a id="aid" href="http://www.baidu.com" title="百度链接">百度</a><br/><br/>
    
        <button onclick="dofun()">更改链接属性</button>
        
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            function dofun(){
                var a = $("#aid");
                console.log(a.attr("href")); //获取
                console.log(a.prop("href")); //获取
                console.log(a.attr("title"));
                console.log(a.prop("title"));
                a.attr("href","http://news.baidu.com"); //添加或更改
                a.removeAttr("title"); //删除属性
                //a.attr("aa","bb"); //添加属性
                // a.prop("aa","bb"); //添加属性 prop方法不可以添加不能存在的属性
                a.prop("title","百度新闻"); //只支持HTML DOM的属性操作
               
            }
           
        </script>
    </body>

    3.2 CSS类操作

    追加和移除样式

    • 追加样式:
      • addClass(class)addClass(class1 class2 … classN)
    • 移除样式
      • removeClass(“style2 ”)removeClass("style1 style2 ")

    切换样式

    • toggleClass()模拟了addClass()removeClass()实现样式切换的过程
      • toggleClass(class)
    <script>
            //jquery入口
            $(function(){
                //获取上面所有的li节点并添加点击事件
                $("ul.uu li").click(function(){
                    //切换class类属性
                    $(this).toggleClass("active");
                    /*
                    //判断当前节点li是否含有active class属性
                    if($(this).hasClass('active')){
                        //删除class类属性
                        $(this).removeClass("active");
                    }else{
                        //添加class类属性
                        $(this).addClass("active");
                    }
                    */
                });
            });
           
        </script>

    3.3 html文本与值操作

    HTML代码操作html()

    • html()可以对HTML代码进行操作,类似于JS中的innerHTML

    文本操作text()

    • text()可以获取或设置元素的文本内容

    html()text()的区别

    语法

    参数

    功能

    html()

    无参数

    用于获取第一个匹配元素的HTML内容或文本内容

    html(content)

    content参数为元素的HTML内容

    用于设置所有匹配元素的HTML内容或文本内容

    text()

    无参数

    用于获取所有匹配元素的文本内容

    text (content)

    content参数为元素的文本内容

    用于设置所有匹配元素的文本内容

     Value值操作val()

    • val()可以获取或设置元素的value属性值

    <body>
        <h1 id="hid">jQuery实例--jQuery属性--HTML代码/文本/值的操作</h1>
        <ul>
            <li class="c1"><a href="http://www.baidu.com">百度</a></li>
            <li class="c2"><a href="http://www.163.com">网易</a></li>
            <li class="c3"><a href="http://www.qq.com">腾讯</a></li>
            <li class="c4"><a href="http://www.sina.com">新浪</a></li>
        </ul>
        搜索:<input type="text" name="kw" value="html"/> <button>搜索</button>
        <br/><br/>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                console.log($("li.c1").html()); //类似于js中的innerHTML
                console.log($("li.c2").text());
                $("li.c3").html('<a href="http://www.qq.com">腾讯2</a>');
                $("li.c4").text('<a>新浪2</a>');
    
                console.log($("input[name='kw']").val());
                $("input[name='kw']").val('CSS样式');
    
            });
           
        </script>
    </body>

    案例:全选/全不选

    • <body>
          <h1 id="hid">jQuery实例--jQuery属性操作--全选/全不选</h1>
          <ul class="uu">
              <li><input type="checkbox" name="likes[]" value="1"/> 苹果</li>
              <li><input type="checkbox" name="likes[]" value="2"/> 橘子</li>
              <li><input type="checkbox" name="likes[]" value="3"/> 哈密瓜</li>
              <li><input type="checkbox" name="likes[]" value="4"/> 菠萝</li>
              <li><input type="checkbox" name="likes[]" value="5"/> 芒果</li>
          </ul>
          <button>全选</button>
          <button>全不选</button>
          <button>反选</button>
      
          <script src="./jquery-3.5.0.min.js"></script>
          <script>
              //jquery入口
              $(function(){
                  //获取按钮并绑定点击事件
                  $("button").click(function(){
                      //判断按钮上的文本,指定对应的操作
                      switch($(this).html()){
                          case "全选":
                              //获取所有多选框并设置选中
                              $("ul.uu input:checkbox").prop("checked",true);
                              break;
                          case "全不选":
                              $("ul.uu input:checkbox").prop("checked",false);
                              break;
                          case "反选":
                              $("ul.uu input:checkbox").each(function(){
                                  $(this).prop("checked",!$(this).prop("checked"));
                              });
                              break;
                      }
                  });
              });
             
          </script>
      </body>

    4、CSS样式操作

    直接设置样式值

    • 使用css()为指定的元素设置样式值

    例如:

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery实例</title>
        <style>
            *{padding:0px;margin:0px;}
            #outer{background-color:#ddd;width:400px;height:400px;margin:50px;padding:20px;position:relative;}
            #inner{background-color:#fc0;width:200px;height:200px;position:absolute;}
        </style>
    </head>
    <body>
        <h1 id="hid">jQuery实例--jQuery中的CSS样式操作</h1>
        <div id="outer">
            <div id="inner"></div>
        </div>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取标题并设置css样式
                //$("#hid").css("color","red"); //单个属性设置
                $("#hid").css({"color":"green","background-color":"#ddd"});
                console.log($("#hid").css("color")); //获取css属性
    
                //获取div层的位置,即相对屏幕的位置
                var offset = $("#inner").offset();
                console.log("获取div层的位置:"+offset.left,offset.top);
    
                //获取偏移位置,position需要提前定位,否则和offset方式一样
                var position = $("#inner").position();
                console.log(position.left,position.top);
    
                //获取尺寸
                console.log($("#inner").width(),$("#inner").height());
                $("#inner").width(300)
            });
           
        </script>
    </body>

    5、 jQuery节点遍历

    语法

    参数

    功能

    each(callback)

    对于每个匹配的元素所要执行的函数

    $("img").each(function(i){ this.src = "test" + i + ".jpg"; });

    迭代两个图像,并设置它们的 src 属性。

    注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

     

     

     

     

    <body>
        <h1 id="hid">jQuery实例--节点遍历操作</h1>
        <ul>
            <li>2</li>
            <li>1</li>
            <li>10</li>
            <li>18</li>
            <li>8</li>
        </ul>
        <button>乘以2</button>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
               $("button").click(function(){
                   //$("li").css("color","red");
                   //获取li节点并遍历执行操作
                   $("li").each(function(i){
                        //alert(i); //索引位置
                        $(this).html($(this).html()*2);
                   });
               });
    
               /*
               //统一绑定点击事件
               $("li").click(function(){
                   alert($(this).html());
               });
               */
            });
        </script>
    </body>

     

    6、jQuery文档处理

    6.1 元素插入

    • 元素内部插入子节点

    语法

    功能

    append(content)

    $(A).append(B)表示将B追加到A

    $("ul").append($newNode1);

    appendTo(content)

    $(A).appendTo(B)表示把A追加到B

    $newNode1.appendTo("ul");

    prepend(content)

    $(A). prepend (B)表示将B前置插入到A

    $("ul"). prepend ($newNode1);

    prependTo(content)

    $(A). prependTo (B)表示将A置插入到B

    $newNode1. prependTo ("ul");

    <body>
        <h1 id="hid">jQuery实例--文档处理--内部插入</h1>
        <ul class="uu">
            <li>苹果</li>
            <li>橘子</li>
            <li>哈密瓜</li>
        </ul>
        名称:<input type="text" name="tname"/>
        <button>前添加</button>
        <button>后追加</button>
        
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取按钮并绑定点击事件
                $("button").click(function(){
                    //获取输入框中的内容
                    var tname = $("input[name='tname']").val();
                    //获取上的内容判断执行对应的操作
                    switch($(this).html()){
                        case "前添加":
                            //$("ul.uu").prepend("<li>"+tname+"</li>");
                            $("<li>"+tname+"</li>").prependTo("ul.uu");
                            break;
                        case "后追加":
                            //$("ul.uu").append("<li>"+tname+"</li>");
                            $("<li>"+tname+"</li>").appendTo("ul.uu");
                            break;
                    }
                });
            });
        </script>
    </body>

    元素外部插入同辈节点

    语法

    功能

    after(content)

    $(A).after (B)表示将B插入到A之后

    如:$("ul").after($newNode1);

    insertAfter(content)

    $(A). insertAfter (B)表示将A插入到B之后

    如:$newNode1.insertAfter("ul");

    before(content)

    $(A). before (B)表示将B插入至A之前

    如:$("ul").before($newNode1);

    insertBefore(content)

    $(A). insertBefore (B)表示将A插入到B之前

    如:$newNode1.insertBefore("ul");

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery实例</title>
        <style>
            ul,li{padding:0px;margin:0px;}
            ul.uu{list-style:none;}
            ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}
            ul.uu li:hover{background-color:#fc0;}
            ul.uu li.active{background-color: #f0c;}
        </style>
    </head>
    <body>
        <h1 id="hid">jQuery实例--文档处理--外部插入</h1>
        <ul class="uu">
            <li class="active">苹果</li>
            <li>橘子</li>
            <li>哈密瓜</li>
            <li>菠萝</li>
            <li>芒果</li>
        </ul>
        名称:<input type="text" name="tname"/>
        <button>前添加</button>
        <button>后追加</button>
        
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取所有的li节点并绑定点击事件
                $("ul.uu li").click(function(){
                    $("ul.uu li").removeClass("active");
                    $(this).addClass("active");
                });
                //获取所有按钮并绑定点击事件
                $("button").click(function(){
                    //获取输入框中的内容
                    var tname = $("input[name='tname']").val();
                    //获取按钮上的文本并判断执行对应操作
                    switch($(this).html()){
                        case "前添加":
                            //$("li.active").before("<li>"+tname+"</li>");
                            $("<li>"+tname+"</li>").insertBefore("li.active");
                            break;
                        case "后追加":
                            //$("li.active").after("<li>"+tname+"</li>");
                            $("<li>"+tname+"</li>")
                                .insertAfter("li.active")
                                .click(function(){
                                    $("ul.uu li").removeClass("active");
                                    $(this).addClass("active");
                                });
                            break;
                    }
                });
            });
           
        </script>
    </body>

     

    6.2  外部插入和删除实例

    <body>
        <h1 id="hid">jQuery实例--文档处理--外部插入和删除</h1>
        <form>
            姓名:<input type="text" title="姓名" name="uname"/><br/><br/>
            年龄:<input type="text" title="年龄" name="age"/><br/><br/>
            邮箱:<input type="text" title="邮箱" name="email"/><br/><br/>
            电话:<input type="text" title="电话" name="phone"/><br/><br/>
            地址:<input type="text" title="地址" name="address"/><br/><br/>
        </form>
        <br/><br/>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取所有的输入框并绑定获得和失去焦点事件
                $("input:text").focus(function(){
                    //获得焦点事件处理
                    var title = $(this).attr("title");
                    $("<span> 请输入正确的"+title+"信息</span>").insertAfter(this).css("color","#ddd");
                }).blur(function(){
                    //失去焦点事件处理
                    $(this).next("span").remove();
                });
    
            });
           
        </script>
    </body>

    6.3 节点删除、复制和替换

    删除节点

    • jQuery提供了三种删除节点的方法

     

    • remove():删除整个节点
    • detach():删除整个节点,保留元素的绑定事件、附加的数据
    • empty():清空节点内容

     复制节点

    • clone()用于复制某个节点

    • 可以使用clone()实现输出DOM元素本身的HTML

    替换节点

    • replaceWith():把前面节点的全部替换成后面的,后面的节点删除
    • replaceAll():用前面的节点的替换掉所有后面的节点,前面的节点删除

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery实例</title>
        <style>
            ul,li{padding:0px;margin:0px;}
            ul.uu{list-style:none;}
            ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}
            ul.uu li:hover{background-color:#fc0;}
            ul.uu li.active{background-color: #f0c;}
        </style>
    </head>
    <body>
        <h1 id="hid">jQuery实例--文档处理--删除操作</h1>
        <ul class="uu">
            <li>苹果</li>
            <li>橘子</li>
            <li>哈密瓜</li>
            <li>菠萝</li>
            <li>芒果</li>
        </ul>
        <button>删除</button>
        <button>清空</button>
        
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取li节点并添加选中效果
                $("ul.uu li").click(function(){
                    $(this).toggleClass("active");
                });
                //获取按钮并绑定点击事件
                $("button").click(function(){
                    //根据按钮上的文本执行对象操作
                    switch($(this).html()){
                        case "删除":
                            $("li.active").remove();
                            break;
                        case "清空":
                            $("ul.uu").empty();
                            break;
                    }
                });
            });
           
        </script>
    </body>

     7、jQuery特效展示

    7.1 显示与隐藏

    显示:

    • show( [speed,[easing],[fn] ) 在显示元素时,能定义显示元素时的效果,如显示速度

    提示:

     

    • speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
    • easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
    • fn:在动画完成时执行的函数,每个元素执行一次

    隐藏

    • hide([speed,[easing],[fn]]) 隐藏显示的元素

    提示:参数同上

    切换

    • toggle([speed],[easing],[fn]) 除了可以模拟鼠标的连续单击事件外,还能用于切换元素的可见状态

    提示:参数同上,speed默认为 "0"毫秒;

    改变元素的高度

    • slideDown() 可以使元素逐步延伸显示
    • slideUp()则使元素逐步缩短直至隐藏
    $("h2").click(function(){
            $(".txt").slideUp("slow");
            $(".txt").slideDown("slow");
    });
    

    淡入淡出效果

    • fadeIn()fadeOut()可以通过改变元素的透明度实现淡入淡出效果

    <body>
        <h1 id="hid">jQuery实例--jQuery特效展示</h1>
        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button><br/><br/>
        <img src="./images/33.jpg" width="300"/>
        
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
               //获取按钮并绑定点击事件
               $("button").click(function(){
                   //判断按钮上的文本并执行对应的操作
                   switch($(this).html()){
                        case "显示":
                            //$("img").show("slow");
                            //$("img").slideDown("slow");
                            $("img").fadeIn("slow");
                            break;
                        case "隐藏":
                            //$("img").hide("slow");
                            //$("img").slideUp("slow");
                            $("img").fadeOut("slow");
                            break;
                        case "切换":
                            //$("img").toggle("slow");
                            //$("img").slideToggle("slow");
                            //$("img").fadeToggle("slow");
                            $("img").stop().toggle("slow");//stop()防止多次快速点击动画不停的bug
                            break;
    
                   }
               });
            });
        </script>
    </body>

    7.2 短信墙特效

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery实例</title>
        <style>
            ul,li{margin:0px;padding:0px;}
            ul{width:400px;list-style:none;}
            ul li{line-height:80px;margin-bottom:2px;background-color:#ddd;}
            #did{width:400px;height:326px;border:1px solid #fc0;overflow:hidden;}
        </style>
    </head>
    <body>
        <h1 id="hid">jQuery实例--jQuery效果展示--短信墙特效</h1>
        <div id="did">
            <ul class="uu">
                <li>苹果</li>
                <li>橘子</li>
                <li>哈密瓜</li>
                <li>香蕉</li>
                <li>荔枝</li>
                <li>芒果</li>
            </ul>
        </div>
        
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //定时每隔3秒后执行一次
                setInterval(function(){
                    //获取ul中的最后一个li节点设置隐藏后添加到ul里面的最前面,并设置滑动显示
                    //$("ul.uu li:last").hide().prependTo("ul.uu").slideDown("slow");
    
                    //向上滚动展示
                    $("ul.uu li:first").slideUp("slow",function(){
                        $(this).appendTo("ul.uu").show();
                    });
                    
                },3000);
            });
        </script>
    </body>

    7.3 树形菜单特效

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery实例</title>
        <style>
            ul.uu{display:none;}
            h4{line-height:40px;}
            h4:hover{background-color:#ddd;}
        </style>
    </head>
    <body>
        <h1 id="hid">jQuery实例--jQuery效果展示--树形菜单</h1>
        <h4>水果系列</h4>
        <ul class="uu">
            <li>苹果</li>
            <li>橘子</li>
            <li>哈密瓜</li>
        </ul>
        <h4>水果系列</h4>
        <ul class="uu">
            <li>苹果</li>
            <li>橘子</li>
            <li>哈密瓜</li>
        </ul>
        <h4>水果系列</h4>
        <ul class="uu">
            <li>苹果</li>
            <li>橘子</li>
            <li>哈密瓜</li>
        </ul>
        <br/><br/>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取上面所有的h4标题并绑定点击事件
                $("h4").click(function(){
                    //获取当前h4紧邻的兄弟ul节点,并滑动展开显示
                    $(this).next("ul.uu").slideToggle("slow")
                });
            });
           
        </script>
    </body>

    7.4 选项卡特效

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery实例</title>
        <style>
            ul,li,div{margin:0px;padding:0px;}
            #did .header ul{list-style:none;}
            #did .header ul li{line-height:50px;width:120px;float:left;margin-right:4px;background-color:#ddd;}
            #did .header ul li:hover{background-color:#fc0;}
            #did .body{clear:both;width:500px;height:400px;border:1px solid #ddd;}
            #did .body .cc{display:none;height:400px;}
            #did .header ul li.b1,#did .body div.d1{background-color:red;}
            #did .header ul li.b2,#did .body div.d2{background-color:green;}
            #did .header ul li.b3,#did .body div.d3{background-color:blue;}
        </style>
    </head>
    <body>
        <h1 id="hid">jQuery实例--jQuery效果展示--选项卡</h1>
        <div id="did">
            <div class="header">
                <ul>
                    <li class="b1">aaa</li>
                    <li class="b2">bbb</li>
                    <li class="b3">ccc</li>
                    <li>ddddd</li>
                </ul>
            </div>
            <div class="body">
                <div class="cc d1">AAA</div>
                <div class="cc d2">BBB</div>
                <div class="cc d3">CCC</div>
                <div class="cc">DDDD</div>
            </div>
        </div>
        
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
               //获取上面header头中ul里面的所有li节点,并绑定鼠标移入事件
               $("#did .header ul li").mouseover(function(){
                   //获取事件源对象li的索引位置
                   var m = $(this).index();
                   //隐藏所有body层
                   $("#did .body div").hide();
                   //显示索引位置m对应的div层
                   $("#did .body div").eq(m).fadeIn("slow");
    
               });
            });
           
        </script>
    </body>

    7.5 导航栏特效

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery实例</title>
        <style>
            div,ul,li,a{margin:0px;padding:0px;}
            ul{list-style:none; position:absolute;}
            a{text-decoration:none;display:block;width:100px;line-height:40px;}
            a:hover{background-color:#fc0;}
            #menu{width:100%;height:40px;line-height:40px;}
            #menu ul li{width:100px;float:left;
                        line-height:40px;
                        background-color:#ddd;
                        text-align:center;
                        border-right:2px solid #fff;}
            #menu ul li ul.item li{border-top:2px solid #fff;}
            #menu ul li ul.item{display:none;position:relative;}
        </style>
    </head>
    <body>
        <h1 id="hid">jQuery实例--jQuery效果展示--导航栏效果</h1>
        <div id="menu">
            <ul>
                <li><a href="#">商品展示</a>
                    <ul class="item">
                        <li><a href="#">热卖商品</a></li>
                        <li><a href="#">最新商品</a></li>
                        <li><a href="#">特价商品</a></li>
                        <li><a href="#">推荐商品</a></li>
                    </ul>
                </li>
                <li><a href="#">站内新闻</a>
                    <ul class="item">
                        <li><a href="#">国内新闻</a></li>
                        <li><a href="#">体育信息</a></li>
                        <li><a href="#">热点新闻</a></li>
                    </ul>
                </li>
                <li><a href="#">网站公告</a>
                    <ul class="item">
                        <li><a href="#">国内新闻</a></li>
                        <li><a href="#">体育信息</a></li>
                        <li><a href="#">热点新闻</a></li>
                        <li><a href="#">体育信息</a></li>
                        <li><a href="#">热点新闻</a></li>
                    </ul>
                </li>
                <li><a href="#">关于我们</a>
                    <ul class="item">
                        <li><a href="#">国内新闻</a></li>
                        <li><a href="#">体育信息</a></li>
                        <li><a href="#">热点新闻</a></li>
                    </ul>
                </li>
                <li><a href="#">在线帮助</a></li>
            </ul>
        </div>
        
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取所有菜单中li选项,并绑定鼠标移入和移出事件
                $("#menu ul li").mouseover(function(){
                    //移入事件处理
                    //$(this).find("ul.item").show();
                    $("ul.item:animated").stop().hide();
                    $(this).find("ul.item").slideDown("slow");
                }).mouseout(function(){
                    //移出事件处理
                    $(this).find("ul.item").hide();
                });
            });
           
        </script>
    </body>

    8、jQuery事件处理

    • jQuery事件是对JavaScript事件的封装,常用事件分类如下:
    • 基础事件
    • window事件
    • 鼠标事件
    • 键盘事件
    • 表单事件
    • 复合事件是多个事件的组合
    • 鼠标光标悬停
    • 鼠标连续点击

    8.1 一次性点击事件和激发事件 

    语法 功能
    one(type,[data],fn) 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
    trigger(type,[data]) 在每一个匹配的元素上触发某类事件。

     

     

     

     

    <body>
        <h1 id="hid">jQuery实例--事件处理</h1>
        <button onclick="dofun()">点击我</button>
        <button id="bid">投票</button>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
               //获取投票按钮并绑定一次性点击事件
               $("#bid").one("click",function(){
                   alert("投票成功!");
                   $(this).html("已投票");
               });
            });
    
            function dofun(){
                console.log("事件被点击!");
                $("#hid").css("color","red");
                //使用jquery程序激发一个事件
                $("#bid").trigger("click");
            }
        </script>
    </body>

    8.2 移入与移出事件

    语法 功能
    mouseover([[data],fn]) 当鼠标指针位于元素上方时,会发生 mouseover 事件。
    mouseout([[data],fn]) 当鼠标指针从元素上移开时,发生 mouseout 事件。
    hover([over,]out) 当鼠标移到元素上或移出元素时触发执行的事件函数

     

     

     

     

     

     $(function(){
                //获取did层并绑定鼠标的移入和移出事件
                
                $("#did").mouseover(function(){
                    console.log("鼠标移入。。。。");
                }).mouseout(function(){
                    console.log("鼠标移出。。。。");
                });
                
                //效果同上的代码
                
                $("#did").hover(function(){
                    //鼠标移入事件处理
                    console.log("鼠标移入111。。。。");
                },function(){
                    //鼠标移出事件处理
                    console.log("鼠标移出11。。。。");
                });
    }
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery实例</title>
        <style>
            div,img,ul,li{margin:0px;padding:0px;}
            #did{width:384px;height:240px;}
            #list img{width:85px;border:2px solid #fff;margin-right:2px;}
            #list img:hover{border:2px solid red;}
        </style>
    </head>
    <body>
        <h1 id="hid">jQuery实例--鼠标移入事件处理</h1>
        <div id="did">
            <img id="mid" src="./images/11.jpg" width="384"/>
        </div>
        <div id="list">
            <img src="./images/11.jpg"/>
            <img src="./images/22.jpg"/>
            <img src="./images/33.jpg"/>
            <img src="./images/44.jpg"/>
        </div>
        
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取did层并绑定鼠标的移入和移出事件
    
                //获取图片列表并绑定鼠标移入事件
                $("#list img").mouseover(function(){
                    $("#mid").attr("src",$(this).attr("src"));
                });
            });
        </script>
    </body>

    8.3 图片放大镜

    offset([coordinates])

    获取匹配元素在当前视口的相对偏移。

     

     

    $("p:last").offset({ top: 10, left: 30 });//获取第二段的偏移
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery实例</title>
        <style>
            div,img,ul,li{margin:0px;padding:0px;}
            #did{width:300px;height:300px;overflow:hidden;display:none;position:absolute;}    
        </style>
    </head>
    <body>
        <h1 id="hid">jQuery实例--图片的放大镜效果</h1>
        <br/><br/>
        <img id="mid" src="./images/33.jpg" width="384" height="240"/>
        <div id="did">
            <img src="./images/33.jpg"/>
        </div>
        <br/><br/>
    
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取mid图片节点并绑定鼠标移入、移出和移动事件
                $("#mid").mouseover(function(){
                    //获取被放大图片(事件源对象)的位置
                    var offset = $(this).offset();
                    //计算放大图层位置
                    var y = offset.top;
                    var x = offset.left+$(this).width()+5;
                    //通过css对放大图层定位,并设置可见
                    $("#did").css({top:y+"px",left:x+"px"}).show();
                }).mouseout(function(){
                    //隐藏放大图层
                    $("#did").hide(); 
                }).mousemove(function(e){
                    //输出事件位置
                    //console.log(e.pageX,e.pageY);
                    //获取当前被放大图层位置
                    var offset = $(this).offset();
                    //计算鼠标在被放大图层上的位置
                    var x = e.pageX - offset.left;
                    var y = e.pageY - offset.top;
                    //设置放大镜图层的滚动位置
                    $("#did").scrollLeft(x*5-150).scrollTop(y*5-150);
                });
            });
           
        </script>
    </body>

    8.4 拖动效果

    mousedown([[data],fn])

    当鼠标指针移动到元素上方,并按下鼠标按键

    on(events,[selector],[data],fn)

    在选择元素上绑定一个或多个事件的事件处理函数。

    off(events,[selector],[fn])

    在选择元素上移除一个或多个事件的事件处理函数

    mouseup([[data],fn])

    当在元素上放松鼠标按钮时,会发生 mouseup 事件。

     

     

     

     

     

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery实例</title>
        <style>
            div{margin:0px;padding:0px;}
            #did{width:200px;height:200px;background-color:#ddd;cursor:move;position:absolute;}
        </style>
    </head>
    <body>
        <h1 id="hid">jQuery实例--拖动效果</h1>
        <div id="did"></div>
        
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取拖动div层并绑定鼠标按下和抬起事件
                $("#did").mousedown(function(e){
                    //设置背景颜色
                    $(this).css("background-color","blue");
                    //获取当前div层位置
                    var offset = $(this).offset();
                    //计算鼠标按在div层上的位置
                    //e.pageX鼠标相对窗口的水平位置
                    var x = e.pageX - offset.left;
                    var y = e.pageY - offset.top;
                    //绑定鼠标移动事件
                    $(document).on("mousemove",function(en){
                        //定位div图层位置
                        $("#did").css({top:en.pageY-y+"px",left:en.pageX-x+"px"});
                    });
    
                }).mouseup(function(){  
                    $(this).css("background-color","#ddd");
                    //取消鼠标移动事件
                    $(document).off("mousemove");
                });
            }); 
        </script>
    </body>

     8.5 阻止事件冒泡

    event.stopPropagation()

    防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。

     

     

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery实例</title>
        <style>
            #outer{width:400px;height:400px;background-color: #ddd;margin:50px;padding:20px;}
            #inner{width:200px;height:200px;background-color:#fc0;}
        </style>
    </head>
    <body>
        <h1 id="hid">jQuery实例--阻止事件冒泡</h1>
        <div id="outer">
           <div id="inner"></div>
        </div>
        
        <script src="./jquery-3.5.0.min.js"></script>
        <script>
            //jquery入口
            $(function(){
                //获取div层并绑定点击事件
                $("#outer").click(function(){
                    console.log("outer.....");
                });
                $("#inner").click(function(e){
                    console.log("inner.....");
                    //阻止事件冒泡(传播)
                    e.stopPropagation();
                });
            });
           
        </script>
    </body>

     

    展开全文
  • jquery中$的用法

    2018-12-01 16:47:01
    $(function(){}):在页面一家载就调用function(); $("#id"):获取对应id的dom元素 $("#id").css("","")改变对应id元素的样式 $("#id").html(str)改变对应id的...

    $(function(){}):在页面一家载就调用function();

    $("#id"):获取对应id的dom元素

    $("#id").css("","")改变对应id元素的样式

    $("#id").html(str)改变对应id的文本内容

    展开全文
  • Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法。然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生...
  • jquery常用方法总结

    2017-01-14 17:38:23
    取值与赋值操作$("#ID").val(); //取value值 $("#ID").val("xxx"); //赋值 $("#ID").text(); //相当于取innerText $("#ID").text(""); //相当于赋值给innerText ... //相当于取innerHTML ... //相当于赋值给innerHTML属性...
  • jquery $ # 什么意思

    2014-03-26 16:57:51
    $ 表示jquery # 表示 id ,如 可以 表示为 #button 事件处理 直接绑定指定事件,事件类型即方法名,支持click、focus、blur、submit等。 $("#button").click(function(){ //script goes here }); 用on来...
  • 前言jQuery对象是一个类数组的对象,含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中,形成了统一(也是惟一)的操作入口。其中我们用的非常频繁的一个函数是$()或者说是jQuery...
  • 对于刚刚学习jQuery的人来讲,发现到处都在使用 $ 符合。有时候很是不理解。于是特总结出这篇 关于 $ 的具体含义。  当我们想要知道一个东西具体是上面的时候,上面类型的时候第一反应是上面?毫无疑问 ,当然是...
  • 原型模式为了省略为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都取得相同的属性值。在某些情况下这会带来一些不便,但更为严重的问题则是包含引用类型值得的属性时的共享问题。...
  • 本来想写一个 JQuery 操作 table 的例子,结果发现网上有很多写的更好的,推荐这个博主写的文章:https://www.cnblogs.com/lxblog/archive/2013/01/11/2856582.html相比之下,自己写的例子相形见绌。这里也将自己的...
  • Jquery 获取 radio选中值

    2012-07-06 13:08:41
    随着Jquery的作用越来越大,使用的朋友也越来越多。在Web中,由于CheckBox、Radiobutton 、DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作问题。由于Jquery的版本更新很快,代码的写法也...
  • jquery中可以使用2种方法来判断一个元素是否包含一个确定的类(class)。两种方法有着相同的功能。2种方法如下: 1. is(‘.classname’) 2. hasClass(‘classname’) 以下是一个div元素是否包含一个redColor的...
  • jQuery +ajax提交json数据

    2018-06-17 19:15:06
    首先,很多网站开发都会采用jQuery ,简化了js的代码,是开发更方便,因此我也开始使用jQuery。。。。 如果不知道如何在js中使用jQuery请移步这里 在jQuery中封装有$.ajax方法可以直接来调用 如果对于Ajax方法不...
  • 要使用jQuery,我们要知道,jQuery是一个函数库,简单来讲就是一个后缀名为".js"的文件。我们可以在这里找到jQuery的最新版本文件:http://jquery.com/。对于学习来说,我们就下载它的压缩版本就可以了。 可以...
  • jquery是一个平常比较喜欢用的js框架,因为上手比较简单吧,哈哈,下面呢,就介绍一下Jquery中如何添加元素。jquery添加元素一共有四个语句,分别是append(),prepend(),after(),before() append的用法 ...
  • jquery根据name属性查找$("div[id]") 选择所有含有id属性的div元素 $("input[name='keleyicom']") 选择所有的name属性等于'keleyicom'的input元素 $("input[name!='keleyicom']")...
1 2 3 4 5 ... 20
收藏数 818,964
精华内容 327,585
关键字:

jquery