zoukankan      html  css  js  c++  java
  • JQuery教程

    jQuery 语法

    jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

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

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

    实例:

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

    • $("p").hide() - 隐藏所有 <p> 元素

    • $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

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

    文档就绪事件

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

    $(document).ready(function(){ // 开始写 jQuery 代码... });

    这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

    如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

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

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

    $(function(){ // 开始写 jQuery 代码... });

    以上两种方式你可以选择喜欢的方式实现文档就绪后执行 jQuery 方法。

    jQuery 选择器


    jQuery 选择器允许对 HTML 元素组或单个元素进行操作。


    jQuery 选择器

    jQuery 选择器基于元素的 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 事件


    jQuery 是为事件处理特别设计的。


    什么是事件?

    页面对不同访问者的响应叫做事件。

    事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

    实例:

    • 在元素上移动鼠标。
    • 选取单选按钮
    • 点击元素

    在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。

    常见 DOM 事件:

    鼠标事件键盘事件表单事件文档/窗口事件
    click keypress submit load
    dblclick keydown change resize
    mouseenter keyup focus scroll
    mouseleave   blur unload

    常用的 jQuery 事件方法

    $(document).ready()

    $(document).ready() 方法允许我们在文档完全加载完后执行函数。

    click()

    click() 方法是当按钮点击事件被触发时会调用一个函数。

    该函数在用户点击 HTML 元素时执行。

    实例

    $("p").click(function(){ $(this).hide(); });

    dblclick()

    当双击元素时,会发生 dblclick 事件。

    dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数.

    实例

    $("p").dblclick(function(){ $(this).hide(); });

    mouseenter()

    当鼠标指针穿过元素时,会发生 mouseenter 事件。

    mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数:

    实例

    $("#p1").mouseenter(function(){ alert('您的鼠标移到了 id="p1" 的元素上!'); });

    mouseleave()

    当鼠标指针离开元素时,会发生 mouseleave 事件。

    mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数:

    实例

    $("#p1").mouseleave(function(){ alert("再见,您的鼠标离开了该段落。"); });

    mousedown()

    当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

    mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数:

    实例

    $("#p1").mousedown(function(){ alert("鼠标在该段落上按下!"); });

    mouseup()

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

    mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数:

    实例

    $("#p1").mouseup(function(){ alert("鼠标在段落上松开。"); });

    hover()

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

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

    实例

    $("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); } );

    ocus()

    当元素获得焦点时,发生 focus 事件。

    当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。

    focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数:

    实例

    $("input").focus(function(){ $(this).css("background-color","#cccccc"); });
  • 相关阅读:
    86. Partition List
    328. Odd Even Linked List
    19. Remove Nth Node From End of List(移除倒数第N的结点, 快慢指针)
    24. Swap Nodes in Pairs
    2. Add Two Numbers(2个链表相加)
    92. Reverse Linked List II(链表部分反转)
    109. Convert Sorted List to Binary Search Tree
    138. Copy List with Random Pointer
    为Unity的新版ugui的Prefab生成预览图
    ArcEngine生成矩形缓冲区
  • 原文地址:https://www.cnblogs.com/ximiaomiao/p/6900071.html
Copyright © 2011-2022 走看看