【jQuery笔记Part1】10-jQuery操作html-获取设置
jQuery操作html-获取&设置
- 获取内容
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
- 设置内容
- text(参数) - 设置或返回所选元素的文本内容
- html(参数) - 设置或返回所选元素的内容(包括 HTML 标记)
- val(参数) - 设置或返回表单字段的值
- 回调函数
- 获取属性
- attr() 获取标签的属性
- 设置属性
- 设置单个属性
- 设置多个属性
jQuery笔记目录
一般来说,大部分方法没有参数是获取,有了参数则是设置。
获取内容
text() - 设置或返回所选元素的文本内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box"><p id="content">内容</p><spqn>哈哈哈哈</spqn>
</div>
<input type="text" id="name" value="itlike">
<a href="http://www.itlike.com" target="_blank">撩课学院</a>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">$(function () {//1.获取标签中的内容getContent();});function getContent() {var $box = $('#box');//1.获取内容var text = $box.text();console.log(text);}
</script></body>
</html>
运行结果:
html() - 设置或返回所选元素的内容(包括 HTML 标记)
var $box = $('#box');
// 2.获取标签和内容
var html = $box.html();
console.log(html);
运行结果:
val() - 设置或返回表单字段的值
HTML 表单包含表单元素。
表单元素 指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
var $box = $('#box');
//3.获取输入框的内容
var content = $('#name').val();
console.log(content);
运行结果:
设置内容
text(参数) - 设置或返回所选元素的文本内容
var $box = $('#box');
$box.text('撩课学院') // 设置文本,不能设置标签
运行结果:
html(参数) - 设置或返回所选元素的内容(包括 HTML 标记)
$box = $('#box');
$box.html('<h1>喜欢IT<h1>'); // 设置标签加文本
val(参数) - 设置或返回表单字段的值
$('name').val('ITLIKE') // 将输入框的值设为 ITLIKE
运行结果:
回调函数
$box = $('#box');
$box.text(function (index, oldValue) {return index + oldValue + ',追加的内容';
});
运行结果:回调函数,在原来的值的基础上增加新的值
获取属性
attr() 获取标签的属性
var $box = $('#box');
//4.获取标签的属性值
var href = $('a').attr('href'); // 获取 a 标签的 href 属性
console.log(href);
var target = $('a').attr('target'); // 获取 a 标签的 target 属性
console.log(target);
运行结果:
设置属性
设置单个属性
$('a').attr('href','http://www.baidu.com') // 将a标签的href属性设置为Baidu
运行结果:点击超链接,跳转到百度
设置多个属性
$('a').attr({ // 设置多头属性一般都用键值对的形式'href':'http://www.baidu.com','target':'_self'
});
【jQuery笔记Part1】10-jQuery操作html-获取设置相关推荐
- 【jQuery笔记Part1】08-jQuery操作css-获取设置样式
jQuery操作css-css() 通过 css() 方法获取样式 通过 css() 方法设置样式 方法一:单一属性设置 方法二:链式调用 方法三:多个属性设置(最常用) 完整案例 jQuery笔记目 ...
- 【jQuery笔记Part1】09-jQuery操作css-尺寸
jQuery操作css-尺寸 width() height() innerWidth() innerHeight() outerWidth() outerHeight() outerWidth(tru ...
- 【jQuery笔记Part1】07-jQuery操作css-添加删除切换类、开关灯泡案例
jQuery操作css-添加&删除&切换类 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() ...
- 【jQuery笔记Part1】06-jQuery对象与js对象转换
jQuery对象与js对象转换 概念 为什么要转换 转化方法 JS对象 -> jQuery对象 jQuery对象 -> JS对象 原理图 jQuery笔记目录 概念 jQuery对象 是通 ...
- 【jQuery笔记Part1】01-jQuery简介集成
jQuery简介&集成 JS的问题? jQuery 概念 jQuery 特点 jQuery 功能 jQuery 集成方式 本地集成 远程集成 jQuery笔记目录 JS的问题? onload ...
- 【jQuery笔记Part1】02-jQuery代码风格
jQuery代码风格 1. 代码风格 2. 基本语法格式 示例 jQuery笔记目录 1. 代码风格 在 jQuery 程序中,不管是页面元素的选择.内置的功能函数的调用,都是美元符号 $ 来起始的. ...
- 【jQuery笔记Part1】11-jQuery选择器
jQuery选择器 基本选择器 层级选择器 属性选择器 筛选选择器 siblings 案例 jQuery笔记目录 基本选择器 初始 html 页面: <!DOCTYPE html> < ...
- 【jQuery笔记Part1】05-jQuery解决冲突
jQuery解决冲突 当 jQuery 内部的 $ 被其他函数库覆盖 解决方案一:将所有 $ 替换为 jQuery 解决方案二:借助匿名函数包裹执行 当其他函数库的 $ 被 jQuery 覆盖 解决方 ...
- 【jQuery笔记Part1】12-jQuery元素的角标
jQuery元素的角标 常见的鼠标事件 mouseenter 鼠标指针穿过被选元素时 mouseleave 鼠标移出被选元素内部时 mouseover 鼠标指针穿过被选元素或其子元素时 mouseou ...
最新文章
- 【坚持】Selenium+Python学习记录 DAY10
- java代码中 作用_Java利用开发中代码生成工具的作用
- python 控件id_查看控件id的工具
- JS开发引用HTML DOM的location和document对象
- 在Windows mobile 5.0下操作INI文件
- python生成html表格_如何使用Python生成html目录列表
- 最新揭秘:FaceBook网站架构图
- Hibernate之HQL查询
- 程序设计python_Python程序设计—车万翔
- 计算机桌面左上角 鼠标,鼠标一直跑到桌面左上角怎么解决
- 南阳OJ 题目97 兄弟郊游问题
- android显示视频预览
- Ubuntu 永久修改DNS
- 5.2 强归纳法和良序性
- 1.2.1 数据库系统特点
- 中介房屋买卖合同及违约责任
- Linux九阴真经之无影剑残卷2(磁盘存储和文件系统)
- 大学毕业后转行软件测试我后悔了
- MBSE建模学习之十:包图及模型扩展
- LiteOS-M内核