首页 专题 H5案例 前端导航 UI框架

JQuery学习笔记整理:CSS和属性

作者:TG 日期: 2016-10-28 阅读: 1206

这一章主要是记录获取和设置属性、处理样式类和CSS属性、获取和设置元素的HTML或文本内容、关联数据与元素。


目录
1、属性(attr()、removeAttr()、prop()、removeProp()、addClass()、removeClass()、toggleClass())
2、CSS(css())
3、内容(html()、text())
4、关联数据(data()、removeData())

1、属性
1.1 attr属性

attr(name)、attr(name,value)、attr(map)、attr(name,function)  获取或设置元素的属性

removeAttr(name)、removeAttr(name[])  删除元素的name属性

prop(name)、prop(name,value)、prop(map)、prop(name,function)  获取或设置元素的属性

removeProp(name) 删除元素的name属性

map表示映射对象。

(1)attr()、prop()
attr()和prop()方法都是用来获取或设置匹配元素的属性,当获取时,如果元素上没有该属性,则返回 undefined

<img class="first" />   

<label for=""><input type="radio" /> 单选框</label>    

<div class="box">   

  <img class="second" />

  <div class="item"></div>   

</div>


$('img').attr('src','example.png');   

$('input').prop('checked','true');   

$(".item").attr({'name':'item','style':'background-color:red'});  

$('img').attr('class');  //返回first

在上面的代码中,我们给所有img元素设置src属性,并赋值为example.png,然后给所有input元素设置checked属性为true,然后给所有具有类名item的元素设置name属性和style属性(以键值对的形式),最后是获取img元素的class(发现只会返回first,也就是第一个匹配的img中的)。

两个方法的第二个参数还可以是函数,它还会给函数传入两个参数,第一个是当前元素的索引,第二个是当前元素该属性的原始值,函数内this指向对应当前元素的HTMLElement对象。

attr(name,funciton(index,oldVal){})

注意:attr()和prop()方法,当针对的是“设置”时,它会给当前jQuery对象所匹配的每一个元素都设置对应的属性;而当针对的是“获取”时,只会从当前jQuery对象所匹配元素的第一个元素中获取。

attr()和prop()的区别?
attr坏人prop分别是单词attribute和property的缩写,意思都是属性,不过,在jQuery中,这两个却是不同的概念,attribute表示的是文档节点的属性,而property表示JS对象的固有属性。

<div id="box" data-title="tg"></div>  //这里的id、data-title都是该元素文档节点的attribute


var box = document.getElementById('box');

box[name] = 'tg'; //这里的name就是box这个HTMLElement对象的property

从1.6版本开始,attr()返回attribute的值,prop()返回property的值。

也可以这样理解,attr()方法返回的是字面量值,而prop()方法返回的是计算结果。

<input type="radio" />


$('input').attr('checked') == undefined   // true

$('input').prop('checked') == false  // true


<input type="radio" checked/>


$('input').attr('checked') == 'checked'   //true

$('input').prop('checked') == true  //true


根据官方的建议:具有 true 和 false 两个属性值的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()。

注意:对于部分属性,attribute和property是共享数据的,在大多数情况下,都是采用同名的属性,不过也有个别例外,比如:class,使用attr()方法是class,而使用prop()时,应该是className(了解原生JavaScript的应该知道,原生JavaScript就是采取这个名字获取类名)。

(2)removeAttr()、removeProp()

<img src="a.png" alt="我是图片" class="images" />


$('img').removeAttr('alt');

$('img').removeAttr('src class');


// 结果 

// <img />

请留意上面代码中的第二行jquery语句,给removeAttr()传入的是一个以空格分隔的字符串,它会同时移除src和class属性(1.7版本以上才支持)。

removeProp()和removeAttr()用法一样。

注意:不要使用removeProp()方法来删除DOM元素的本地属性checked、selected和disabled,一旦你删除了,你就无法再向该元素重新添加对应的属性,但你可以使用prop()方法来将其属性设置为false。

prop('checked',false)


1.2 class属性

addClass(name)、addClass(function)  为匹配元素添加某个class

hasClass(name)  判断匹配元素是否有某个class

removeClass(name)、removeClass(function)  删除匹配元素上某个class

toggleClass()、toggleClass(boolean)、toggleClass(name)、toggleClass(name,boolean)、toggleClass(funciton,boolean)  用于切换class

