Juery HTML/CSS 方法 —39 个

元素:

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)   clonetrue规定需复制事件处理程序

$("p").clone().appendTo("body")

$("button").click(function(){

$("body").append($("p:first").clone(true));

});

$("p").click(function(){

$(this).animate({fontSize:"+=1px"});

});

猜你喜欢

转载自blog.csdn.net/yang295242361/article/details/80222311
39