jQuery中prependTo()方法用法实例


Posted in Javascript onJanuary 08, 2015

本文实例讲述了jQuery中prependTo()方法用法。分享给大家供大家参考。具体分析如下:

此方法把匹配的元素插入指定元素之前。
prependTo()方法的作用和prepend()方法是相同的,但是在语法上是有差别的,虽然在形式上看起来是一样的。

语法结构:

$(selector).prependTo(content)

参数列表:
参数 描述
selector 要被插入的匹配元素。
content 要被插入匹配元素的元素。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>prependTo()函数-三水点靠木</title>

<style type="text/css">

p

{

  height:100px;

  width:100px;

  border:1px solid blue;

}

div

{

  height:200px;

  width:200px;

  border:1px solid green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

  $("p").prependTo("div");

})

})

</script>

</head>

<body>

<p>我是p的内容</p>

<div>我是div</div>

<button>点击查看效果</button>

</body>

</html>

注意:运行编辑器之后,再按F5刷新网页即可查看演示。
以上代码在点击按钮之后可以将p元素移动到div内部的前方。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
详解VUE 数组更新
Dec 16 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
8个超实用的jQuery功能代码分享
Jan 08 #Javascript
jQuery中appendTo()方法用法实例
Jan 08 #Javascript
jQuery中append()方法用法实例
Jan 08 #Javascript
jQuery中end()方法用法实例
Jan 08 #Javascript
jQuery中contents()方法用法实例
Jan 08 #Javascript
jQuery中andSelf()方法用法实例
Jan 08 #Javascript
jQuery中add()方法用法实例
Jan 08 #Javascript
You might like
如何正确理解PHP的错误信息
2006/10/09 PHP
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
javascript常见用法总结
2014/05/22 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
用Python读取几十万行文本数据
2018/12/24 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
Python Selenium截图功能实现代码
2020/04/26 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
五一服装活动方案
2014/01/11 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
股东协议书范本
2014/04/14 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
电工技术比武方案
2014/05/11 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
体育教师个人工作总结
2015/02/09 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python