您的位置：首页 > Web前端 > JavaScript

JavaScript实现对P标签的操作

2015-07-31 22:29 781 查看

获取P标签：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    var ids=document.getElementById("p1");
    alert("id:"+ids);
    var names=document.getElementsByName("name1");
    alert("names:"+names);
    var tagNames=document.getElementsByTagName("p")[0];
    alert("tagNames:"+tagNames);
    //此时已经获取到了第一个P标签，因为我们可以根据此标签获取该标签中的文本内容，如下所示：
    var tagNamesValue=tagNames.innerHTML;
    alert(tagNamesValue);
  });
});
</script>
</head>
<body>
<p id="p1" name="name1">如果您点击我，我会消失。</p>
<p id="p2" name="name2">点击我，我会消失。</p>
<p id="p3" name="name3">也要点击我哦。</p>
</body>
</html>

根据id：

根据name：

根据tagName：

获取元素的属性：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    var ids=document.getElementById("p1");
    var names=ids.getAttribute("name");
    alert(names);
    var classs=ids.getAttribute("class");
    alert(classs);
  });
});
</script>
</head>
<body>
<p id="p1" name="name1" class="class1">如果您点击我，我会消失。</p>
<p id="p2" name="name2">点击我，我会消失。</p>
<p id="p3" name="name3">也要点击我哦。</p>
</body>
</html>

运行的结果：

获取的name：

获取的class：

获取P标签的文本内容：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    var ids=document.getElementById("p1");
    var idsHTML=ids.innerHTML;
    alert("HTML:"+idsHTML);
    var idsText=ids.innerText;
    alert("Text:"+idsText);
  });
});
</script>
</head>
<body>
<p id="p1" name="name1" class="class1">如果您点击我，我会消失。</p>
<p id="p2" name="name2">点击我，我会消失。</p>
<p id="p3" name="name3">也要点击我哦。</p>
</body>
</html>

运行的结果：

HTML：

Text：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航