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

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

Smile 2020-09-25 HTML CSS jQuery 阅读：1264

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

1、获取节点内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
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、添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
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、删除元素/内容

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

$("#name").remove();//删除被选元素及其子元素

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

5、获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
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、获取元素尺寸方法

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

$("#div1").width();//设置或返回元素的宽度（不包括内边距、边框或外边距）
$("#div1").height();//设置或返回元素的高度（不包括内边距、边框或外边距）

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

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

很赞哦！ (0)

上一篇：jquery.cookie.js 插件详细使用方法

下一篇：jQuery 实现动画效果