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>