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引入
可以在<html>标签中，任何地方添加<script></script>标签，标签中内容就是js代码。
虽然可以放在页面的任何地方，但是规范放在<head>标签中。

<html>
  <head>
    <title>Demo</title>

     1.直接引入
     <script type="text/javascript">
        alert("Demo")
     </script>

     2.单独使用一个文件来编写javascript代码,在需要使用的页面中引入该文件 
     <script src="demo.js" type="text/javascript"/>
  </head>

  <body>
     3.把代码编写放置在a标签的href属性中,点击a标签的时候,就执行里面代码
     <a href="javascript:alert('测试')">点击</a>
  </body>
</html>
2.Js基本语法
1.变量和常常量
Js区分大小写，弱类型。
每行结尾的分号可有可无，但是建议都写。

1.变量声明的关键字：var
var userName;
Js定义变量无需指定类型，任何类型都使用var声明，var类似java中的Object类型。

变量打印
alert(内容);
console.debug(内容)


2.Js的基本数据类型和常量
整型常量：10进制，8进制，16进制
实型常量：12.32，5E7，4e5
Boolean：true，false

String字符串
注意：Js没用char类型，所以'a'也是一个字符串
字符串中的特殊字符，需要以反斜杠(\)后跟一个普通字符来表示。

null：表示引用任何的内容空间
undefined：未定义，定义未赋值

3.Js运算符和Java相同

注意
= ：赋值
== ：用来比较变量或常量的内容，不管数据类型
===：比较数据类型和内容，若数据类型相同，且内容相同返回true
2.函数定义
4.函数定义
函数调用时才会执行，将脚本编写为函数，就可以避免页面载入时执行该脚本。

1.定义函数
<script type="text/javascript">
    function demo(){
        console.debug("打印到控制台");
    }

    demo(); //调用
</script>


2.带参数和返回值
<script type="text/javascript">
    function demo(a, b) {
        return a + b;
    }

    var res = demo(1, 1);
    console.debug(res);
</script>


3.匿名函数
在定义函数的时候，没有定义函数名称
此时，可以把函数当作是一个变量赋值
<script type="text/javascript">
    var res = function (a, b) {
        return a + b;
    }

    console.debug(res(1,1));
</script>
3.Js构建类
js创建一个类，只需要定义类的构造方法

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

     <script type="text/javascript">
         function User() {
            this.name;
            this.age;
            this.info = function () {
                console.debug(this.name+"："+this.age);
            }
         }

         var user = new User();
         user.name = "演示";
         user.age = 18;
         user.info();
     </script>
  </head>
4.for in
作用
1.遍历数组里所有的数组元素的索引
2.遍历Js对象的所有属性
<head>
    <title>Demo</title>

     <script type="text/javascript">
         function User() {
            this.name = "演示";
            this.age = 18;
            this.info = function () {
                printf(this.name+"："+this.age);
            }
         }

         function printf(p) {
             console.debug(p);
         }

         var user = new User();
         for (var item in user){
             printf("打印属性名："+ item);
             printf("打印属性值："+ user[item])
         }
     </script>
  </head>

补充
eval()：将参数字符串作为一个JavaScript表达式执行。
效果
5.数组
Js中的数组类似于Java中的ArrayList

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

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

<head>
    <title>Demo</title>

     <script type="text/javascript">
         var arr = ["data1","data2"];
         arr.splice(1,1); //删除元素
         arr.splice(1,2,"添加元素");
         arr.splice(0,1,"修改元素");

        for(var item in arr){
            console.debug(arr[item])
        }
     </script>
  </head>
方法 作用
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")

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>

     <script type="text/javascript">

         //当文档加载完后，执行
         window.onload = function (){
             console.debug(document.forms[0]);
             console.debug(document.forms);
             console.debug(document.links)

         }

         function getContent() {
             var userName = document.getElementById("user").value;
             console.debug("获取内容：" + userName);
         }
     </script>
  </head>

  <body>
     <form action="#" method="get">
         <input type="text" id="user" name="name" placeholder="用户名" >
         <input type="button" onclick="getContent()" value="获取">
     </form>
  </body>
