jQuery事件及Echarts

最新推荐文章于 2024-05-02 21:55:01 发布

achu19

最新推荐文章于 2024-05-02 21:55:01 发布

阅读量1k

点赞数

文章标签： js 面试经验分享

本文链接：https://blog.csdn.net/achu19/article/details/105486168

版权

Dom加载事件

含义

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作。
常见的元素点击事件、鼠标事件、键盘输入事件等，较Javascript相比JQuery增加并扩展了基本的事件处理机制，极大的增强了事件处理的能力。

DOM加载事件

使用Javascript时候使用的是window.onload方法，而Jquery使用的是$(document).ready()方法。
$ (document).ready方法是事件模块中最重要的一个函数，可以极大地提高Web 应用程序的响应速度。
jQuery 就是用$（document) .ready（）方法来代替传统JavaScript 的window.onload 方法的。通过使用该方法，可以在DOM 载入就绪时就对其进行操纵并调用执行它所绑定的函数。

$（document) .ready（）方法和window.onload 方法的区别

执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
简化写法
window.onload没有简化写法
$document).ready(function(){})可以简写成$ (function(){});

事件绑定

bind()

文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind（）方法来对匹配元素进行特定事件的绑定， bind（）方法的调用格式为：

    bind(type,[data], fn);

第1 个参数是事件类型，类型包括： blur、focus 、load 、click、mousedown 、mouseup 、mouseover 、mouseout 、change 、select、submit 等，当然也可以是自定义名称。
第2 个参数为可选参数，作为event.data 属性值传递给事件对象的额外数据对象。
第3 个参数则是用来绑定的处理函数。

unbind

unbind()方法为元素取消事件绑定，unbind()方法的格式如下：

    $(selctor).unbind([type],[data]);

unbind()方法是元素bind()方法的反向操作，从每个匹配的元素中删除绑定的事件。
当没有参数时候删除所有的绑定事件。如果提供了事件类型的参数则删除指定的绑定事件。
如果指定了事件类型，第二个参数指定了函数名称则删除事件类型中与第二个参数名称对应的事件。

注
4. bind()方法可以为任何元素绑定事件。
5. 但对于一些常用的事件，jQuery还提供了更加简便的事件方法来完成相就的操作，下表列举了几个常用事件方法：

方法	含义
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector). blur(function)	触发或将函数绑定到被选元素的失去焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

<script src="../JQuery/js/jquery-3.1.1.js"></script>
<script>
    $(document).ready(function () {
    	//绑定单击事件,改变字体颜色
    	$("#btn1").bind("click",function(){
    		alert("中国加油！");
    	});
    	$("#btn2").bind("click",function(){
    		$("p:first").css("color","red");
    	});
    	//鼠标移入移出事件
    	$("#p1").mouseover(function(){
    		//$(this).css();
    		$(this).attr("style","color: red;border: 1px solid yellow;");
    	}).mouseout(function(){
    		$(this).css({"color":"blue","border":"1px solid black"});
    	});
    	//change事件 onchange
    	$("#userName").change(function(){
    		//this.style="background:grey";
    		$(this).css("background","gray");
    	});
    });
</script>

合成事件

jQuery 有两个合成事件hover()方法和toggle()方法，类似前面讲过的ready（）方法，
hover()方法和toggle（）方法都属于jQuery 自定义的方法。

hover（）方法
hover()方法用于模拟光标悬停事件。方法格式：hover(enter,leave)。
当光标移动到元素上时，会触发指定的第1 个函数(enter);
当光标移出这个元素时，会触发指定的第2 个函数(leave) 。
toggle()方法
toggle()方法可以切换元素的可见状态。方法格式：toggle(fun1,fun2,…,funN);
如果元素是可见的，切换后则为隐藏；如果元素是隐藏的，切换后则为可见的。

<script src="../JQuery/js/jquery-3.1.1.js"></script>
<script>
    $(document).ready(function () {
		//hover方法 鼠标移入和移出
		$("div").hover(function(){
			// 移入
			$(this).css("color","red");
		},function(){
			// 移出
			$(this).css("color","#00BFFF");
		})
		// toggle方法(显示和隐藏)
		$("#btnShow").click(function(){
			$("h3").last().toggle();
		});
    });
</script>

Dom加载事件

show（）方法和hide（）方法是jQuery 中最基本的动画方法。在HTML 文档里，为一个元素调用hide()方法，会将该元素的display 样式改为“none’’。当把元素隐藏后，可以使用show（）方法将元素的display 样式设置为先前的显示状态（“block ”或“ inline ”或其他除了“none ”之外的值）。
show（）方法和hide（）方法在不带任何参数的情况下，相当于css（”display’’,"none/ block/inline），作用是立即隐藏或显示匹配的元素，不会有任何动画。如果希望在调用show（）方法时，元素慢慢地显示出来，可以为show（）方法指定一个速度参数。
例如，指定一个速度关键字“ slow 、normal、 fast”。应时间为0.6秒、0.4秒和0.2秒，也可设置整数指定执行时间数字计数级别是毫秒 slow 、normal、 fast实际上相当于600、400、200的值，用来设定整个显示/隐藏过程消耗多少毫秒。
如：(“p”).show(1000);该示例使p元素中1秒内显示完毕。也能添加回调事件函数。

<script src="../JQuery/js/jquery-3.1.1.js"></script>
<script>
    $(document).ready(function () {
     	//隐藏和显示
     	$("#btnShow").click(function(){
     		$("p").show();
     	});
     	$("#btnHide").click(function(){
     		$("p").hide();
     	});
      	//带有动画的显示和隐藏
     	$("#btnShow1").click(function(){
     		$("h3:last").show("fast");
     	});
     	$("#btnHide1").click(function(){
     		$("h3:last").hide(1000);// 1000ms
     	});
    });
</script>

Echarts

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#chartmain{
				width: 600px;
				height: 400px;
			}
		</style>
		<!--引入Echarts和JQuery文件-->
		<script src="echarts.min.js"></script>
		<script src="jquery-3.1.1.min.js"></script>
		<script>
			// 加载数据
			$(function(){
				// 指定图标的配置和数据
				var option = {
		            title:{
		                text:'ECharts 数据统计'
		            },
		            tooltip:{},
		            legend:{
		                data:['用户来源']
		            },
		            xAxis:{
		                data:["Android","IOS","PC","Other"]
		            },
		            yAxis:{
		
		            },
		            series:[{
		                name:'访问量',
		                type:'bar',
		                data:[500,200,360,100]
		            }]
		        };
				// 初始化Echarts实例
				var myChart = echarts.init(document.getElementById('chartmain'));
				// 显示图表
				//使用制定的配置项和数据显示图表
        		myChart.setOption(option);
			});
		</script>
	</head>
	<body>
		<div id="chartmain"></div>
	</body>
</html>

achu19

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件及Echarts

Dom加载事件<!-- DOM加载事件页面加载完毕后浏览器会通过javascript为Dom元素加载事件...
复制链接

扫一扫