jQuery事件对象和js对象创建(使用构造函数的方式)

一:使用构造函数创建jQuery对象。

1:jQuery的Event()构造函数用事件名称作为参数来创建事件对象。使用构造函数创建事件对象时,可不使用new关键字。

2:使用trigger()方法来触发事件。

3:on()方法可以为事件附加事件处理函数,off()方法用于解除附加事件函数.

  语法格式:$(‘selector‘).on("enventname",function name(){.....函数体    })。【注意】:可以为同一个目标附加多个事件函数。

 1 <!DOCTYPE html> 2 <html> 3  4 <head> 5 <meta charset="utf-8"> 6  <title>创建jQuery对象.</title> 7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> 8  </script> 9 <style type="text/css">10 11  </style>12 </head>13 <script>14 $(function() {15 //为body绑定click事件.16 var n = 017 $(body).on(click, function() {18 $(body).append(<div>you click me: + (++n) + </div>)19  })20 var e1 = $.Event(click) //创建事件对象.21 var e2 = new $.Event(click) //创建事件对象.22 /*23  可以把trigger触发想象成不需要鼠标等特定的实际动作的触发方法。24 25 */26 for (var i = 0; i < 3; i++) {27 $(body).trigger(e1) //触发事件.28  }29 for (var i = 0; i < 3; i++) {30 $(body).trigger(e2) //触发事件.31  }32  })33 </script>34 35 <body>36  使用事件对象.37 </body>38 39 </html>

2:附加和解除事件处理函数:

 1 <!DOCTYPE html> 2 <html> 3  4 <head> 5 <meta charset="utf-8"> 6 <title>附加和解除事件处理函数</title> 7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> 8 </script> 9 <style type="text/css">10 11 </style>12 </head>13 <script>14 /*15  绑定三个同一个button:他们会依次执行.但是只需要单击一次按钮16 */17  $(function() {18  $(#btn).on(click, function(event) {19  $(div).css(border, dashed 1px red)20  })21  $(#btn).on(click, function() {22  $(div).css(color, red)23  })24  $(#btn).on(click, addSub)25 26 function addSub() {27  $(div).append(<h1>addSub附加事件函数.</h1>)28  }29  $(#btn1).click(function() {30  $(#btn).off(click, addSub) //解除addSub事件处理函数31  })32  })33 </script>34 35 <body>36 <div>附加多个事件处理函数</div><br>37 <button id="btn">改变DIV通过on</button>38 <button id="btn1">解除addSub的附加</button>39 </body>40 41 </html>

3:js创建对象,以及对象的属性和方法:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>function</title> 5 <script type="text/javascript"></script> 6 <script> 7 /* 8 1:对象的方法: 9 即通过对象调用的函数,在方法中可以用this关键字来引用当前对象,将函数赋值给对象属性,该属性即可称为方法,通过该属性来引用函数.作为方法使用的属性,可称为方法属性.10 */11 function print()//定义对象的方法12 {13 for (p in this) //通过this关键字来引用当前对象14  {15  document.write(<br>属性p:+p)16  document.write(<br>属性+p+=+this[p])17  }18 }19 function count(c)20 {21 document.write(<br>对象b+c)22 document.write(<br>b.name+this.name)23 }24 var a = {name:c++,price:12}25 //在引用对象方法时out属性是在引用对象方法的时候才创建的26 a.out = print //用对象的属性来引用对象的方法27 a.out()//out就为方法属性,out的属性值就是函数体,28 var b = {name:Make,ago:20}29 b.deng = count30 b.deng(5)31 //查看对象的deng属性32 document.write(<br>b.deng=+b.deng)33 34 /*35 对象的构造函数:构造函数要和new关键字一起使用36 */37 function prints()38 {39 for(ps in this)40  {41 if(function===typeof this[ps])42 continue //跳过方法43  document.write(<br>&nbsp;&nbsp;属性+p+=+this[ps])//输出属性及其值44  }45 }46 function Book(name,price)47 {48 this.name = name //使用this访问当前对象49 this.price = price50 this.insert = prints51 }52 var s = new Book(c++入门,40) //执行构造函数53 document.write(<br>)54 document.write(对象s:)55 document.write(<br>)56 s.insert() //执行对象方法;57 </script>58 </head>59 <body>60 61 </body>62 </html>

 

相关文章