(1)addClass()、removeClass()
addClass()方法用于为元素添加class,返回jQuery对象本身。

<div class="box"></div>


$('.box').addClass('large');


// 结果

// <div class="box large"></div>

addClass()方法还可以一次性添加多个class,以空格隔开的字符串传入:

$('.box').addClass('large item nav');


// 结果

//<div class="box large item nav"></div>

还可以是回调函数,还会为回调函数传入两个参数,第一个参数是当前元素的索引,第二个参数是当前(原始)的class属性值,函数内this变量指向当前元素对应的HTMLElement对象。

<div class="box"></div>

<div class="box"></div>


$('.box').addClass(function(index,currentClasses){

  return 'item' + index;

});


//结果

// <div class="box item-0"></div>

// <div class="box item-1"></div>

注意:addClass()只是在原有css类名的基础上,添加新的css类名,并不会覆盖原有的css类名。如果待添加的css类名已经存在,则不会重复添加,也就是说,一个元素上不会出现两个同名css类名。

如果传入空字符串或undefined,addClass()方法则不会添加css类名。

removeClass()方法的用法和addClass()一样,不过它是用于删除元素的class。

removeClass()方法也支持多个参数:

removeClass('class1 class2')

也支持函数:

removeClass(function(index,currentClasses){})


如果需要移除的css类名不存在,removeClass()函数就会忽略掉该css类名。

(3)hasClass()
hasClass()用于判断元素是否拥有某个class,返回布尔值。

<div class="box item"></div>


$('.box').hasClass('item')  // true

$('.box').hasClass('a')   //false


(4)toggleClass()
toggleClass()用于切换class。所谓切换某个class,即若匹配的元素上有这个class就移除它,否则就加上它。

切换多个class
toggleClass()也可切换多个class,用空格隔开的字符串。

切换全部class
如果不提供任何参数给toggleClass(),结果就会切换每个匹配元素拥有的全部class。

单方向切换class
如果传入第二个参数(为boolean),可以进行单方向切换class,也就是只添加(true)还是只移除(false)指定的class。

传入回调函数
toggleClass()还可以传入一个回调函数,该函数还会传入两个参数,第一个是当前元素在匹配元素中的索引,第二个是该元素当前的class,函数内的this变量指向当前元素对应的HTMLElement对象。

2、CSS
2.1 css方法
(1)获取

css(name)、css(names)、css(map)css(name,value)css(name,function)

css()方法用来设置或获取css样式。

<style>

  .box{font-size:15px;margin:10px;}

</style>

<div class="box" style="color:red"></div>


$('.box').css('font-size');

$('.box').css('fontSize');

原生的JavaScript获取css属性时,采取的是驼峰式,而对于jQuery,它不仅支持驼峰式(推荐),而且支持css格式(-),就像上面的例子一样,两行jQuery语句是等价的,返回来的都是匹配元素的字体大小。

从1.9版本开始,css()方法还可以传入一个多个css属性名称组成的数组,它会以对象形式返回多个css属性(对象的属性名对应css属性名,属性值对应css属性值)

var classes = ['marginTop','marginRight','marginBottom','marginLeft'];

var css = $('.box').css(classes);

css.marginTop;  //10px


注意:当css()方法用于获取属性时,只会以第一个匹配的元素为准,如果该元素没有指定的属性,则返回undefined。

(2)设置
  • 设置单个属性

$('.box').css('fontSize','16px');


// 结果

//<div class="box" style="color:red;font-size:16px"></div>

强烈建议设置需要单位的属性值时添加上单位,不然有可能达不到效果。

  • 回调函数
传入回调函数,它还会为函数传入两个参数,第一个参数为当前元素的索引,第二个参数是属性的当前值,函数内的this变量指向当前元素对应的HTMLElement对象。

css(name,function(index,currentStyle){});


  • 以相对值设置

$('.box').css('fontSize','+=5');

// <div class="box" style="font-size:20px"></div>


$('.box').css('fontSize','-=5');

// <div class="box" style="font-size:15px"></div>


注意点
  • 如果第二个参数为空字符串,那么相当于删除该属性(若属性存在的话),而且只会删除内联样式。
  • css()方法会忽略 !important 声明,当需要使用该强调值时,可使用类(class)代替。

设置多个属性
你可使用链式方法设置多个属性

