【笔记】 《js权威指南》- 第19章 JQuery类库 - 19.2 JQuery getter setter
2016-05-13 17:41
681 查看
1.attr方法:
设置和获取HTML属性:
2.css方法:
使用方法同上;
a. 可以使用横杠属性也可以使用驼峰样式属性;
b. getter时不能获取复合样式,
c. setter可以设置复合样式。
3.获取和设置css类:
4.读写表单值:
5.读写元素内容:
使用text方法读写文本内容,html方法读写html内容:
6. 读写元素位置和宽高:
(1).offset方法通过一个对象读写元素相对于文档的x,y坐标位置;
(2). position方法只能用作getter,获取元素相对父级的坐标位置;
(3). 获取元素的尺寸:
a. innerWH和outerWH方法不适用于window以及document对象;
b. width以及height的setter方法不适用于window以及document对象;
c. width和height方法在getter时不包括外边距,根据元素的CSS属性bosx-sizing属性来决定是否包括内边距和边框,如果为border-box则包括,默认不包括。
(4).读写滚动条位置:
(5). 获取和设置元素数据:
设置和获取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");
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Web布局连载——两栏固定布局(五)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- [css] line-height 百分比单位和数值单位的区别
- JavaScript 各种遍历方式详解
- 数组方法汇总
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