jQuery HTML
jQuery - 获取内容和属性
获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery - 获取内容和属性-text() - 设置或返回所选元素的文本内容 </title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<p>第一段文字</p>
<p>第二段文字</p>
<p>第三段文字</p>
</div>
<div id="div2">
<p class="p1">第一段文字</p>
<p class="p2">第二段文字</p>
<p class="p3">第三段文字</p>
</div>
<script>
$(document).ready(function(){
//获取div1中所有p标签的文本内容
var text1 = $("#div1 p").text();
console.log(text1);
//获取div2中所有p标签的文本内容
var text2 = $("#div2 p").text();
console.log(text2);
//获取div1中第一个p标签的文本内容
var text3 = $("#div1 p:first").text();
console.log(text3);
//获取div2中第一个p标签的文本内容
var text4 = $("#div2 p:first").text();
console.log(text4);
//获取div1中最后一个p标签的文本内容
var text5 = $("#div1 p:last").text();
console.log(text5);
//获取div2中最后一个p标签的文本内容
var text6 = $("#div2 p:last").text();
console.log(text6);
});
</script>
</body>
</html>
html() - 设置或返回所选元素的内容（包括 HTML 标签）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery - html() - 设置或返回所选元素的内容（包括 HTML 标签） </title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<p>这是第一段文字</p>
<p>这是第二段文字</p>
<p>这是第三段文字</p>
</div>
<div id="div2">
<h1>这是一个标题</h1>
<p>这是第一段文字</p>
<p>这是第二段文字</p>
<p>这是第三段文字</p>
</div>
<button id="btn1">获取div1的内容</button>
<button id="btn2">创建div2的新内容</button>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var content = $("#div1").html();
alert(content);
});
$("#btn2").click(function(){
$("#div2").html("<h2>这是新标题</h2><p>这是新内容</p>");
});
});
</script>
</body>
</html>val() - 设置或返回表单字段的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery - val() - 设置或返回表单字段的值</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="johndoe@example.com">
<br><br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" value="123-456-7890">
<br><br>
<label for="message">Message:</label>
<textarea id="message" name="message">Hello, World!</textarea>
<br><br>
<input type="button" value="Get Values" onclick="getValues()">
</form>
<script>
function getValues() {
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var message = $("#message").val();
alert("Name: " + name + "\nEmail: " + email + "\nPhone: " + phone + "\nMessage: " + message);
}
</script>
</body>
</html>获取属性 - attr()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML - 获取属性 - attr() </title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">
<p class="myP">Hello World!</p>
</div>
<button id="btn">获取属性</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var attrValue = $("#myDiv").attr("id");
alert(attrValue);
});
});
</script>
</body>
</html>jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML - text() - 设置或返回所选元素的文本内容</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h1>jQuery HTML - text() - 设置或返回所选元素的文本内容</h1>
<p id="p1">欢迎来到我的博客</p>
<p id="p2">jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，以实现快速web开发。</p>
<button id="btn1">替换p1的文字</button>
<button id="btn2">替换p2的文字</button>
<button id="btn3">同时替换p1和p2的文字</button>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#p1").text("被替换的第一段文字");
});
$("#btn2").click(function(){
$("#p2").text("被替换的第二段文字");
});
$("#btn3").click(function(){
$("#p1").text("被替换的第三段文字");
$("#p2").text("被替换的第三段文字");
});
});
</script>
</body>
</html>html() - 设置或返回所选元素的内容（包括 HTML 标记）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML - html() - 设置或返回所选元素的内容（包括 HTML 标记）</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<p>这是第一段文字</p>
<p>这是第二段文字</p>
<p>这是第三段文字</p>
</div>
<div id="div2">
<h1>这是一个标题</h1>
<p>这是第一段文字</p>
<p>这是第二段文字</p>
<p>这是第三段文字</p>
</div>
<button id="btn1">获取div1的HTML内容</button>
<button id="btn2">设置div2的HTML内容</button>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var htmlContent = $("#div1").html();
alert(htmlContent);
});
$("#btn2").click(function(){
$("#div2").html("<h2>这是新的标题</h2><p>这是新的第一段文字</p><p>这是新的第二段文字</p><p>这是新的第三段文字</p>");
});
});
</script>
</body>
</html>val() - 设置或返回表单字段的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -val() - 设置或返回表单字段的值</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="john@example.com">
<br><br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" value="123-456-7890">
<br><br>
<label for="message">Message:</label>
<textarea id="message" name="message">Hello World!</textarea>
<br><br>
<input type="button" value="Submit" onclick="submitForm()">
</form>
<script>
$(document).ready(function(){
//设置或返回表单字段的值
$("#name").val("Mike");
$("#email").val("mike@example.com");
$("#phone").val("456-789-1230");
$("#message").val("Hello jQuery!");
});
function submitForm(){
//获取表单数据
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var message = $("#message").val();
//验证表单数据
if(name == "" || email == "" || phone == "" || message == ""){
alert("Please fill out all fields.");
return false;
}
//提交表单数据
alert("Name: " + name + "\nEmail: " + email + "\nPhone: " + phone + "\nMessage: " + message);
}
</script>
</body>
</html>jQuery - 添加元素
添加新的 HTML 内容
append() - 在被选元素的结尾插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -append() - 在被选元素的结尾插入内容</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="container">
<p>第一段文字</p>
<p>第二段文字</p>
<p>第三段文字</p>
</div>
<button id="btn">添加新内容</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#container").append("<p>这是新加的内容.</p>");
});
});
</script>
</body>
</html>prepend() - 在被选元素的开头插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -prepend() - 在被选元素的开头插入内容</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="container">
<p>这是第一段文字</p>
<p>这是第二段文字</p>
<p>这是第三段文字</p>
</div>
<script>
$(document).ready(function(){
$("#container").prepend("<h1>这是新添加的标题</h1>");
});
</script>
</body>
</html>after() - 在被选元素之后插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -after() - 在被选元素之后插入内容</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
</div>
<div id="div2">
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
</div>
<button id="btn">添加内容</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#div1").after("<p>这是新插入的内容。</p>");
$("#div2").after("<p>这是新插入的内容。</p>");
});
});
</script>
</body>
</html>before() - 在被选元素之前插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -before() - 在被选元素之前插入内容</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="container">
<p>这是第一段文字。</p>
<p>这是第二段文字。</p>
<p>这是第三段文字。</p>
</div>
<button id="add">添加内容</button>
<script>
$(document).ready(function() {
$("#add").click(function() {
$("#container").before("<p>这是新添加的内容</p>");
});
});
</script>
</body>
</html>jQuery - 删除元素
remove() - 删除被选元素（及其子元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -remove() - 删除被选元素（及其子元素）</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="container">
<p>这是第一段文字</p>
<p>这是第二段文字</p>
<div id="inner">
<p>这是inner的第一段文字</p>
<p>这是inner的第二段文字</p>
<p>这是inner的第三段文字</p>
</div>
<button id="remove">移除inner元素</button>
<script>
$(document).ready(function() {
$("#remove").click(function() {
$("#inner").remove();
});
});
</script>
</body>
</html>empty() - 从被选元素中删除子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -empty() - 从被选元素中删除子元素</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="container">
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
</div>
<button id="btn">清空</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#container").empty();
});
});
</script>
</body>
</html>jQuery 操作 CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -addClass() - 向被选元素添加一个或多个类</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: #ccc;
text-align: center;
line-height: 200px;
font-size: 30px;
font-weight: bold;
}
.new-class{
color: red;
}
</style>
</head>
<body>
<div class="box">Hello World</div>
<button id="add">Add Class</button>
<button id="remove">Remove Class</button>
<button id="toggle">Toggle Class</button>
<script>
$(document).ready(function(){
$("#add").click(function(){
$(".box").addClass("new-class");
});
$("#remove").click(function(){
$(".box").removeClass("new-class");
});
$("#toggle").click(function(){
$(".box").toggleClass("new-class");
});
});
</script>
</body>
</html>jQuery css() 方法
返回 CSS 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -返回 CSS 属性</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: #ccc;
text-align: center;
line-height: 200px;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">Hello World</div>
<button id="btn">点击获取属性</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var color = $(".box").css("background-color");
alert(color);
});
});
</script>
</body>
</html>设置 CSS 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -设置 CSS 属性</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: #ccc;
text-align: center;
line-height: 200px;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">Hello World</div>
<button id="btn">设置颜色</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$(".box").css("background-color","red");
});
});
</script>
</body>
</html>设置多个 CSS 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -设置多个 CSS 属性</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: #ccc;
text-align: center;
line-height: 200px;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<button id="btn">设置颜色</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#box1").css({
"background-color": "red",
"color": "white"
});
$("#box2").css({
"background-color": "green",
"color": "white"
});
$("#box3").css({
"background-color": "blue",
"color": "white"
});
});
});
</script>
</body>
</html>jQuery 尺寸
jQuery width() 和 height() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -jQuery width() 和 height() 方法</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<style>
#box {
width: 200px;
height: 100px;
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div id="box">
<p>This is a paragraph inside the box.</p>
</div>
<button id="btn">Click me to change the width and height of the box</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#box").width(300).height(200);
});
});
</script>
</body>
</html>jQuery innerWidth() 和 innerHeight() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -jQuery innerWidth() 和 innerHeight() 方法</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
<div id="div2">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
<button id="btn">获取 div1 的宽度和高度</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var width = $("#div1").innerWidth();
var height = $("#div1").innerHeight();
alert("宽度：" + width + "，高度：" + height);
});
});
</script>
</body>
</html>jQuery outerWidth() 和 outerHeight() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML -jQuery outerWidth() 和 outerHeight() 方法</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<p>这是div1中的一段。</p>
</div>
<button id="btn1">获取div1的宽度和高度</button>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var width = $("#div1").outerWidth();
var height = $("#div1").outerHeight();
alert("div1的宽度为 " + width + " 高度为 " + height);
});
});
</script>
</body>
</html>
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