$('.box').css('color','green').css('backgroundColor','#000');

当然,css()方法还提供了更便捷的方法,采用映射对象的方法

$('.box').css({'color':'green','backgroundColor':'#000'});

注意:对于一些速写属性,比如:margin、padding、background、border等,如果采用css()方法获取的话,结果有可能不是所想的,所以建议通过css('marginTop')、css('marginRigt')来分别获取,当然,你也可以传入一个属性名的数组来获取。

css()方法在获取时,都会主动带上必要的单位。

2.2 尺寸位置

widht()、height()、width(value)、height(value)  获取或设置匹配元素中的第一个元素的宽度和高度

innerHeight()、innerWidth()  获取匹配元素中的第一个元素的内部高度和宽度,即包括内边距(padding),但不包括边界(border)和外边距(margin)

offset()  获取匹配元素的第一个元素相对于页面左上角的坐标

outerHeight(boolean)、outerWidth(boolean)  获取匹配元素中的第一个元素的高度和宽度,包括内边距和边框,参数的值决定是否包括外边框

position()  获取匹配元素的第一个元素相对于被定位的祖辈元素左上角的坐标

scrollLeft()、scrollTop()、scrollLeft(value)、scrollTop(value)  获取或设置匹配元素的第一个元素的横向或竖向滚动条的位置

width(funciton)、height(function)  使用回调函数动态设置所有匹配元素的宽度和高度

(1)width()、height()
width()方法返回元素的宽度,不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的宽度。

<div class="box"></div>


$('.box').width('20');

$('.box').width();  // 20px

width()方法和css('width')作用相似,只不过前者的返回值不带单位(像素),后者会。

回调函数
传入函数时,它会给函数传递两个参数,第一个参数是对应当前元素的索引,第二个参数是该属性当前的宽度值。

width(function(index,currentWidth){});


height()方法和width()方法的用法一样,只不过它返回的是高度,它也不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的宽度。

(2)innerWidth()、innerHeight()
获取匹配元素中的第一个元素的内部高度和宽度,即包括内边距(padding),但不包括边界(border)和外边距(margin)。

innerWidth()和innerHeight()方法与width()和height()用法一样。

从1.8版本开始,innerWidth()和innerHeight()也支持value/function参数,可以设置内宽度。

(3)outerWidth()、outerHeight()
获取匹配元素中的第一个元素的高度和宽度,包括内边距和边框,参数的值决定是否包括外边框。

这两个方法可传入一个布尔值,默认为false,也就是不包括外边框,如果传入true,则返回包含内边距、边框和外边框的宽度和高度。

注意:使用width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight()这6个方法获取高宽值时,如果jQuery对象中匹配多个元素,在返回高宽时,只会以第一个匹配的元素为准,如果没有匹配的元素,则返回null。

(4)position()、offset()
position()方法获取匹配元素的第一个元素相对于被定位(不是默认的static)的祖辈元素(不一定是父元素)左上角的坐标,这方法返回一个坐标对象,该对象有一个left属性和top属性,属性值均为数字,单位是像素(px)。

<div class="example" style="position:absolute;top:20px;">   

  <div class="box">   

    <div class="item" style="position:absolute;top:20px;"></div>   

  </div>   

</div>


$('.item').position().top  // 20

在上面的代码中,div.item获取的position()是根据div.example而定的,而不是div.box。

offset()获取匹配元素的第一个元素相对于页面(当前文档)左上角的坐标,这方法也返回一个坐标对象,该对象有一个left属性和top属性,属性值均为数字,单位是像素(px)。

$('.item').offset().top  // 40


从1.4版本开始,offset()还可以设置元素的坐标

$('.item').offset({top:20,left:10});


还可以传入回调函数,该函数传入两个参数,第一个是当前元素在匹配元素中的索引,第二个参数是该元素当前的坐标对象(包含top和left),函数的返回值就是用来设置坐标对象。

offset(function(index,coords){})


(5)scrollLeft()、scrollTop()
scrollLeft()和scrollTop()方法是用来获取或设置匹配元素的第一个元素的横向或竖向滚动条的位置。

当元素的实际高度超过其显示区域的高度时,就会出现滚动条(没有设置overflow为hidden的),此时scrollTop()返回的就是该元素在可见区域之上被隐藏分部的高度(单位:像素)

