jQuery HTML之捕获、设置、元素添加、元素删除

字数 100阅读 292
  • jQuery 捕获
  • jQuery 设置
  • jQuery 添加元素
  • jQuery 删除元素

jQuery 捕获

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="catch.js"></script>
</head>
<body>
    <p id="text">this is my webpage<a>这是一个a标签</a></p>
    <button id="btn1">点击</button>
    <!--获取文本框的内容-->
    <p><input type="text" id="it" value="echo3D"></p>
    <p><a href="http://www.app-echo.com/#/sound/1173419" id="aid">echo</a></p>
    <button id="btn2">点击</button>
</body>
</html>

jQuery代码:

$(document).ready(function () {

   // .text 与.html的区别是获得.text获得的文本是当前标签内的所有文字,去掉尖括号,.html是获得当前标签内的所有内容
   $("#btn1").click(function () {
       alert("text:"+$("#text").text());
   }) ;
   $("#btn1").click(function () {
       alert("text:"+$("#text").html());
   }) ;
   $("#btn1").click(function () {
      //获取文本框的值
       alert("text:"+$("#it").val());
   }) ;
   $("#btn2").click(function () {
       //获取属性 attr
       alert("text:"+$("#aid").attr("href"));
       alert("text:"+$("#aid").attr("id"));
   });
});

jQuery 设置

设置.gif

第一步捕获到以后我们需要修改标签的内容或者属性值;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="setting.js"></script>
    <style>
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
  <p id="p1">echo</p>
  <p id="p2">Hello world</p>
  <input type="text" id="input" value="nidaye">
    <button id="btn1">按钮</button>
    <button id="btn2">按钮2</button>
    <button id="btn3">按钮3</button>
    <br/>
    <a id="aid" href="http://www.app-echo.com"> 最初是echo官网,接下来是借我</a>
  <button id="btn4">调转链接</button>
  <br/>
    <p id="p5">他大舅</p>
  <button id="btn5">按钮5</button>
</body>
</html>

jQuery代码:

$(document).ready(function () {
     $("#btn1").click(function () {
        $("#p1").text("借我");
    });
     $("#btn2").click(function () {
        $("#p2").html("<a href='http://www.app-echo.com/#/sound/1173419'>借我</a>");
    });
     $("#btn3").click(function () {
        $("#input").val("借我一个暮年");
    });

     $("#btn4").click(function () {
        // $("#aid").attr("href","http://www.app-echo.com/#/sound/1173419");
        $("#aid").attr({
            "href":"http://www.app-echo.com/#/sound/1173419",
             "title":"啥哈哈哈"
        });
        // $("#aid").text("借我");
    });

    $("#btn5").click(function () {
        //当前元素的下表(不用管,默认为0), 当前修改后的内容
        $("#p5").text(function (i,ot) {
            return "old:"+ot +" new:这是新的内容"+(i);
        });
    });
});

jQuery 添加元素

添加子标签.gif
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="addElement.js"></script>
</head>
<body>
  <p id="p1">hello world</p>
    <button id="btn1">按钮</button>
  <br/>
  <p id="p2">hello world</p>
    <button id="btn2">按钮2</button>
  <br/>
    <button onclick="appendText()">按钮3</button>
</body>
</html>

添加子元素 或则修改内容

/**
 *append  在被选中的元素结尾插入内容
 * prepend 在被选中的元素之前插入内容
 * before  在被选中的元素之前插入内容  换行添加
 * after 在被选中的元素结尾插入内容    换行添加
 */

$(document).ready(function () {

    $("#btn1").click(function () {
       // $("#p1") .append(" this is my webpage add content");
       $("#p1") .prepend(" this is my webpage add content");
    });
    $("#btn2").click(function () {

       // $("#p2").before("jiewo");
       $("#p2").after("jiewo");
    });
});

function  appendText() {
    /**
     *  添加标签的三种方式  html/jQuery,DOM
     */
    var text1 = "<p>echo</p>"
    var text2 =$("<p></p>").text("ime");
    var text3 = document.createElement("p");
    text3.innerHTML = "acely";
    $("body").append(text1,text2,text3);

}

jQuery 删除元素

删除有两种方式:

  • remove 删除整个标签
  • empty 清空标签中的内容
删除元素.gif
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="removeElement.js"></script>
</head>
<body>
  <div id="div" style="height: 200px;width: 200px;  border:1px solid black;background-color: blueviolet">
      hello
      <p>hello world</p>
      <p>hello</p>
  </div>
    <button id="btn">按钮 remove</button>
  <div id="div2" style="height: 200px;width: 200px;  border:1px solid black;background-color: blueviolet">
      hello
      <p>hello world</p>
      <p>hello</p>
  </div>
    <button id="btn2">按钮 empty</button>
</body>
</html>
/**
 *  remove
 *  empty
 */
$(document).ready(function () {

    $("#btn").click(function () {
        $("#div").remove();
        // $("#div").empty();
    });
    $("#btn2").click(function () {
        // $("#div2").remove();
        $("#div2").empty();
    });
});

推荐阅读更多精彩内容