【笔记】 《js权威指南》- 第19章 JQuery类库 - 19.2 JQuery getter setter

1.attr方法：

设置和获取HTML属性：

//获取第一个元素的action属性，想获取所有属性可以使用map方法
$("form").attr("action");
//设置属性
$("a").attr("target", "_blank");
$("a").attr("target", function() {
    if (this.host == location.host) return "_self";
    else return "_blank";
});
$("a").attr({target: function(){}});
$("#banner").attr({src: "banner.gif", alt: "Adertisement"});
           

2.css方法：

使用方法同上；

a. 可以使用横杠属性也可以使用驼峰样式属性；

b. getter时不能获取复合样式，

c. setter可以设置复合样式。

3.获取和设置css类：

//添加css类
$("h1").addClass("class1");
$("h1").addClass("class1 class2");
$("section").addClass(function(n) {
    return "section" + n;
});

//删除CSS类
$("p").removeClass("class1 class2");
$("p").removeClass();  //全删
$("p").removeClass(function(n) {
    return "class" + n; 
});

//切换类，存在删除，不存在添加
//基本用法同add remove
//模拟add
$("p").toggleClass("class1", true);
//模拟remove
$("p").toggleClass("class1", false);

//检测css类
//hasClass只接受单个类名
//是否所有p元素都有该类
$("p").hassClass("first");
//is比hasClass灵活
$("#lead").is(".first");
$("#lead").is(".first.hilite");
           

 4.读写表单值：

$("#surname").val();
$("input:checkbox").val(["opt1", "opt2"]);
$("input:text").val(function(){
    return this.defaultValue;
});
           

5.读写元素内容：

使用text方法读写文本内容，html方法读写html内容：

var title = $("head tutke").texxt();
var headline = $("h1").html();
$("h1").text(function(n, current) {
    return "ch" + (n+1) + ": " + current;
});
           

6. 读写元素位置和宽高：

(1).offset方法通过一个对象读写元素相对于文档的x,y坐标位置；

var elt = $("#sprite");
var position = elt.offset();
position.top += 100;
elt.offset(position);

$("h1").offset(function(index, curpos) {
    return {left: curpos.left + 25 * index, top: curpos.top};
});
           

(2). position方法只能用作getter，获取元素相对父级的坐标位置；

(3). 获取元素的尺寸：

a. innerWH和outerWH方法不适用于window以及document对象；

b. width以及height的setter方法不适用于window以及document对象；

c. width和height方法在getter时不包括外边距，根据元素的CSS属性bosx-sizing属性来决定是否包括内边距和边框，如果为border-box则包括，默认不包括。

var body = $("body");
var contentWidth = body.width();
var paddingWidth = body.innerWidth();
var borderWidth = body.outerWidth();
var marginWidth = body.outerWidth(true);
//左右内边距之和
var padding = paddingWidth - contentWidth;
//左右边框之和
var borders = borderWidth - paddingWidth;
//左右外边距之和
var margins = marginWidth - borderWidth;
           

(4).读写滚动条位置：

function page(n) {
    var w = $(window);
    var pagesize = w.height();
    var current = w.scrollTop();
    w.scrollTop(n * pagesize + current);
};
           

(5). 获取和设置元素数据：

$("div").data("x", 1);
$("div.nodata").removeData("x");
//全删
$("div").removeData();
$("div").data({x: 1, y: 1});
var obj = $("div").data();
var x = $("div").data("x");