jQuery样式及html属性操作
样式及html属性操作
1,行内样式 css();
a:获取样式
元素.css(样式名称);
b:设置单个样式
元素.css("样式名称":"样式值");
c:设置多个样式
元素.css({"样式名称1":"样式值1","样式名称2":"样式值2",...});
d: 带回调函数的
元素.css({样式名称:function(index,value){
index是元素在对象集合中的索引位置
value是原有的样式值
}});
e:操作元素的行内样式
2, css类操作
offset(); 获取匹配元素在当前视口的相对偏移
获取元素位置
元素.offset(); 返回对象包含left与top值
设置元素的位置
元素.offset({left:100,top:100});
position(); 获取匹配元素相对父元素的偏移
获取元素相对于父级的位置
元素.position(); 返回相对于父级的包含left与top值
****scrollTop(); 获取匹配元素相对滚动条顶部的偏移
****scrollLeft();
height(); 取得匹配元素当前计算的高度值
获取元素的高度
元素.height();
设置元素的高度
元素.height(20);
回调函数
元素.height(function(index,height){
index是接受元素的索引值
height是元素的原始高度
});
width(); 取得匹配元素当前计算的宽度值
获取元素的高度
元素.width();
设置元素的高度
元素.width(20);
回调函数
元素.width(function(index,height){
index是接受元素的索引值
height是元素的原始宽度
});
innerHeight(); 获取第一个匹配元素内部区域高度(包括补白、不包括边框)
innerWidth(); 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
outerHeight(); 获取第一个匹配元素外部高度(默认包括补白和边框)。
outerWidth(); 获取第一个匹配元素外部宽度(默认包括补白和边框)。
3, removeClass(); 从所有匹配的元素中删除全部或者指定的类。一个或多个
addClass(); 为每个匹配的元素添加指定的类名。一个或多个
toggleClass(); 如果存在(不存在)就删除(添加)一个类。
hasClass(); 检查当前的元素是否含有某个特定的类,如果有,则返回true。
*****is(); 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true
4, html属性操作
attr(); 设置或返回被选元素的属性值。
获取元素属性 元素.attr("属性名称");
设置多个属性
元素.attr({"alt":"","src":""});
设置单个属性
元素.attr("alt","哈哈哈");
属性,回调函数
元素.attr("alt",function(index,oldValue){
第一个参数为当前元素的索引值,第二个参数为原先的属性值
});
prop(); 获取在匹配的元素集中的第一个元素的属性值。
data();
jQuery样式及html属性操作的更多相关文章
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
- Jquery选择器大全、属性操作、css操作、文档、事件等
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象 jQuery产 ...
- jquery 标签中的属性操作
.arrt() 获取匹配的元素集合中的第一个元素的属性值,或设置每一个元素中的一个或多个属性值. .attr(attributeName) $("em").attr("t ...
- select元素选择时间以及jQuery对select的属性操作
<select class="input04" id="1" name="in_class1" onchange="setc ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jQuery操作标签--样式、文本、属性操作, 文档处理
1.样式 2.文本 3.属性操作 全选,反选效果 4.文档处理 操作标签 一.样式操作 样式类: addClass(); // 添加指定的css类名 removeClass(); //移除指定的css ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点
样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...
随机推荐
- Java中Arrays详解
一.Arrays类的定义 Arrays类位于 java.util 包中,主要包含了操纵数组的各种方法 使用时导包:import java.util.Arrays 二.Arrays常用函数(都是静态的) ...
- vs code打开文件显示的中文乱码
这种情况下,一般是编码格式导致的,操作办法: 鼠标点击之后,上面会弹出这个界面,双击选中 然后从UTF-8换到GB2312,或者自己根据情况,更改编码格式
- iOS 类似外卖 两个tableView联动
在伯乐在线上看到一个挺好玩的文章,自己也参考文章实现了一下. 效果实现如图所示: 具体实现的内容可以参考原文,参考文章:<iOS 类似美团外卖 app 两个 tableView 联动效果实现&g ...
- JavaScript关键字之super()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/super The super keyword ...
- 基础篇七:默认配置语法(/etc/nginx/nginx.conf)
首选我们 vim nginx.conf 参照上图,我们看看nginx.conf 的个参数含义 我们再看看 /etc/nginx/conf.d/default.conf
- E - Minimum Spanning Tree Gym - 102220E (转化+贡献)
In the mathematical discipline of graph theory, the line graph of a simple undirected weighted graph ...
- day22- hashlib模块-摘要算法(哈希算法)
# python的hashlib提供了常见的摘要算法,如md5(md5算法),sha1等等.摘要:digest # 摘要算法又称哈希算法.散列算法. # 它通过一个函数,把任意长度的数据(明文)转换为 ...
- Estimating Gene Frequencies| method of maximum likelihood|point estimate
I.11 Estimating Gene Frequencies 在小样本上计算基因A的概率PA,举例如下: 通过加大样本会将通过观察值得到的数趋近于真实数据,所以该问题转化为了统计学上利用大量观察值 ...
- Excel-DNA项目只用1个文件实现Ribbon CustomUI和CustomTaskpane定制【VB.Net版】
Excel-DNA项目中的自定义功能区和自定义任务窗格需要用到各种命名空间.添加所需文件,才能实现.后来我发现可以把所有代码都写在Class1.vb这个默认文件中. 大家可以在Visual Studi ...
- HashMap、Hashtable、ConcurrentHashMap、ConcurrentSkipListMap对比及java并发包(java.util.concurrent)
一.基础普及 接口(interface) 类(class) 继承类 实现的接口 Array √ Collection √ Set √ Collection List √ Collection Map ...