jQuery中的常用方法及链式编程

最新推荐文章于 2024-01-20 11:55:00 发布

黄晶谛

最新推荐文章于 2024-01-20 11:55:00 发布

阅读量213

点赞数

分类专栏： # JavaScript&JQuery&Ajax 文章标签： jquery

本文链接：https://blog.csdn.net/SUNBOYmxbsH/article/details/119981738

版权

JavaScript&JQuery&Ajax 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery中用于操作DOM的html()、text()、val()和css()方法，以及获取兄弟元素的next()、prev()等方法。同时，讲解了attr()和prop()在处理属性时的区别，以及如何创建、添加和清空节点。通过一个城市选择案例，展示了实际应用中的DOM操作技巧，并强调了链式编程的使用条件。

摘要由CSDN通过智能技术生成

1、取值和设置值

html()
设置标签中间显示的标签或内容，类似于innerHTML
text()
设置标签中间显示的文本内容，类似于innerText
val()
设置input标签中value的值，类似于value
css()
设置元素的样式，类似于style

注意： html()、text()、val()三个方法，当没有传参时，表示取值，否则表示设置值。

2、获取兄弟元素

next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）
nextAll();//当前元素之后的所有兄弟元素
prev();//当前元素之前的紧邻着的兄弟元素（上一个）
prevAll();//当前元素之前的所有兄弟元素
siblings();//当前元素的所有兄弟元素

例：

$(".main").eq($(this).index()).addClass("selected").siblings().removeClass("selected");

3、属性操作

3.1 attr

// 获取属性
console.log($("img").attr("src"));
//	修改属性
$("img").attr("alt", "修改了");
//	修改多个属性
$("img").attr({
   alt: "嘎嘎",
   title: "哦耶"
});

3.2 prop

//	prop使用于具有布尔类型值的属性
$("#ck").prop("checked", true);
$("#sel").prop("selected", true);

4、创建、添加和清空节点

//	向父元素中添加子元素
$("parentElement").append($("childElementSelector"));
$("childElementSelector").appendTo($("parentElement"));

//  清空节点empty() 会清空元素注册的事件，防止内存泄漏
$("div").empty();
//  复制元素
$("div").clone();

例：城市选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市选择案例</title>
  <style>
    select {
      width: 200px;
      background-color: teal;
      height: 200px;
      font-size: 20px;
    }

    .btn-box {
      width: 30px;
      display: inline-block;
      vertical-align: top;
    }
  </style>
</head>

<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">深圳</option>
  <option value="4">广州</option>
  <option value="5">西红柿</option>
</select>
<div class="btn-box">
  <!--实体字符-->
  <button id="btn1"> &gt;&gt; </button>
  <button id="btn2"> &lt;&lt; </button>
  <button id="btn3"> &gt;</button>
  <button id="btn4"> &lt; </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>

<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">

  $(function (){

    $("#btn1").click(function (){
      // $("#src-city>option").appendTo("#tar-city");
      // $("#src-city>option").appendTo($("#tar-city"));
      $("#tar-city").append($("#src-city>option"));
    });

    $("#btn2").click(function (){
      // $("#tar-city>option").appendTo("#src-city");
      $("#tar-city>option").appendTo($("#src-city"));
    });

    $("#btn3").click(function (){
      $("#src-city>option:selected").appendTo($("#tar-city"));
    });

    $("#btn4").click(function (){
      $("#src-city").append($("#tar-city>option:selected"));
    });

  });

</script>

</body>
</html>