Js基本用法，JQuery

JavaScript是一种弱类型，直译式脚本语言，主要用于向HTML页面添加动态交互行为，它的解释器被称为JavaScript引擎，为浏览器的一部分，Js支持跨平台使用。

JavaScript组成

1.ECMAScript（核心）
规定了该语言的语法和基本对象

2.DOM（文档对象模型）
包含整个Html页面的内容，规定处理网页内容的方法和接口。

3.BOM（浏览器对象模型）
包含整个浏览器相关的内容，规定与浏览器交互的方法和接口。

应用场景
1.读写HTML元素
2.控制Cookies，包括创建和修改等
3.对浏览器事件做出响应
4.检测访客的浏览器信息，对浏览器事件做出响应
5.基于Node.js技术进行服务器端编程

Js基本使用

1.Js引入

可以在标签中，任何地方添加标签，标签中内容就是js代码。
虽然可以放在页面的任何地方，但是规范放在标签中。


  
    

     1.直接引入
     

     2.单独使用一个文件来编写javascript代码,在需要使用的页面中引入该文件 
     


2.带参数和返回值



3.匿名函数
在定义函数的时候，没有定义函数名称
此时，可以把函数当作是一个变量赋值

3.Js构建类

js创建一个类，只需要定义类的构造方法

this关键字
1.在构造方法中：this指新创建的对象
2.在方法中：谁调用this所在的方法，this就是谁
 
    

     
  

4.for in

作用
1.遍历数组里所有的数组元素的索引
2.遍历Js对象的所有属性

    

     
  

补充
eval()：将参数字符串作为一个JavaScript表达式执行。

效果

5.数组

Js中的数组类似于Java中的ArrayList

声明
var arr = [ "数据1", "数据2" ];

/*
 * arr.splice(start, deletecount, items)
 * 从哪个索引开始操作
 * 操作元素的个数
 * 要改变的元素结果
*/


    

     
  

方法	作用
arr.length	获取数组长度
arr.unshift(values);	在前面追加元素
arr.pop();	删除最有一个元素
arr.shift();	移除第一个元素
arr.sort(funct);	数组排序
arr.reverse();	颠倒数据中的元素顺序
arr.join(seperator)	数组转换成字符串
arr.splice(start, deletecount, items)	截取字符串

6.Js原型

原型即得到对象的时，已经有自定义的方法

关键字prototype
Array.prototype.setFunc = function(){
    console.debug("");
}

var arr = [];
//调用
arr.setFunc();

---

BOM，DOM

1.BOM（浏览器对象模型）

浏览器对象模型，包含整个浏览器相关的内容

浏览器对象模型

Window
setTimeout(code,time):指定多少秒后执行
setInterval(code,time):指定每隔多少秒执行一次

clearTimeout(code):清除定时器
clearInterval():清除定时器

弹窗：confirm("确认删除");

2.DOM（文档对象模型）

Document

每个载入浏览器的HTML文档，都会成为Document对象，通过Document对象，可以访问HTML页面中所有的元素。

事件
    onsubmit="写在form标签中，必须有返回值" 
    onload="此事件只能写一次并且放到body标签中" 
    onfocus="获取焦点" 
    onblur="失去焦点" 
    onmouseover="鼠标经过" 
    onmouseout="鼠标离开"
    
获取元素
    document.getElementById("id")

获取元素里面的值
    document.getElementById("id").value

向页面输出
    弹窗：alert();
    向浏览器中写入内容：document.write(内容)；
    向页面指定位置写入内容：innerHTML 

document.forms：获取HTML中所有表单元素
document.forms[0]：通过索引指定获取HTML中指定的表单
document.links：获取HTML中所有链接对象

document.writeln("向页面输出数据");

根据Id or Name获取操作的元素
document.getElementById("user")
document.getElementsByName("user")



  
    

     
  

  
     

         
         
     
  

案例

1.前台校验

当用户输入的数据不符合要求时，不提交表单。

思路
通过onsubmit()事件，控制表单提交。
onsubmit() 需要在定义函数的时候给出一个返回值。
return false时表单不能提交。




  
    

     
  

  
     

         
         
     
  

2.替换图片/轮播

当网页加载完成时，图片开始轮播
页面加载完成事件onload()，此事件只能写一次并且放到body标签中

思路
1.轮播的图片前缀名称相同，仅标识的数字不同
img1，img2...

2.开启定时器，不断调用图片切换方法
window.setInterval(code,time)
参数：开启函数，切换时间，setInterval有返回值，用于清除定时器。


  
    

     
  

  
    
    

    
  

---

Json（JavaScript Object Notation)

JSON是JavaScript原生格式，是一种简单的数据格式，比XML更轻巧，易于阅读和编写，也易于机器解析和生成。

JSON规则

一个对象以"( { "开始，以" }) "结束，()可以省略不写。
对象是一个无序的 " 名称:值 " 集合。
多个" 名称:值 " 之间用" , "分隔。

并列数据的集合，用("[]")表示。
[
    {名称1:值1,名称2:值2}
    
    {名称1:值1,名称2:值2}
]

元素值可具有的类型：string,number,object,array,true,false,null

补充
字符串转换为Json

---

JQuery

JQuery封装了Js常用的功能代码，JQuery的加载比Js的加载要快，是一个快速、简洁的Js框架。

IDEA引入JQuery

在线引入

IDEA补全JQuery

基本语法
JQuery 的入口函数是在 html 所有标签都加载之后，就会去执行。 
Js的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。



  
    

      

      
  

  
    
  

JQuery使用教程

Ajax

Ajax可以使网页实现异步更新，是一种在无需重新加载整个网页的情况下，更新部分网页的技术。

Ajax的基本使用

Ajax使用JQuery的方式

1.Post方式
$.post(url, [data], [callback], [type])
url：请求路径，可以用${pageContext.request.contextPath}获取根路径
data：请求参数 
callback：回调函数 
type：返回内容格式，默认的是text，xml，html，script，json。


2.Get方式
$.get(url, [data], [callback], [type]);

3.$.ajax(url,[settings])
url：请求路径。 
settings：AJAX 请求设置，所有选项都是可选的。

案例

检验用户名是否存在

public class UserBean {

    private String userName;

    public UserBean() {
    }

    public UserBean(String userName) {
        this.userName = userName;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }
}


public class AServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        // 获取用户名参数
        String username = req.getParameter("username");

        // 模拟查询用户
        UserBean user = new UserBean("demo");
        if (!user.getUserName().equals(username)) {
            resp.getWriter().write("用户名可用");
        } else {
            resp.getWriter().write("用户名不可用");
        }
    }
}