Java Web

1.html和CSS

1.1文件的路径

在web中路径分为相对路径和绝对路径

. 　　　　表示当前文件所在的目录

.. 　　　   表示当前文件所在的上一个目录

文件名 　 表示当前文件所在目录的文件，相当于./文件名

 1.2Form表单的使用

表单提交的时候，数据没有发送给服务器的三种情况：

1.表单项没有name属性值

2.单选、复选都需要添加value属性

3.表单项不在提交的form表单中

　　1.2.1 GET请求的特点

　　　　浏览器地址栏中的地址是：action[+请求参数]

　　　　不安全

　　　　有数据长度的限制

　　1.2.2 POST请求的特点

　　　　浏览器地址栏中只有action属性值

　　　　相对于GET更安全

　　　　理论上没有数据长度的限制

 

2.Javascript

Javascript诞生主要是为了完成页面的数据验证。它运行在客户端，需要运行浏览器解析执行代码。

Js是弱类型，java是强类型。在js里定义变量一般用var

== ：只判断数值上的相等

=== ：全等于，不仅判断数值，还判断类型是否相等

2.1 编写函数，计算所有参数相加的和

function addsum(num1, num2){
        var result = 0;
        for(var i = 0;i < arguments.length;i++){
            result += arguments[i];
        }
        return result;
    }
    alert(addsum(1, 2, 3, 4, 5, 6));

2.2 自定义对象

var obj = {
            name: "牛逼",
            age: 18,
            fun:function(){
                alert("姓名：" + this.name + " 年龄" + this.age);
            }
    }
    alert(obj.name);
    obj.fun(); 

2.3 JS中的常用事件

onload 加载完成事件

onclick 单击事件

onblur 失去焦点事件

onchange 内容发生改变事件

onsubmit 表单提交事件

 动态注册事件：

window.onload = function(){
        var btnObj = document.getElementById("btn2");
        btnObj.onclick = function(){
            alert("动态");
        }
    }

2.4 getElementsByName的应用

 实现选项的全选、全不选、反选的功能：

function checkAll(){
        var hobbies = document.getElementsByName("hobby");
        for(var i = 0;i < hobbies.length;i++){
            hobbies[i].checked = true;
        }
    }
    function checkNo(){
        var hobbies = document.getElementsByName("hobby");
        for(var i = 0;i < hobbies.length;i++){
            hobbies[i].checked = false;
        }
    }
    function checkReverse(){
        var hobbies = document.getElementsByName("hobby");
        for(var i = 0;i < hobbies.length;i++){
            if(hobbies[i].checked == true)
                hobbies[i].checked = false;
            else
                hobbies[i].checked = true;
        }
    }

HTML部分：

<input type="checkbox" name="hobby" value="c++">c++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="js">javascript
<br />
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>

 

3. JQuery

使用JQuery一定要引入JQuery库；JQuery中的$相当于一个函数

3.1为按钮添加一个响应函数：

1.使用JQuery查询到标签对象

2.使用标签对象.click( function(){} );

$(function(){
        var btnObj = $("#btnId");
        btnObj.click(function(){
            alert("JQuery单击事件");
        })
    })

 

3.2JQuery与原生JS的区别

1.JQuery的页面加载完成后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行；JQuery页面加载完成后先执行

2.原生JS的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。