JavaScript学习

最新推荐文章于 2022-06-24 13:07:51 发布

Java中的战斗机

最新推荐文章于 2022-06-24 13:07:51 发布

阅读量116

点赞数

分类专栏：笔记文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_44165280/article/details/120535825

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了使用jQuery和JavaScript进行DOM选择和元素操作的方法，包括id选择器、class选择器、CSS选择器以及设置和获取HTML文本内容。示例代码展示了如何选取元素、更改文本内容以及获取元素的HTML内容。对于前端开发者来说，这是理解这两种库基本操作的重要教程。

摘要由CSDN通过智能技术生成

JavaScript / jQuery DOM 选择器

jQuery

id选择器：$("#id")
class选择器：$(".class")
css选择器： $(“p.intro”)

-- id选择器
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.min.js"></script>
</head>
<body>

<h1>通过 id 查找 HTML 元素</h1>

<p id="id01">Hello World!</p>
<p id="id02">Hello China!</p>
<p id="id03">Hello Shanghai!</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElements = $("#id03");
  var myElements = $("#id02");
  var myElements = $("#id01");
  $("#demo").text("段落 id03 的文本是：" + myElements[0].innerHTML);
  $("#demo").text("段落 id02 的文本是：" + myElements[0].innerHTML);
});
</script>
  id选择器：$("#id")

</body>
</html>

-- class选择器
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.min.js"></script>
</head>
<body>

<h1>通过class类名查找 HTML 元素</h1>

<p class="intro">Hello World!</p>
<p class="intro">Hello China!</p>
<p class="intro">Hello Shanghai!</p>

<p id="demo"></p>
<p id="demo1"></p>

<script>
$(document).ready(function() {
  var text = $(".intro");
  var myElements = $(".intro");
  $("#demo").text("类名为 intro 的第三段文本是：" + myElements[2].innerHTML);
  $("#demo1").text("测试文本"+ text[1].innerHTML);
});
</script>

</body>

-- css选择器
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.min.js"></script>
</head>
<body>

<h1>通过 Query 选择器查找 HTML 元素</h1>

<p class="intro">Hello World!</p>
<p class="intro">Hello China!</p>
<p class="intro">Hello Shanghai!</p>
<p id="demo"></p>
<p id="demo1"></p>
<script>
$(document).ready(function() {
  var myElements = $("p.intro");
  var text = $("p.intro");
  $("#demo1").text("测试css选择器:"+text[1].innerHTML);
  $("#demo").text("类名为 intro 的第三段文本是：" + myElements[2].innerHTML);
});
</script>

</body>
</html>

javaScript

id选择器：var myElement = document.getElementById("id01");

class选择器：var myElement = document.getElementsByClassName("id01");

css选择器：var myElements = document.querySelectorAll("p.intro");

<!DOCTYPE html>
<html>
<body>

<h1>通过 id 查找 HTML 元素</h1>

<p id="id01">Hello World!</p>
<p id="id02">Hello China!</p>
<p id="id03">Hello Shanghai!</p>

<p id="demo"></p>

<script>
var myElement = document.getElementById("id03");
document.getElementById("demo").innerHTML = "段落 id03 的文本是：" + myElement.innerHTML;
</script>
</body>
</html>

-- JavaScript的class选择器
<!DOCTYPE html>
<html>
<body>

<h1>Finding HTML Elements by Class Name</h1>

<p class="intro">Hello World!</p>
<p class="intro">Hello China!</p>
<p class="intro">Hello Shanghai!</p>

<p id="demo"></p>
<p id="demo1"></p>

<script>
var myElements = document.getElementsByClassName("intro");
var text = document.getElementsByClassName("intro");
document.getElementById("demo1").innerHTML = "测试JavaScript的class选择器："+text[1].innerHTML;
document.getElementById("demo").innerHTML = "类名为 intro 的第三段文本是：" + myElements[2].innerHTML;
</script>

</body>
</html>

-- JavaScript的css选择器
<!DOCTYPE html>
<html>
<body>

<h1>Finding HTML Elements by Query Selector</h1>

<p class="intro">Hello World!</p>
<p class="intro">Hello China!</p>
<p class="intro">Hello Shanghai!</p>

<p id="demo"></p>
<p id="demo1"></p>

<script>
var text = document.querySelectorAll("p.intro");
var myElements = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = "测试JavaScript的css选择器："+ text[1].innerHTML;
document.getElementById("demo1").innerHTML = "类名为 intro 的第三段文本是：" + myElements[0].innerHTML;
</script>

</body>
</html>

p标签

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.min.js"></script>
</head>

<body>

<h1>通过标签名查找 HTML 元素</h1>

<p>Hello World!</p>
<p>Hello China!</p>
<p>Hello Shanghai!</p>