当垂直滚动条在最上面(也就是可见区域之上没有被隐藏的内容)或当前元素不可垂直滚动时,那么scrollTop()返回0。

也可以设置滚动的偏移量。

scrollTop(20)

它会向上或向下(取决于当前被隐藏部分的高度)滚动20高度(px),也就是元素在可见区域之上被隐藏的部分高度是20px。

scrollLeft()和scrollTop()用法一样,不过它返回的是该元素在可见区域左侧被隐藏部分的宽度。

scrollLeft()也可设置:

scrollLeft(20)

它会向左或向右(取决于当前隐藏部分的宽度)滚动20高度(px),也就是元素在可见区域左侧被隐藏部分的宽度是20px。

注意:scrollTop()和scrollLeft()两个方法在获取时,只会针对第一个匹配元素,如果没有匹配元素,则返回null。

3、内容
3.1 内容

text()、text(value)  设置或获取当前jQuery对象所匹配DOM元素内的text内容

html()、html(value)  设置或获取当前jQuery对象所匹配的DOM元素内的所有内容

text(function)、html(function)

text()方法用来设置或获取当前jQuery对象所匹配的DOM元素内的text内容。

<div class="box">   

  文本

  <span>123</span>   

</div>


$('.box').text()

// 文本

// 123

注:不同浏览器的HTML解析器差异,返回的文本在换行符或其他空白字符方面也可能不同。

text()还可以传入函数,它还为函数传入两个参数,第一个参数是该元素在匹配元素中的索引,第二个参数是该元素当前的text内容。

text(function(index,oldText){})


html()方法用来设置或获取当前jQuery对象所匹配的DOM元素内的所有内容。

<div class="box">   

  文本<span>123</span>   

</div>


$('.box').html()

// 文本<span>123</span>

html()还可以传入函数,它还为函数传入两个参数,第一个参数是该元素在匹配元素中的索引,第二个参数是该元素当前的html内容。

html(function(index,oldHtml){})


3.2 表单

val()、val(value)、val(function)  设置或获取当前jQuery对象所匹配的DOM元素的value值。

val()方法常用于设置或获取表单元素的value属性值。例如:<input>、<textarea>、<select>、<option>、<button>等。

<input type="text" id="name" value="123" />


$('#name').val()  // 123


$('#name').val('321');

$('#name').val();  // 321  

注意:当使用val()方法获取时,只会返回第一个匹配元素的value值。

回调函数
val()方法还可传入函数,它还会传入两个参数,第一个参数是该元素在匹配元素中的value值,第二个参数是该元素当前的value值,函数内的this变量指向当前元素的HTMLElement对象,返回值就是需要为该元素设置的value值。

val(function(index,currentValue){})


注意:当该元素是多选的<select>元素,则返回包含所有选中值的数组。

<select multiple>   

  <option value="1" selected>1</option>   

  <option value="2" selected>2</option>   

</select>


$("select").val();  // ["1","2"]

如果select没有选择,则返回null。

4、关联数据

data(key,value)、data(map)、data(key)、data()  在当前jQuery对象所匹配的所有元素上存取数据

removeData(key)、removeData()  移除在当前jQuery对象所匹配的每一个元素上存储的指定键名的数据

(1) data()
data()方法用来在当前jQuery对象所匹配的所有元素上存取数据。

<div class="box"></div>


$('.box').data('name','tg');

$('.box').data({'title':'tg','alt':'描述'});

$('.box').data('name')  // "tg"

$('.box').data()  // {alt:"描述",title:"tg",name:'tg'}

$('.box').data('a') // undefined

data()方法可设置单个数据,也可以传入对象形式(键值对)的数据设置;可获取单个数据(传入键名),也可获取全部(不传入任何参数,如没有一个数据,则返回一个空对象)。

注意:data()方法在存储数据时,会针对当前jQuery对象中的每一个匹配元素,如果键名(key)已存在,会覆盖原来的value值;而在读取时,只会读取第一个匹配的元素上的数据。

(2)removeData()
removeData()方法用来删除数据。

$('.box').removeData('title');

$('.box').data() // {alt:'描述',name:'tg'}


当你想删除多个数据项时,除了一个个删除外,你还可以传入一个以键名为元素的数组。

$('.box').removeData(['alt','name']);  

$('.box').data()  // {}



关注”全栈技术杂货铺“

全栈技术杂货铺