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>
jQuery-操作元素的内容,属性,样式的更多相关文章
- jQuery操作元素的class属性
今天在做一个菜单折叠插件的时候需要根据页面的url改变其class属性.jQuery操作元素的属性是非常方便的,在此记录一下: 1.给元素添加class属性: addClass(class) (1)添 ...
- 用JQuery操作元素的style属性
可以直接利用css()方法获取元素的样式属性,JQuery代码如下: 1 $("p").css("color"); //获取p元素的样式颜色 无论color属 ...
- 使用jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- 《从零开始学习jQuery》:用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...
- jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuar总结10:jQuery操作元素的属性
jQuery操作元素的属性 1 设置单个属性 //html <div></div> //js $('div').attr('id', 'box'); $('div').attr ...
- GSAP JS基础教程--TweenLite操作元素的相关属性
今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了. 代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...
- 修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标
一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...
随机推荐
- C. Barcode dp
https://codeforces.com/problemset/problem/225/C 这个题目和之前一个题目很像 https://www.cnblogs.com/EchoZQN/p/1090 ...
- Kafka 的一些知识点整理【1】
First: Kafka 是什么? Kafka 是一个发布订阅系统 最初是是LinkedIn 开发 最后交给Apache 开源组织 github地址:https://github.com/apache ...
- 并发工具类——Semaphore
本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. 并发编程系列博客传送门 Semaphore([' seməf :(r)])的主要 ...
- 存储过程——异常捕获&打印异常信息
目录 0. 背景说明 1. 建立异常信息表ErrorLog 2. 建立保存异常信息的存储过程 3. 建立在SQL Server中打印异常信息的存储过程 4. 建立一个用于测试的存储过程抛出异常进行测试 ...
- PHP根据抖音的分享链接来抓包抖音视频
现在抖音是个很火的短视频平台,上面有许多不错的小视频.今天教大家怎么用PHP技术来获取到抖音上的的内容. 1:打开抖音选中你认为好的视频点击分享,复制链接,然后你会获取到如下的内容: #科比 愿你去的 ...
- 一道题带你搞定Python函数中形参和实参问题
昨天在Python学习群里有位路人甲问了个Python函数中关于形参和实参一个很基础的问题,虽然很基础,但是对于很多小白来说不一定简单,反而会被搞得稀里糊涂.人生苦短,我用Python. 为了解答大家 ...
- angular controller的使用
在angular.js最常用的模块就是控制器了,通常我们会这样使用: var myAppModule = angular.module('myApp', []); myAppModule.cont ...
- java ->IO流_序列化流与反序列化流
序列化流与反序列化流 用于从流中读取对象的操作流 ObjectInputStream 称为 反序列化流 用于向流中写入对象的操作流 ObjectOutputStream 称为 序列化流(对象 ...
- wepy 小程序开发(interceptor拦截器 && WXS)
WePY全局拦截器可对原生API的请求进行拦截. import wepy from 'wepy'; export default class extends wepy.app { constructo ...
- 9.2 Go 文件IO操作
9.2 Go 文件IO操作 1.1.1. bufio包 带有缓冲区的IO读写操作,用于读写文件,以及读取键盘输入 func main() { //NewReader返回一个结构体对象指针 reader ...