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. Zabbix 添加 WEB 监控

    添加 WEB Monitorings Web Monitoring是用来监控web程序的,可以监控到web程序的下载速度.返回码及响应时间,还支持把一组连续的web动作作为一个整体来监控. 下面我们以 ...

  2. Java开发中所涉及的常用远程调用

    根据<Spring in Action>一书中指出,Java开发中常见的远程过程调用(RPC),常见的有一下四种方式: 1.远程方法调用(RMI) 2.Caucho的Hessian和Bur ...

  3. JPype:实现在python中调用JAVA

    一.JPype简述 1.JPype是什么? JPype是一个能够让 python 代码方便地调用 Java 代码的工具,从而克服了 python 在某些领域(如服务器端编程)中的不足. 2.JPype ...

  4. 【POJ】2229 Sumsets(递推)

    Sumsets Time Limit: 2000MS   Memory Limit: 200000K Total Submissions: 20315   Accepted: 7930 Descrip ...

  5. js控制手机震动

    js控制手机震动 <button onclick="vibrate()">震动</button> <script> function vibra ...

  6. Tkinter Message

    Python GUI - Tkinter Message(消息):这个小工具提供了一个多和不可编辑的对象,显示文本,自动断行和其内容的理由.   这个小工具提供了一个多和不可编辑的对象,显示文本,自动 ...

  7. thinkphp5集成微信支付【公众号支付】快捷路径

    1 下载官方的测试用例PHP版 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1 2 到vendor目录新建weixin文件夹 ...

  8. 版本控制git之二-分支

    有人把 Git 的分支模型称为它的`‘必杀技特性’',也正因为这一特性,使得 Git 从众多版本控制系统中脱颖而出. 为何 Git 的分支模型如此出众呢? Git 处理分支的方式可谓是难以置信的轻量, ...

  9. TCP的交互数据流

    在TCP进行数据传输时,可以分为成块数据流和交互数据流两种,如果按字节计算,成块数据与交互数据的比例约为90%和10%,TCP需要同时处理这两类数据,且处理的算法不同. 书籍本章中以Rlogin应用为 ...

  10. [转] 实现winfrom进度条及进度信息提示,winfrom程序假死处理

    china_xuhua 原文地址 1.方法一:使用线程 功能描述:在用c#做WinFrom开发的过程中.我们经常需要用到进度条(ProgressBar)用于显示进度信息.这时候我们可能就需要用到多线 ...