当前位置:嗨网首页>书籍在线阅读

42-解决方案

  
选择背景色: 黄橙 洋红 淡粉 水蓝 草绿 白色 选择字体: 宋体 黑体 微软雅黑 楷体 选择字体大小: 恢复默认

1.10.2 解决方案

你可能还不清楚,jQuery函数是多功能的,根据你发送的不同参数结构,一个函数能以不同的方式运行。如果以原始HTML文本字符串为参数调用函数,它将立刻创建这些元素。例如,下列语句将创建一个包装在 <p> 元素中的 <a> 元素,在 <p><a> 元素中还封装了一个文本节点:

jQuery('<p><a>jQuery</a></p>');

创建了元素之后,还可以使用jQuery方法对它进行进一步的操作,就像一开始就从现有的HTML文档中选择了 <p> 元素似的。例如,可以用 .find() 方法选择 <a> 元素,并设置它的一个属性。在下面的代码中,将其 href 属性设置为 <a class="my_markdown" href="['http://www.jquery.com']">http://www.jquery.com</a>

jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com');

这很棒,对吗?目前为止,所做的只不过是在运行中创建元素并在代码中进行操纵,实际上还可以做得更好。可以说,实际上还没有真正改变当前加载的DOM。想做到这一点,就必须使用jQuery提供的操纵方法。下面是在HTML文档上下文中的代码。在这段代码中将创建元素、在这些元素上进行操作,然后用操纵方法 appendTo() 将它们插入DOM中:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com')
 .end().appendTo('body');
</script>
</body>
</html>

请注意这里是如何使用 end() 方法撤消 find() 方法的,这样当调用 appendTo() 方法时,它将在DOM中附加包含在初始包装器集中的元素。