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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
js实现模拟购物商城案例
May 18 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/11/25 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
document.forms[].submit()使用介绍
2014/02/19 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
带你认识Django
2019/01/15 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
车间调度岗位职责
2013/11/30 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
教师对学生的评语
2014/04/28 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
Golang并发工具Singleflight
2022/05/06 Golang