JavaScript学习

原创 于 2021-09-28 19:29:06 发布 · 191 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #html5

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

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>
预先定义ID，后面再使用的Demo
06-21
预先定义ID，后面再使用的小Demo
JavaScript学习指南
03-20
JavaScript学习指南 JavaScript，一种广泛应用于网页和网络应用的脚本语言，是互联网上最流行的编程语言之一。它主要用于客户端的交互式网页开发，也可以在服务器端通过Node.js平台进行后端开发。JavaScript与Java...
2021-04-29
weixin_57784056的博客
04-29 123
开发工具与关键技术： MVC 作者： arrogant ；写时间：2021年 4月 29日 jQuery的一些了解 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 一．jQuery 选择器 在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。 关键点是学习 jQuery 选择器是如何准...
script type='text/html' id='demo' 动态设置内容用layer弹出后渲染不了
科技改变世界
03-29 5034
// html代码 <script type="text/html" id="demo"> </script> // js代码 var table = "<table>" $checked.each(function () { var foo= $(this).val(); table+= "<tr>"; table+= "...
在js中无法获取多个id值为demo的问题
weixin_38420342的博客
08-14 1047
例如代码中： &lt;script&gt; $(document).ready(function(){ $("#demo").hover(function(){ $("h1").css("background-color","yellow"); },function(){ $("h1").css("background-color",&quo
精选资源
头歌教学实践平台 Web前端开发基础 JavaScript学习手册六：JS条件语句
最新发布
01-20
JavaScript是Web前端开发的核心语言之一，它为网页和应用程序提供了动态交互的能力。在JavaScript中，条件语句是...在头歌教学实践平台的Web前端开发课程中，这些基础知识的学习和实践将为你的编程技能打下坚实的基础。
JavaScript学习指南 高清 PDF
10-20
这份"JavaScript学习指南"高清PDF，无疑为想要深入理解JavaScript的初学者或有一定基础的开发者提供了宝贵的资源。下面，我们将深入探讨JavaScript的一些关键知识点。 1. **基础语法**：JavaScript的基础包括变量、...
javascript 学习
04-09
在本文中，我们将深入探讨JavaScript的学习路径、重要概念以及如何利用它来增强网页交互性。 首先，让我们从基础开始。JavaScript是ECMAScript规范的实现，它的主要用途是使网页动态化，提供用户交互、页面更新、与...
input type 介绍
田军的专栏
11-19 1696
Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。1，type=text 输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的 默认类型。 参数name：同样是表示的该文本输入框名称。 参数size：输入框的...
jQuery学习点滴
hongbinchen的专栏
12-01 2240
jQuery学习点滴 　　　在学习之余对jquery提供的方法进行分类总结，下文有些抄摘w3cschool， 只为以后使用起来方便查找！ jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQ
正则表达式- 将div#demo.demo转化成<div id="demo" class="demo"></div>
Ethan的技术分享
04-14 1490
var str = ("div#demo.demo"); str.replace(/^(\w+)#(\w+)\.(\w+)$/,function(match,$1,$2,$3){ return "<"+$1+" id=\"" + $2+ "\" class=\""+ $3+ "\"><\/" + $1 +">" }) console.log(str);
javascript中的innerHTML是什么意思，怎么个用法？
热门推荐
奔跑的蜗牛
09-22 10万+
nnerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：这是内容 ，我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容
正则表达式- 将div#demo.demo转化成＜div id=“demo“ class=“demo“＞＜/div＞
weixin_47164448的博客
01-30 327
var str = ("div#demo.demo"); str.replace(/^(\w+)#(\w+)\.(\w+)$/,function(match,$1,$2,$3){ return "<"+$1+" id=\"" + $2+ "\" class=\""+ $3+ "\"><\/" + $1 +">" }) console.log(str); var str = ("div#demo.demo").replace(/^\b(\w+
字符串replace的理解和练习和配合正则表达式的使用
weixin_30839881的博客
09-26 257
下面代码展示了（demo地址 https://codepen.io/peach_/pen/jONJjRY）： 1.字符串replace的理解和练习和配合正则表达式的使用, 2.正则表达式学习 3.通过正则表达式实现千分位 // 字符串replace的理解和练习 //示例来源：https://developer.mozilla.org/zh-CN/docs/Web/JavaS...
javascript demo简单示例代码
xuhuan_csdn的博客
11-15 1794
attr()函数-脚本之家 .font{   font-size:18px;   color:yellow } .bg{   background:#336; } .second{   color:green } $(document).ready(function(){   $("#btn").click(function(){     alert($(
JavaScript学习资源：35M高清PDF指南
下面，我们将详细探讨JavaScript学习指南中可能包含的知识点。 首先，JavaScript学习指南可能会涵盖JavaScript语言的基础知识。这包括了解什么是JavaScript、它的用途和特点。JavaScript是一种轻量级的解释型编程...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java中的战斗机

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值