码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-02-09 14:37:48      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:function   head   cti   typeof   env   bsp   text   int()   round   

一:使用构造函数创建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 = 0
17         $(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 = count
30 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 = price
50     this.insert = prints
51 }
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>

 

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

标签:function   head   cti   typeof   env   bsp   text   int()   round   

原文地址:https://www.cnblogs.com/1314bjwg/p/12286986.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!