[JavaScript] jQuery methode aufrufen

onip · 27. März 2013

jQuery methode aufrufen

hi,

als MooTooler bin ich mit jQuery überfordert und komme auch mit der logik dahinter nicht klar.
ich versuche einen methoden aufruf an einer anderen stelle auszuführen.
sieht so aus:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>jQuery Class</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
 $.fn.test = function() {
 var selectorEl = this.selector;
 
 this.onComplete = function(str){
 alert(str);
 };
 this.onComplete('init');
 
 return this;
 };
})(jQuery);
</script>
</head>

<body>

<div id="container"></div>
<script type="text/javascript">
jQuery('#container').test();
jQuery('#container').test.onComplete('xxx');
</script>

</body>
</html>

das funktioniert nicht:

HTML:

jQuery('#container').test.onComplete('xxx');

kann mir jemand erklären wie das in jQuery abläuft, danke.

in MooTools wäre das nur so:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>jQuery Class</title>
<script src="http://mootools.net/assets/scripts/mootools.core.js"></script>
<script type="text/javascript">
var test = new Class({
 initialize: function(){
 this.onComplete('init');
 },
 
 onComplete: function(str){
 alert(str);
 }
});
</script>
</head>

<body>

<div id="container"></div>
<script type="text/javascript">
 myTest = new test();
 myTest.onComplete('xxx');
</script>

</body>
</html>

Anzeige

Murdoc · 27. März 2013

AW: jQuery methode aufrufen

jQuery ist kein framework, sondern eine Bibliothek für einfache DOM Manipulationen. $.fn ist keine Klasse

Wenn du unbedingt JavaScript mit dem Klassenkonzept verunstalten willst, dann musst du dir eine entsprechende Bibliothek dafür besorgen.

onip · 27. März 2013

AW: jQuery methode aufrufen

hab's jetzt wie folgt verunstaltet

HTML:

<div id="container"></div>
<script type="text/javascript">
(function($) {
 $.fn.test = function() {
 this.onComplete = function(str){
 alert(str);
 }
 
 return this;
 };
})(jQuery);
var x = jQuery('#container').test();
x.onComplete('xxx');
</script>

Murdoc · 27. März 2013

AW: jQuery methode aufrufen

Wenn du eine Klasse willst:
(So sehen "Klassen" nämlich in JavaScript aus!)

Code:

function Test() {
 // constructor
}

Test.prototype = {
 constructor: Test,

 // objekt eigenschaften/methoden
 beispiel: function() {
 alert("hallo welt");
 }
};

var test = new Test;
test.beispiel();

jQuery ist kein Framework!

Es ist immer wieder interessant zu sehen wie diese JavaScript-Frameworks die Leute dazu verleiten echte (also eingebaute) Konzepte zu vermeiden. Mir ging es mit Prototype vor ein paar Jahren nicht anders.

Nochmal zu $.fn:

$.fn ist der prototype von jQuery.

Alle Eigenschaften/Methoden die du in $.fn definierst sind in allen jQuery Instanzen verfügbar (Tipp: $() bzw. jQuery() erzeugt eine neue Instanz), sei also vorsichtig was du da machst.

Logischerweise hast du dann mit `this` innerhalb der Methoden zugriff auf die Instanz, d.h. wenn du `this` innerhalb der Methode manipulierst, manipulierst du die komplette Instanz. So was kann man machen wenn man will, aber in modernen Compilern ist so was eigl. ein no-go (JIT Compiler funktionieren dann nicht mehr).

onip · 28. März 2013

AW: jQuery methode aufrufen

danke, das du dir zeit nimmst.
ich stell mir halt nur die frage dabei wie ich
eine instanz an einer anderen stelle aufgreifen und
methoden ausführen kann.

hier mal ein counter.
#next führt bei click eine methode von instanz #container aus.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>jQuery Class</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
 $.fn.test = function() {
 var aktPos = 0;
 
 this.nextPos = function(){
 aktPos ++;
 this.out();
 }
 
 this.out = function(){
 this.html('aktPos: '+aktPos);
 }
 this.out();
 
 return this;
 };
})(jQuery);
</script>
</head>

<body>

<div id="container"></div>
<div id="next">[+]</div>
<script type="text/javascript">
var x = jQuery('#container').test();

jQuery('#next').click(function(){
 x.nextPos();
});
</script>

</body>
</html>

was ist aber daran falsch bzw. ein no-go?
vor allem was ist der unterschied ob ich #next in test() mit aufnehme um methoden auszuführen,
oder #next von außen methoden von test() ausführt.

// edit
hier mal nach deiner vorlage:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>jQuery Class</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var fnTest = function (aktPos) {
 this.aktPos = aktPos || 0;
 this.out();
 return this;
}

fnTest.prototype = {
 constructor: fnTest,
 out: function() {
 $('#container').html('aktPos: '+this.aktPos);
 },
 nextPos: function() {
 this.aktPos ++;
 this.out();
 }
};

</script>
</head>

<body>

<div id="container"></div>
<div id="next">[+]</div>
<script type="text/javascript">
var test = new fnTest(10);
jQuery('#next').click(function(){
 test.nextPos();
});
</script>

</body>
</html>

ist diese vorgehensweise besser?

Murdoc · 28. März 2013

AW: jQuery methode aufrufen

Eher so:

HTML:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Beispiel</title>

<style>
 html { font-family: sans-serif; } 
 #next { cursor: pointer; }
</style>

<div id="container"></div>
<span id="next">next</span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
 function Test(elem, apos) {
 this.elem = elem;
 this.apos = apos|0;
 }

 Test.prototype = {
 constructor: Test,

 out: function out() {
 this.elem.text('apos: ' + this.apos);
 },
 
 next: function next() {
 ++this.apos;
 this.out();
 }
 };

 var test = new Test($('#container'));
 test.out();

 $('#next').on('click', function() {
 test.next();
 });
</script>

Wenn du weiterhin lieber mit Class() und Vererbung arbeiten willst:

Code:

function Class(base, proto) {
 var ctor;
 
 if (arguments.length < 2)
 proto = base, base = function(){};
 
 if (proto.initialize)
 ctor = proto.initialize;
 
 if (typeof ctor !== 'function')
 ctor = function(){};
 
 ctor.prototype = Object.create(base.prototype);
 
 Object.keys(proto).forEach(
 function(k) {
 ctor.prototype[k] = proto[k];
 }
 );
 
 ctor.prototype.constructor = ctor;
 return ctor;
}

var Hello = Class({
 hello: function hello() {
 console.log("hello");
 }
});

var World = Class(Hello, {
 world: function world() {
 console.log("world");
 }
});

var test = new World;
test.hello(); // hello
test.world(); // world

console.log(test instanceof Hello); // true
console.log(test instanceof World); // true

Nützliche Suchen

[JavaScript] jQuery methode aufrufen

Videos zum Themenbereich