码迷,mamicode.com
首页 > Web开发 > 详细

jQuary教程3: jQuery语法1

时间:2018-05-24 13:56:46      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:remove   span   bsp   多个   ack   语法   对象   AC   html   

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

  -切换样式类

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

//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

标签:remove   span   bsp   多个   ack   语法   对象   AC   html   

原文地址:https://www.cnblogs.com/autoXingJY/p/9081627.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!