您现在的位置是: 网站首页> 前端技术> jQuery jQuery
jQuery 获取HTML节点内容及操作节点
Smile 2020-09-25 14:08:15 HTML CSS jQuery 阅读:2160
简介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)