码迷,mamicode.com
首页 > Web开发 > 详细

06: jQuery

时间:2017-12-02 17:40:52      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:工具   one   first   font   任务   lex   一致性   特性   常见   

1.1 JQuery作用

  简介:jQuery库为Web脚本编程提供了通用的抽象层,使得它几乎适用于任何编程的情形。

技术分享图片
# 1.    取得页面中的元素
    1、    如果不使用JavaScript库,遍历DOM树,以及查找HTML文档结构中某个特殊的部分,必需编写很多代码
    2、    jQuery为准确获取需要操纵的文档元素,提供了可靠而富有效率的选择符机制。

# 2.    修改页面的外观
    1、    CSS虽然为呈现方式提供了一种强大的手段,但当所有浏览器不完全支持相同的标准时,单纯使用CSS就会
    显得力不从心
    2、    jQuery可以弥补这一不足,它提供了跨浏览器的标准来解决方案。
    3、    而且即使在页面已经呈现之后,jQuery仍然能够改变文档中某个部分的类或都个别的样式属性。

# 3.    改变页面的内容
    1、    jQuery能够影响的范围并不局限于简单的外观变化,使用少量的代码
    2、    jQuery就能改变文档的内容,可以改变文本、插入或都翻转图像、对列表重新排序,甚至对HTML文档的整个结构都能重写和扩充——所有这些只需要一个简单易用的API。

# 4.    响应用户的页面操作
    1、    jQuery提供了截取形形色色的页面事件(比如用户单击一个链接)的适当方式,而不需要使用事件处理程
    序搞乱HTML代码
    2、    此外,它的事件处理API也消除了经常困扰Web开发人员的浏览器不一致性

# 5.    为页面添加动态效果
    1、    为了实现某种交互式行为,设计者也必须向用户提供视觉上的反馈
    2、    jQuery中内置的一批淡入、擦除之类的效果,以及制作新效果的工具包,为此提供了便利

# 6.无需刷新页面
    1、即可从服务器获取信息,这种编程模式就是从所周知的AJAX(Asyynchoronous JavaScript and XML),它能辅
       助Web开发人员创建出反应灵敏、功能丰富的网站
    2、jQuery通过消除这一过程中的浏览器特定的复杂性,使开发人员得以专注于服务器端的功能设计

# 7、简化常见的JavaScript任务
    1、除了这些完全针对文档的特性之外,jQuery也提供了对基本的JavaScript结构(例如迭代和数组操作等)的增强
jQuery作用介绍

 1.2 jQuery与DOM比较 与 相互转换

    1.  $=jQuery   可以使用这两个关键字调用jQuery中的方法

    2.  JQuery内部实质上封装的是DOM,JQuery中获得的东西比DOM获得的多

    3.  JQuery对象返回的是一个列表,列表中第0个元素就是用DOM获取的对象

    4.  分别用JQuery和DOM获取对象的方法:

        $("#i1")                                                            #使用JQuery获取对象

        document.getElementById(‘i1‘);                      #使用DOM获取对象

    5.  将通过JQuery获取的对象转换成通过DOM获取的对象

        jquery对象[0]       =>           Dom对象

        $("#i1")[0] = document.getElementById(‘i1‘);                 #JQuery第0个元素就是DOM对象

    6.  将通过DOM获取的对象装换成通过JQuery获取的对象

        dom对象          =>               $(Dom对象)

        d = document.getElementById(‘i1‘);

        $(d)  =  $("#i1")                                                              #DOM对象用$()包起来就是JQuery对象

1.3 jQuery选择器

  1、基本选择器

    1. id选择器

        $("#i1")                 #找到id=i1的标签

    2. class选择器

        $(".c1")

    3. 标签选择器

        $(‘a‘)                   #找到所有a标签

    4. 组合选择器

        $(‘a,.c2,#i10‘)     # 作用:找到所有a标签和所有class等于.c2的标签和id=i10的所有标签

    5. 匹配所有元素,多用于结合上下文来搜索

        $("*")

  2、层级选择器
      1.   $(‘#i1 a‘)                        #找到id=i1标签下面所有的a标签(子子孙孙都找到)

      2.   $(‘#i1>a‘)                      #找到id=i1标签下面所有的a标签(只能找到儿子)

      3.   $("label + input")            #匹配所有跟在 label 后面的 input 元素

      4.   $("form ~ input")            #找到所有与表单同辈的 input 元素

  3、属性
      1. $(‘[alex]‘) #找到具有alex属性的标签(比如:alex=‘123‘,alex=‘456‘)

      2. $(‘[alex="456"] #只找到标签中alex=‘456‘的标签(属性:alex;值:456)

1.4 jQuery筛选与过滤

  1、查找

      1.  $("p").parent()                                   #取得一个包含着所有匹配元素的唯一父元素的元素集合

           $("span").parents()                           # parents()将查找所有祖辈元素

           $(‘#i1‘).parentsUntil(‘.c1‘)                  #查找当前元素的所有的父辈元素,直到遇到匹配元素为止

      2.  $("div").children()                              # children()只考虑子元素而不考虑所有后代元素

      3.  $("div").siblings()                              #获取所有兄弟标签,不包含自己

      4.  $("p").next()                                     #获取匹配标签后面的兄弟标签

           $("div:first").nextAll().addClass("after");                        #查找当前元素之后所有的同辈元素。

           $(‘#i1’).nextUntil(‘#i2’)                      #查找当前元素之后所有的同辈元素,直到遇到匹配元素为止

      5. $("p").prev()                                      #用于筛选前一个同辈元素的表达式

           $("div:last").prevAll().addClass("before");                     #查找当前元素之前所有的同辈元素

           $(‘#i1’). prevUntil (‘#i2’)                    #查找当前元素之前所有的同辈元素,直到遇到匹配元素为止

      6.  $("p").find("span")                            #搜索所有与指定表达式匹配的元素, 子子孙孙中查找

 

06: jQuery

标签:工具   one   first   font   任务   lex   一致性   特性   常见   

原文地址:http://www.cnblogs.com/xiaonq/p/7954562.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!