<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>品牌列表案例</title>
<script src="js/jquery-2.1.1.min.js" rel="script"></script>
<script>
$(document).ready(function () {
var $text =$("ul li:eq(2)"); //获取ul的第三个子节点
var $text_v1 = $text.text();//获取指定元素的文本内容
var $text_v2 = $("p").append("<b> world</b>");//向匹配的元素内部追加内容
($("<b>世界</b>").appendTo("p")); //向匹配的元素内部添加文本内容到末尾，
$("a").prepend("<b>标签</b>");//在每一个匹配元素的文本前面添加指定内容
$("<b>加在后面</b>").appendTo("a");//在每一个匹配元素的文本后面添加指定内容
$("i").after("<b>内容加在倾斜文本之后</b>");//在匹配的元素之后添加文本内容
//按照字面顺序来理解即可，就是将b标签内的内容添加到em标签的文本之后
$("<b>的文本</b>").insertAfter("em");
//添加到匹配元素的文本之前，因为div是块元素，所以添加的内容也是块元素
$("div").before("<b>前面的文本</b>");
//按照字面的反顺序来理解，也就是b标签文本添加到ol li:eq(1)元素文本的后面，不是前面
$("<b>hello </b>").insertBefore($("ol li:eq(1)"));
$("p").click(function(){
//点击p标签文本时将p标签本身的文本复制（克隆）一次追加在em标签之后。
$(this).clone().appendTo("em");
});
//将ol li:eq(2)元素的文本内容替换成指定的文本内容。
$("ol li:eq(2)").replaceWith("<b>刘备</b>");
$("em").wrap("<b></b>");//用b标签将em标签包裹起来
alert($("strong").attr("title"));//获取匹配元素的属性的值
})
</script>
</head>
<body>
<ul>
<li>demo1</li>
<li>demo2</li>
<li>demo3</li>
<li>demo4</li>
<li>demo5</li>
<li>demo6</li>
</ul>
<p>hello</p>
<a>box</a>
<a>title</a>
<a>test</a><br><br>
<i>倾斜文本</i><br><br>
<em>颠倒常理</em><br>
<div>hello</div>
<ol>
<li>张三</li>
<li>李四</li>
<li>王二</li>
</ol>
<strong title="stronger">strong</strong>
</body>
</html>