标记的属性
each()遍历元素：each(callback)方法主要用于对选择器进行遍历，它接受一个函数为参数，该函数接受一个参数，指代元素的序号。
对于标记的属性而言，可以利用each()方法配合this关键字来获取或者设置选择器中每个元素相对应的属性值；
jQuery代码:
$(function(){
$("img").each(function(index){
this.title = "这是第" + index + "幅图，id是：" + this.id; //此时this指DOM对象
});
});HTML代码:
理解:首先利用$("image")获取页面中所有图片的集合,然后通过each()方法遍历所有图片,通过this关键字对图片进行访问,获取图片的id,
并设置图片的title属性。其中each()方法的函数参数index为元素所处的序号(从0开始计数)。
jQuery代码:
$(function(){
$("img").each(function(index, item){
item.title = "这是第" + index + "幅图，id是：" + this.id; //此时item指当前的DOM对象
});
});HTML代码:
//使用jQuery中插件机制
$.fn.extend({
quanxuan:function(){
//专用于实现全选
this.attr("checked",true);
},
quxiao:function(){
//取消功能
this.attr("checked",false);
},
fanxuan:function(){
//反选
var leng = this.length;
this.each(function(index,domElement){ //this指jQuery对象
domElement.checked = !domElement.checked; //domElement= this this指DOM对象
})
}
});获取属性的值
attr(name)
$(function(){
//var sTitle = $("em").attr("title"); //获取第一个元素的title属性值
var sTitle = $("em:eq(1)").attr("title"); //获取第二个元素的title属性值
$("span").text(sTitle);
});注意: 因为没有遍历,$("em").attr("title") 实际上获取的是第一个元素的title属性值
$("em").attr("title") 等同于$("em:eq(1)").attr("title")
$("em").get(0).title 也是获取第一个元素的title属性值, 而$("em").get(0)已经转换成DOM对象, 因此就不能使用jquery对象的attr方法
设置属性值
attr(name,value)
$("a[href^=http://]").attr("target","_blank")jQuery代码：
function DisableBack(){
$("button:gt(0)").attr("disabled","disabled");
}HTML代码:
通过位置选择器:gt(0),当单击第1个按钮时后面的两个按钮将同时禁用;
attr()方法还接受函数作为参数attr(name,fn),它的第2个参数为一个函数,该函数接受一个参数,为元素的序号,返回值为字符串;
jQuery代码
$(function(){
$("div").attr("id", function(index){
//将id设置为序号相关的参数
return "div-id" + index;
}).each(function(){
//找到每一项的span标记
$(this).find("span").html("(id='" + this.id + "')");
});
});HTML代码:
第0项
第1项
第2项 用attr()方法接受属性列表
$(function(){
$("img").attr({
src: "06.jpg",
title: "紫荆公寓",
width:300, //参考HTML语法, 无需加单位, 也可以写成 widht:"300px" 加单位必须加引号
alt: "紫荆公寓"
});
});删除属性
$("button").removeAttr("disabled");removeAttr(name)删除属性相当于HTML的标记中不设置该属性, 并不是取消了该标记的这个特点。
小结：
$().attr(属性名称); //获得属性信息值
$().attr(属性名称,值); //设置属性的信息
$().removeAttr(属性名称); //删除属性
$().attr(json对象); //同时为多个属性设置信息值, json对象的键值对就是名称和值
$().attr(属性名称,fn); //通过fn函数执行的return返回值对属性进行赋值
获取属性的第二种方式:
$("input[type='checkbox']").prop("checked");设置元素的样式
添加、删除CSS类别
用addClass()方法添加CSS类别
$(function(){
//同时添加多个CSS类别
$("div").addClass("myClass1 myClass2"); //增加多个CSS类别,用空格隔开
});用removeClass()方法删除CSS类别
希望某些元素的样式风格在某个类别之间切换,时而addClass()类别,时而removeClass()类别;
用toggleClass()方法在类别间动态切换 toggle 切换
$(function(){
$("p").click(function(){
//点击的时候不断切换
$(this).toggleClass("highlight");
});
});实例:jQuery制作交替变幻的表格
交替变幻的表格
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
$("table").mouseover(function(){
$("tr:gt(0)").toggleClass("altrow");
});
$("table").mouseout(function(){
$("tr:gt(0)").toggleClass("altrow");
});
});
</script>
Name
Class
Birthday
Constellation
Mobile
isaac
W13
Jun 24th
Cancer
1118159
fresheggs
W610
Nov 5th
Scorpio
1038818
girlwing
W210
Sep 16th
Virgo
1307994
tastestory
W15
Nov 29th
Sagittarius
1095245
直接获取、设置样式
jQuery提供css()方法来直接获取、设置元素的样式风格。使用方法与attr()几乎一模一样。
通过css(name)来获取某种样式风格的值；$("p").css("color");
通过css(properties)列表来同时设置元素的多种样式；$("p").css({ color: "#ff0011", background: "blue" });
通过css(name,value)来设置元素的某种样式；$("p").css("color","red");
通过css(name,function(index, value))设置一个样式属性的值
css()样式操作特点：
此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置, value是原先的属性值。
1 样式获取，jquery可以获取行内、内部、外部的样式。dom方式只能获得行内样式
2 复合属性样式需要拆分为"具体样式"才可以操作
例如： background 需要拆分为 background-color background-image 等进行操作
border： border-left-style border-left-width border-left-color 等
margin： margin-left margin-top 等
也可以将样式属性写成驼峰式: backgroundColor, 可以不加引号。
在json对象中, 带横线的css属性(如font-size)必须加引号;
如：
$('div').css({"font-size":"40px","font-weight":"bold",color:"red"});标准格式：
$('div').css({"font-size":"40px","font-weight":"bold","color":"red"});css还支持获取属性值的方法, 保持原来的属性值(width()和css()两种方法)
oInput.val(tdText).css({'width':oTd.width(), 'font-size':'14px','font-weight':'bold', 'border':0,
'background-color':oTd.css('background-color')});与下面的语句等同：
oInput.val(tdText).css('width',tdObj.width()).css('font-size','14px').css('font-weight','bold').
css('border-width',0).css('background-color',oTd.css('background-color'));$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});以下代码为
标记添加了mouseover和mouseout事件，当这两个事件触发时通过css(name,value)来修改标记的颜色。
$(function(){
$("p").mouseover(function(){
$(this).css("color","red");
});
$("p").mouseout(function(){
$(this).css("color","black");
});
});另外还可以通过hasClass(name)方法来判断某个元素是否设置了某个CSS类别，如何设置了则返回true，否则为false。
$("li:last").hasClass("myClass")等同于$("li:last").is(".myClass")
在jQuery中其实hasClass方法内部调用的就是is()方法,只不过代码可读性更高一些;
小结：
class属性值操作
$().attr('class',值);
$().attr('class');
$().removeAttr('class属性'); //删除class的属性
class具体快捷操作方法：
$().addClass(class属性值); //给class属性追加信息值
$().removeClass(class属性值); //删除class属性中的某个信息值
$().toggleClass(class属性值); //开关效果，有就删除，没有就添加
css样式操作
$().css(name,value); //设置
$().css(name); //获取
$().css(json对象); //同时修改多个css样式
CSS样式操作-宽高
width() 取得第一个匹配元素当前计算的宽度值(px)。
width(val) 为每个匹配的元素设置CSS宽度(width)属性的值; 如果没有明确指定单位(如：em或%), 默认使用px
height(100) height("100px") 后面含有单位的必须加引号
height() 取得第一个匹配元素当前计算的高度值
height(val) 为每个匹配的元素设置CSS高度(hidth)属性的值; 如果没有明确指定单位(如：em或%), 默认使用px
height(100) height("100px") 后面含有单位的必须加引号