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) });