<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
</head>
<body>
//html页面
<ul style="position: relative;">
<li>li1</li>
<li class="bigFont">li2</li>
<li>li3</li>
<div>div</div>
<li class="four">li4</li>
<li><span class="a">li5</span></li>
</ul>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<h1>1</h1>
<h1 class="five">2</h1>
<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
<h3>选中下面的文字，看看它的颜色</h3>
<h3>选中下面的文字，看看它的颜色</h3>
<h3>选中下面的文字，看看它的颜色</h3>
<script type="text/javascript">
$("li").eq(1).css("color","red"); //索引为1的li元素，即第二个li元素
$("ul li:first").html("选第一个元素"); //选第一个li
$("li:last").html("这是最后一个"); //选最后一个li
$("ul").find(".four").css("font-size","30px"); //从ul容器里找类名为four的元素
$(".four").next().css("font-size","50px"); //选中类名为four的后一个元素
$("li:first").nextAll().css("font-size","50px"); //选中第一个li标签的后面所有元素
$(".four").prev().css("font-size","10px"); //选中类名为four的前一个元素
$(".four").prevAll().css("font-size","10px"); //选中类名为four的前面面所有元素
$(".four").parent().css("background","blueviolet"); //选中类名为four的父元素标签，
$(".a").parents().css("background","indianred"); //选中的是类名为a的祖先标签，整个html的颜色都会变化,
$(".a").offsetParent().css("background","yellow"); //最近定位的祖先元素 //
$("h1").siblings().css("font-size","50px"); //和h1同一个级别的标签都会被选中
$("ul").children(".four").text(); //ul下面的子元素，类名为four的被选中
$("h1").val(); //取h1标签对应的文本值，这个方法只能无参
$("h1").html(); //取h1标签对应的文本值，无参取值
$("h1").html("123"); //为h1标签赋值，有参赋值
$("h1").text(); //取h1标签对应的文本值，无参取值
html()和text()和val()三者区别
val()方法是取值，无参时，效果和html()一样，有参时可以为input框赋值，其他标签好像赋不了
html()方法取值， $("p").nextAll("h3").html();控制台打印只会取第一个h3的值
text()方法取值， $("p").nextAll("h3").html();控制台打印只会取三个h3的值
如果是带参的html("aaa")和text("aaa")效果一样
</script>
</body>
</html>