jQuery测试用例-W3school

$("div").scrollLeft(100); // 设置滚动条的位置

$(document).ready(function(){
  $("button").click(function(){
    $("div").scrollLeft(100);
  });
});

<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div>
<button class="btn1">把滚动条的水平位置设置为 100px</button>

 

jQuery 参考手册 - 文档操作

   元素操作

• 创建新html元素

var txt1="<p>Text.</p>";              // 以 HTML 创建新元素

var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素

var txt3=document.createElement("p");
txt3.innerHTML="Text.";               // 通过 DOM 来创建文本

• 添加元素

$("p").append(" <b>Hello world!</b>");
$("<b>Hello World!</b>").appendTo("p");
$("<span>Hello world!</span>").insertAfter("p");

• 替换元素

  $("p").replaceWith("<b>Hello world!</b>")
  $("p").replaceAll("<b>Hello world!</b>");

• 包裹或解开元素

  $("p").unwrap();//删除所有 <p> 元素的父元素
  $("p").wrap("<div></div>")//添加父元素
  $("p").wrapAll("<div></div>")//在 <div> 中包裹所有段落
  $("p").wrapInner("<b></b>");//在每个 p 元素的内容上包围 b 元素：

• 移除元素

$("p").remove();
$("p").detach();
$("p").empty();
//detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同,empty() 方法从被选元素移除所有内容，包括所有文本和子节点。

   Class操作

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

$("p:first").addClass("intro")
$("p:first").hasClass("intro");//是否有该class
$("p:first").removeClass("intro")//删除指定class元素
$("p").toggleClass("main");//添加类8i

//返回首个匹配元素的 background-color 值
$("p").css("background-color");

//为所有匹配元素设置 background-color 和 font-size：
$("p").css({"background-color":"yellow","font-size":"200%"});

Attr属性操作

$("#w3s").attr("href","http://www.w3school.com.cn/jquery");//设置属性

//设置多个属性

$("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });

//attr() 的回调函数

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

$("p").removeAttr("id");//从任何 p 元素中移除 id 属性