// 在demo段落展示日期
function displayDate(){
    /*
    document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
    getElementById返回对拥有指定 id 的第一个对象的引用。
    */
	document.getElementById("demo").innerHTML=Date();
}

// 变量声明，只声明未赋值的变量值为undefined
var a;
// 变量声明并赋值
var a = 1;
// 隐式声明全局变量并赋值
a = 1;

// 函数定义
function add(op1, op2)
{
 // 这里是要执行的代码
 return op1 + op2;
}
// 执行函数
console.log(add(1, 2));

var a = 1;

function testSameVarName()
{
    /*
    Javascript在执行前会对整个脚本文件的声明部分做完整分析（包括局部变量），从而确定实变量的作用域。
    这里输出undefined，因为局部变量a覆盖了全局变量a，并且在此处还没有被赋值。
    */
    console.log(a);     // undefined
    var a = 3;
    console.log(a);     // 3
}
testSameVarName();

y = 5;
// 加减乘除
x=y+2;
x=y-2;
x=y*2;
x=y/2;
// 求余数
x=y%2;
// 累加、递减
x++;
x--;
// 赋值运算符
x=y;
x+=y; // 等价于 x = x + y; 以下类推
x-=y;
x*=y;
x/=y;
x%=y;

// 字符串可用''或""定义
txt="Hello world!"
// 字符串长度
txt_length = txt.length;
console.log(txt_length);
// 拼接字符串
txt = txt + "!!!";
// 把其他对象转为字符串
str_1 = 1 + "";
// 或者
str_1 = String(1)
// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
console.log(txt.indexOf("world"));
// replace() 方法用于在字符串中用一些字符替换另一些字符。
console.log(txt.replace("Hello", "Hi,"));
// split() 方法用于把一个字符串分割成字符串数组。
console.log(txt.split(" "));
// substring() 方法用于提取字符串中介于两个指定下标之间的字符。
console.log(txt.substring(0, txt.indexOf(" ")));

// 插入特殊字符用反斜杠
txt="We are the so-called \"Vikings\" from the north."
// 换行符
txt="line one. \nnew line"
// ' 在""字符串中无需转义，同理，"在''字符串中无需转义
txt='We are the so-called "Vikings" from the north.'

// Array对象可以包含任意数据类型
var arr = [1, 2, 3.14, 'Hello', null, true];
// 数组长度
console.log(arr.length); // 6
// 访问元素
console.log(arr[3]);
// 对元素操作，赋值
arr[3] = "Hello world!";
console.log(arr.indexOf(3.14)); // 元素3.14的索引为2
// push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素返回并删除
arr.push('a');
console.log(arr.pop());
/*
splice() 方法向/从数组中添加/删除项目，然后返回被删除的元素。
arrayObject.splice(index,howmany,item1,.....,itemX)
index, 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany, 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX, 可选。向数组添加的新项目。
*/
// 从索引2开始删除3个元素，然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook');
// 只删除,不添加:
arr.splice(2, 2);

// 遍历数组的三种方法
for(var i=0; i < arr.length; i++){
    console.log(arr[i]);
}
for (var i in arr){     // i是arr的索引，与上面的循环相同
    console.log(i);
    console.log(arr[i]);
}
arr.forEach(function(value, index, arr){
    // 在forEach使用return会失效，break会报错
    console.log(value);     //当前值
    console.log(index);     //当前索引
    console.log(arr);       //原数组
});

// 对象初始化器方式 
// 用一个`{ }`表示一个对象，键值对以`xxx: xxx`形式申明，用`,`隔开。
// 注意，最后一个键值对不需要在末尾加,，如果加了，有的浏览器（如低版本的IE）将报错。
var xiaohong = {
    name: '小红',
    id: 1,
    // 如果属性名包含特殊字符，就必须用引号括起来
    'middle-school': 'No.1 Middle School',
    // 属性值可以是函数（方法）
    sayHi: function(){
        console.log('Hello world!');
    }
};

