1操作属性
.attr()方法
.attr(key,fn),为所有匹配的元素设置一个计算的属性值。由这个函数计算的值作为属性值。
.attr(key,value),为所有匹配的元素设置一个属性值。如:$("img").attr("src","test.jpg");
.attr(name),取得第一个匹配元素的属性值。如果元素没有相应的属性,返回undefined.
.attr(properties),采用名/值形式的对象设置为所有匹配元素的属性。如:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
att()方法可以得到元素中定义的任何属性,包括标准的属性和自定义的属性。
.removeAttr(name),从每个匹配的元素中删除一个属性。name为string类型是要删除的属性名。
将一个元素如button,text变为disabled(不可编辑或触发状
$("#btest").attr("disabled","disabled");
不能使用$("#btest").attr("disabled",true);这样是没有用的。
将一个disabled的元素变为enabled则有下面两种方式:
$("#btest").attr("disabled",false);
$("#btest").removeAttr("disabled");
如果元素在enabled状态则使用attr("disabled")得到的结果false;如果在disabled状态则返回true;
checked属性disabled操作一样。
<input type="radio" value="no" checked="false"/>这样写是不能让其变为不选中,要么不写checked属性,要么
使用js代码让其不选中。
.each(fn)方法
以每一个匹配的元素作为上下文来执行一个函数。意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素对象。而且每次在执行函数时,都会给函数传递一个表示当前元素在匹配的元素集合中所处位置的数字值作为参数(从0开始)。
fn返回false表示将停止循环(类似于break),返回true跳至下一个循环(类似于continue)。
例如:$("img").each(function (i){
this.src="test"+i+".jpg";
//或$(this).attr("src","test"+i+".jpg");
});
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
注意下面的each方法中我们使用了$.get()方法,在$.get()方法中不能使用this,所以alert(this.id)将输出undefined,需要再外面将this赋给一个变量,通过这个变量来操作。
$("#clothing").find("a").each(function(i){
var tn=$(this).text();
var self=this;
$.get("${pageContext.request.contextPath}/portal/addlink.action",{"tradeName":tn},function(data){
self.href="${pageContext.request.contextPath}/portal/product.action?tradeId="+data;
alert(this.id);
});
});
或者
var aes=$("#clothing").find("a");
aes.each(function(i){
...
});
.height()方法,取得第一个匹配元素的高度值(px).$(document).height(),$(window).height()
.height(val)方法,为每个匹配的元素设置Css高度属性的值.val为String或Number类型。如果没有没有确定指定单位(em或%)使用px
.width(),取得第一个匹配元素当前计算的宽度值(px)。
.width(val),为每个匹配的元素设置CSS宽度(width)属性的值.
.innerHeight(),获取第一个匹配元素内部区域高度(包括补白,不包括边框)。此方法对可见和隐藏元素均有效。
.innerWidth(),获取第一个匹配元素内部区域宽度(包括补白,不包括边框)
.outerHeight(options),获取第一个匹配元素外部高度(默认包括补白和边框)。options为Boolean,设为true,则计算边距在内。
.outerWidth(options),获取第一个匹配元素外部高度(默认包括补白和边框)
.html(),取得第一个匹配元素的html内容。
.html("val"),设置每一个匹配元素的html内容。这个函数不能用于xml文档。如:
$("div").html("<p>Hello Again</p>"); //为div元素中添加了一个段落。
.text()方法,它表示取得所有匹配元素的内容,返回的结果是所有匹配元素包含的文本内容组合起来的文本。这个方法对html和xml文档都有效。
.text("val")方法,设置所有匹配元素的文本内容。如$("p").text("new text.");//改变段落的文本内容。
.val(),获取第一个匹配元素的当前值。可以返回任意元素的值。包括select,如果多选,将返回一个数组,其中包含所选的值。
如果select的中没有作出选择,则其value属性的值为‘‘,但是通过函数val()得到的值是null;
.val(value),这只每个匹配元素的值。也可以为select元素赋值。当为select元素赋值后,对应的option就会在选中状态。
$("select").find("option:selected").text(),获取select选中option的文本。
length属性,表示当前匹配的集合中元素个数。$("p").length
.size()方法,同length属性一样。
.eq(index),获取元素集合的第N个元素。返回的jquery对象。
.is()方法
.is(expr),用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。expr这个表达式通$()中参数一样。find和filter的参数也是如此。
例如:if ($(this).is("#stop")) { ...}
<form><input type="checkbox" /></form>
$("input[type=‘checkbox‘]").parent().is("form")记过为true。
获取元素的标签名
如: <input id="date" type="text" value="2012-01-01"/>
$("#date")[0].tagName,将返回INPUT(注意是大写);
$("#date").attr("tagName"),不能这样获取。
判断元素是否为某标签可以用is,如$(this).is("select");
:has(selector),匹配含有选择器所匹配的元素的元素。参数与$()的参数意义相同。例如:
$("div:has(p)")//用于匹配在<div>元素中含有<p>元素的div
.hasClass("class类名"),检查当前的元素是否含有某个特定的类,如果有返回true。class是String类型。
.get(),取得所有匹配集合的 DOM 元素集合。
.get(index),取得其中一个匹配的元素。 num表示取得第几个匹配的元素。返回的是Dom元素
2创建插入新元素
Jquery创建DOM元素
在jQuery中创建对象更加简单, 比如创建一个Div元素:
$("<div style=\"border:solid 1px #FF0000\">动态创建的div</div>")
//可以直接写一个完整的HTML标签的!就这样创建一个HTML元素了非常方便!
我们使用$()方法创建了元素,但是元素必须经过insertBefore()等方法才能显示在页面上。
$()这个函数既有灵活性,也有局限性。例如:
创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。
// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type=‘checkbox‘>");
.insertBefore(expr)方法
将所有匹配的元素插入到另一个指定的元素集合expr的前面。例如:创建一个按钮并插入到某元素前面。
$("<input type=‘button‘ value=‘insert‘>").insertBefore("#content");
该方法参数expr(只能是string类型)同$()的参数一样用于找到另一个指定的元素集合。
.insertAfter(expr),把所有匹配的元素插入到另一个指定的元素集合expr的后面。
.after(content),在每个元素之后插入内容content。参数content可以是String,Element,jQuery。例如:
$("#content").after("<input type=‘button‘ value=‘insert‘>");//在某元素后插入一个新建的按钮。(String类型)
$(":button").after($("p"));//将所有的段落p放在所有按钮button之后。(jQuery类型)
$("p").after( $("#foo")[0] ); //在段落之后放置一个Dom元素。(Element类型)
.before(content),在每个元素之前插入内容content。
.append(content),向每个匹配的元素内部追加内容(content)。这个操作同Dom中的appendChild类似。参数content同上。
$("p").append("插入new<br>");//给每个段落中添加了一行文本。
这里可以append jquery对象。该函数返回值是添加内容的jquery对象。
.appendTo(expr),把所有匹配元素追加到另一个指定的元素expr中。这里的expr只能为string。例如:
<p>I would like to say: </p><div id="foo"></div>
$("p").appendTo("#foo");//将段落p追加到<div id="foo">中了。
wrap(elem),把所有匹配的元素用其他元素的结构化标记包装起来。
<p>Test Paragraph.</p><div id="content"></div>
执行jquery代码:$("p").wrap(document.getElementById(‘content‘));
结果:
<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>
//动态的创建<div>,并将它追加到 body 元素中
$("<div id=‘d1‘ style=‘position:absolute‘></div>").appendTo("body");
.prependTo(expr),把所有匹配元素前置到另一个指定的元素集合expr中。这里的expr只能为string。
.prepend(content),向每个匹配的元素内部前置内容。参数content可以是String,Element,jQuery。例如:
//向div的右上角插入一个<img>
$("#d1").prepend("<img src=‘close.png‘ id=‘close‘ align=‘right‘></img>");
.index(element),搜索与参数表示的对象匹配的元素,并返回相应元素相对于原先集合的位置的索引值。
如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1。element是DOM对象。
<div id="foobar"><div></div><div id="foo"></div></div>
$("div").index($(‘#foobar‘)[0]) // 0
$("div").index($(‘#foo‘)[0]) // 2
$("div").index($(‘#foo‘)) // -1
3复制元素
.clone()方法,
这个方法能够创建任何匹配的元素集合的副本以便将来使用。同创建元素一样,在为复制的元素应用一种插入方法之前,这些元素不会出现在文档中。.clone()不会复制元素中的事件。如:
$(‘#bu‘).clone().insertBefore("#content");//将一个元素的副本插入到另一个元素前面。
.clone(true)方法
与.clone()不同的是,它不仅复制元素还会复制元素的事件处理。(参数必须为true)。
这两个clone方法不仅复制匹配的元素,也会复制其中包含的子元素。如:
<div id="di"><p>fdfdfd</p></div>
如果复制div,$(‘#di‘).clone()那么div中包含的<p>元素也会一起被复制。
4删除元素
.empty()
删除匹配的元素集合中的所有子节点,只删除元素的子元素,不删除元素本身。例如:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
执行$("p").empty();清除掉<p>中的所有子节点,结果为:<p></p>
.remove()
移除每个匹配的元素及其子节点,但不实际删除他它们。并返回被删除元素的jquery对象。因而可以在将来使用这些元素。例如:
//先动态的向div中插入一个img元素在div的右上角
$("#d1").prepend("<img src=‘close.png‘ id=‘close‘ align=‘right‘></img>");
//在向该<img>元素动态的绑定一个click事件
$("#close").bind(‘click‘,close);
function close(){
//close()方法用于删除div元素。
$("#d1").remove();
}
.remove(expr)
从自身集合中移除与指定表达式expr匹配的元素。expr为string类型。例如:
<p id="p1">...</P><p>...</p><p>...</p>
$("p").remove("#p1");//将移除<p id="p1">
.add(context)
把于表达式匹配的元素添加到jquery对象中。参数可以为字符串,dom元素或jquery对象。如:
$("p").add("span")或$("p").add(document.getElementById("a"))
not(expr)
删除与指定表达式匹配的元素。expr是String, DOM元素, Array<DOM元素>例如:
<p>Hello</p><p id="selected">Hello Again</p>
$("p").not($("#selected")[0]);//从p元素中删除带有 select 的ID的元素
5子元素,父元素
.children(),取得元素下所包含的子元素的集合。
.children(expr),在元素下所包含的子元素中查找与表达式expr匹配的元素。expr为string
.parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合。参数用于筛选,意义和children一样。如:
for(var i=0;i<5;i++){
$("#startTime").children()[i].value=a1[i];
$("#endTime").children()[i].value=a1[i];
}
.parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合(包括父元素,以及父元素的父元素..依次向上一直到<html>标签)。参数用于筛选,意义和children一样。
:nth-child(index/even/odd/equation),匹配其父元素下的第N个子元素或奇偶元素。:nth-child从1开始的,例如:
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:first-child,匹配第一个子元素
:last-child,匹配最后一个子元素
6DOM遍历方法
很多情况下,取得某个元素的父元素或祖先元素都是基本的操作,而这正是JQuery的DOM遍历方法用武之地。有了这些方法,我们可以在DOM树中自由漫步。
.next()方法,取得最接近的下一个同辈元素。下例中表示取得文本中含有hery的<td>元素的下一个同辈元素。
$("td:contains(‘henry‘)").next().addClass(‘tdd‘);
<tr><td>henry</td><td>Tragedy</td><td>tyrt</td><td>fff</td></tr>
.prev([expr])方法,取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。expr是string类型。
.nextAll([expr])方法,查找当前元素之后所有的同辈元素。
.prevAll([expr])方法,查找当前元素之前所有的同辈元素
.siblings([expr]),取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。下例中表示取得文本中含有hery的<td>元素后的所有同辈元素。当然这些同辈元素和含有hery的<td>元素在同一个<tr>..</tr>中才有效,对于后面的<tr>中的<td>元素是无效的。
$("td:contains(‘henry‘)").siblings().addClass(‘tdd‘);
.parent(),取得该元素的父元素。
$("td:contains(‘henry‘)").parent().addClass(‘tdd‘);
取得包含henry的单元格的父元素,然后再在父元素的匹配所有索引值大于1的元素。
$("td:contains(‘henry‘)").parent().find(‘td:gt(1)‘).addClass(‘tdd‘);
.andSelf(),在先前所选的元素中加入当前元素。如:
$("div").find("p").andSelf().addClass("border");
将会在div元素以及div下面的p元素都添加样式border。
7contents()
查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容。
例如:$("iframe").contents().find("body").append("I‘m in an iframe!");
************************
对XML文档就如同对html文档一样也可以使用常规的.find()、.filter()及其它遍历方法。
.find(expr)与.filter(expr)的区别
.find(expr),从子集中搜索所有与指定表达式匹配的元素。expr这个表达式通$()中参数一样。
例如:从所有的段落开始,进一步搜索下面的span元素。
$("p").find("span")
如果这个span元素有id,则也可以$("p").find("#id")
.filter(expr),在自身集合中筛选出与指定表达式匹配的元素。
$("p").filter(".selected"),将在所有段落中筛选使用了class="selected"的<p>元素。
例如:
<div class="css">
<p class="rain">测试1</p>
</div>
<div class="rain">
<p>测试2</p>
</div>
如果我们使用find()方法:
var $find = $("div").find(".rain");
alert( $find.html() ) ;
将会输出:测试1
如果使用filter()方法:
var $filter = $("div").filter(".rain");
alert( $filter.html() );
将会输出:<p>测试2</p>
已经看出它们的区别了。
find()会在div元素内 寻找 class为rain 的元素。
而filter()则是筛选div的class为rain的元素。
一个是对它的子集操作,一个是对自身集合中筛选。
*****************
定位
.offset()方法
获取匹配元素在当前窗口的相对偏移。返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效
如:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
.position()
获取匹配元素相对于父元素的偏移。返回的对象包含两个整型属性:top 和 left。
我们在animate()方法通过设置left和top进行元素的定位,必须明确CSS对我们要改变的元素所施加的限制。例如,在元素的CSS定位position没有设置成relative或absolute的情况下,调整left属性对于匹配的元素毫无作用。只要通过内嵌或内联等方式设置了position属性值,就以在animate通过调整left,top属性来定位。(如果position属性没有设置,则默认为static)
JQuery获取浏览器窗口的高度和宽度
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(document.body).innerHeight(true));//浏览器时下窗口文档body的总高度(包括补白、不包括边框)。
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
alert($(document.body).innerWidth(true));//浏览器时下窗口文档body的总宽度 (包括补白、不包括边框)。
}
**********
jQuery.trim(str)或者$.trim(str)
去掉字符串起始和结尾的空格。
$.each(obj,fuction)
通用例遍方法,可用于例遍对象和数组。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个对应变量或内容。如果要退出each循环可以使用回调函数返回false,其他返回值将被忽略。
例如:例遍数据,同时使用元素索引和内容。
$.each( ["a","b","c"], function(i, n){
alert( "Item#" + i + ": " + n );
});
结果:
Item#0:a, Item#1:b,Item#2:c
这里i代表数组的索引,n代表索引对应的内容。
例遍json对象,同时使用成员名称和变量内容。
$.each( { "John": 21, "Tom": 22 }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
结果:
Name:John Value:21,Name:Tom Value:22
注意如果是json对象,这里的i代表JSON对象的的属性名,n代表属性对应的值。
$.each( [{ "John": 21}, {"Tom": 22 }], function(i, n){
alert( "index: " + i + ", Value: " + n );
});
注意如果是json数组,那么i返回的将是json数组的索引。n代表的是json数组中索引对应的json对象。
例如:
var area=‘[{"广东省":["广州市","深圳市","东莞市","深圳市","珠海市","中山市","江门市","佛山市","肇庆市","云浮市","阳江市","茂名市","湛江市"]},{"湖北省":["武汉市","宜昌市"]}]‘;
var kk=JSON.parse(area);
$.each(kk,function(index,elem){
$.each(em,function(key,element){
aler(key);//将输出广东省,湖北省。
});
$.isArray(obj),检测一个对象是否是数据
$.isFunction(obj),检测一个对象是否是函数
$.unique(array),去除array中的重复元素,该方法只对DOM Elemen有效,对string和number无效。
$.inArray(value,array),返回value在array中的下标(从0开始),如果没有找到则返回-1。
********************
.replaceAll(selector),用匹配的元素替换掉所有selector匹配到的元素。selector是选择器用于查找所要替换的元素。例如:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("<b>Paragraph. </b>").replaceAll("p");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
.replaceWith(content),将所有匹配的元素替换成指定的html或Dom元素。参数content可以是String,Element,jQuery。例如:$("p").replaceWith("<b>Paragraph. </b>");
*********************
data(name,value),在元素上存放数据,同时也返回所存取的值。如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。可以存放任何数据。如:
$("div").data("blah", "hello"); // blah设置为hello
data(name),返回元素上存储的相应名字的值。如果jQuery集合指向多个元素,那将只返回第一个元素的对应数据。如果对上面的data(name,value),在元素上存放数据,同时也返回所存取的值。如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。可以存放任何数据。如:
$("div").data("blah", "hello"); 使用("div").data("blah");将返回值"hello"
removeData(name),在元素上移除存放的数据。
*******************
当给一个DOM元素定义了一个属性,可以通过jquery的attr()方法获得该属性的值,也可以通过DOM元素的.attributes["属性名"].value来获得属性的值。如下:
<select style=‘width:160;margin-left:7;‘ attrid="select1" ></select>
我们给<select/>元素定义了一个属性attrid,可以通过下面两种方法来获得attrid属性的值:
select的jquery对象.attr("attrid");
select的DOM对象.attributes["attrid"].value;
**********************
使用jquery操作iframe
1、 内容里有两个ifame
<iframe id="leftiframe"...</iframe>
<iframe id="mainiframe..</iframe>
leftiframe中jQuery改变mainiframe的src代码:
$("#mainframe",parent.document.body).attr("src","http://www.radys.cn")
2、 如果内容里面有一个ID为mainiframe的ifame
<iframe id="mainifame"...></ifame>
ifame包含一个someID
<div id="someID">you want to get this content</div>
得到someID的内容
$("#mainiframe").contents().find("someID").html() 或者 $("#mainiframe").contents().find("someID").text()值
3、在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type=‘radio‘]").attr("checked","true");
那选择id自然就是依然使用find方法
$(window.frames["iframe1"].document).find("#id")
4、 如上面所示
leftiframe中的jQuery操作mainiframe的内容someID的内容
$("#mainframe",parent.document.body).contents().find("someID").html()或者 $("#mainframe",parent.document.body).contents().find("someID").val()
使用JavaScript操纵iframe
框架间的互相引用
一个页面中的所有框架以集合的形式作为window对象的属性提供,例如:window.frames就表示该页面内所有框架的集合,这和表单对象、链接对象、图片对象等是类似的,不同的是,这些集合是document的属性。因此,要引用一个子框架,可以使用如下语法:
window.frames["frameName"];
window.frames.frameName
window.frames[index]
其中,window字样也可以用self代替或省略,假设frameName为页面中第一个框架,则以下的写法是等价的:
self.frames["frameName"]
self.frames[0]
frames[0]
frameName
每个框架都对应一个HTML页面,所以这个框架也是一个独立的浏览器窗口,它具有窗口的所有性质,所谓对框架的引用也就是对window对象的引用。有了这个window对象,就可以很方便地对其中的页面进行操作,例如使用window.document对象向页面写入数据、使用window.location属性来改变框架内的页面等。
下面分别介绍不同层次框架间的互相引用:
1.父框架到子框架的引用
知道了上述原理,从父框架引用子框架变的非常容易,即:
window.frames["frameName"];
这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架,根据引用的框架实际就是window对象的性质,可以这样实现:
window.frames["frameName"].frames["frameName2"];
这样就引用到了二级子框架,以此类推,可以实现多层框架的引用。
2.子框架到父框架的引用
每个window对象都有一个parent属性,表示它的父框架。如果该框架已经是顶层框架,则window.parent还表示该框架本身。
3.兄弟框架间的引用
如果两个框架同为一个框架的子框架,它们称为兄弟框架,可以通过父框架来实现互相引用,例如一个页面包括2个子框架:
<frameset rows="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
在frame1中可以使用如下语句来引用frame2:
self.parent.frames["frame2"];
4.不同层次框架间的互相引用
框架的层次是针对顶层框架而言的。当层次不同时,只要知道自己所在的层次以及另一个框架所在的层次和名字,利用框架引用的window对象性质,可以很容易地实现互相访问,例如:
self.parent.frames["childName"].frames["targetFrameName"];
5.对顶层框架的引用
和parent属性类似,window对象还有一个top属性。它表示对顶层框架的引用,这可以用来判断一个框架自身是否为顶层框架,例如:
//判断本框架是否为顶层框架
if(self==top){
//dosomething
}
***************
jquery设置元素的readonly和disabled
Jquery的api中提供了对元素应用disabled和readonly属性的方法,在这里记录下。如下:
readonly
$(‘input‘).attr("readonly","readonly")//将input元素设置为readonly
$(‘input‘).removeAttr("readonly");//去除input元素的readonly属性
if($(‘input‘).attr("readonly")==true)//判断input元素是否已经设置了readonly属性
对于为元素设置readonly属性和取消readonly属性的方法还有如下两种:
$(‘input‘).attr("readonly",false)//去除input元素的readonly属性
$(‘input‘).attr("readonly","readonly")//将input元素设置为readonly
$(‘input‘).attr("readonly","")//去除input元素的readonly属性
disabled
$(‘input‘).attr("disabled","disabled")//将input元素设置为disabled
$(‘input‘).removeAttr("disabled");//去除input元素的disabled属性
if($(‘input‘).attr("disabled")==true)//判断input元素是否已经设置了disabled属性
对于为元素设置disabled属性和取消disabled属性的方法还有如下两种:
$(‘input‘).attr("disabled",false)//去除input元素的disabled属性
$(‘input‘).attr("disabled","disabled")//将input元素设置为disabled
$(‘input‘).attr("disabled","")//去除input元素的disabled属性
**********************
jquery append方法在IE下向select添加option有时没有作用,需要使用原生的javascript方法才行,如:
var sel = $("#selectobj").get(0);
var newOption1 = document.createElement("OPTION");
newOption1.text = newOpt.text();
newOption1.value = newOpt.val();
sel.options.add(newOption1);
*****************
解决IE8 select的option过长的问题,显示不全的方法:
首先设置select的宽度为固定的100px,然后在select中又添加了两个事件:onmouseover="fixWidth()" onblur="setWidth()"
对应的方法是:
function fixWidth()
{
var len = document.getElementById(‘berth‘).options.length;
if( len != 0 ){
document.getElementById(‘berth‘).style.width = "auto";
}
}
function setWidth()
{
document.getElementById(‘berth‘).style.width = "100px" ;
}
当鼠标放在select上时就会将select的width设置为auto,这样就可以看到超过长度的部分;而当select失去焦点时,再将width设置为100px,这样就解决了以上问题。
**********************
4JQuery与Dom操作
原文:http://blog.csdn.net/bin71722/article/details/51889855