• jq笔记


    1、基础语法

    $(selector).action()

    $:定义jquery;

    selector:"查询"和"查找" HTML 元素;

    action():执行对此元素的操作

    2、文档就绪事件:

    $(document).ready(function(){

      // 开始写 jQuery 代码...

    });

    简写:

    $(function(){

      // 开始写 jQuery 代码...

    });

    3、jquery选择器:

    所有选择器以美元符号开头:$()

    (1)元素选择器:$("p")     选择本页面所有的p元素

    html:
            <h2>这是标题</h2>
    	<p>1111</p>
    	<p>2222</p>
    	<button>点我试试</button>
    

      

    jq:
    <script>
    	$(function(){
    		$("button").click(function(){
    			$("p").hide();
    		});
    	});
    </script>
    

     点击按钮p元素会隐藏

    (2)id选择器:$("#id")

    html:
    <h2>这是标题</h2>
    <p id="text">3333</p>
    jq:
    <script>
        $(function(){
            $("#btn").click(function(){
                $("#text").hide();
            });
        });
        
    </script>

    点击按钮p元素会隐藏

    (3)class选择器:$(".class")

    html:
    <h2>这是标题</h2>
    <p class="text">4444</p>
    jq:
    <script>
        $(function(){
            $(".btn").click(function(){
                $(".text").hide();
            });
        });
        
    </script>

    点击按钮p元素会隐藏

    其他选择器:

                 语法                     描叙
    $("*") 选取所有元素
    $(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> 元素

    4、外部引入文件

    先引入jquery文件,再引入文件

    <head>
      <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
      </script>
      <script src="my_jquery_functions.js"></script>
    </head>
  • 相关阅读:
    尝试Spring Data Jpa--告别CRUD
    SSM框架开发web项目系列(七) SpringMVC请求接收
    SSM框架开发web项目系列(六) SpringMVC入门
    SSM框架开发web项目系列(五) Spring集成MyBatis
    SSM框架开发web项目系列(四) MyBatis之快速掌握动态SQL
    SSM框架开发web项目系列(三) MyBatis之resultMap及关联映射
    SSM框架开发web项目系列(二) MyBatis真正的力量
    从MVC到Ajax再到前后端分离的思考
    SSM框架开发web项目系列(一) 环境搭建篇
    antd4.0 定制主题
  • 原文地址:https://www.cnblogs.com/1500418882qqcom/p/9994129.html
Copyright © 2020-2023  润新知