body(使用前,首先先将 jQuery.js文件导入进去,在创建自己的.js文件我是自己创建的js 文件 (setting.js文件) )
<script src="jquery.min.js"></script>
<script src="setting.js"></script>
<body>
<!-- 通过button 来触发p 标签的内容-->
<button id="bhtml">按钮1</button>
<button id="bhtml2">按钮2</button>
<button id="bhtml3">按钮3</button>
<button id="bhtml4">按钮4</button>
<button id="bhtml5">按钮5</button>
<!--在 p 元素中指定id 为p1-->
<p id="p1"> 你好 ,这是一个段落1</p>
<p id="p2">你好,这是一个段落2</p>
<input type="text" id="i1" value="输入框">
<a href="https://www.baidu.com/" id="aid">百度超链接跳转到淘宝页面</a>
<!--回调 -->
<p id="p5">Hello Word</p>
</body>
.js 文件
$(document).ready(function () {
$("#bhtml").click(function () {
// jquery 捕捉 就是对元素的内容更改
// 获取p 元素
$("#p1").text("你是世界上最美的人");
}) ;
$("#bhtml2").click(function () {
// jquery 捕捉 就是对元素的内容更改
// 获取p 元素 .html 是可以针对标签的进行操作
$("#p2").html("你是世界上最牛的网站"+"<a href='https://www.baidu.com/'>百度一下</a>");
}) ;
// 针对元素进行修改
$("#bhtml3").click(function () {
// jquery 捕捉 就是对元素的内容更改
// 获取p 元素 .html 是可以针对标签的进行操作
$("#i1").val("你好 ,欢迎回到这里");
}) ;
// 元素的属性
$("#bhtml4").click(function () {
// attr修改属性 (当你妹触发事件时可以通过a标签跳转到百度页面
// ,当你点击完触发事件之后就会跳转到淘宝页面)
$("#aid").attr("href","https://www.taobao.com/");
})
//要是修改多个属性值时
$("#bhtml4").click(function () {
// attr修改属性 (当你妹触发事件时可以通过a标签跳转到百度页面
// ,当你点击完触发事件之后就会跳转到淘宝页面)
$("#aid").attr({
//当你修改多个属性值的时候 用 {
// 要是多个属性值的话用, 分隔
// 但是修改某个属性时用 : 来分隔
// }括起来
"href":"https://www.taobao.com/",
"title":"你好 这是淘宝页面"
});
});
$("#bhtml5").click(function () {
// 找到当前的p元素 i 是当前元素的下标,第二个参数是你要修改的内容
// function(i,ott) ott 是替换的内容
$("#p5").text(function (i,ott) {
//i 默认为0 return 函数的回调
return "old:"+ott+"new :这是一个新的内容"+(i);
})
});
});
以上都是代表自己观点,如有雷同不胜荣幸。