1.jQuery样式操作

1.1 设置或者修改样式,操作的是style属性。

单样式语法: jQuery对象.css('属性名', '属性值')

//html
<div id="box"></div>

//js
$("#box").css("background","gray");//将背景色修改为灰色

//js代码运行完毕的结果
<div id="box" style="background: gray"></div>

 设置多个样式:

//html
<div id="box"></div>

//js
$("#one").css({

    "background":"gray",

    "width":"400px",

    "height":"200px"

});

//js执行完毕的结果
<div id="box" style="background:gray; width:400px; height:200px"></div>

2 获取行内样式

//html
<div id="box" style="background: gray width:100px"></div>

$("#box").css("background-color"); //返回的是 rgb(128, 128, 128) --> gray
$("#box").css("width"); //返回100px

2.1 操作class样式方式

//html
<div id="box" ></div>

//js
$('#box').addClass('one');

//执行完之后的结果
<div id="box" class="one"></div>

如果想要同时添加多个

//如果想要同时添加多个
//html
<div id="box" ></div>

//js
$('#box').addClass('two three');

//结果
<div id="box" class="two three"></div>

2.2 移除所有样式类

-1 如果不传参数,那么会移除所有的类名

//html
<div id="box" class="one two three"></div>

//js
$('#box').removeClass();

//执行完毕的结果
<div id="#box" class></div>

-2 如果传入参数,删除指定的类名

//html
<div id="box" class="one two three"></div>

//js
$('#box').removeClass('one');

//执行完毕的结果
<div id="#box" class="two three"></div>

//======================================================================================

//如果想同时删除多个类名
//html
<div id="box" class="one two three"></div>
//js
$('#box').removeClass('one three');
//结果
<div id="#box" class="two"></div>

-3 判断是否有样式类

//html
<div id="box" class="one"></div>

//js
$('#box').hasClass('one'); //返回 true
$('#box').hasClass('two'); //返回 false

-4 切换样式类

如果有这个类名,则移除该样式,如果没有,添加该类名。

//html
<div id="box"></div>

//js
$('#box').toggleClass('one');

//执行完的结果
<div id="box" class="one"></div>

//此时再执行一次toggleClass('one');
$('#box').toggleClass('one');

//执行完的结果
<div id="box" class></div>

3  jQuery中的隐式迭代: jQuery内部会帮我们遍历DOM对象,然后给每一个DOM对象实现具体的操作.

jQuary总结3: jQuery语法1的更多相关文章

  1. 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

    <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...

  2. jQuery 语法

    通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). jQuery 语法实例 $(this).hide() 演示 jQuer ...

  3. jQuery基础(1) -- jQuery 语法

    通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions).jQuery 语法jQuery 语法是通过选取 HTML 元素,并对选取 ...

  4. JQuery:JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  5. jQuery语法基础&选择器

    jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(select ...

  6. 新知识:JQuery语法基础与操作

     jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...

  7. JQuery语法 JQuery对象与原生对象互转 文档就绪函数与window.onload的区别

    [JQuery语法] 1.jQuery("选择器").action();通过选择器调用事件函数,但是jquery中,jquery可以用$(“选择器”).action();   ① ...

  8. jQuery语法、选择器、效果等使用

    1.jQuery语法 1.1 基础语法:$(selector).action( ) 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 acti ...

  9. jQuery 语法(一)

    通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions). jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函 ...

随机推荐

  1. 第六章 通过Service访问Pod(下)

    6.4 外网如何访问service (1)ClusterIp: Service通过Cluster内部的IP对外提供服务,只有Cluster内的节点和Pod可以访问,这是默认的Service类型. (2 ...

  2. php redis安装使用

    下载redis-windows-master.解压点击redis-server.exe运行服务端 redis设置访问密码 修改redis.conf文件配置, # requirepass foobare ...

  3. 在spring中该如何使用DTO,以及DTO和Entity的关系

    1. DTO是用于将后台的数据结构(javaBean)转换为对用户友好的表现方式的数据结构,同时也能防止后台数据直接传送到前台而存在的潜在危险. 2. 可以时候要哪个springbot框架提供的转换器 ...

  4. java根据pdf模版动态生成pdf

    java根据pdf模版动态生成pdf package com.utils; import java.io.ByteArrayOutputStream; import java.io.File; imp ...

  5. 读《分布式一致性原理》JAVA客户端API操作2

    创建节点 通过客户端API来创建一个数据节点,有一下两个接口: public String create(final String path, byte data[], List<ACL> ...

  6. C#做的在线升级小程序

    转自原文C#做的在线升级小程序 日前收到一个小任务,要做一个通用的在线升级程序.更新的内容包括一些dll或exe或.配置文件.升级的大致流程是这样的,从服务器获取一个更新的配置文件,经过核对后如有新的 ...

  7. ActionMQ5.8.0 JMS实例 手把手详细图解

    出自:http://blog.csdn.net/tongjie008/article/details/40687087 ActionMQ 是开源的JMS实现 1.下载ActiveMQ 去官方网站下载: ...

  8. MySQL 中随机获取数据

    由于需要大概研究了一下MYSQL的随机抽取实现方法. 目前采用的方法: SELECT * FROM tablename ORDER BY RAND() LIMIT 实现原理: 通过ORDER BY R ...

  9. SVN用命令行更换本地副本IP地址

    1.运行svn info现连的svn信息 2.运行svn switch --relocate https://原来的地址 https://改过后的地址. svn help switch 查看switc ...

  10. NSTimer类的使用

    转载于:http://www.cnblogs.com/wujian1360/archive/2011/09/05/2167992.html 创建一个 Timer + scheduledTimerWit ...