JQuery的事物和一些常用方法

最新推荐文章于 2024-05-25 22:00:12 发布

air_yt

最新推荐文章于 2024-05-25 22:00:12 发布

阅读量326

点赞数

本文链接：https://blog.csdn.net/air_stalh/article/details/73822366

版权

js的事件和JQuery的事件的比较

这里比较了js使用事件和JQuery使用事件的一些比较使用两个事件之类的一些比较。

js代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>jsInc.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script type="text/javascript">
	// js 的事件  为 button添加一个点击事件 
	function loadBody(){
		var myinc = document.getElementById("mybut");

		//设置之后  只要我们点击就会自动调用onclick的匿名函数 
		

		//如果存在两个事件的时候我们 就需要用到 以下两个方法 
		//attachEvent(); //IE 因为浏览器兼容问题 IE8以下都是用这个来进行多添加一个事件的。
        //addEventListener();//CHROME FF 其它则用这个方法
       	//返回非0任意字符 表示true  返回0 false 没有的话就会返回0 
        if(myinc.attachEvent){
        	//IE使用栈
			myinc.attachEvent("onclick",function(){
				alert("hello IEjs");
			});

			myinc.attachEvent("onclick",function(){
				alert("hello IEjs2");
			});
						
        }else {
				//addEventListener 方法不是使用onclick的 是使用click 
				//采用的是队列 先进先出 先打印js  在打印js2
        	myinc.addEventListener("click",function(){
				alert("hello js");	
            });

        	myinc.addEventListener("click",function(){
				alert("hello js2");	
            });
            	
        }
    }	
	</script>
	</head>

	<!-- onload：加载完html之后调用指定function -->
	<body οnlοad="loadBody()">
		<input id="mybut" type="button" value="点击" οnclick="" />
	</body>
</html>

JQuery代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jqueryInc.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
		
	 <!-- 首先需要引外部js文件   -->
	 <script type="text/javascript" src="../jquery-2.2.4.js"></script>
			 
	 <script type="text/javascript">
		$(function(){
			//JQuery 的点击事件 是click方法 
			 $("#mybut").click(function(){
				alert("hello jQuery");
			});
	
			//当需要两个事件的时候 我们可以直接获取标签元素之后启用事件
			$("#mybut").click(function(){
				alert("hello jQuery2");
			});

		})
	 </script>

  <body>
  
		<input id="mybut" type="button" value="点击"/>
  
  </body>
</html>

例子

下面有一个关于事件的例子网页经常看见的广告例子

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>casepho.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
     <!-- 首先需要引外部js文件   -->
	 <script type="text/javascript" src="../jquery-2.2.4.js"></script>
		
	<script type="text/javascript">
		  $(function(){
				var myImg=$("#pho");
	            //获取到图片的宽度
	            var width=myImg.width();
	            var height=myImg.height();
	            var screenWidth=$(document).width();
	            var screenHeight=$(document).height();
	            var x=screenWidth-width;
	            var y=screenHeight-height;
	            $("#pho").css("left",x-12);
	            $("#pho").css("top",y-12);

	            var myImg=$("#clos");
	            $("#clos").css("right",8);
	            $("#clos").css("top",0);

	            var but = $("#mybut");
	            but.click(function(){
					$("#pho").css("display","none");
		        });
			})
	
	</script>
		
  </head>
  
  <body>
  
	 <div id="pho" style="border:1px solid black;width:300px;height:200px;position: absolute" >
		<img src="image/a.gif" id="myImage" width="300px" height="200px">
		
		<div id="clos" style="width:10px;height:10px;position: absolute">
			<input id="mybut" type="button" value="x">
		</div>
	</div>
  
  </body>
</html>

下面是一个鼠标放上去显示鼠标离开消失例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>casemouse.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	  <!-- 首先需要引外部js文件   -->
	 <script type="text/javascript" src="../jquery-2.2.4.js"></script>
	 <script type="text/javascript">
	 
     var map=[];
     map["kobe"]={
         img:"image/kobe.jpg",
         age:18,
         sex:'男',
         hobby:"篮球"
     };
     map["kd"]={
         img:"image/kd.jpg",
         age:18,
         sex:'男',
         hobby:"扫地"
     };
     map["james"]={
         img:"image/james.jpg",
         age:18,
         sex:'男',
         hobby:"篮球"
     };
    
     /*
       dom元素加载完成事件
     */
      $(function(){
         //给所有的li添加鼠标进入事件
         $("li").mouseenter(function(){
            //事件源  触发事件的元素
            var jqueryObj=$(this);
            //获取事件源的文本
            var text=$.trim(jqueryObj.text());//val()  text() html()
            //获取当前li的对象
            var data=map[text];
            $("#myImage")[0].src=data.img;
            $("#age").text("年龄："+data.age);
            $("#sex").text("性别 ："+data.sex);
            $("#hobby").text("爱好："+data.hobby);
            //获取鼠标的x和y坐标
            var x=event.clientX;
            var y=event.clientY;
            $("#people")[0].style.display="block";
            $("#people")[0].style.position="absolute";
            $("#people")[0].style.left=x;
            $("#people")[0].style.top=y;
         })
         //给所有的li添加鼠标 飘出事件
         $("li").mouseleave(function(){
             $("#instroMy")[0].style.display="none";
         });
      })
	 </script>
  </head>
  
  <body>
		<ul style="width:100px;border:1px solid black">
			<li>
				kobe
			</li>
			<li>
				kd
			</li>
			<li>
				james
			</li>
		</ul>

		<div id="people" style="border:1px solid black;width:200px;display:none" >
			<div style="float: left">
				<img src="image/kobe.jpg" id="myImage" width="100px" height="100px">
			</div>
			<div style="">
				<div style="margin-top:15px" id="age">
					年龄：18
				</div>
				<div style="margin-top:15px" id="sex">
					性别: 男
				</div>
				<div style="margin-top:15px" id="hobby">
					爱好：篮球
				</div>
			</div>
		</div>
  </body>
</html>

jquery对象的常用一些方法

get(index) 获取jquery对象中的dom对象
eq(index) 获取jquery对象中的jquery对象 equals
1修改dom元素的数据(不带参数获取数据带参数修改数据)
val-text-html文本框数据val 文本 text html html
attr 属性设置带一个参数获取属性两个参数属性
2修改dom元素的样式
css行内样式
addClass内部样式表
3修改dom元素的子元素
append 追加元素到所有的子元素后 remove 元素自我销毁不是删除父元素下的子元素

还有方法可以参考jquery的api