<p id="demo"></p>
<p id="demo1"></p>

<script>
$(document).ready(function() {
  var myElements = $("p");
  $("#demo").text("第三段中的文本是：" + myElements[2].innerHTML);
  $("#demo1").text("111111111:"+ myElements[2].innerHTML);
});
</script>

</body>
</html>

JavaScript / jQuery HTML 元素

jQuery

设置 HTML 元素的内部文本： myElement.text(“Hello China!”);
获取HTML元素文本内容： var mytext = text.text();
设置HTML文本内容：var myElement.html(“
Hello World
”);
（更改替换）获取元素的 HTML 内容：var content = myElement.html();

-- jq更改文本内容
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.min.js"></script>
</head>
<body>

<h1>设置文本内容</h1>

<h2 id="01">Hello China!</h2>
<h2 id="02">Hello World!</h2>

<script>
$(document).ready(function() {
  var myElement = $("#02");
  myElement.text("Hello Shanghai啊啊啊啊啊!");
});
</script>
</body>
</html>

-- 获取HTML元素文本内容
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.min.js"></script>
</head>
<body>

<h1>获取文本内容</h1>

<h2 id="01">Hello World!</h2>
<h2 id="02">Hello China!</h2>
<h2 id="03">Hello Shanghai!</h2>


<p id ="demo1"></p>
<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElement = $("#03");
  var text = $("#02");
  var mytext = text.text();
  $("#demo1").text(mytext);
  var myText = myElement.text();
  $("#demo").text(myText); 
});
</script>

</body>
</html>

-- 设置HTML文本内容
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.min.js"></script>

</head>
<body>

<h1>设置 HTML</h1>

<div id="01">
  <h2>Hello China!</h2>
</div>
<div id="02">
  <h2>Hello World!</h2>
</div>

<p id="demo"></p>
<p id="demo1"></p>


<script>
$(document).ready(function() {
  var myElementText = $("#01");
  myElementText.html("<h1>你好中国！</h1>")
  
  var myElement = $("#02");
  myElement.html("<h2>Hello Shanghai!</h2>");
});
</script>
</body>
</html>

-- 获取文本内容
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.min.js"></script>
</head>
<body>

<h1>设置 HTML</h1>

<div id="01">
  <h2>Hello China!</h2>
</div>
<div id="02">
  <h2>Hello World!</h2>
</div>

<script>
$(document).ready(function() {
 var myText = $("#02").html;
 $("#01").html(myText);

  var content = $("#01").html();
  $("#02").html(content);
});
</script>

</body>
</html>

JavaScript

设置html文本内容：text.textContent = “你好中国！”;
获取html文本内容：var text = myElementText.textContent || myElementText.innerText;
设置文本内容：var myElementText.innerHTML = “
你好中国！
”;
获取元素的 HTML 内容： var content = myElement.innerHTML;

-- JavaScript设置文本内容
<!DOCTYPE html>
<html>
<body>

<h1>设置文本内容</h1>

<h2 id="01">Hello China!</h2>
<h2 id="02">Hello World!</h2>

<script>
var myElement = document.getElementById("02");
var text = document.getElementById("01");
text.textContent = "你好中国！";
myElement.textContent = "Hello Shanghai!";
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h1>获取文本内容</h1>

<h2 id="01">Hello World!</h2>
<h2 id="02">Hello China!</h2>
<h2 id="03">Hello Shanghai!</h2>

<p id="demo"></p>
<p id="demo1"></p>

<script>
var myElementText = document.getElementById("02");
var text = myElementText.textContent || myElementText.innerText;
document.getElementById("demo1").innerHTML = text;

var myElement = document.getElementById("03");
var myText = myElement.textContent || myElement.innerText;
document.getElementById("demo").innerHTML = myText; 
</script>

</body>
</html>

-- JavaScript设置文本内容
<!DOCTYPE html>
<html>
<body>

<h1>设置 HTML</h1>

<div id="01">
  <h2>Hello China!</h2>
</div>
<div id="02">
  <h2>Hello World!</h2>
</div>

<p id="demo"></p>

<script>
var myElementText = document.getElementById("01");
myElementText.innerHTML = "<h1>你好中国！</h1>";

var myElement = document.getElementById("02");
myElement.innerHTML = "<h2>Hello Shanghai!</h2>";
</script>

</body>
</html>

-- JavaScript修改文本内容
<!DOCTYPE html>
<html>
<body>

<h1>设置 HTML</h1>

<div id="01">
  <h2>Hello China!</h2>
</div>
<div id="02">
  <h2>Hello World!</h2>
</div>

<script>
var content = document.getElementById("02").innerHTML;
document.getElementById("01").innerHTML = content;

var content = document.getElementById("01").innerHTML;
document.getElementById("02").innerHTML = content;

</script>
</body>
</html>