jQuery-操作元素的内容,属性,样式
时间:2020-05-21
本文章向大家介绍jQuery-操作元素的内容,属性,样式,主要包括jQuery-操作元素的内容,属性,样式使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.操作内容
- 获取:
- 双标签:html()
- input:val()
- 设置:
- 双标签:html('新内容')
- input:val('新内容')
2.操作属性
* 获取:attr('属性名')
* 设置:attr('属性名','新的值')
3.样式操作
* 获取:css('样式名')
* 设置:css('样式名','新的值') css({"样式名1":"新的值","样式名2":"新的值"})
4.额外封装的
- css操作类操作:
- addClass():添加类名
- removeClass():删除类名
- toggleClass():切换类名
- 尺寸操作:
- height():高度
- width():宽度
- scrollTop():滚动高度
- scrollLeft():滚动距左边距离
5.代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作内容,属性,样式</title>
<style>
#box {}
.content {}
</style>
</head>
<body>
<div>div的内容</div>
<input type="text" value="input的标签" />
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script>
//获取内容
console.log($("div:eq(0)").html())
console.log($("input:eq(0)").html())
//设置内容
$('div:eq(0)').html('新的值')
$('input:eq(0)').html('新的input值')
//设置属性
$("div:eq(0)").attr('id', 'box').attr('class', 'content')
//获取属性
console.log($("div:eq(0)").attr('id'))
//获取样式
console.log($("div:eq(0)").css('fontsize'))
//设置样式
$("div:eq(0)").css('color', 'red').css('fontsize', '30px')
$("div:eq(0)").css({
'border': '1px solid #000',
'background': 'skyblue',
'margin': '10px auto',
'height': '400px',
'width': 300,
'padding': "20px"
})
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/dongxuelove/p/12933460.html
- [快学Python3]List(列表)
- [快学Python3]Tuple(元组)
- HDU 1248 寒冰王座(完全背包裸题)
- [快学Python3]String(字符串)
- [快学Python3]XML解析处理 - Element Tree
- Educational Codeforces Round 21(A.暴力,B.前缀和,C.贪心)
- [快学Python3]JSON解析
- Codeforces 754A Lesha and array splitting(简单贪心)
- [快学Python3]日期和时间处理
- Codeforces Round #412 (rated, Div. 2, base on VK Cup 2017 Round 3)(A.B.C,3道暴力题,C可二分求解)
- [快学Python3]目录与文件操作
- Codeforces Round #411 (Div. 2)(A,B,C,D 四水题)
- [快学Python3]INI文件读写
- [快学Python3]迭代器和生成器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SpringCloud2020 学习笔记(四) cloud-provider-payment8001支付模块
- SpringCloud2020 学习笔记(五)cloud-consumer-order80 消费者订单模块
- SpringCloud2020 学习笔记(六)如何开启idea中的Run DashBoard or Services
- SpringCloud2020 学习笔记(七)cloud-eureka-server7001 EurekaServer服务端安装
- SpringCloud2020 学习笔记(八)cloud-provider-payment8001支付模块入驻eurekaServer注册中心
- SpringCloud2020 学习笔记(九)cloud-consumer-order80 消费者订单模块入驻eurekaServer注册中心
- SpringCloud2020 学习笔记(十)cloud-eureka-server7001 cloud-eureka-server7002 Eureka集群安装
- Python爬虫之抓取某东苹果手机评价
- python学习笔记
- 必看!!!python列表( 增 删 改 查),超详细讲解!!
- Python识别验证码
- 多线程爪巴虫下载进击的巨人
- 利用selenium实现自动翻页爬取某鱼数据
- 20行Python代码爬取下载应用宝所有APP软件
- 爬虫 -- 天天基金网数据简单爬取