// 构造函数方式
function Student(name, id, school){
    this.name = name;
    this.id = id;
    this['middle-school'] = school;
    this.sayHi = function(){
        console.log('Hello world!');
    };
}
xiaohong = new Student("小红", 1, 'No.1 Middle School');

var xiaohong = {
    name: '小红',
    id: 1,
    'middle-school': 'No.1 Middle School',
    sayHi: function(){
        console.log('Hello world!');
    }
};
// 用.访问对象的属性
console.log(xiaohong.name);
// 用引号定义的属性名，必须用obj['propertyName']的形式访问
console.log(xiaohong['middle-school']);
// 也可用此法访问一般的属性
console.log(xiaohong['id']);
// 运行对象的方法
xiaohong.sayHi();
// 访问不存在的属性返回undefined
console.log(xiaohong.age); // undefined
// 新增属性
xiaohong.age = 21;
// 删除属性
delete xiaohong.name; // 删除name属性
console.log(xiaohong.name); // undefined
// 判断属性是否存在
console.log('id' in xiaohong);

// 遍历对象的属性
for (var key in xiaohong){
    console.log("key: "+key+", value: "+xiaohong[key]);
}

var x                // x 为 undefined
x = 6;           // x 为数字
x = "Bill";      // x 为字符串

x = 2;
// 抽象相等比较 ==，执行前执行类型转换
console.log(x == 2);        // true
console.log(x == 1);        // false
console.log(x == '2');      // true
// 严格相等比较 ===，值和类型都必须相等
console.log(x === '2');      // false
console.log(x != '2');      // false
console.log(x > '2');      // false
console.log(x >= '2');      // true
console.log(x < '2');      // false
console.log(x <= '2');      // true

x = 2;
console.log(x >= 0 && x <= 8);        // true
console.log(x >= 3 || x <= 8);        // true
console.log(! x >= 3);                // false
console.log(! (x >= 3));              // true

time = 12;
if (time < 10){
    console.log("Good morning");
}else if (time<20){
    console.log("Good day");
}else{
    console.log("Good evening");
}

switch (day) {
    case 0:
        x = "Today it's Sunday";
        break;
    case 1:
        x = "Today it's Monday";
        break;
    case 2:
        x = "Today it's Tuesday";
        break;
}

for (var i=0; i<5; i++)  {
  x=x + "The number is " + i + "<br>";
}
// 其他例子参考Array对象、对象遍历部分

while (i<5) {
  x=x + "The number is " + i + "<br>";
  i++;
}

// do/while循环至少会执行一次
do {
  x=x + "The number is " + i + "<br>";
  i++;
} while (i<5);

<html>
<head>
    <title>用jQuery改写第一个JS程序</title>
</head>
<body>

<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>

<button type="button">显示日期</button>

