zoukankan      html  css  js  c++  java
  • JQuery语法,选择器和事件

    1.语法

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

    2.文档就绪事件

    $(document).ready(function(){

    //相关代码

    });

    简写形式:

    $(function(){

    //相关代码

    })

    目的:防止函数事先运行

    3.JQuery选择器

    1.元素选择器

      $("p").action();

    2.ID选择器

      $("#p").action();

    3.类选择器

      $(".p").action();

    4.选取所有元素

      $("*").action();

    5.选取当前元素

      $(this).action();

    6.选取某类某元素

      $("p.class").action();   //.class要在后面

    7.选取第一个元素或者第n个元素

      $("p:first").action();

         $("p:nth(n)").action();

    8.选取含有某两个标签的第n个元素

      $("ul li:nth(n)").action();

    9.选取含有属性的元素

      $("[name]").action();

    10.选取属性值等于某个特定值的标签元素

      $("a [name='123']").action

    11.选取所有含有某个属性的元素

      $(":button").action();

    12选取奇数或者偶数列

      $("tr:even").action();

      $("tr:odd").action();

    13.引用独立的JQuery文件

    <script src="xxx.js"></script>

    4.JQuery事件

    事件:对不同访问者的响应(调用的方法)。

    比如:点击某个按钮

    1.事件分类:键盘,鼠标,表单,文档窗口

    2.语法:

      

    $("p").action(function(){
    
    });

    实例:

    单击隐藏:

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

    双击隐藏:

    $(document).ready(function(){
        $("p").dbclick(function(){
              $(this).hide();    
    });    
    });

    鼠标经过响应:

    $(function(){
        $("p").mouseenter(function(){
           alert("双击事件");
    });
    });

    悬浮事件:

    $(document).ready(function(){
        $("p").hover(function(){
           alert("你已经悬浮");
    },
           function(){
            alert("你已经离开");
    }
    );
    });    

    聚焦事件:

    $(document).ready(function(){
        $("input").focus(function(){
           $(this).css("background-color","#000");
    }
    );
    });

     

    本博客基于网络课程完成,旨在学习,有错误请指正!
  • 相关阅读:
    《算法竞赛进阶指南》0x42树状数组 楼兰图腾
    《算法竞赛进阶指南》0x41并查集 奇偶游戏
    .NET技术-常规操作
    TFS-在windows上配置自动化部署
    * 常用软件下载
    Docker 修改网桥网段
    Docker
    Docker
    NETCORE
    .NET框架
  • 原文地址:https://www.cnblogs.com/comefuture/p/6715185.html
Copyright © 2011-2022 走看看