Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

jQuery普通事件操作

普通事件操作

dom1级事件设置

  • <input  type=”text”  onclick=”过程性代码” value=’tom’ />

  • <input  type=”text”  onclick=”函数()” />

  • itnode.onclick = function(){}

  • itnode.onclick = 函数;

dom2级事件设置

  • itnode.addEventListener(类型，处理，事件流);

  • itnode.removeEventListener(类型，处理，事件流);

  • node.attachEvent();

  • node.detachEvent();

jquery事件设置

  • $().事件类型(事件处理函数fn);    //设置事件

  • $().事件类型();                 //触发事件执行

  • 事件类型：click、keyup、keydown、mouseover、mouseout、blur、focus等等

  • 例如：$(‘div’).click(function(){事件触发过程this});

注：该方式事件函数内部this都代表jquery对象内部的dom节点对象。

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        $(function(){
            //页面加载完毕给div绑定事件
            $('div').click(function(){
                console.log('谁在碰我呢');
            });
            //$('li').each(function(){
                //this关键字分别代表每个li的dom对象
                //jquery使用时，代码结构类似这样的，this都代表dom对象
            //});
            $('div').mouseover(function(){
                //this.style.backgroundColor = "blue";
                //$(this)使得this的dom对象变为jquery对象
                $(this).css('background-color','red');
            });
        });
        function f1(){
            //间接触发对象的事件执行
            $('div').click(); //使得div的单击事件执行
            $('div').mouseover();  //鼠标移入事件执行
        }
        </script>
        <style type="text/css">
        div {width:300px; height:200px; background-color:pink;}
        </style>
    </head>
    <body>
        <div></div>
        <input type="button" value="间接操作" onclick="f1()" />
    </body>
</html>
Weiter lernen
||
<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ //页面加载完毕给div绑定事件 $('div').click(function(){ console.log('谁在碰我呢'); }); //$('li').each(function(){ //this关键字分别代表每个li的dom对象 //jquery使用时，代码结构类似这样的，this都代表dom对象 //}); $('div').mouseover(function(){ //this.style.backgroundColor = "blue"; //$(this)使得this的dom对象变为jquery对象 $(this).css('background-color','red'); }); }); function f1(){ //间接触发对象的事件执行 $('div').click(); //使得div的单击事件执行 $('div').mouseover(); //鼠标移入事件执行 } </script> <style type="text/css"> div {width:300px; height:200px; background-color:pink;} </style> </head> <body> <div></div> <input type="button" value="间接操作" onclick="f1()" /> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492832 spielt ab