jQuery 基础 2
jQuery 对有些方法进行了“重载”,所有对某元素赋值或取值的时候所用的方法名是一样的,只是参数列表不同。当用 jQuery 方法对元素赋值的时候,它称为 setter,取值的时候称为 getter。setter 会对选择器中的所有所有元素赋值,getter 只取得选择器中第一个元素的值。
$('h1').html('hello world'); // setter var str = $('h1').html(); // getter
setter 返回的是 jQuery 对象,可以继续在这个对象上调用 jQuery 方法(链式操作),getter 仅放回我们想要的值,返回值不是 jQuery 对象,所以不能继续链式操作了。
jQuery 操作 CSS
jQuery 可以很方便的设置或取得元素的 CSS 属性。
CSS 属性如果要想在 JavaScript 中使用,多要转换成骆驼命名法(camel cased),例如 CSS 中的
font-size
属性,在 JavaScript 中对应的是fontSize
,但是 jQuery 的$.fn.css
方法对此做了特殊处理,无论使用哪种写法都可以。
例如:
var strsize1 = $('h1').css('fontSize'); // 返回 "19px" var strsize2 = $('h1').css('font-size'); // 同上 $('h1').css('fontSize', '100px'); // 给单个属性赋值 $('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // 给多个属性赋值
上面可以看到,一次性给多个属性赋值的时候,实际上传入的是一个对象,这个对象中包含了一些可以表示 CSS 属性的键-值对,在 jQuery 的很多 setter 方法中都有类似用法。
jQuery 操作元素的 class 属性
作为一个 getter,$.fn.css
确实很好用,但是应该尽量避免将其作为 setter 使用,因为一般不建议在 JavaScript 代码中包含太多的样式代码。比较靠谱的方法是把样式规则单独分开写成类(class),然后用 JavaScript 将类应用到元素上即可:
var $h1 = $('h1'); $h1.addClass('big'); $h1.removeClass('big'); $h1.toggleClass('big'); if ($h1.hasClass('big')) { ... }
尺寸
jQuery 中有很多方法可以用来获取或者修改元素的尺寸或者位置信息。
$('h1').width('50px'); // 设置所有 h1 元素的宽度 $('h1').width(); // 得到第一个 h1 元素的宽度 $('h1').height('50px'); // 设置所有 h1 元素的高度 $('h1').height(); // 得到第一个 h1 元素的高度 $('h1').position(); // 返回第一个 h1 元素 // 的位置信息,此返回值是一个对象 // 此位置是相对其父元素的位置的偏移量
这里只是对 jQuery 操纵元素大小及位置信息的简单举例,详情见 http://api.jquery.com/category/dimensions/
元素属性
元素的属性中可以包含很多有用的信息,所以如何设置或得到属性中的值,就显得非常重要。
jQuery 的 $.fn.attr
方法可以作为 setter 和 getter 使用,用来设置或获取属性的值。和 $.fn.css
用法类似,$.fn.attr
既可一次性接受单个属性,也可以接受多个属性(对象) :
$('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ 'title' : 'all titles are the same too!', 'href' : 'somethingNew.html' });
上面代码中写对象的时候写成多行了,更具可读性。
$('a').attr('href'); // 返回选择其中第一个超链接的链接地址
No Comments