</html>
案例
1.前台校验
当用户输入的数据不符合要求时，不提交表单。

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


<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>

     <script type="text/javascript">

         function checkInfo() {
             var userName = document.getElementById("user").value;
             if(userName != "demo"){
                 alert("请输入demo");
                 return false;
             }
         }
     </script>
  </head>

  <body>
     <form action="#" method="get" onsubmit="checkInfo()">
         <input type="text" id="user" name="name" placeholder="用户名">
         <input type="submit" value="提交">
     </form>
  </body>
</html>
2.替换图片/轮播
当网页加载完成时，图片开始轮播
页面加载完成事件onload()，此事件只能写一次并且放到body标签中

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

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

<html>
  <head>
    <title>Demo</title>

     <script type="text/javascript">
         var i = 1;
         function toggleImg() {
             i++;
             if(i == 4){
                 i = 1;
             }
             document.getElementById("img").src="img/img"+ i +".jpg";
         }

         //页面加载后调用
         function init() {
             //定时器
             var code = window.setInterval("toggleImg()",2000);
             // window.clearInterval(code);
         }
     </script>
  </head>

  <body onload="init()">
    <img id="img" src="img/img1.jpg">
    <br/>
    <input type="button" onclick="toggleImg()" value="下一张">
  </body>
</html>

Json（JavaScript Object Notation)

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

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

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

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

 <head>
    <title>Demo</title>

     <script type="text/javascript">

         var user = [
             {
                 name:"user1",
                 age:18,
                 hobby:["Java","Android"],
                 data:{
                     other:"Other"
                 }
             },
             {
                 name:"user2",
                 age:18,
                 hobby:["Web","C"],
                 data:{
                     other:"Other"
                 }
             }
         ]

         console.debug(user[0].hobby[1])
         console.debug(user[1].data.other)
     </script>
  </head>

补充
字符串转换为Json
<script type="text/javascript">

         var str = "({name:'demo',age:18})"
         var user = eval(str);
         console.debug(user);
</script>

JQuery

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

IDEA引入JQuery
在线引入
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
IDEA补全JQuery
基本语法
JQuery 的入口函数是在 html 所有标签都加载之后，就会去执行。 
Js的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>

      <script src="https://code.jquery.com/jquery-3.1.1.min.js"
              type="text/javascript">
      </script>

      <script>
          $(function () {
              //相当于document.getElementById("btn")
              $("#btn").click(function () {
                  alert("demo")
              })
          })
      </script>
  </head>

  <body>
    <input id="btn" type="button" value="Demo">
  </body>
</html>
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 请求设置，所有选项都是可选的。

<script type="text/javascript">
    function demo(){
        $.ajax({
                url:"/demo", //url地址
                async:true,  //是否异步
                type:"POST", //请求方式
                data:{"name":"张三","age":25},//请求参数
                
                success:function(data){ //响应成功后的回调
                    alert(data.name);
                },
                error:function(){  //响应失败后的回调
                    alert("请求失败");
                },
                dataType:"json" //返回数据的类型，确定是Json还是文本(text)
        });
    }
</script>
案例

检验用户名是否存在

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>

      <script src="https://code.jquery.com/jquery-3.1.1.min.js"
              type="text/javascript">
      </script>

      <script>
          function checkUserName() {
              $.get(
                  "/a",
                  {username: $("#username").val()},
                  function (data) {
                      $("#label").html(data);
                  },
                  "text"
              );
          }
      </script>

  </head>

  <body>
    <input id="username" type="text" name="username"
           placeholder="用户名">
    <input type="button" value="提交" onclick="checkUserName()">
    <br/>
    <label id="label"></label>

  </body>
</html>

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("用户名不可用");
        }
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,830评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,992评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,875评论 0赞 331
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,837评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,734评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,091评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,550评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,217评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,368评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,027评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,623评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2赞 341

推荐阅读更多精彩内容