Question

我正在学习javascript和jquery。我最近发现了DOM Traversing。但是当我为它编写代码时，它只是没有响应。代码是：

<!DOCTYPE html>
<head>
<title>Test</title>

</head>
<body>
<script>

$('div').onclick = function pi() {
var p = document.getElementsByClassName('.p');

p.value("hello guys");
};

</script>
<div style="background-color:blue; height:1000px; width:100%px;">
</div>
<div style="height: 600px; background-color: aqua;width: auto;">
<p style="color:black; font-size: 40px;" class="p">d
</p>
</div>
</body>
</html>

Answer 1

让我们解决问题：

1）您还没有将jQuery包含在任何地方，因此您无法使用它。如果你想使用它，你需要添加一个脚本标签（在当前使用的<head>标签之间）链接到它 - 如：

<script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>

2）现在jQuery的onclick（实际上是click）是如何工作的。 click是一个接受函数的函数。当用户单击目标时，将执行传递给click的函数。你的代码将覆盖jQuery＆＃39; click，而应该是：

$('div').click(function pi() {
  // code
})

3）它不被禁止或任何东西，但由于你已经在使用jQuery，因此回归本地DOM获取像getElementsByClassName这样的API并没有多大意义。我建议你改用$('.p')：

$('div').click(function pi() {
  // it's good to prefix jquery collection variables with a $
  // makes it obvious what is in them
  var $p = $('.p')
})

旁注您可以使用$('p')并根据标记名称进行查询，这样可以避免分配冗余的类名

4）.value()既不是jQuery方法，也不是本机方法。 jQuery有val()方法，但用于设置value，select等输入元素的input属性。您可能想要的是什么do是更改p标记的文本。使用jQuery $('p').text('new text')。请注意，调用它会更改所有 p元素的文本或您案例中的class="p"元素：

$('div').click(function pi() {
   var $p = $('.p')
   $p.text('hello guys')
});

希望这能帮到你的路上

Answer 2

我在这里发现了三个错误。

看起来您正在使用jQuery，因此请在脚本标记中插入jQuery文件。
你不应该使用＆＃34; .p＆＃34;按类名调用时。
一些语法错误

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div').click(function(){

var p = document.getElementsByClassName('p'); //returns an Array with the class name "p"
p[0].innerHTML = "Hello Guys"; // first element of all element in "p" array

//or you could use the jquery way mentioned down below

// $('.p').html("Hello Guys"); 
 
});
});
</script>

</head>
<body>
  <div style="background-color:blue; height:100px; width:100%px;">
  </div>
  <div style="height: 100px; background-color: aqua;width: auto;">
    <p style="color:black; font-size: 40px;" class="p">d</p>
  </div>
</body>
</html>

＆＃13;

我的javascript不适用于dom遍历

2 个答案: