Javascript 这个选择器在Jquery中还不存在时是如何工作的？_Javascript_Jquery_Jquery Ui Droppable_Jquery Draggable

Javascript 这个选择器在Jquery中还不存在时是如何工作的？

javascript jquery

Javascript 这个选择器在Jquery中还不存在时是如何工作的？,javascript,jquery,jquery-ui-droppable,jquery-draggable,Javascript,Jquery,Jquery Ui Droppable,Jquery Draggable,我在网上找到了这个教程，通过下面的链接了解了这个卡片映射小游戏中Jquery的拖放功能在第37行，为什么$+numbers[i]+在它还不存在的时候被选中，就我而言，当它们已经存在于文档中时，您可以在Jquery中选择它们。。我不太明白那个选择器，有人能详细说明一下那个选择器是怎么回事吗？即使在第48行。。。ui是Jquery中内置的word。。当他们说ui.draggable时？ui到底指的是什么谢谢 <!doctype html> <html lang="en">

我在网上找到了这个教程，通过下面的链接了解了这个卡片映射小游戏中Jquery的拖放功能

在第37行，为什么$+numbers[i]+在它还不存在的时候被选中，就我而言，当它们已经存在于文档中时，您可以在Jquery中选择它们。。我不太明白那个选择器，有人能详细说明一下那个选择器是怎么回事吗？即使在第48行。。。ui是Jquery中内置的word。。当他们说ui.draggable时？ui到底指的是什么

谢谢

<!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 the success message
  $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );

  // Reset the game
  correctCards = 0;
  $('#cardPile').html( '' );
  $('#cardSlots').html( '' );

  // Create the pile of shuffled cards
  var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
  numbers.sort( function() { return Math.random() - .5 } );

  for ( 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 the card slots
  var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
  for ( var i=1; i<=10; i++ ) {
    $('<div>' + words[i-1] + '</div>').data( 'number', i ).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 the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it 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 all the cards have been placed correctly then display a message
  // and reset the cards for another 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 with jQuery: Your 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 to 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> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.elated.com/" property="cc:attributionName" rel="cc:attributionURL">http://www.elated.com/</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.</p>
</div>

</body>
</html>

它正在创建新元素，而不是在页面上选择。。它类似于document.createElement

表达式：

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

不是选择器。当jQuery的参数是一段HTML时，即它以表达式开头：

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

不是选择器。当jQuery的参数是一段HTML，即它以开头，但它是一个选择器时，它怎么能选择文档中不存在的div？它不是选择器，这就是我们试图告诉您的。从jQuery文档：如果字符串作为参数传递给$，jQuery将检查该字符串，看它是否像HTML，即。，首先是。如果不是，字符串将被解释为选择器表达式。但是，如果字符串看起来是一个HTML片段，jQuery将尝试创建HTML描述的新DOM元素。然后创建并返回引用这些元素的jQuery对象。您可以在此对象上执行任何常用的jQuery方法，但它是一个选择器，它如何选择文档中不存在的div？它不是选择器，这正是我们试图告诉您的。从jQuery文档中：如果将字符串作为参数传递给$，jQuery将检查该字符串是否看起来像HTML，即它以。如果不是，字符串将被解释为选择器表达式。但是，如果字符串看起来是一个HTML片段，jQuery将尝试创建HTML描述的新DOM元素。然后创建并返回引用这些元素的jQuery对象。您可以在此对象上执行任何常用的jQuery方法