Jquery事件

時間 2019-11-10

標籤 jquery 事件欄目 JQuery 简体版

原文原文鏈接

1、jquery經常使用的事件javascript

click(),dbclick() css

focus(),blur() html

change() java

keydown(),keypress(),keyup() jquery

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

2、jquery掛事件this

$（「p」）.bind("事件名稱」，要執行的匿名函數)spa

$（「p」）.unbind("事件名稱」)code

3、jquery實現全選功能(重點是屬性用.prop()，不用.attr())htm

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。