码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript实现对P标签的操作

时间:2015-07-31 23:35:07      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:javascript

获取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:

技术分享


版权声明:本文为博主原创文章,未经博主允许不得转载。

JavaScript实现对P标签的操作

标签:javascript

原文地址:http://blog.csdn.net/zzy1078689276/article/details/47176513

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!