**/*** js 页面加载初始化方法: ****/
1. 在 body 里面写初始化方法.**
- <body onload='init()'>
- </body>
- <script type="text/javascript">
- function init(){
- // 初始化内容
- }
- </script>
- 2.window.onload=function(){}
- <script type="text/javascript">
- window.onload=function(){
- // 初始化内容
- }
- </script>
3. 写初始化方法, 页面顺序执行到初始化方法时初始化
- <script type="text/javascript">
- function init() {
- // 初始化内容
- };
- init();
- </script>
jquery 页面加载初始化方法:
- 1.$.function(){}
- <script type="text/javascript">
- $.function(){
- // 初始化内容
- });
- </script>
- 2.$(document).ready(function(){})
- <script type="text/javascript">
- $(document).ready(function(){
- // 初始化内容
- });
- </script>
ready() 函数有以下三种等价的形式:
- function handler(){
- // 这里是需要执行的代码
- }
- // 形式一
- $(document).ready( handler );
- // 形式二
- $( ).ready( handler ); // 不推荐该形式
- // 形式三
- $( handler );
- 3.jQuery(function($){})
- <script type="text/javascript">
- jQuery(function($){
- // 初始化内容
- });
- </script>
注: jquery 和 js 初始化加载页面的区别
jquery: 等待页面加载完数据, 以及页面部分元素 (不包括图片视频),
js: 是页面全部加载完成才执行初始化加载
js 追加元素的几种方法 (append()prepend()after()before()insertAfter()insertBefore()):
js 追加元素的几种方法:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
js 中常用追加元素的几种方法
- </title>
- <link rel="stylesheet" href="CSS/rest.css" />
- <style>
- .container { width: 1200px; padding: 10px; margin: 50px auto; border:
- 1px solid lightcoral; } #wrap{ border: 1px solid lightseagreen; } .container
- p{ height: 30px; line-height: 30px; } .btn-group{ margin-top: 20px; } button{
- width: 80px; height: 32px; margin-right: 10px; line-height: 32px; text-align:
- center; border: 0px; }
- </style>
- </head>
- <body>
- <div class="container">
- <div id="wrap">
- <p class="first">
我是第一个子元素
- </p>
- <p class="second">
我是第二个子元素
- </p>
- </div>
- <div class="btn-group">
- <button class="append">
- append
- </button>
- <button class="appendTo">
- appendTo
- </button>
- <button class="prepend">
- prepend
- </button>
- <button class="prependTo">
- prependTo
- </button>
- <button class="after">
- after
- </button>
- <button class="before">
- before
- </button>
- <button class="appendChild" onclick="appChild()">
- appendChild
- </button>
- <button class="insertAfter">
- insertAfter
- </button>
- <button class="insertBefore">
- insertBefore
- </button>
- </div>
- </div>
- </body>
- </html>
- <script src="js/jquery-1.9.1.min.js">
- </script>
- <script>
- $(function() {
- //append(), 在父级最后追加一个子元素
- $(".append").click(function() {
- $("#wrap").append("<p class='three'> 我是子元素 append</p>");
- });
- //appendTo(), 将子元素追加到父级的最后
- $(".appendTo").click(function() {
- $("<p class='three'> 我是子元素 appendTo</p>").appendTo($("#wrap"));
- });
- //prepend(), 在父级最前面追加一个子元素
- $(".prepend").click(function() {
- $("#wrap").prepend("<p class='three'> 我是子元素 prepend</p>");
- });
- //prependTo(), 将子元素追加到父级的最前面
- $(".prependTo").click(function() {
- $("<p class='three'> 我是子元素 prependTo</p>").prependTo($("#wrap"));
- });
- //after(), 在当前元素之后追加 (是同级关系)
- $(".after").click(function() {
- $("#wrap").after("<p class='siblings'> 我是同级元素 after</p>");
- });
- //before(), 在当前元素之前追加 (是同级关系)
- $(".before").click(function() {
- $("#wrap").before("<p class='siblings'> 我是同级元素 before</p>");
- });
- //insertAfter(), 将元素追加到指定对象的后面 (是同级关系)
- $(".insertAfter").click(function() {
- $("<p class='three'> 我是同级元素 insertAfter</p>").insertAfter($("#wrap"));
- });
- //insertBefore(), 将元素追加到指定对象的前面 (是同级关系)
- $(".insertBefore").click(function() {
- $("<p class='three'> 我是同级元素 insertBefore</p>").insertBefore($("#wrap"));
- });
- });
- //appendChild(), 在节点的最后追加子元素
- function appChild() {
- // 创建 p 节点
- var para = document.createElement("p");
- // 创建文本节点
- var node = document.createTextNode("我是子集 appendChild 新段落");
- // 把文本节点添加到 p 节点里
- para.appendChild(node);
- // 查找 div1
- var element = document.getElementById("wrap");
- // 把 p 节点添加到 div1 里
- element.appendChild(para);
- }
- </script>
注解:
------ 原生 JS 种添加节点一共有 2 种方法:
1.appendChild()
<1. 概念: 把要添加的节点添加到指定父级里面的最后面, 所以
也叫追加 (注: 不能添加字符串)
<2. 使用方式: 父级节点. appendChild( 要添加的节点 )
<3. 兼容性: 所有浏览器都支持此方法
2.insertBefore()
<1. 概念: 把要插入的节点添加到指定父级里面的指定节点之前
<2. 使用方式: 父级节点. insertBefore( 要插入的节点, 指定节点 )
<3.JS 代码: oDiv2.insertBefore(oB2,oSpan2); // 将 b2 插入到 div2 中的 span2 前面
<4. 兼容性: 所有浏览器都支持此方法, 但是值得注意的是, 如果第二个
参数节点不存在, 在 IE 和 Safari 下会把要添加的节点使用 appendChild() 方法
追加到指定父级中, 而其他主流浏览器 (FirefoxChromeOpera 等)
下会报错, 所以在插入节点的时候, 需要先判断第二个参数节点是否存在
-----jQuery 中添加节点一共有 4 组方法, 每组方法有 2 种方式:
第一组: before()insertBefore()
before():
<1. 概念: 在指定节点的前面添加要添加的节点
<2. 使用方式: 指定节点. before( 要添加的节点 )
<3.JS 代码: $('#span2').before( $('#b2') );// 在 span2 的前面添加 b2
<4. 兼容性: 所有浏览器都支持此方法
insertBefore():
<1. 概念: 把要插入节点插入到指定节点的前面
<2. 使用方式: 要插入的节点. insertBefore( 指定节点 )
<3.JS 代码:$('#b2').insertBefore( $('#span2') );// 将 b2 插入到 span2 的前面
<4. 兼容性: 所有浏览器都支持此方法
第二组: after()insertAfter()
after():
<1. 概念: 把要添加的节点添加到指定节点的后面
<2. 使用方式: 指定节点. after( 要添加的节点 )
<3.JS 代码:$('#span2').after( $('#b2') );// 在 span2 的后面添加 b2
<4. 兼容性: 所有浏览器都支持此方法
insertAfter():
<1. 概念: 把要插入的节点插入到指定节点的后面
<2. 使用方式: 要插入的节点. insertAfter( 指定节点 )
<3.JS 代码:$('#b2').insertAfter( $('#span2') );// 将 b2 插入到 span2 的后面
<4. 兼容性: 所有浏览器都支持此方法
第三组: prepend()prependTo()
prepend():
<1. 概念: 在指定父级里面的最前面添加指定节点
<2. 使用方式: 父级节点. prepend( 要添加的节点 )
<3.JS 代码:$('#div2').prepend( $('#b2') );// 在 div2 里面的最前面添加 b2
<4. 兼容性: 所有浏览器都支持此方法
prependTo():
<1. 概念: 把指定节点添加到指定父级里面的最前面
<2. 使用方式: 要添加的节点. prependTo( 父级节点 )
<3.JS 代码:$('#b2').prependTo( $('#div2') );// 将 b2 添加到 div2 里面的最前面
<4. 兼容性: 所有浏览器都支持此方法
第四组: append()appendTo()
append():(注: 此方法基本等同于原生 JS 的 appendChild 方法)
<1. 概念: 在指定父级里面的最后面添加指定节点
<2. 使用方式: 父级节点. append( 要添加的节点 )
<3.JS 代码:$('#div2').append( $('#b2') );// 在 div2 里面的最后面添加 b2
<4.--- 兼容性: 所有浏览器都支持此方法
appendTo():
<1. 概念: 把指定节点添加到指定父级里面的最后面
<2. 使用方式: 要添加的节点. appendTo( 父级节点 )
<3.JS 代码:$('#b2').appendTo( $('#div2') );// 把 b2 添加到 div2 里面的最后面
<4.--- 兼容性: 所有浏览器都支持此方法
来源: http://www.qdfuns.com/note/35683/57787cc34e7fb6ec5f8086e32d299fe3.html