您现在的位置是: 网站首页> 前端技术> jQuery jQuery

jQuery 获取HTML节点内容及操作节点

Smile 2020-09-25 HTML CSS jQuery 阅读:169

简介jQuery拥有可操作HTML元素和属性的强大方法,在web前端开发时常会用到jQuery操作HTML元素,jQuery提供一系列与DOM相关的方法,这使访问和操作元素和属性变得很容易

1、获取节点内容

  1. text() - 设置或返回所选元素的文本内容
  2. html() - 设置或返回所选元素的内容(包括 HTML 标记)
  3. val() - 设置或返回表单字段的值
  4. attr() - 获取属性
<!DOCTYPE html>
<html>
<head>
	<title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<ul>
	<span id="name">光年之外</span>
    <span id="year"><b>2016</b></span>
    <input type="text" name="code" value="34532">
</ul>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    console.log($('#name').text());
    console.log($('#year').html());
    console.log($('input[name="code"]').val());
    console.log($('input[name="code"]').attr('type'));
	
</script>
</body>
</html>

2、设置节点内容

$('#name').text('泡沫');

$('#year').html('<b>2013</b>');

$('input[name="code"]').val('56432');
$('input[name="code"]').attr('type','number');

3、添加元素

  1. append() - 在被选元素的结尾插入内容
  2. prepend() - 在被选元素的开头插入内容
  3. after() - 在被选元素之后插入内容
  4. before() - 在被选元素之前插入内容
$("ul").append('<span id="name2">有心人</span>');//在ul内部的结尾添加
$("ul").prepend('<span id="name2">有心人</span>');//在ul内部的开头添加

$("ul").after('<span id="name2">有心人</span>');//在ul外部的结尾添加
$("ul").before('<span id="name2">有心人</span>');//在ul外部的开头添加

4、删除元素/内容

  1. remove() - 删除被选元素(及其子元素)
  2. empty() - 从被选元素中删除子元素
$("#name").remove();//删除被选元素及其子元素

$("#year").empty();//方法删除被选元素的子元素
$("span").remove("#name");删除id="name"的所有<span>元素

5、获取并设置 CSS 类

  1. addClass() - 向被选元素添加一个或多个类
  2. removeClass() - 从被选元素删除一个或多个类
  3. toggleClass() - 对被选元素进行添加/删除类的切换操作
  4. css() - 设置或返回样式属性
$('span').addClass("blue");

$("span").removeClass("blue");

$("span").toggleClass("blue");

$("span").css("background-color");//返回CSS属性
$("span").css("background-color","blue");//设置CSS属性
$("span").css({"background-color":"blue","font-size":"200%"});设置多个CSS属性

6、获取元素尺寸方法

  1. width()
  2. height()
  3. innerWidth()
  4. innerHeight()
  5. outerWidth()
  6. outerHeight()
$("#div1").width();//设置或返回元素的宽度(不包括内边距、边框或外边距)
$("#div1").height();//设置或返回元素的高度(不包括内边距、边框或外边距)

$("#div1").innerWidth();//返回元素的宽度(包括内边距)
$("#div1").innerHeight();//返回元素的高度(包括内边距)

$("#div1").outerWidth();//返回元素的宽度(包括内边距和边框)
$("#div1").outerHeight();//返回元素的高度(包括内边距和边框)

很赞哦! (0)

文章评论

站点信息