jquery 的捕捉(针对 元素,属性的替换和修改)

body(使用前,首先先将 jQuery.js文件导入进去,在创建自己的.js文件我是自己创建的js 文件 (setting.js文件) )

 <script src="jquery.min.js">script>
 <script src="setting.js">script>
<body>

<button id="bhtml">按钮1button>
<button id="bhtml2">按钮2button>
<button id="bhtml3">按钮3button>
<button id="bhtml4">按钮4button>
<button id="bhtml5">按钮5button>

    <p id="p1"> 你好 ,这是一个段落1p>
    <p id="p2">你好,这是一个段落2p>
    <input type="text" id="i1" value="输入框">
    <a href="https://www.baidu.com/" id="aid">百度超链接跳转到淘宝页面a>
    
    <p id="p5">Hello Wordp>
body>

.js 文件

$(document).ready(function () {
   $("#bhtml").click(function () {
       // jquery 捕捉 就是对元素的内容更改
       // 获取p 元素
       $("#p1").text("你是世界上最美的人");
   }) ;
   $("#bhtml2").click(function () {
       // jquery 捕捉 就是对元素的内容更改
       // 获取p 元素 .html 是可以针对标签的进行操作
       $("#p2").html("你是世界上最牛的网站"+"百度一下");
   }) ;
   // 针对元素进行修改
   $("#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);
        })
    });
});

以上都是代表自己观点,如有雷同不胜荣幸。

你可能感兴趣的:(jquery)