zoukankan      html  css  js  c++  java
  • Jquery事件

    一、jquery常用的事件

    click(),dbclick()    

    focus(),blur()    

    change()    

    keydown(),keypress(),keyup()  

    mousedown(),mouseup()    mouseenter(),mouseleave()  mouseover(),mouseout()  mousemove()

    二、jquery挂事件

    $(“p”).bind("事件名称”,要执行的匿名函数)

    $(“p”).unbind("事件名称”)

    三、jquery实现全选功能(重点是属性用.prop(),不用.attr())

    <script src="jquery-3.2.0.min.js"></script>
    <title>无标题文档</title>
    </head>
    
    <body>
    </body>
    <script type="text/javascript">
    var arr = new Array(2,3,4);
    
    //JSON
    var a = {"one":"111",
             "two":"222",
             "three":arr,
             "four":{"hello":"你好"}
             };//元素名:值
    //alert(a["one"]);//方法一取值
    //alert(a.four.hello);//方法二取值
    
    //遍历JSON数据
    for(var k in a)
    {
        alert(a[k]);
    }
    
    </script>
    </html>

    例子1

    <script src="jquery-3.2.0.min.js"></script>
    <title>无标题文档</title>
    </head>
    
    <body>
    <h1>全选效果</h1>
    <div><input type="checkbox" value="qx" id="qx" /> 全选</div>
    <br />
    <div>
    <input type="checkbox" value="1" class="ck" /> 潘庄
    <input type="checkbox" value="1" class="ck" /> 火炬公园
    <input type="checkbox" value="1" class="ck" /> 理工大
    <input type="checkbox" value="1" class="ck" /> 马尚
    <input type="checkbox" value="1" class="ck" /> 沣水
    <input type="checkbox" value="1" class="ck" /> 南定
    </div>
    </body>
    <script type="text/javascript">
    
    $("#qx").click(function(){
            
            //找到全选按钮的选中状态
            //var xz = $(this)[0].checked;
            var xz = $(this).prop("checked");
            
            //改变所有的checkbox选中状态,用prop代替attr,解决了之前用js写出现的bug,但是在源代码中查不到
            $(".ck").prop("checked",xz);        
        })
    
    </script>
    </html>

    例子2

    <script src="jquery-3.2.0.min.js"></script>
    <title>无标题文档</title>
    <style type="text/css">
    .d{ 150px; height:150px; margin:5px; background-color:red; float:left}
    </style>
    </head>
    
    <body>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    
    </body>
    <script type="text/javascript">
    
    $(".d").mouseover(function(){
            //让所有的DIV变成红色
            $(".d").css("background-color","red");
            //让选中的变为绿色
            $(this).css("background-color","blue");
        })
        
    $(".d").mouseout(function(){
            //让所有的DIV变成红色
            $(this).css("background-color","red");
        })
    
    </script>
    </html>
  • 相关阅读:
    继承中的虚函数、纯虚函数、普通函数
    struct与class的区别
    boost::filesystem总结
    ASM: Active Shape Models--Their Training and Application
    基础知识:仿射变换、相似变换、等距变换等常见变换
    PDM:Training Models of Shape from Sets of Examples
    常见优化器
    深度学习基础(五)ResNet_Deep Residual Learning for Image Recognition
    深度学习基础(四) Dropout_Improving neural networks by preventing co-adaptation of feature detectors
    ios 各种变量和作用范围
  • 原文地址:https://www.cnblogs.com/zhaohui123/p/6843863.html
Copyright © 2011-2022 走看看