第四周作业-jquery的文档处理(部分)

部分简单测试,工具sublime text ,firebug

append 向每个匹配的元素内部追加内容。

eg:

<p id=‘p1‘>文本</p>
<script type="text/javascript">
  var text="<h2>这是一个h2</h2>"
    $(function(){
        $("#p1").append($(text));
    });
</script>

执行完上述代码后由firebug内存中标签信息变为

<p id="p1">
文本
<h2>这是一个h2</h2>
</p>

jquery中append函数是将文本插入指定标签内。

appendTo:把所有匹配的元素追加到另一个指定的元素元素集合中

<p id=‘p2‘>文本</p>
    <h2>a</h2>
     <h2>b</h2>
<script type="text/javascript">
    $(function(){
        $("#p2").appendTo($("h2"));
    });
</script>

在页面中显示效果代码如下

<h2>
a
<p id="p2">文本</p>
</h2>
<h2>
b
<p id="p2">文本</p>
</h2>

和append相反的是,appendTo是把原来的标签剪切并复制进指定标签中

prepend:向每个匹配的元素内部前置内容。

<p id=‘p3‘>文本</p>
<h3>a</h3>
<h3>b</h3>
<script type="text/javascript">
    $(function(){
        $("#p3").prepend($("h3"));
    });
</script>

页面效果

<p id="p3">
<h3>a</h3>
<h3>b</h3>
文本
</p>

得到的结果和append一样

prependTo:把所有匹配的元素前置到另一个、指定的元素元素集合中。

<p id=‘p4‘>文本</p>
<h1>a</h1>
<h1>b</h1>
<script type="text/javascript">
    $(function(){
        $("#p4").prependTo($("h1"));
    });
</script>

页面效果

<h1>
<p id="p4">文本</p>
a
</h1>
<h1>
<p id="p4">文本</p>
b
</h1>

效果和appendTo一样

after:在每个匹配的元素之后插入内容。

<p id=‘p5‘>文本</p>
<script type="text/javascript">
    $(function(){
        $("#p5").after($("<h2>这是一个after测试</h2>"));
    });
</script>

测试结果

<p id="p5">文本</p>
<h2>这是一个after测试</h2>

after是追加到标签体之后,对原来的标签无内容交集

before:在每个匹配的元素之前插入内容

<p id=‘p6‘>文本</p>
<script type="text/javascript">
    $(function(){
        $("#p6").before($("<h2>这是一个before测试</h2>"));
    });
</script>

页面效果

<p id="p5">文本</p>
<h2>这是一个before测试</h2>

before插入到标签之前

时间: 2024-11-10 13:41:26

第四周作业-jquery的文档处理(部分)的相关文章

jquery easyui文档一(草稿)

Jquery easyui文档 基础 每个easyui的组件都有属性,方法和事件,开发者可以很方便的扩展他们. 属性 组件的属性定义在jQuery.fn.{plugin}.defaults,例如,dialog的属性定义在jQuery.fn.dialog.defaults 事件 事件(回调函数)也定义在jQuery.fn.{plugin}.defaults 方法 调用方法的语法类似:$('selector').plugin('method', parameter): 具体来说: Selector就

jQuery 关于文档处理

这里介绍一些jQuery关于html的一些操作. 一般获取内容,有三个方法. text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 下面看个实例 <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <scri

jquery ui 文档使用总结

介绍jquery ui文档中的api如何使用 <!doctype html> <html lang="us"> <head> <meta charset="utf-8"> <title>jQuery UI Example Page</title> <link href="jquery-ui.css" rel="stylesheet"> <

使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta htt

Js和jQuery的文档就绪函数以及执行次数

Js和jQuery的文档就绪函数以及执行次数 1:JS文档就绪函数: 采用onload方法: 2:jQuery文档就绪函数: 方法一:采用ready方法 方法二: 通过上面的两种方法可看出:利用方法二比较精简,方法二应用广泛 3. JS文档就绪函数的执行次数: ---js的文档就绪函数不能定义多个.如果定义多个,最后定义的文档就绪函数会覆盖之前的. 例如: 像上面这样,函数定义两个或者两个以上的时候,最后弹出的结果只有"2",因为后面定义的文档就绪函数会覆盖前面的. 4.jQuery文

jQuery的文档操作(重点)/简单接触ajax(和风天气)

一.jQuery的文档操作****** 之前js中学习了js的DOM操作,也就是所谓的增删改查DOM操作.通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果.那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档. 看一个我们JS操作DOM的例子: var oUl = document.getElementsByTagName('ul')[0]; var oLi = document.createElement('li'); oLi.innerHTML = '

jquery获取文档高度和窗口高度

jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).height():浏览器可视窗口的高度 $(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直偏移) 用一句话理解就是:当网页滚动条拉到最低端时,$(document).height() == $(window).height() + $(window).scrollT

jquery之文档操作

jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color", "#ff0000") -> 设置值 - .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值 - .css(

jquery学习文档笔记

1.未见过的事件: focusin跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况. focusout跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况. 2.使用wrapAll方法 举例如下 原始代码: <div class="mm"><p>我们在公司</p></div><div class="mv">    <p>我们在公司</p>    <