Jquery事件
阿新 • • 發佈：2017-05-12
執行 new use style input jquer sed mouseover hang
一、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"> vararr = 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事件