安装JDK配置设置环境变量:
在“我的计算机”右键“属性”进“高级系统设置”进“环境变量”:
在“系统变量”中“新建”:
变量名:JAVA_HOME
变量值:C:\Program Files\Java\jdk1.8.0_60
在“用户变量”中“新建”:
变量名:PATH
变量值:%JAVA_HOME%\bin
在“用户变量”中“新建”:
变量名:CLASS_PATH
变量值:%JAVA_HOME%\lib
测试:win+R输入cmd
java回车
javac回车
第一个JAVA程序
public class Test{

public static void main(String[] args){
    System.out.println("Hello,JAVA");
}

}
win+R:cmd
cd 到test.java目录下
javac test.java
生成test.class
java test




HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Tab切换</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    <script src="app.js"></script>
</head>
<body>
    <div class="tab"  id="tab">
        <div class="tab-title" id = "tab-title">
            <ul>
                <li class="select">
                    <a href="#">公告</a>
                </li>
                <li>
                    <a href="#">规则</a>
                </li>
                <li>
                    <a href="#">论坛</a>
                </li>
                <li>
                    <a href="#">安全</a>
                </li>
                <li>
                    <a href="#">公益</a>
                </li>
            </ul>
        </div>
        <div class="tab-content" id="tab-content">
            <div class="tabct" style="display: block">
                <ul>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">故宫创意产品来袭啦</a>
                    </li>
                    <li>
                        <a href="#">阿里发布 YunOS 3.0</a>
                    </li>
                    <li>
                        <a href="#">阿里云运营智慧城市</a>
                    </li>
                </ul>
            </div>
            <div class="tabct"  style="display: none">
                <ul>
                    <li>
                        <a href="#">谨防假冒客服诱导退款</a>
                    </li>
                    <li>
                        <a href="#">国企业厂家大联动</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                </ul>
            </div>
            <div class="tabct" style="display: none">
                <ul>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">国企业厂家大联动</a>
                    </li>
                </ul>
            </div>
            <div class="tabct" style="display: none">
                <ul>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">国企业厂家大联动</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                </ul>
            </div>
            <div class="tabct" style="display: none">
                <ul>
                    <li>
                        <a href="#">国企业厂家大联动</a>
                    </li>
                    <li>
                        <a href="#">国企业厂家大联动</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">国企业厂家大联动</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.tab{
    width: 298px;
    height: 98px;
    margin: 10px;
    border: 1px solid #eee;
    overflow: hidden;
}

.tab-title{
    height: 27px;
    position: relative;
    background: #f7f7f7;
}

.tab-title ul{
    position: absolute;
    width: 301px;
    left: -1;
}
.tab-title li{
    float: left;
    width: 58px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    padding: 0 1px;
    border-bottom: 1px solid #eee;
    overflow: hidden;
}

.tab li a:link,.tab li a:visited{
    text-decoration: none;
    color: #000;
}
.tab li a:hover{
    color:#f90;
    font-weight: 700;
}

.tab-title li.select{
    background: #fff;
    border-bottom-color: #fff;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 0;
}

.tab .tab-content .tabct{
    margin: 10px 10px 10px 19px;
}

.tab .tab-content .tabct ul li{
    float: left;
    width: 134px;
    height: 25px;
    overflow: hidden;
}

JS

function $(id){
    return typeof  id=="string"?document.getElementById(id):id;
}

window.onload = function(){
    var titleName = $("tab-title").getElementsByTagName("li");
    var tabContent = $("tab-content").getElementsByTagName("div");
    if(titleName.length != tabContent.length){
        return;
    }
    for(var i = 0;i<titleName.length;i++){
        titleName[i].id = i;
        titleName[i].onmouseover = function(){
            for(var j = 0;j<titleName.length;j++){
                titleName[j].className = "";
                tabContent[j].style.display = "none"
            }
            this.className = "select";
            tabContent[this.id].style.display = "block";
        }
    }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加两个方法到jQuery原型($.fn)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
    label {
        display: block;
        margin: .5em;
    }
</style>
</head>
<body>
 
<label><input type="checkbox" name="foo"> Foo</label>
<label><input type="checkbox" name="bar"> Bar</label>
<script>
$(function () { 
    $.fn.extend({
        check: function() {
            return this.each(function() {
                this.checked = true;
            });
        },
        uncheck: function() {
            return this.each(function() {
                this.checked = false;
            });
        }
    });
    // 使用新创建的.check() 方法
    $( "input[type='checkbox']" ).check();
})
</script>
 
</body>
</html>

使用 function 参数处理来自 AJAX 请求的数据结果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 function 参数处理来自 AJAX 请求的数据结果</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").load("demo_cd_catalog.xml",function(response,status){
            if (status=="success"){
                $("div").html("<ol></ol>");
                $(response).find("artist").each(function(){
                    var item_text = $(this).text();
                    $('<li></li>').html(item_text).appendTo('ol');
                });
                //alert("总共有 "+$(response).find("cd").size()+" 张 CD")
            }else{
                $("div").html("错误信息: <br/>" + xhr.status + " " + xhr.statusText)
            }
        });
    });
});
</script>
</head>
<body>

<p>艺术家</p>
<div></div>
<button>获取 CD 信息</button>
<p> XML 文件实例为 <a href="demo_cd_catalog.xml" target="_blank">demo_cd_catalog</a></p>

</body>
</html>

demo_cd_catalog.xml


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取 JSON 数据</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("demo_ajax_json.js",function(result){
            $.each(result,function(i,field){
                $("div").append(field+"<br>");
            })
        })
    })
})

</script>
</head>
<body>

<button>获取 JSON 数据</button>
<div></div>

</body>
</html>

demo_ajax_json.js

{ 
  "firstName": "Bill",
  "lastName": "Gates",
  "age": 60
}

post.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQ-post</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("/post.php",{
            name:"jqpost",
            url:"http://www.baidu.com"
        },
        function(data,status){
            alert("数据: \n" + data + "\n状态: " + status);
        });
    });
});
</script>
</head>
<body>

<button>发送一个 HTTP POST 请求页面并获取返回内容</button>

</body>
</html>

post.php

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$city;
?>