一:使用构造函数创建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> 属性‘+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>