javascript - How is this selector working in Jquery when it doesnt even exist yet? -


i found tutorial online me understand drag , drop feature of jquery card mapping little game following link ...http://www.elated.com/res/file/articles/development/javascript/jquery/drag-and-drop-with-jquery-your-essential-guide/card-game.html

on line 37 , why $('<div>' + numbers[i] + '</div>') selected when doesn't exist yet , far i'm concerned , select things in jquery when exist in document .. don't quite understand selector , can please elaborate on what's going on selector ? on line 48 ... ui built in word in jquery .. when ui.draggable ? ui refer ?

thanks !

<!doctype html> <html lang="en"> <head>  <title>a jquery drag-and-drop number cards game</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css">  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> <script type="text/javascript">  var correctcards = 0; $( init );  function init() {    // hide success message   $('#successmessage').hide();   $('#successmessage').css( {     left: '580px',     top: '250px',     width: 0,     height: 0   } );    // reset game   correctcards = 0;   $('#cardpile').html( '' );   $('#cardslots').html( '' );    // create pile of shuffled cards   var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];   numbers.sort( function() { return math.random() - .5 } );    ( var i=0; i<10; i++ ) {     $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendto( '#cardpile' ).draggable( {       containment: '#content',       stack: '#cardpile div',       cursor: 'move',       revert: true     } );   }    // create card slots   var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];   ( var i=1; i<=10; i++ ) {     $('<div>' + words[i-1] + '</div>').data( 'number', ).appendto( '#cardslots' ).droppable( {       accept: '#cardpile div',       hoverclass: 'hovered',       drop: handlecarddrop     } );   }  }  function handlecarddrop( event, ui ) {   var slotnumber = $(this).data( 'number' );   var cardnumber = ui.draggable.data( 'number' );    // if card dropped correct slot,   // change card colour, position directly   // on top of slot, , prevent being dragged   // again    if ( slotnumber == cardnumber ) {     ui.draggable.addclass( 'correct' );     ui.draggable.draggable( 'disable' );     $(this).droppable( 'disable' );     ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );     ui.draggable.draggable( 'option', 'revert', false );     correctcards++;   }     // if cards have been placed correctly display message   // , reset cards go    if ( correctcards == 10 ) {     $('#successmessage').show();     $('#successmessage').animate( {       left: '380px',       top: '200px',       width: '400px',       height: '100px',       opacity: 1     } );   }  }  </script>  </head> <body>  <div class="widebox">   <h1>drag-and-drop jquery: essential guide</h1>   <h2>a number cards game</h2> </div>  <div id="content">    <div id="cardpile"> </div>   <div id="cardslots"> </div>    <div id="successmessage">     <h2>you did it!</h2>     <button onclick="init()">play again</button>   </div>  </div>  <div class="widebox">   <p>&copy; elated.com | <a href="http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/">back tutorial</a></p>   <p style="font-size: .8em; line-height: 1.5em;"><a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="creative commons license" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a><br />this <span xmlns:dc="http://purl.org/dc/elements/1.1/" href="http://purl.org/dc/dcmitype/text" rel="dc:type">work</span> <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.elated.com/" property="cc:attributionname" rel="cc:attributionurl">http://www.elated.com/</a> licensed under <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">creative commons attribution 3.0 unported license</a>.</p> </div>  </body> </html>

the expression:

    $('<div>' + numbers[i] + '</div>')

is not selector. when argument jquery piece of html (i.e. begins <), creates new dom elements corresponding html, doesn't search them in dom.

$("div") selector, $("<div>") creator.

ui variable name, it's second argument handlecarddrop function. since function callback used jquery ui draggable widget, receives instance argument, , ui.draggable can used reference widget's features.


Comments

Post a Comment

Popular posts from this blog

curl - PHP fsockopen help required -

i trying work on cloudflare api , have found in documentation. unfortunately have no idea how can use in fsockopen or through curl. here example of post request. need know how can make request below data post using curl or fsockopen curl https://www.cloudflare.com/api_json.html -d 'a=cache_lvl' \ -d 'tkn=8afbe6dea02407989af4dd4c97bb6e25' \ -d 'email=sample@example.com' \ -d 'z=example.com' \ -d 'v=agg' here link cloudflare https://www.cloudflare.com/docs/client-api.html#s4.2 try one: $ch = curl_init("https://www.cloudflare.com/api_json.html"); curl_setopt($ch, curlopt_returntransfer,1); curl_setopt($ch, curlopt_followlocation, 1); curl_setopt($ch, curlopt_ssl_verifypeer,false); // handling of -d curl parameter here. $param = array( 'a' => 'cache_lvl', 'tkn' => '8afbe6dea02407989af4dd4c97bb6e25', 'email' => 'sample@example.com', 'z' =...
Read more

HTTP/1.0 407 Proxy Authentication Required PHP -

i working in restricted network/limited access internet. since have use proxy make web service call. here php code calling web service , response . $client = new soapclient("http: //www.xyz.com/abc/wsdls/login.wsdl", array("trace" => 1, "exceptions" => 1, 'proxy_host' => $proxy_host, 'proxy_port' => $proxy_port, 'proxy_login' => $proxy_login, 'proxy_password' => $proxy_password)); response is fatal error: uncaught soapfault exception: [wsdl] soap-error: parsing wsdl: couldn't load ' http://www.xyz.com/abc/wsdls/login.wsdl ' : failed load external entity if copy url error message , paste in browser(with same proxy settings) works. 2nd scenario is, if pass values instead of variables giving me diffarant response $client = new soapclient("http: //www.xyz.com/abc/wsdls/login.wsdl", array("trace" => 1, "exceptions" => 1, 'proxy_host' ...
Read more

c# - Resource not found error -

i have problem accessing method on homecontroller. show code of method : [httpget] public actionresult decriptidentifiantetredirige(string login_crypter, string mdp_crypter) { string loginacrypter = _globalmanager.protegemotdepasse(login_crypter); string mdpacrypter = _globalmanager.protegemotdepasse(mdp_crypter); user userapp = new models.user(login_crypter, mdp_crypter); if (userapp.authentificationvalidee(userapp.userlogin, userapp.password)) { session["name"] = userapp.userlogin; return redirecttoaction("accueil", "home"); } else { return redirecttoaction("validerauthentification", "home"); } } then in routeconfig.cs wrote route : routes.maproute( name: "authentificationapresdecryptage", url: "{controller}/{action}/{login_crypter}/{mdp_crypter}", defaults: new...
Read more