zoukankan      html  css  js  c++  java
  • jquery01-简介+语法+选择器+事件

    jQuery是一个JavaScript函数库,是一个轻量级的"写的少,做的多"的JavaScript库,包含以下功能:

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

     除此之外,Jquery还提供了大量的插件。

    下载 jQuery

    有两个版本的 jQuery 可供下载:

    • Production version - 用于实际的网站中,已被精简和压缩。
    • Development version - 用于测试和开发(未压缩,是可读的代码)

    以上两个版本都可以从 jquery.com 中下载。jQuery 库是一个 JavaScript 文件,通过以下方式导入:

    <script src="jquery-1.10.2.min.js"></script>

    jQuery 语法

    jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

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

    • 美元符号定义 jQuery
    • 选择符(selector)"查询"和"查找" HTML 元素
    • jQuery 的 action() 执行对元素的操作

    实例:

    $(this).hide() - 隐藏当前元素

    $("p").hide() - 隐藏所有段落

    $("p .test").hide() - 隐藏所有 class="test" 的段落

    $("#test").hide() - 隐藏所有 id="test" 的元素

    文档就绪事件

    所有 jQuery 函数位于一个 document ready 函数中:

    $(document).ready(function(){
        // jQuery methods go here...
    });

    简洁写法(与以上写法效果相同):

    $(function(){
        // jQuery methods go here...
    });

    这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

    • 试图隐藏一个不存在的元素
    • 获得未完全加载的图像的大小

    jQuery 选择器

    jQuery 选择器允许对 HTML 元素组或单个元素进行操作,基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头:$()。

    元素选择器

    jQuery 元素选择器基于元素名选取元素。在页面中选取所有 <p> 元素:   $("p") 

    #id 选择器

    jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

    页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。

    通过 id 选取元素语法如下:$("#test") 

    .class 选择器

    jQuery 类选择器可以通过指定的 class 查找元素。语法如下:$(".test") 

    语法               描述
    $("*")           选取所有元素
    $(this)          选取当前 HTML 元素
    $("p.intro")   选取 class 为 intro 的 <p> 元素
    $("p:first")    选取第一个 <p> 元素
    $("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
    $("ul li:first-child")  选取每个 <ul> 元素的第一个 <li> 元素
    $("[href]")             选取带有 href 属性的元素
    $("a[target='_blank']")  选取所有 target 属性值等于 "_blank" 的 <a> 元素
    $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
    $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
    $("tr:even") 选取偶数位置的 <tr> 元素

    $("tr:odd")  选取奇数位置的 <tr> 元素

     jquery事件

    常见 DOM 事件
    鼠标事件 键盘事件 表单事件 文档/窗口事件
    click  keypress submit load
    dbclick keydown change resize
    mouseenter keyup focus scroll
    mouseleave   blur unload
    常见 jquery 事件
    鼠标事件 文档/窗口事件  
    click() 

    $(document).ready()

    文档完全加载完后执行函数

    hover()

    dbclick()双击元素

      focus()元素获得焦点

    mouseenter()鼠标指针穿过元素

      blur()失去焦点时

    mouseleave()鼠标指针离开元素

       

    mousedown()鼠标指针移动到元素上方,并按下鼠标按键时

       

    mouseup()在元素上松开鼠标按钮时

       

     hover()方法用于模拟光标悬停事件。

    当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。

     $("#p1").hover(
        function(){
            alert("你进入了 p1!");
        },
        function(){
            alert("拜拜! 现在你离开了 p1!");
        }
    )
    在平凡中坚持前行,总有一天,会遇见优秀的自己
  • 相关阅读:
    Binary Tree Maximum Path Sum
    ZigZag Conversion
    Longest Common Prefix
    Reverse Linked List II
    Populating Next Right Pointers in Each Node
    Populating Next Right Pointers in Each Node II
    Rotate List
    Path Sum II
    [Leetcode]-- Gray Code
    Subsets II
  • 原文地址:https://www.cnblogs.com/mao-19/p/7279755.html
Copyright © 2011-2022 走看看