<!--引用jQuery库-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    // $("button") 选择所有的button元素
    $("button").on("click", function () {
        // #id 选择器
        $("#demo").html(Date());
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>jQuery标签切换效果</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<!--代码部分begin-->
<div id="menu">
    <!--tag标题-->
    <div id="menu_female">
        <h3>女装</h3>
        <div class="tag" style="display: block;">
            <dl>
                <dd>
                    <p>第一类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.雪纺衫</a>
                    <a>4.针织衫</a>
                    <a>5.短外套</a>
                    <a>6.卫衣</a>
                    <a>7.小西裤</a>
                    <a>8.风衣</a>
                    <a>9.吊带背心</a>
                    <a>10.连衣裙</a>
                    <a name="setColor">11.蕾丝连衣裙</a>
                    <a>12.复古连衣裙</a>
                    <a>13.印花连衣裙</a>
                    <a>14.真丝连衣裙</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二类</p>
                    <a>1.背带裤</a>
                    <a>2.哈伦裤</a>
                    <a>3.牛仔裤</a>
                    <a>4.休闲裤</a>
                    <a>5.小脚裤</a>
                    <a>6.西装裤</a>
                    <a>7.打底裤</a>
                    <a>8.阔脚裤</a>
                    <a>9.短裤</a>
                    <a>10.马甲/背心</a>
                    <a>11.羽绒服</a>
                    <a>12.棉服</a>
                    <a>13.夹克</a>
                    <a>14.POLO衫</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>>
    </div>
    <div id="menu_male">
        <h3>男装</h3>
        <div class="tag" style="display:block">
            <dl>
                <dd>
                    <p>第一类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.牛仔裤</a>
                    <a>4.休闲裤</a>
                    <a>5.短裤</a>
                    <a>6.针织衫</a>
                    <a>7.西服</a>
                    <a>8.西裤</a>
                    <a>9.嘻哈裤</a>
                    <a>10.西服套装</a>
                    <a>11.马甲/背心</a>
                    <a name="setColor">12.羽绒服</a>
                    <a>13.棉服</a>
                    <a>14.夹克</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.牛仔裤</a>
                    <a name='setColor'>4.休闲裤</a>
                    <a>5.短裤</a>
                    <a>6.针织衫</a>
                    <a>7.西服</a>
                    <a>8.西裤</a>
                    <a>9.嘻哈裤</a>
                    <a>10.西服套装</a>
                    <a>11.马甲/背心</a>
                    <a>12.羽绒服</a>
                    <a>13.棉服</a>
                    <a>14.夹克</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 找到男装下第一类衣服中的第一个p元素，并改变颜色
    // :first-child 选择器选取属于其父元素的第一个子元素
    $("#menu_male div.tag p:first-child").css('color','#9932CC');
</script>

<script type="text/javascript">
    //找到男装下第一类衣服把a元素从顺序1-4加上颜色
    //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素
    $("#menu_male > div:first a:lt(4)").css('color','red');
</script>

<script type="text/javascript">
    //找到男装所有a元素中属性名name="setColor"的元素，并设置颜色
    //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素
    $("#menu_male a[name='setColor']").css('color','blue');
</script>

<script type="text/javascript">
    //不分男女，选中第一类衣服中第9个a元素，并改变颜色
    //:nth-child(n) 选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素
    $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00');
</script>

<script type="text/javascript">
    //找到女装下第一类衣服，把a元素中包含文字"更多"的节点，改变颜色
    $(".tag:first a:contains('更多')").css('color','#C71585');
</script>
</body>
</html>

$.ajax({
    url: "https://cnodejs.org/api/v1/topics",     // ajax请求地址，如果是跨域请求，需要服务器支持
    type: "GET",        // 请求方式 "POST" 或 "GET"， 默认为 "GET"
    dataType: "json",    //根据返回数据类型可以有这些类型可选：xml html script json jsonp text，ajax会将数据解析成js对象
    data: {limit: 3},       // 发送到服务器的数据。类型可以为：PlainObject、String、Array。GET 请求中将附加在 URL 后面
    async: true,    // 布尔值，默认是 true。表示请求是否异步处理。
    success: function(data, status){
        // 请求成功后执行此函数
        console.log(data);
    },
    error: function(jqXHR, status, error){
        // 请求失败要运行的函数
        // 参数分别为：XMLHttpRequest对象，错误信息，捕获的错误对象（可选）
    }
});

<button type="button">显示部门下拉选择框</button>
<select id="departmentSelector" hidden="hidden"></select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
// $("button") 选择所有的button元素
$("button").on("click", function () {
    $.ajax({
        url: "/helloworld/department/list",
        dataType: 'json',
        success: function (data) {
            $("#departmentSelector").html("");
            for(var i in data){
                $("#departmentSelector").append(
                    '<option value ="' + data[i].departmentId + '">' + data[i].departmentName +
                    '</option>'
                );
            }
            $("#departmentSelector").show();
        }
    });
});

i = Number("30");
console.log(typeof i);
i = parseInt("30");
i = parseFloat("30");