jquery 操作css 选择器
.addClass()
为每个匹配的元素添加指定的样式类名
.addClass(className)
className 为每个匹配元素所有增加的一个或多个样式名
.addClass(function(index,currentClass))
函数返回一个或者多个用空格隔开, index 表示参数匹配中的索引位置 this 指向匹配元素集合中的当前元素。
$("p").addClass("myClass yourClass"); 给p 这个元素添加这两个类名样式。
$("ul li:last").addClass(function(index){
return "item-"+index;
}) 在最后一个<li> 元素上加上“item-1”样式。
.css()
获取匹配元素集合中的第一个元素的样式属性计算值或设置每一个匹配元素的一个或多个
css属性。
.css(propertyName)
propertyName 一个css 属性名 。 一个或者多个css 属性组成的数组。
$(this).css("background-color"); 获取当前元素的背景颜色。
$(this).css(["width","height",color]) 获取当前元素的 宽 高 字体颜色。
.css(propertyName,value)
propertyName 一个css 属性名。
value 设置这个css 的属性值。
.css(propertyName,function)
propertyName 一个css 属性名。
function 一个用来返回设置值的函数。this,是当前元素。
$('div.example').css('width',function(index){
return index*50;
}) 设置一个匹配元素的宽度增加到较大的值。
$("p").mouseover(function(){
$(this).css("color","red");
}) 当鼠标经过p 元素时文字变成红色。
$("#box").one("click",function(){
$(this).css("width","+=200")
}) 增加#box 的宽度为200像素。
.hasClass()
确定任何一个匹配的元素是否有被分配给定的(样式类)
.hasClass(className)
className 要查询的样式名。
$("#mydiv").hasClass("foo") 匹配的元素是否含有 foo这个样式
如果有这个样式那么就返回true 如果没有那么就返回false
.removeClass()
移除匹配的元素上面的样式。
.removeClass([className])
每个匹配元素移除的一个或者多个用空格隔开的样式名。
$("p").removeClass("myClass yourClass")
.removeClass(function(index,class))
一个函数,返回一个或多个要移除的元素,index 所有匹配的元素集合中的当前的元素。
.toggleClass()
在匹配的元素集合中的每个元素上切换样式名
.toggleClass(className)
className 在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名。
.toggleClass(className,switch)
switch 一个布尔值,用于判断样式是否应该被添加或移除。
.toggleClass([switch])
switch 一个用来判断样式类天添加还是移除的布尔值。
$('#foo').toggleClass(className,add0rRemove) 就等同于
if(add0rRemove){
$('#foo').addClass(className);
}else{
$('#foo').removeClass(className)
}
$("p").click(function(){
$(this).toggleClass("highlight");
//点击当前的p 标签的时候切换样式。
})
jquery 操作css 选择器的更多相关文章
- JQuery:JQuery操作CSS类
JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...
- jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...
- jquery操作css样式的方法
jquery操作css样式的方法(设置和获取)
- jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleCl ...
- JQUERY操作css与css()方法、获取设置尺寸;
一.jQuery addClass() 方法 向不同的元素添加 class 属性.在添加类时,您也可以选取多个元素 <style> .aa { color:red; }; </sty ...
- jquery操作CSS样式全记录
$(this).click(function(){ if($(this).hasClass(“zxx_fri_on”)){ $(this).removeClass(“zxx_fri_on”); ...
- jQuery操作css
jQuery addClass() 方法 向被选中元素添加class属性,参数为属性值 $("div").addClass("imp"); 也可以同时向多个元素 ...
- Jquery操作属性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Jquery操作层级选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- [一点一滴.NET]前台线程和后台线程
前台线程和后台线程就是通过线程实例的属性IsBackground=true or false来区分的. 新建一个线程是默认是后台线程. 前台线程全部执行完之后,才退出进程. 进程退出,所有的后台线程全 ...
- java语言编程实现两个时间相差多少天、多少小时、多少分、多少秒
不多说,直接上干货! DateDistance.java package zhouls.bigdata.DataFeatureSelection.test; import java.text.Date ...
- 注册中心eureka
最近在忙一些其它的事情,两个城市来回跑还要办一些手续,挺费劲的,学习的事情也就耽误了一些,尽量赶吧. spring cloud为分布式的微服务架构提供了一站式的解决方案,eureka注册中心在spri ...
- 定义与声明、头文件与extern总结(转)
本文转自: http://lpy999.blog.163.com/blog/static/117372061201182051413310/ http://blog.csdn.net/feitianx ...
- Java集合框架概述
集合框架指的是容器类.Java中大量持有对象的方式有数组和容器类两种方式.数组相较于容器类的优点在于:①随机访问效率高:由于是连续的存储空间,可以计算地址直接访问 ②类型确定:数组在创建时即可确定元素 ...
- IsBackground对线程的重要作用
要点: 1.当在主线程中创建了一个线程,那么该线程的IsBackground默认是设置为FALSE的. 2.当主线程退出的时候,IsBackground=FALSE的线程还会继续执行下去,直到线程执行 ...
- GitHub webstorm 及 README.md 姿势
README.md 语法格式: 规范的README文件开头都写上一个标题,这被称为大标题. 标题: #一级标题 ##二级标题 ###三级标题 ####四级标题 #####五级标题 ######六级标题 ...
- Conferences
中国学术会议在线 :http://www.meeting.edu.cn 中国会议网: http://www.chinameeting.com 香山科学会议:http://www.xssc.ac.cn/ ...
- android打包代码混淆
android应用打包代码混淆: 1.将project.propertier文件中的proguard.config=proguard-android.txt打开 拷贝指定的文件到应用中 2.更改 ...
- [原创]Centos7 安装配置ASP.NET Core+Nginx+Supervisor
序言 此教程安装的都是最新版本的. 一键安装 有了这个神器,下面的教程就不用做了!只需运行几行代码,直接打开浏览器就可以访问! cd /home/ wget https://files.cnblogs ...