• JQuery学习之语法


    1.JQuery语法就是通过选取HTML元素,并对选取的元素执行某些操作:

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

    (1)美元符号定义jQuery

    (2)选择符(selector)查询和查找HTML元素

    (3)jQuery的action()执行对元素的操作

    2.JQuery的选择器:

    (1)$("*")    选取所有元素

    (2)$("this")  选取当前 HTML 元素

    (3)$("p.intro")   选取 class 为 intro 的 <p> 元素

    (4)$("p:first")     选取第一个 <p> 元素

    (5)$("ul li:first")   选取第一个 <ul> 元素的第一个 <li> 元素

    (6)$("ul li:first-child")   选取每个 <ul> 元素的第一个 <li> 元素

    (7)$("[href]")     选取带有 href 属性的元素

    (8)$("a[target='_blank']")   选取所有 target 属性值等于 "_blank" 的 <a> 元素

    (9)$(":button")    选取所有 type="button" 的 <input> 元素 和 <button> 元素

    (10)$("tr:even")    选取偶数位置的 <tr> 元素

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

    3.JQuery事件方法:

    (1)$(document).ready(function(){

        //开始一段代码

    });

    这个叫做文档就绪事件,是为了防止文档在完全加载就绪之前运行JQuery代码

    可以简写为:$(function(){

          //开始一段JQuery代码

    });

    (2)dblclick()当双击元素时,会发生dblclick事件:

    $("p").dblclick(function(){

      $(this).hide();

    });

    (3)mousedown()当鼠标移动到元素上方,并按下鼠标按键时,会发生mousedown事件

    $("#p1").mousedown(function(){

      alert("Mouse  down over  p1");

    });

    (4)mouseup()当在元素上松开鼠标按钮时,会发生mouseup事件:

    $("#p1").mouseup(function{

      alert("Mouse ip over p1!");

    });

    (5)focus()当元素获得焦点时,发生focus事件;当通过鼠标点击选中元素或通过tab建定位元素时,该元素就会获得焦点;focus()方法触发focus事件:

    $("input").focus(function(){

      $(this).css("background-color","#cccccc");

    });

    (6)hover()方法用于模拟光标悬停事件;当鼠标移动到元素时,就会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,就会触发指定的第二个函数(mouseleave):

    $("#p1").hover(function(){

      alert("You entered p1!");

    },

    function(){

      alert("Bye!   You now  leave  p1!");

    });

    (7)blur()当元素失去焦点时,就发生blur事件:

    $("input").blur(function(){

      $(this).css("background-color","#ffffff");

    });

  • 相关阅读:
    [转]: 浅谈Java中的equals和==
    易忘易混的java基本概念
    mysql查看锁表锁进程
    [转] Python 包管理工具解惑
    双网卡单网关的路由问题
    [转]火狐 SSL 收到了一个弱临时 Diffie-Hellman 密钥
    Linux中如何进入减号开头的目录中
    zabbix的一点记录
    从图形界面配置zabbix
    调用API自动配置zabbix version 3.0
  • 原文地址:https://www.cnblogs.com/hqutcy/p/5951606.html
Copyright © 2020-2023  润新知