访问元素

Question

如果我通过文档方法得到x和y的值而不是ok，但是如果我得到x和y的值直接如下所示由我注释掉而不是我得到错误为什么会这样？

 <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
 <body>

    Select a fruit and click the button:
    <select id="mySelect">
      <option value="11">Apple</option>
      <option value="12">Orange</option>
      <option value="13">Pineapple</option>
      <option value="14">Banana</option>
    </select>

    <button type="button" onclick="myFunction()">Display index</button>

    <script>
    function myFunction() {

        var x = document.getElementById("mySelect").selectedIndex;
        var y = document.getElementById("mySelect").options;

        //var x = $("#mySelect").selectedIndex;
        //var y = $("#mySelect").options;


        alert("Index: " + y[x].index + " text is " + y[x].text + " and value is " +  y[x].value);
    }
    </script>

    </body>
    </html>

Answer 1

我得到错误为什么会这样

因为jQuery构造函数返回的对象没有selectedIndex或options属性。

$('selector')从DOM中的匹配创建jQuery集合，而document.getElementId('selector')是对特定DOM元素的引用。

$('selector')包含对DOM元素的引用，但没有DOM元素属性/方法，而是具有jQuery方法。

要使用DOM元素属性/方法，您可以使用方括号表示法从jQuery集合中“获取”DOM元素，因为我们的jQuery集合是一个类似于数组的对象：

var x = $("#mySelect")[0].selectedIndex;
var y = $("#mySelect")[0].options;

或者，使用.get()：

var x = $("#mySelect").get(0).selectedIndex;
var y = $("#mySelect").get(0).options;

或者，使用.prop()返回属性值：

var x = $("#mySelect").prop('selectedIndex');
var y = $("#mySelect").prop('options');

Answer 2

document.getElementById（“id”）vs $（“＃id”）请参阅此question

var x = $("#mySelect").selectedIndex;
var y = $("#mySelect").options;

selectedIndex和options是undefined。您应该使用.text()和.val()

您的代码段解决方案

＆＃13;

$('#btn').on('click', function() {
  // var x = document.getElementById("mySelect").selectedIndex;
  //    var y = document.getElementById("mySelect").options;

  var x = $("#mySelect").val();
  var y = $("#mySelect option:selected").text();

  alert(x + " :: " + y);
  //alert("Index: " + y[x].index + " text is " + y[x].text + " and value is " + y[x].value);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Select a fruit and click the button:
<select id="mySelect">
  <option value="11">Apple</option>
  <option value="12">Orange</option>
  <option value="13">Pineapple</option>
  <option value="14">Banana</option>
</select>
<button type="button" id="btn">Display index</button>

＆＃13;

fiddle

Answer 3

这些方法不会存在于jQuery对象上，你可以在console.log对象中查看它们通过原型链继承的内容。

来自MDN：

Summary按ID返回对元素的引用。

语法element = document.getElementById（id）;其中

元素是对Element对象的引用，如果是元素则为null   具有指定ID的文件不在文档中。

要带走的重要部分是对Element对象的引用。

Here您可以看到此对象提供的方法。

Answer 4

$("...")返回包含匹配元素的jQuery集合。您无法直接访问元素及其属性，而是：

使用jQuery.get访问者方法：

var x = $("#mySelect").get(0).selectedIndex;
var y = $("#mySelect").get(0).options;

取消引用元素：

var x = $("#mySelect")[0].selectedIndex;
var y = $("#mySelect")[0].options;

使用jQuery.prop：

var x = $("#mySelect").prop("selectedIndex");
var y = $("#mySelect").prop("options");

说了这么多，你可以将你的代码更改为：

var $selectedOption = $("#mySelect option:selected");
console.log(
    $selectedOption.index(),
    $selectedOption.text(),
    $selectedOption.val()
);

Answer 5

$（）是一个jQuery对象构造函数，它将创建一个jQuery对象并将所选元素包装在此对象中（所有DOM属性仍然可以被接收但不能直接接收）。

getElementById（）是一个本机javascript函数，用于检索具有正常属性的DOM元素。

您通常不需要访问jQuery Object中的DOM元素，因为您可以使用生活在Object中的jQuery方法来操作所选元素。选择有点棘手，因为我没有看到任何方法来检索选项列表但是：

$('#select option'); //Selects all the options of the select
$('#select option').each(function(){
  //iterate all options of the select.
});
$('#select option:selected'); //Get the selected option.

相当于公平。从那时起，您可以使用jQuery方法来操作选项，例如：

$('#select option:selected').text(); //Option text
$('#select option:selected').val(); //Value of option

Answer 6

$（＆＃34;＃元件＆＃34）;是一个类似jquery css-syntax的DOM选择器，它将所有匹配的结果收集在一个jQuery对象数组中，这些对象可以访问jQuery函数的全部规模，这些函数非常方便，易于使用。

while＆＃34; doucment.getElementById（＆＃34; element）;＆＃34;是一个原生的JavaScript函数。

JQuery是JavaScript的抽象层，具有更简单的语法，开箱即用的强大工具/功能，并且还为您修复浏览器兼容性问题。

很简单地说它在你不必费心的后台为你执行JavaScript。

你应该尽可能地习惯于编写jQuery代码，因为它会让你的生活变得更轻松，你不必费心去处理复杂的大量代码，只有很小的效果，例如：在JavaScript中原生地编写一个AJAX请求与jQuery相比，它更像是15个代码，具有相同的效果。

一些完全相同的例子：

访问元素

JavaScript的：

alert(document.getElementById("element").name);

JQuery的：

alert($("#element").attr("name"));

循环元素

JavaScript的：

var elements = document.getElementsByClassName("class");
for(var i = 0; i < elements.length; i++) {
    alert(var element = elements[i].name);
}

JQuery的：

$(".class").each(function() { 
    alert($(this).attr("name")); //This accesses the current element of each function as a full useable and handy object
});

这只是两个例子，你可以看到它确实非常强大。小代码与普通JavaSCript中的大代码完全相同。当你包括jQUery时，你应该总是尽量发挥其潜力。

-

您的JQuery样式代码：

<button id="btn_display_index" type="button">Display index</button>

<script type="text/javascript">
    //Will be executed any time the button with id "btn_display_index" is clicked!
    $("#btn_display_index").on("click", function() { 
        var currentOption = $("#mySelect option:selected");
        alert("Index: " + currentOption.attr("value") + " - Value: " + currentOption.html());
    });
</script>

document.getElementById（＆＃34; id＆＃34;）vs $（＆＃34;＃id＆＃34;）

6 个答案:

访问元素

循环元素

您的JQuery样式代码：