417 事件、監聽、jQuery、輪播手動

am:通用事件javascript

a連接事件阻止默認行爲 return falsecss

HTML元素大都包含了本身的默認行爲，例如：超連接、提交按鈕等。咱們能夠經過在綁定事件中加上return false來阻止它的默認行爲。html

通用性的事件監聽方法
1.綁定HTML元素屬性
<input type="button" value="clickMe" onClick="check(this)">
2 綁定dom對象屬性
document.getElementById("btn1").onClick=test;//test函數名java

兩種添加事件方式 jquery

1.function show(){數組

alert("你點擊了我");框架

2.document.getElementById("mytest1").onclick=show; //+()是調用,不+是參數dom

function show(){
alert("你點擊了我");
}
//頁面加載完成後調用
window.onload=function(){
/*第二種添加事件方式*/
document.getElementById("mytest1").onclick=show;
}函數

標準DOM事件監聽方法測試

[object].addEventListener(「事件類型」,」處理函數」,」冒泡事件或捕獲事件」);

var bt1=document.getElementById("mytest1"); bt1.removeEventListener("click",show,false);

[object].removeEventListener(「事件類型」,」處理函數」,」冒泡事件或捕獲事件」);

  var bt1=document.getElementById("mytest1"); bt1.addEventListener("click",show,false);

注意：上圖是通用事件 標準事件就是 去掉 「on」
onMouseOver放到函數裏會自動彈窗
onMouseOver="show()"

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通用性的事件監聽方法</title>
<script type="text/javascript">
function show(){
alert("你點擊了我");
}
//頁面加載完成後調用
window.onload=function(){
/*第二種添加事件方式*/
document.getElementById("mytest1").onclick=show; //這裏的show不須要加（），加了等於調用
}
</script>
</head>
<body>
<a href="https://www.baidu.com/" onClick="return false">點擊我</a>
<input type="button" value="測試1" id="mytest1" >
<button type="button" id="test2" onClick="show()"><b>測試2</b></button>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>標準DOM中的事件監聽方法</title>
<script type="text/javascript">
    function show(){ alert("你點擊我了"); } //取消bt1按鈕的點擊事件
    function concel(){ //[object].removeEventListener(「事件類型」,」處理函數」,false);
        var bt1=document.getElementById("mytest1"); bt1.removeEventListener("click",show,false); } window.onload=function(){ //[object].addEventListener(「事件類型」,」處理函數」,false);
    var bt1=document.getElementById("mytest1"); bt1.addEventListener("click",show,false); //獲取測試2按鈕
    var bt2=document.getElementById("mytest2"); bt2.addEventListener("click",concel,false); } </script>
</head>

<body>
<input type="button" value="測試1" id="mytest1">
<button type="button" id="mytest2"><b>測試2</b></button>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠標移動到div 和修改input後彈窗</title>
<script type="text/javascript">
    function show(){ /*var str=document.getElementById("a").value; alert(str);*/ alert("aaa"); } </script>
</head>

<body>
<form action="#" onSubmit="show()">
<!-- onSelect 當鼠標選中 -->
    <input type="text" value="aa" onSelect="show()">
<!-- onChange當改變內容,失去焦點 -->
    <input type="text" value="bb" onChange="show()">
<!-- onFocus 當點擊時 重複點擊 -->
    <input type="text" value="cc" onFocus="show()">
<!-- onBlur 輸入內容 失去焦點時 -->
    <input type="text" value="dd" onBlur="show()" id="a">    
    <input type="submit" value="提交">
</form>
<div style="width: 200px;height: 200px;background: red" onMouseOver="show()"></div>
</body>
</html>

<title>鼠標變小手</title>
<style> #d1{ height:200px; width: 200px; background: red; } #d1:hover{ /*鼠標變小手*/ cursor:pointer; } </style>
</head>
<body>
    <div id="d1"></div>
</body>

<head>
<meta charset="utf-8">
<title>用JS經過名字找屬性</title>
<script type="text/javascript"> window.onload=function(){ //經過id屬性找元素(獲得一個元素對象)
        var doc=document.getElementById("p"); //經過class屬性找元素(獲得一個數組)
        var arr=document.getElementsByClassName("p1"); alert(arr[1].innerHTML); //經過元素名稱找元素(獲得一個數組)
        var arr2=document.getElementsByTagName("p"); } </script>
</head>
<body>
    <p class="p1">a</p>
    <p class="p1">b</p>
    <p class="p1">c</p>
    <p class="p">d</p>
</body>

JQ獲取元素屬性
<body>
    <input type="text" value="aaa" id="in" aaa="bbb"> 
</body>
<script type="text/javascript">
    //1.獲取元素屬性值：元素對象.屬性名 /* var v=document.getElementById("in").value; alert(v);*/
    //2.獲取元素屬性值：元素對象.getAttribute("屬性名");
    /*var inp=document.getElementById("in"); var v=inp.getAttribute("aaa");

//其中aaa="bbb"是自定義命名 必須用getA ttribute 纔會認

alert(v);*/ //給元素屬性賦值 var inp=document.getElementById("in"); inp.getAttribute("value","cccc"); </script> </html>

jQuery使用方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
</head>

<body>
<p id="p1">a</p>
<p class="p2" align="center">b</p>
<p class="p2">c</p>
<p class="p2">d</p>
<div>
    <p>e</p>
    <p>f</p>
</div>
<input type="text" value="aaaaaaaa">
</body>
<script type="text/javascript">
    /*id選擇器*/
    /*var p1=$("#p1"); alert(p1.html());*/
    /*class選擇器*/
    /*var arr=$(".p2"); alert(arr.length);*/
    /*元素選擇器*/
    /*var arr=$("p"); alert(arr.length);*/
    /*父子關係選擇器*/
    /*var arr=$("div p"); alert(arr.length);*/
    /*屬性選擇器*/
    /*var obj=$("[align='center']"); alert(obj.html());*/
    /*若是獲得的是數組，則用jqDom.eq(下標)*/
    /*alert($(".p2").eq(0).html());*/
    //獲取js對象 js->jquery $(jsDom)
    /*var p1=document.getElementById("p1"); alert($(p1).html());*/
    //獲取jQuery對象 jquery->js $('div')[0] $('div').get(0)
    /*alert($(".p2").get(1).innerHTML);*/
    //給非表單元素賦值
    /*$("#p1").html("你好");*/
    //獲取表單的value值
    /*alert($("input").val());*/
    //給表單元素賦值
    $("input").val("bbbbbbbb"); </script>

</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>作輪播圖</title>
<script type="text/javascript">
    var arr=null; var tp=null; var index=0; //當頁面加載完成之後執行
    window.onload=function(){ //定義一個數組裝有圖片地址
        arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"]; //獲取img元素
        tp=document.getElementById("tp"); start(); } function change(obj){ //獲取用戶點的是哪一個按鈕
        index=obj.value; alert(index); tp.src=arr[index]; } //下一張
    function next(){ //若是當前圖片是最後一張
        if(index==arr.length-1){ index=0; }else{ index=index+1; } tp.src=arr[index]; } //上一張
    function up(){ //若是當前圖片是最後一張
        if(index==0){ index=arr.length-1; }else{ index=index-1; } tp.src=arr[index]; } //開始輪播
    function start(){ var timer=setInterval("next()",5000); } </script>
</head>

<body>
<img src="img/1.jpg" id="tp">
<input type="button" value="上一頁" onClick="up()">
<input type="button" value="0" onClick="change(this)">
<input type="button" value="1" onClick="change(this)">
<input type="button" value="2" onClick="change(this)">
<input type="button" value="3" onClick="change(this)">
<input type="button" value="下一頁" onClick="next()">

</body>
</html>

jQuery

　　　/*id選擇器*/ /*var p1=$("#p1"); alert(p1.html());*/ /*class選擇器*/  /*var arr=$(".p2"); alert(arr.length);*/ /*元素選擇器*/  /*var arr=$("p"); alert(arr.length);*/ /*父子關係選擇器*/ /*var arr=$("div p"); alert(arr.length);*/ /*屬性選擇器*/ /*var obj=$("[align='center']"); alert(obj.html());*/ /*若是獲得的是數組，則用jqDom.eq(下標)*/ /*alert($(".p2").eq(0).html());*/ //獲取js對象 js->jquery $(jsDom) /*var p1=document.getElementById("p1"); alert($(p1).html());*/ //獲取jQuery對象 jquery->js $('div')[0] $('div').get(0)  /*alert($(".p2").get(1).innerHTML);*/ //給非表單元素賦值 /*$("#p1").html("你好");*/ //獲取表單的value值 /*alert($("input").val());*/ //給表單元素賦值 $("input").val("bbbbbbbb");

 js 和 jquery主要的區別 在 dom 想用jquery 必須先引入（順序問題） 先css 在js： 先框架css再本身css 先jquery 在框架 在本身 找元素： js： document.getElement[s]By... id tagname name classname jquery： $(選擇器) $(選擇器).eq(下標) js找到的是js對象 jquery找到的是jquery對象 相互轉 js->jquery $(jsDom) jquery->js   $('div')[0]    $('div').get(0) 兩個對象 jsDom jqDom 操做內容： jsDom.innerHtml = 賦值 jsDmo.value jqDom.html() jqDom.html('賦值') jqDom.val() 操做樣式 jsDom.style.color = 賦值   //只能操做行內樣式
        jqDmo.css('color');     jqDmo.css('color','red'); jqDom.removecss('color') jqDmo.css({ 'color' : 'red', 'width' : '100px' ... }); 操做屬性 jsDom.getAttribute('class'); jsDom.setAttribute('class','add'); jsDom.removeAttribute('class'); jqDom.attr('class'); jqDom.attr('class','add'); jqDom.attr({ 'data' : 'add', 'id' : 'add', ... }); jQDom.removeAttr('class') jqDom.addclass('del') 操做事件 jsDom.onClick = function(){ this } jqDom.click(function(){ $(this) });