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 = 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>

猜你喜欢

转载自www.cnblogs.com/1314bjwg/p/12286986.html