jquery元素获取

最新推荐文章于 2024-10-07 09:24:46 发布

weixin_43897772

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量59

点赞数

文章标签： jquery javascript

原文链接：https://www.w3school.com.cn/html/index.asp

版权

1.操作DOM的几个方法

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<!DOCTYPE html>
<html>
<head>
<script src="../js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
  $("#btn3").click(function(){
    alert("Value: " + $("#test2").val());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<br>
<p>姓名：<input type="text" id="test2" value=""></p>
<button id="btn3">显示值</button>
</body>

</html>

attr() 方法用于获取属性值。

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#w3s").attr("href"));
  });
});
</script>

如果想要设置内容，只需在后面带参数

2.添加新的HTML内容

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

3.删除元素内容

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素：保留了元素样式，清除了该元素内的其他内容

4.操作css类

addClass() - 向被选元素添加一个或多个类

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

removeClass() - 从被选元素删除一个或多个类

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue");
  });
});
</script>

toggleClass() - 对被选元素进行添加/删除类的切换操作（修改已存在的css样式，再次点击切换回原设置样式）

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>

css() - 设置或返回样式属性

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Background color = " + $("p").css("background-color"));
  });
});
</script>