<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="p1">this is <b>p</b></p>
<button type="button" id="btn1">click</button><br>
输入:<input type="text" id="input1"/ name="uname">
<button type="button" id="btn2">click</button><br>
<p id="p2">here</p>
<button type="button" id="btn3">click</button><br>
<a id="a1" href="">this is a A</a>
<button type="button" id="btn4">click</button><br>
<p id="p3"> is a </p>
<button type="button" id="btn5">click</button><br>
<p id="p4">this is a </p>
<div id="div1" style="border: aqua solid; width: 200px ; height: 200px ;" >
this is div
</div>
<button type="button" id="btn6">click</button><br>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="JQ_html.js"></script>
</body>
</html>
$(document).ready(function(){
/**
* 获得内容
*/
$("#btn1").click(function(){
console.log($("#p1").text());
console.log($("#p1").html());
})
$("#btn2").click(function(){
//获得字段值
console.log($("#input1").val());
})
/**
* 获得属性
*/
$("#btn2").click(function(){
//获得属性值
console.log($("#input1").attr("name"));
})
/**
* 设置内容
*/
$("#btn3").click(function(){
//val() html() text()
$("#p2").text("Hello");
//回调函数 两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值
$("#p2").text(function(i,old){
return old+" New Text "+i;
})
})
/**
* 设置属性
*/
$("#btn4").click(function(){
//可以同时设置多个值
$("#a1").attr({
"href":"http://www.baidu.com",
"title":"Title"
});
//回调函数 两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值
})
/**
* 添加新内容
*/
$("#btn5").click(function(){
//添加文本
//结尾插入内容
$("#p3").append("P");
//开头插入内容
$("#p3").prepend("This");
//after() before()
$("#p3").before("Before");
//添加元素
var txt=$("<p></p>").text("New Text");
$("#p3").append(txt);
var txt1=$("<a></a>").text("href");
$("#p3").after(txt1);
})
/**
* 删除内容
*/
$("#btn6").click(function(){
//删除元素
$("#p4").remove();
//选择
$("p").remove("#p4");
//清空内容
$("#div1").empty();
})
})
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix