Jquery操作样式
1.CSS(name,value)
修改单个样式
$(function(){
$(".divcontent").css("background","red"); //修改背景颜色为红色
});
2.CSS({});
修改多个样式
$(function(){
$(".divcontent").css({
//边框 1像素实线 红色
border:"1px solid red",
//背景颜色绿色
background:"green"
});
});
3.Css(name);
获取样式
$(function(){
//返回rgb(0,0,0);
console.log($(".divcontent").css("background"));
});
获取已设置的样式或默认的样式,如果是给多个“li”设置的样式,则返回第一个li元素的样式
$(function(){
$("li:first").css("fontSzie","16px");
$("li").eq(1).css("fontSize","24px");
$("li").eq(2).css("fontSize","44px");
console.log($("li").css("fontSize")); //返回16px
});
隐士迭代:偷偷的for循环
设置的时候:会给JQ内部所有的对象都设置相同的值
获取的时候:只会返回第一个元素对应的值
4.class操作:
4.1添加类:addClass("类名"); //类型不需要加.
在原有的基础上添加类,不覆盖任何类
4.2移除类:removeClass("类名");
4.3判断类:hasClass("类名");
4.4切换类:toggleClass("类名");
<script>
//记住 click()里面是方法 加上function
//添加类
$("#p").click(function(){
$("ul").addClass("boot");
});
//移除类
$("input").eq(1).click(function(){
$("ul").removeClass("boot");
});
//判断类
$("input").eq(2).click(function(){
var a=$("ul").hasClass("boot");
if(a){
$("ul").removeClass("boot");
}else{
$("ul").addClass("boot");
}
}); //切换类
$("input").eq(3).click(function(){
$("ul").toggleClass("boot"); }); </script>
Jquery操作样式的更多相关文章
- 测开之路一百零四:jquery操作样式
jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...
- JQuery操作样式以及JQuery事件机制
1.操作样式 1.1 css的操作 功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...
- jQuery操作样式知识总结
css操作 功能:设置或者修改样式,操作的是style属性. 设置单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使用案例 $(&qu ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- jquery 操作
Jquery使用时要引用,引用时放在最前. Jquery: $代表选择器, $(document) ready(function(e){}):找到页面,页面加载完成后执行. JS选取元素操作内容操作属 ...
- JQuery操作DOM(8)
一.jQuery操作样式 1.设置和获取样式 /* 单个样式 */ $(selector).css(属性,值): /* 多个样式 */ $(selector).css({属性:值,属性:值}); /* ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
随机推荐
- 机器学习实战-ch2-有标签的聚类算法
本书中的这个聚类算法多少有些让人意外.通常的聚类算法是这样的: 给定一堆点: 给定一个距离计算的算法: 给定一个cluster之间的距离d,或者最小的cluster数目k: 初始化,每个点作为初始集群 ...
- Python--随机生成指定长度的密码
在浏览别人博客时学习了random模块,手痒自我练习下,写个随机生成指定长度的密码字符串的函数,拿出来供各位参考: 废话不多说,上代码: # coding: utf-8 import random i ...
- 微信小游戏canvas操作
这几天在做项目的时候,想在游戏画面之前,在Canvas上面画上一张背景图,代码如下 let ctx = canvas.getContext('2d') export default cl ...
- C#基础——C#中问号的使用
1. 可空类型修饰符(?): 引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空. 例如:string str=null; 是正确的,int i=null; 编译器就会报错. 为了使值 ...
- Flask系列05--Flask的配置config
一.flask配置 示例说明, 就是使用config进行配置 from flask import Flask app = Flask(__name__) # type:Flask app.conf ...
- Tomcat 启动成功后报 INFO [Timer-0] org.apache.catalina.loader.WebappClassLoaderBase.checkStateForResourceLoading Illegal access:
Tomcat 启动成功后报 INFO [Timer-0] org.apache.catalina.loader.WebappClassLoaderBase.checkStateForResourceL ...
- java分模块项目在idea中使用maven打包失败(ps:maven常用到的命令)
一.分模块项目打包失败 情况:项目是分模块创建的,一些公共的方法是单独的一个模块common,其他模块依赖于此模块,poom依赖已经添加了,项目可以正常运行,但使用maven打包时出现了问题:找不到依 ...
- Windows+MyEclipse+MySQL【连接数据库报错caching_sha2_password】
在MyEclipse中打开[窗口]->[显示视图]-> MyEclipse Database Browser -> (图片里倒三角)New.... ①Driver template: ...
- IntelliJ IDEA中Debug的使用技巧
当运行结果跟我们设想的不一致时,我们就可以用debug进行代码调试,下面是我在日常开发中对debug的一些小结 (一)基本介绍 本篇文章是基于IntelliJ IDEA2018.3.2版本,Debug ...
- 【转载】InstallShield 生成安装日志
msiexec.exe /p "C:\Documents and Settings\qa\Desktop\8.3 Patch.msp" /l*v c:\log85gold.log ...