标记的属性
each()遍历元素:each(callback)方法主要用于对选择器进行遍历,它接受一个函数为参数,该函数接受一个参数,指代元素的序号。
对于标记的属性而言,可以利用each()方法配合this关键字来获取或者设置选择器中每个元素相对应的属性值;
jQuery代码:
$(function(){ $("img").each(function(index){ this.title = "这是第" + index + "幅图,id是:" + this.id; //此时this指DOM对象 });});
HTML代码:
<img src="01.jpg" id="Tsinghua01"><img src="02.jpg" id="Tsinghua02"><img src="03.jpg" id="Tsinghua03"><img src="04.jpg" id="Tsinghua04"><img src="05.jpg" id="Tsinghua05">
理解:首先利用$("image")获取页面中所有图片的集合,然后通过each()方法遍历所有图片,通过this关键字对图片进行访问,获取图片的id,
并设置图片的title属性。其中each()方法的函数参数index为元素所处的序号(从0开始计数)。
jQuery代码:
$(function(){ $("img").each(function(index, item){ item.title = "这是第" + index + "幅图,id是:" + this.id; //此时item指当前的DOM对象 });});
HTML代码:
<img src="01.jpg" id="Tsinghua01"><img src="02.jpg" id="Tsinghua02"><img src="03.jpg" id="Tsinghua03"><img src="04.jpg" id="Tsinghua04"><img src="05.jpg" id="Tsinghua05">
//使用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"); //获取第一个<em>元素的title属性值 var sTitle = $("em:eq(1)").attr("title"); //获取第二个<em>元素的title属性值 $("span").text(sTitle);});
注意: 因为没有遍历,$("em").attr("title") 实际上获取的是第一个<em>元素的title属性值
$("em").attr("title") 等同于$("em:eq(1)").attr("title")
$("em").get(0).title 也是获取第一个<em>元素的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代码:
<button onclick="DisableBack()">第一个Button</button> <button>第二个Button</button> <button>第三个Button</button>
通过位置选择器: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代码:
<div>第0项 <span></span></div><div>第1项 <span></span></div><div>第2项 <span></span></div>
用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制作交替变幻的表格
<html><head><title>交替变幻的表格</title><style><!--.datalist{border:1px solid #007108; /* 表格边框 */font-family:Arial;border-collapse:collapse; /* 边框重叠 */background-color:#d9ffdc; /* 表格背景色 */font-size:14px;}.datalist th{border:1px solid #007108; /* 行名称边框 */background-color:#00a40c; /* 行名称背景色 */color:#FFFFFF; /* 行名称颜色 */font-weight:bold;padding-top:4px; padding-bottom:4px;padding-left:12px; padding-right:12px;text-align:center;}.datalist td{border:1px solid #007108; /* 单元格边框 */text-align:left;padding-top:4px; padding-bottom:4px;padding-left:10px; padding-right:10px;}.datalist tr.altrow{background-color:#a5e5aa; /* 隔行变色 */}--></style><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></head><body><table class="datalist" summary="list of members in EE Studay" id="oTable"><tr><th scope="col">Name</th><th scope="col">Class</th><th scope="col">Birthday</th><th scope="col">Constellation</th><th scope="col">Mobile</th></tr><tr><td>isaac</td><td>W13</td><td>Jun 24th</td><td>Cancer</td><td>1118159</td></tr><tr><td>fresheggs</td><td>W610</td><td>Nov 5th</td><td>Scorpio</td><td>1038818</td></tr><tr><td>girlwing</td><td>W210</td><td>Sep 16th</td><td>Virgo</td><td>1307994</td></tr><tr><td>tastestory</td><td>W15</td><td>Nov 29th</td><td>Sagittarius</td><td>1095245</td></tr></table></body></html>
直接获取、设置样式
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; } });});
以下代码为<p>标记添加了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") 后面含有单位的必须加引号