Jquery事件

Posted 2020-09-17 ChrissZhao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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{ width: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>

以上是关于Jquery事件的主要内容，如果未能解决你的问题，请参考以下文章

原生js如何绑定a连接点击事件？

jQuery应用代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）