zoukankan      html  css  js  c++  java
  • jQuery方法

    jQuery 核心 - jQuery() 方法

    实例

    找出所有属于 div 元素的子元素的 p 元素,然后设置其边框属性:

    $("div > p").css("border", "1px solid gray");
    

    定义和用法

    jQuery() 方法接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器。

    jQuery() 函数有三种语法:

    语法 1

    接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器:

    jQuery(selector, [context])

    语法 2

    使用原始 HTML 的字符串来创建 DOM 元素:

    jQuery(html,[ownerDocument])

    语法 3

    绑定一个在 DOM 文档载入完成后执行的函数:

    jQuery( callback )

    jQuery( selector, [ context ] )

    该语法有以下几种用法:

    用法 1 :设置选择器环境

    语法

    jQuery(selector, [context])

    默认情况下,选择器从文档根部对 DOM 进行搜索。不过,可以为 $() 设置可选的 context 参数。

    例如,如果我们希望在一个 callback 中搜索一个元素,可以限定下面的搜索:

    实例

    $("div.foo").click(function() {
      $("span", this).addClass("bar");
    });
    

    由于我们已经将 span 选择器限定到 this 这个环境中,只有被点击元素中的 span 会得到附加的 class。

    在内部,选择器环境是通过 .find() 方法实现的,因此 $("span", this) 等价于 $(this).find("span")。

    jQuery 的核心功能都是通过这个函数实现的。jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。

    默认情况下, 如果没有指定 context 参数,$() 将在当前的 HTML document 中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。在 jQuery 1.3.2 以后,其返回的元素顺序等同于在 context 中出现的先后顺序。

    用法 2 :使用 DOM 元素

    语法

    jQuery(element)

    该函数允许我们通过使用以其他方式找到的 DOM 元素来创建 jQuery 对象。该功能通常的用法是,对已经通过 this 关键字传递到 callback 函数的元素调用 jQuery 的方法:

    实例

    $("div.foo").click(function() {
      $(this).slideUp();
    });
    

    此例会在元素被点击时使用滑动动画对其进行隐藏。由于处理程序接受的 this 关键词中的被点击项目是纯的 DOM 元素,因此在对其调用 jQuery 的方法之前,必须用 jQuery 对象包装该元素。

    这个函数也可以接收 XML 文档和 Window 对象(虽然它们不是 DOM 元素)作为有效的参数。

    当 XML 数据从 Ajax 调用中返回后,我们可以使用 $() 函数通过 jQuery 对象包装该数据。一旦完成,我们就可以使用 .find() 和其他 DOM 遍历方法来取回 XML 结构中单个元素。

    用法 3 :克隆 jQuery 对象

    语法

    jQuery(jQuery object)

    当以参数的形式向 $() 函数传递 jQuery 对象后,会创建一个该对象的副本。与初始对象一样,新的 jQuery 对象引用相同的 DOM 元素。

    用法 4 :返回空的集合

    语法

    jQuery()

    对于 jQuery 1.4,调用无参数的 jQuery() 方法会返回空的 jQuery 集合。在之前版本的 jQuery 中,这样会返回包含 document 节点的集合。

    jQuery( html, [ ownerDocument ] )

    该语法有以下几种用法:

    用法 1 :创建新的元素

    语法

    jQuery(html,[ownerDocument])

    你可以传递一个手写的 HTML 字符串,或者由某些模板引擎或插件创建的字符串,也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制,可以参考第二个示例。

    当然这个字符串可以包含斜杠 (比如一个图像地址),还有反斜杠。当你创建单个元素时,请使用闭合标签或 XHTML 格式。例如,创建一个 span ,可以用 $("<span/>") 或 $("<span></span>") ,但不推荐 $("<span>")。在 jQuery 中,这个语法等同于 $(document.createElement("span"))。

    如果以参数的形式将字符串传递给 $(),jQuery 会检查字符串是否是 HTML (比如,字符串某些位置存在标签)。如果不是,则把字符串解释为选择器表达式,请见上面的讲解。但如果字符串是 HTML 片段,则 jQuery 试图创建由该 HTML 片段描述的 DOM 元素。然后会创建并返回一个引用这些 DOM 元素的 jQuery 对象:

    实例

    $("<p id="test">My <em>new</em> text</p>").appendTo("body");

    如果 HTML 片段比不含属性的简单标签更复杂,如同上面例子中的 HTML,那么元素实际的创建过程是由浏览器的 innerHTML 机制完成的。具体地讲,jQuery 会创建新的 <div> 元素,然后为传入的 HTML 片段设置元素的 innerHTML 属性。当参数只是简单的标签,比如$("<img />") 或 $("<a></a>"),jQuery 会通过内生的 JavaScript createElement() 函数来创建元素。

    要确保跨平台兼容性,片段的结构必须良好。能够包含其他元素的标签必须成对出现(带有关闭标签):

    $("<a href="http://jquery.com"></a>");

    不过,jQuery 也允许类似 XML 的标签语法:

    $("<a/>");

    无法包含其他元素的标签可以关闭,也可以不关闭:

    $("<img />");
    $("<input>");
    

    用法 2 :设置属性和事件

    语法

    jQuery(html,props)

    对于 jQuery 1.4,我们可以向第二个参数传递一个属性映射。该参数接受能够传递给 .attr() 方法的属性的超集。此外,可以传递任意的事件类型,并可以调用下面的 jQuery 方法:val, css, html, text, data, width, height, or offset.

    注意,Internet Explorer 不允许你创建 input 元素并改变其类型;您必须使用例如 "<input type="checkbox" />" 来规定类型。

    实例

    创建一个 <input> 元素,同时设定 type 属性、属性值,以及一些事件。

    $("<input>", {
      type: "text",
      val: "Test",
      focusin: function() {
        $(this).addClass("active");
      },
      focusout: function() {
        $(this).removeClass("active");
      }
    }).appendTo("form");
    

    jQuery( callback )

    允许你绑定一个在 DOM 文档载入完成后执行的函数。

    该函数的作用如同 $(document).ready() 一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的其他 $() 操作符都包装到其中来。尽管从技术上来说,这个函数是可链接的,但真正以这种方式链接的情况并不多。

    例子

    当DOM加载完成后,执行其中的函数:

    $(function(){
      // 文档就绪
    });
    
  • 相关阅读:
    win10 uwp 弹起键盘不隐藏界面元素
    win10 uwp 存放网络图片到本地
    win10 uwp 存放网络图片到本地
    sublime Text 正则替换
    sublime Text 正则替换
    win10 uwp 绘图 Line 控件使用
    win10 uwp 绘图 Line 控件使用
    AJAX 是什么?
    什么是 PHP SimpleXML?
    PHP XML DOM:DOM 是什么?
  • 原文地址:https://www.cnblogs.com/the-wang/p/7750864.html
Copyright © 2011-2022 走看看