zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    java 开发webservice
    myeclipse下jsp页面汉字不能保存问题
    java web项目的部署
    Java小白手记:WEB项目等
    操作系统学习笔记:虚拟内存
    面向接口编程
    WEB端应该使用DataTable/DataSet吗?
    ExtJs grid合并单元格
    操作系统学习笔记:内存管理
    Oracle中长度为0字符串与null等价
  • 原文地址:https://www.cnblogs.com/1314bjwg/p/12286986.html
Copyright © 2011-2022 走看看