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()应 ...
随机推荐
- 通过 NewLife.XCode 迁移任意现有数据库到任意数据库
通过 NewLife.XCode 迁移任意现有数据库到任意数据库(附分表分库方法) 本文背景是将其他系统的数据库迁移到另一个数据库(仅需 20 行代码),也可以作为项目迁移用,生成自己系统的专属实体代 ...
- C#调用接口注意要点
在用C#调用接口的时候,遇到需要通过调用登录接口才能调用其他的接口,因为在其他的接口需要在登录的状态下保存Cookie值才能有权限调用, 所以首先需要通过调用登录接口来保存cookie值,再进行其他接 ...
- iOS-项目开发1-图片浏览器
FFBrowserImageViewController 自定义的图片浏览器:支持图片双击放大,单击取消,拖动取消. 重点: 1:在iOS11之后再布局是要将UIScrollViewContentIn ...
- 【Anaconda】:科学计算的Python发行版
[背景] Python易用,但包管理和Python不同版本的问题比较头疼,特别是当你使用Windows的时候.为了解决这些问题,有不少发行版的Python,比如WinPython.Anaconda等, ...
- Vuex 拾遗
引入Vuex的目的:为众多的Vue组件提供一个全局管理共享组件状态的控制中心,当一个共享状态改变时,能使调用该共享状态的组件得到更新.并且使用Vuex的API,每个共享状态的改变都能被追踪. 组件如何 ...
- widows本地-xshell实现远程连接linux服务器图形界面
本地环境远程连接linux图形界面,常用的实现工具有,VNC.Puty.Xshell等,这里我们用的xshell manager: Xmanager简介:Xmanager是一个运行于 Windows平 ...
- 没啥事用C语言写一个Trie tree玩玩,支持中英文,用g++编译通过
#include <cstdio> #include <cstdlib> #include <vector> #define ALPHABETS 2600000 # ...
- [Error] 'exit' was not declared in this scope的解决方法
新手刚开始用Linux和c++写程序,可能会出现下面的错误 error: ‘exit’ was not declared in this scope 解决方法是 添加 #include <cst ...
- SpringBoot用@ConfigurationProperties获取配置文件值
SpringBoot的配置文件有yml和properties两种,看一些文章说yml以数据为中心,比较好.个人觉得properties更好用,所以这里以properties格式为例来说. 我们都知道@ ...
- .net core跨平台发布至centos7
在要发布的项目目录下输入发布命令 dotnet publish -r centos.-x64 发布成功后,文件位于xxx\bin\Debug\netcoreapp2.0\centos.7-x64\pu ...