元素:
after() //被选元素之后插入内容
before() //被选元素之钱插入内容
$("p").after("<p>Hello world!</p>");
$("p").before("<p>Hello world!</p>");
insertAfter() //在被选元素后插入HTML元素
$("<span>Hello world!</span>").insertAfter("p");
insertBefore() //在被选元素前插入HTML元素
$("<span>Hello world!</span>").insertBefore("p");
append() //被选元素结尾插入指定内容
appendTo() //被选元素结尾插入HTML元素
$("p").append(" <b>插入文本</b>.");
$("<span>Hello World!</span>").appendTo("p");
prepend() //被选元素开头插入指定内容
prependTo() //被选元素开头插入HTML元素
$("p").prepend("<b>在开头追加文本</b>。 ");
$("<span>Hello World! </span>").prependTo("p");
属性:
attr() //该方法用于返回被选元素的值 , 也可用于设置元素的值
$("img").attr("width");
$("img").attr("width","500");
removeAttr() //移除被选元素一个或多个属性
$(selector).removeAttr(attribute) attribute必须
$("p").removeAttr("style")
$("p").removeAttr("id class")
prop() //用在具有true和false两个属性的属性,如checked、selected、或者disabled使用prop(),
其他使用attr()
select:option.prop(“selected”,true)
checkbox:$(‘#xx’).prop(“checked”)
disabled:$(this).prop(“disabled”,false)
使用prop报错的地方
Style: .prop(“style”,“xxxx”)
removeProp() //移除由prop()方法设置的属性
不要用改方法来移除诸如style、id或checked之类的HTML属性。
请使用removeAttr()方法代替
option.prop(“selected”,true)
option.removeProp(“selected”)
class:
addClass() //向被选元素添加一个或多个类名
$(selector).addClass( classname , function(index,oldclass) )
$("p:first").addClass("intro");
removeClass() //移除被选元素一个或多个类
$(selector).removeClass(classname,function(index,currentclass))
Classname 可选,如果该参数为空,则将移除所有类名称
function(index,currentclass) 可选,返回要移除一个或多个类名称的函数
1:$("p").removeClass("intro")
2:$("li").removeClass(function(n) {
if (n==0||n==1) {return "listitem"}
else {return ""}
})
<ul>
<li class="listitem">Peter</li>
<li class="listitem">Lois</li>
<li class="listitem">Chris</li>
<li class="listitem">Stewie</li>
</ul>
toggleClass() //对添加和移除被选元素的一个或多个类进行切换
$("p").toggleClass("main")
hasClass() //检查被选元素是否包含指定的class名称
$(selector).hasClass(classname)
alert($("p").hasClass("intro"))
empty() //从被选元素移除所有子节点和内容,该方法不会移除元素本身或他的属性
$(selector).empty()
$("div").empty()
remove() //移除被选元素(包含数据和事件)
$("p").remove()
宽高:
width() //设置或返回选元素的宽度。该方法不包括padding、border、margin
$("div").width() $("div").width(“500px”)
height() //设置或返回被选元素的高度。该方法不包括padding、border、margin
$("div").height() $("div")height(“500px”)
innerWidth() //返回第一个匹配元素的内部宽度。该方法包括padding,但不包括border、margin
$("div").innerWidth()
innerHeight() //返回第一个匹配元素的内部高度。该方法包括padding,但不包括border、margin
$("div").innerHeight()
outerWidth() //返回第一个匹配元素的外部宽度。该方法包括padding、border,
如需包含margin,使用outerWidth(true)
$("div").outerWidth()
outerHeight() //返回第一个匹配元素的外部高度。该方法包括padding、border,
如需包含margin,使用outerHeight(true)
$("div").outerHeight(true)
包裹元素:
wrap() //使用指定的HTML 元素来包裹每个被选元素。
$("p").wrap("<div></div>"); //每个p元素单独被div包裹起来
wrapAll() //使用指定的HTML 元素来包裹所有被选元素
$("p").wrapAll("<div></div>");//所有的p元素都被一个div包裹起来
wrapInner() //使用指定的HTML 元素来包裹每个被选元素中的所有内容(innerHTML)
$("p").wrapInner("<b></b>")
unwrap() //移除被选元素的父元素
$("p").unwrap()
偏离:
offset() //设置或返回被选元素相对于文档的偏移坐标
$("button").click(function(){ //返回坐标
var x=$("p").offset();
alert("上: " + x.top + " 左: " + x.left);
});
$("button").click(function(){ //设置坐标
pos=new Object();
pos.left="0";
pos.top="100";
$("p").offset(pos);
});
position() //返回相对于它父元素的位置
$("button").click(function(){
x=$("p").position();
alert("顶部位置: " + x.top + "左部位置: " + x.left);
});
scrollLeft() //设置或返回被选元素水平滚动条位置
scrollTop() //设置或返回被选元素垂直滚动条位置
$("div").scrollLeft()+" px" / $("div").scrollLeft(100)
$("div").scrollTop()+"px" / $("div").scrollTop(100)
替换:
replaceAll() //把被选元素替换为新的HTML元素
$(content).replaceAll(selector) 括号内是必选项
$("<span><b>Hello world!</b></span>").replaceAll("p:last")
replaceWith() //把被选元素替换为新的内容
$(selector).replaceWith(content,function(index))
$("p:first").replaceWith("Hello world!")
$("p").replaceWith(function(n){
return "<h3>这个元素的下标是 " + n + ".</h3>";
});
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>这是另一个段落。</p>
内容:
html() //设置或返回被选元素的内容(innerHTML)
$("p").html("Hello <b>world!</b>")
text() //设置或返回被选元素的文本内容
$("p").text("Hello world!")
css() //为被选元素设置一个或多个样式属性
$("p").css("color","red")
val() //设置或返回被选元素的value属性值(针对表单元素)
$("input:text").val("Glenn Quagmire")
clone() //生成被选元素的副本,包含子节点、文本和属性
$(selector).clone(true|false) clone(true)规定需复制事件处理程序
$("p").clone().appendTo("body")
$("button").click(function(){
$("body").append($("p:first").clone(true));
});
$("p").click(function(){
$(this).animate({fontSize:"+=1px"});
});