下面写个例子来获取id为demo的元素的第一个子元素。
<!--加载jquery--><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){//页面加载完成时进入
var firstChild=$("#demo>:first")//用选择器的方式获取第一个子元素
firstChild.css('color','red')//将第一个子元素中的文字变为红色，可以看到只有“111”是红色的
})
</script>
<div id="demo"><span>111</span><span>222</span><span>333</span></div>
说明一下以上例子中用到选择器
#demo是id选择器获取id为demo的元素
>是子选择器获取所有子级
:first是首项选择器获取第一个元素
三者结合起来就是获取id为demo的元素的所有子元素中的第一个元素。
其实jquery的选择器有很多，包括：
:last获取最后一个元素
:eq(index)获取第index个选择器
更多可以直接百度搜索“jquery选择器”来查看。
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。
2、在index.html中的<script>标签，输入jquery代码：
$('body').append($('div:first').text())
$('body').append($('div:last').text())
3、浏览器运行index.html页面，此时通过jquery获取了第一个div和最后一个div并打印了其内容。
使用jquery获取某DIV的子元素，通常有以下两种方法：
子元素选择器（>），例如 $("div>img") 获取div下的img子元素；
遍历函数children()，例如 $("div").children("img") 同样是获取div下的img子元素。
如果想要获取DIV下的不仅是子元素，而且还包括其他后代元素（孙辈、曾孙辈元素...），那么，相应的两种方法是：
后代元素选择器（空格），例如 $("div img") 获取div下的所有级别的img后代元素；
遍历函数find()，例如 $("div").find("img") 获取div下的所有级别的ing后代子元素。
