• jQuery 简介


    jQuery 是一个 JavaScript 库,它极大地简化了 JavaScript 编程。

    1、jQuery 库包含以下特性:

    • HTML 元素选取
    • HTML 元素操作
    • CSS 操作
    • HTML 事件函数
    • JavaScript 特效和动画
    • HTML DOM 遍历和修改
    • AJAX
    • Utilities

    2、如何向您的页面添加 jQuery 库?

    如需使用 jQuery,您需要下载 jQuery 库,然后把它包含在希望使用的网页中。
    下载jQuery:http://jquery.com/download/

    jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:

    <head>
    <script src=".../jquery.js"></script>
    </head>

    3、jQuery 语法

    jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

    基础语法是:$(selector).action();

    • 美元符号定义 jQuery
    • 选择符(selector)“查询”和“查找” HTML 元素
    • jQuery 的 action() 执行对元素的操作
    示例:
    $(this).hide(); // 隐藏当前元素
    $("p").hide(); // 隐藏所有段落
    $(".test").hide(); // 隐藏所有 class="test" 的所有元素
    $("#test").hide(); // 隐藏所有 id="test" 的元素

     4、jQuery选择器

    jQuery选择器分元素选择器和属性选择器,允许通过标签名、属性名或内容对 HTML 元素进行选择。

    (1)jQuery 元素选择器

    jQuery 使用 CSS 选择器来选取 HTML 元素。

    $("p");     //选取 <p> 元素。
    $("p.intro");     //选取所有 class="intro" 的 <p> 元素。
    $("p#demo");     //选取所有 id="demo" 的 <p> 元素。

     (2)jQuery 属性选择器

    jQuery 使用 XPath 表达式来选择带有给定属性的元素。

    $("[href]");     //选取所有带有 href 属性的元素。
    $("[href='#']");     //选取所有带有 href 值等于 "#" 的元素。
    $("[href!='#']");      //选取所有带有 href 值不等于 "#" 的元素。
    $("[href$='.jpg']");     //选取所有 href 值以 ".jpg" 结尾的元素。

    更多的选择器实例:

    $(this);         //当前 HTML 元素
    $("p");                 //所有 <p> 元素
    $("p.intro");         //所有 class="intro" 的 <p> 元素
    $(".intro");         //所有 class="intro" 的元素
    $("#intro");         //id="intro" 的元素
    $("ul li:first");    //每个 <ul> 的第一个 <li> 元素
    $("[href$='.jpg']"); //所有带有以 ".jpg" 结尾的属性值的 href 属性
    $("div#intro .head");//id="intro" 的 <div> 元素中的所有 class="head" 的元素

    转载自本人ITeye链接:http://xiaozhuang0706.iteye.com/blog/2255546

    don't look back boy~
  • 相关阅读:
    enum 与 enum class
    git error: unable to rewind rpc post data
    ip地址转换
    大端字节序&小端字节序(网络字节序&主机字节序)
    c++虚析构函数
    引用
    单例模式
    c++ 类静态成员、非静态成员初始化
    算法导论进度帖startedby20131029
    Linux驱动程序接口
  • 原文地址:https://www.cnblogs.com/BHfeimao/p/6496597.html
Copyright © 2020-2023  润新知