整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
记的属性
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") 后面含有单位的必须加引号
面的表格列出了所有用于处理 HTML 和 CSS 的 jQuery 方法。
下面的方法适用于 HTML 和 XML 文档。除了：html() 方法。
| 方法 | 描述 |
|---|---|
| addClass() | 向被选元素添加一个或多个类名 |
| after() | 在被选元素后插入内容 |
| append() | 在被选元素的结尾插入内容 |
| appendTo() | 在被选元素的结尾插入 HTML 元素 |
| attr() | 设置或返回被选元素的属性/值 |
| before() | 在被选元素前插入内容 |
| clone() | 生成被选元素的副本 |
| css() | 为被选元素设置或返回一个或多个样式属性 |
| detach() | 移除被选元素（保留数据和事件） |
| empty() | 从被选元素移除所有子节点和内容 |
| hasClass() | 检查被选元素是否包含指定的 class 名称 |
| height() | 设置或返回被选元素的高度 |
| html() | 设置或返回被选元素的内容 |
| innerHeight() | 返回元素的高度（包含 padding，不包含 border） |
| innerWidth() | 返回元素的宽度（包含 padding，不包含 border） |
| insertAfter() | 在被选元素后插入 HTML 元素 |
| insertBefore() | 在被选元素前插入 HTML 元素 |
| offset() | 设置或返回被选元素的偏移坐标（相对于文档） |
| offsetParent() | 返回第一个定位的祖先元素 |
| outerHeight() | 返回元素的高度（包含 padding 和 border） |
| outerWidth() | 返回元素的宽度（包含 padding 和 border） |
| position() | 返回元素的位置（相对于父元素） |
| prepend() | 在被选元素的开头插入内容 |
| prependTo() | 在被选元素的开头插入 HTML 元素 |
| prop() | 设置或返回被选元素的属性/值 |
| remove() | 移除被选元素（包含数据和事件） |
| removeAttr() | 从被选元素移除一个或多个属性 |
| removeClass() | 从被选元素移除一个或多个类 |
| removeProp() | 移除通过 prop() 方法设置的属性 |
| replaceAll() | 把被选元素替换为新的 HTML 元素 |
| replaceWith() | 把被选元素替换为新的内容 |
| scrollLeft() | 设置或返回被选元素的水平滚动条位置 |
| scrollTop() | 设置或返回被选元素的垂直滚动条位置 |
| text() | 设置或返回被选元素的文本内容 |
| toggleClass() | 在被选元素中添加/移除一个或多个类之间切换 |
| unwrap() | 移除被选元素的父元素 |
| val() | 设置或返回被选元素的属性值（针对表单元素） |
| width() | 设置或返回被选元素的宽度 |
| wrap() | 在每个被选元素的周围用 HTML 元素包裹起来 |
| wrapAll() | 在所有被选元素的周围用 HTML 元素包裹起来 |
| wrapInner() | 在每个被选元素的内容周围用 HTML 元素包裹起来 |
| $.escapeSelector() | 转义CSS选择器中有特殊意义的字符或字符串 |
| $.cssHooks | 提供了一种方法通过定义函数来获取和设置特定的CSS值 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
jQuery中对dom元素进行操作。
属性/方法 | 描述 |
append(content|fn) | 向每个匹配的元素内部追加内容。$("p").append("<b>Hello</b>");向所有段落中追加一些HTML标记。 |
appendTo(content) | 把所有匹配的元素追加到另一个指定的元素中。使用这个方法是颠倒了常规的$(A).appendTo(B)的操作，即不是把B追加到A中，而是把A追加到B中。 $("p").appendTo("div");把所有段落追加到div元素中 |
prepend(content|fn) | 向每个匹配的元素内部前置内容。$("p").prepend("<b>Hello</b>");向所有段落中前置一些HTML标记代码。 |
prependTo(content) | 把所有匹配的元素前置到另一个、指定的元素元素集合中。使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。$("p").prependTo("#foo"); 把所有段落追加到ID值为foo的元素中。 |
after(content|fn) | 在每个匹配的元素之后插入内容。$("p").after("<b>Hello</b>");在所有段落之后插入一些HTML标记代码。 |
before(content|fn) | 在每个匹配的元素之前插入内容。$("p").before("<b>Hello</b>");在所有段落之前插入一些HTML标记代码。 |
insertAfter(content) | 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。$("p").insertAfter("#foo");把所有段落插入到一个元素之后。与 $("#foo").after("p")相同 |
insertBefore(content) | 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。$("p").insertBefore("#foo");把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。 |
wrap(html|ele|fn) | 把所有匹配的元素用其他元素的结构化标记包裹起来。 $("p").wrap("<div class='wrap'></div>"); 把所有的段落用一个新创建的div包裹起来 |
unwrap() | 这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。 $("p").unwrap(); 把所有段落的父元素直接移除 |
wrapAll(html|ele) | 将所有匹配的元素用单个元素包裹起来。$("p").wrapAll("<div></div>");用一个生成的div将所有段落包裹起来 |
wrapInner(html|ele|fn) | 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。$("p").wrapInner("<b></b>");把所有段落内的每个子内容加粗 |
replaceWith(content|fn) | 将所有匹配的元素替换成指定的HTML或DOM元素。 $("p").replaceWith("<b>Paragraph. </b>");把所有的段落标记替换成加粗的标记。 |
replaceAll(selector) | 用匹配的元素替换掉所有 selector匹配到的元素。 $("<b>Paragraph. </b>").replaceAll("p");把所有的段落标记替换成加粗标记 |
empty() | 删除、清空匹配的元素集合中所有的子节点。$("p").empty();把所有段落的子元素（包括文本节点）删除 |
remove([expr]) | 从DOM中删除所有匹配的元素。$("p").remove();从DOM中把所有段落删除 |
clone([Even[,deepEven]]) | 克隆匹配的DOM元素并且选中这些克隆的副本。（传入参数布尔值（true 或者 false）指示事件处理函数是否会被复制。） $("b").clone().prependTo("p");克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。 |
jQuery中对dom元素进行筛选判断。
属性/方法 | 描述 |
first() | first() 获取第一个元素。 $('li').first() |
last() | last() 获取最后个元素。 $('li').last() |
is(expr|obj|ele|fn) | 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回false。 $("input[type='checkbox']").parent().is("form");由于input元素的父元素是一个表单元素，所以返回true。 |
has(expr|ele) | 保留包含特定后代的元素，去掉那些不含有指定后代的元素。.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。 $('li').has('ul').css('background-color', 'red');给含有ul的li加上背景色 |
find(e|o|e) | 搜索所有与指定表达式匹配的元素。 $("p").find("span");从所有的段落开始，进一步搜索下面的span元素。 |
parent([expr]) | 取得一个包含着所有匹配元素的唯一父元素的元素集合。 $("p").parent(".selected");查找段落的父元素中每个类名为selected的父元素。 |
siblings([expr]) | 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。 $("div").siblings();找到每个div的所有同辈元素。 |
jQuery中对dom元素进行样式上的操作。
属性/方法 | 描述 |
addClass(class|fn) | 为每个匹配的元素添加指定的类名 $("p").addClass("selected"); 为匹配的元素加上 'selected' 类 |
removeClass([class|fn]) | 从所有匹配的元素中删除全部或者指定的类 $("p").removeClass("selected"); 从匹配的元素中删除 'selected' 类 |
toggleClass(class|fn[,sw]) | 如果存在（不存在）就删除（添加）一个类。$("p").toggleClass("selected"); 为匹配的元素切换 'selected' 类 |
hasClass(class) | 检查元素是否含有某个特定的类，如果有，则返回true。 $("div").hasClass("protected") |
css(name|pro|[,val|fn]) | 访问匹配元素的样式属性 $("p").css("color") 取得第一个段落的color样式属性的值。$("p").css("color","red"); 将所有段落字体设为红色 |
height/width([val|fn]) | 取得匹配元素当前计算的高/宽度值（px） $("p").height();$("p").width(); |
offset([coordinates]) | 获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效 var p=$("p:last"); var offset=p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top ); |
jQuery中dom元素事件的操作。
属性/方法 | 描述 |
on(eve,[sel],[data],fn)1.7+ | 在选择元素上绑定一个或多个事件的事件处理函数 $("p").on("click", function(){ alert( $(this).text() ); }); |
off(eve,[sel],[fn])1.7+ | 在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用.on()绑定的事件处理程序 $("p").off( "click", "**" ) |
bind(type,[data],fn) | 为每个匹配元素的特定事件绑定事件处理函数。 $(document).bind('mousemove',function(e){ $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); }); |
unbind(t,[d|f]) | bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。 $("p").unbind( "click" ) |
one(type,[data],fn) | 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。 $("p").one("click", function(){ alert( $(this).text() ); }); |
hover([over,]out) | 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); |
事件冒泡：事件在dom文档中，会逐层往上触发。如点击了div里面的一个p元素，那么div及其上层元素的click也会被触发。如要阻止事件的冒泡可以在里层的元素的事件方法中return false。
jQuery中对dom元素进行样式上的操作。
属性/方法 | 描述 |
show([s,[e],[fn]]) | 显示隐藏的匹配元素。 $("p").show() 显示所有段落 |
hide([s,[e],[fn]]) | 隐藏显示的元素。 $("p").hide() 隐藏所有段落 |
slideDown([s],[e],[fn]) | 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。 $("p").slideDown("slow"); 用600毫秒缓慢的将段落滑下 |
slideUp([s,[e],[fn]]) | 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。 $("p").slideUp("slow");用600毫秒缓慢的将段落滑上 |
slideToggle([s],[e],[fn]) | 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。 $("p").slideToggle("slow");用600毫秒缓慢的将段落滑上或滑下 |
fadeIn([s],[e],[fn]) | 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。$("p").fadeIn("slow");用600毫秒缓慢的将段落淡入 |
fadeOut([s],[e],[fn]) | 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。 $("p").fadeOut("slow");用600毫秒缓慢的将段落淡出 |
fadeTo([[s],o,[e],[fn]]) | 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。 $("p").fadeTo("slow", 0.66);用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度 |
fadeToggle([s,[e],[fn]]) | 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。 $("p").fadeToggle("slow");用600毫秒缓慢的将段落淡入/出 |
animate(p,[s],[e],[fn])1.8* | 用于创建自定义动画的函数。 |
*请认真填写需求信息，我们会在24小时内与您取得联系。
