网站开发技术

js 中var 用于定义一个变量。如果在函数中没有用var ， 就有可能产生了一个全局的变量。

function f() {
    x = 1;
}
f();
alert(window.x);

这里就产生了一个全局变量。 x

好的习惯应该是 

var x， y , z;

先看一个示例代码

var age = 100;   
         
function Test(name, age) {
    this.name = name;
    if(age) {
       this.age = age; 
    } else {
        this.age = 200;
    }
}
Test();
alert(age);

这段代码可以分成两个部分看。

第一个部分就是   var age = 100; 

其余的部分是第二个部分。

输出结果是 200 .

表明 第二部分把第一部分的值给修改了。

本来 Test() 应该是个构造函数（javascript 中什么是构造函数） 来产生对象用的。结果直接给执行了。 构造函数中是有this 关键字的。 

如果直接执行了， 在这个环境中this 就是表示 window 了。

结果就是  window.age = 200; 就把值给修改了。

所以说构造函数是不能直接执行了， 会产生变量，或者修改变量。

可以再 Test() 中加入

alert(this === window) // 执行的结果是  true 

js 中的数据类型， 函数也是一种数据类型

<script>
    w = function(type) {
document.writeln("<pre> typeof(" + type + ") :" + typeof (type) + " </pre>");
    };
    w('1');
    w(1);
    w(w);
    w(false);
    w(undefined);
    w(window);
</script>

打印的结果

<pre> typeof(1) :string </pre>
<pre> typeof(1) :number </pre>
<pre> typeof(function (type) {
document.writeln("<pre> typeof(" + type + ") :" + typeof (type) + " </pre>");
    }) :function </pre>
    
<pre> typeof(false) :boolean </pre>
<pre> typeof(undefined) :undefined </pre>
<pre> typeof([object Window]) :object </pre>

jquery 的文档处理 append 

jquery 文档处理 appendTo

jquery after 使用方法

 $("#a").append("str") ; 不字符串写入 #a 内部的后面

而 $("#a").after("<div>xxx</div>") ; 是吧  <div>xxx</div> 插入在 #a 外部的后面

而 $("p").appendTo("div") ; 是 p 插入在 div 的后面， 和  append 刚好是相反的。

比如

<div id="one"><p>one</p></div>

jquery 

$("#one").append('<div id="two"><p>two</p></div>');
$("<div id='three'><p>three</p></div>").appendTo("#two");
$("#three").after("<div id='four'><p>four</p></div>");

结果

    <div id="one">
        <p>one</p>
        
        <div id="two">
            <p>two</p>
            <div id="three">
                <p>three</p>
            </div>
            <div id="four">
                <p>four</p>
            </div>
        </div>
        
    </div>

第一步骤  append 表示再  #one 内部的最后  增加 #two

第二步骤  把 #three 插入在 two 内部 的后面

第三步骤  再 three 的外部后面写入 #four

比如 ， 表示 把 p 元素放到  #one 后面 

$("p").insertAfter('#one');

就会使

 <p>two</p><div id="one">one</div>

变为

<div id="one">one</div><p>two</p>

jquery after 是在元素之后追加一个元素

测试代码

$(document).ready(function() {
    $("#one").after('<div id="two">two</div>');
    $("#one").after('<div id="one">three</div>').after(function() {
        return '<div id="four">four</div>';
    });
});

html

<div id="one">one</div>

输出的结果是

<div id="one">one</div>
<div id="four">four</div>
<div id="three">three</div>
<div id="two">two</div>

首先参数使用  一个字符串，表示把这个字符串写入到 one 的外面 之后。

第二个使用链式操作，还是放到了one之后  three , 最后一个操作也是 one 之后。

这个是前追加， 而 append 是后追加。

两个的用法一样， 不同地方是是一个追加的地方是元素对象的开头， 一个是结尾。

用法可以查看

jquery 的文档处理 append 参数详解 

示例

jquery

$(document).ready(function() {
    $("#f").append('<div id="s1">s1</div>');
    $("#f").prepend('<div id="s2">s2</div>');
});

html 

<div id="f" style="outline: 2px solid red">
    <p>fater</p>
</div>

输出结果

<div id="f" style="outline: 2px solid red">
    <div id="s2">s2</div>
            <p>fater</p>
    <div id="s1">s1</div>
</div>

比如 html 文档是 

<p>001</p>
<h1>h1</h1>

jquery代码是

$(document).ready(function() {
    $("p").append($("h1"));
});

结果是 看上去似乎没有变化，h1还是一个， 但是 h1移动到 p 中了。

也就是说 这个是移动的效果。

把h1移动到 p 中。

不是本来想的 有两个 h1. 

可能的原因是 处于标准的考虑吧， 试想如果 是 append($("#xxx")) 如果不是 移动的效果， 那么就有 至少两个  #xxx 。 

一个html中id只能有一个。