JavaScript+jQuery

JavaScript

引入JavaScript

• 内部标签，写在里面

• 外部引入js文件

  <script src="js/javascript.js">
  </script>
  

基本语法

• 严格检查模式：idea须设置为支持ES6语法，在JavaScript第一行加上'use strict'，预防JavaScript的随意性导致产生的一些随意性。局部变量建议都使用let去定义

• 数据类型

  • 定义变量：变量类型（通用var/ let） 变量名 = 变量值

  • 数值：js不区分小数和整数

    • NaN===NaN为false，NaN 属性是代表非数字值的特殊值，与所有的数值都不相等，包括它自己，须使用isNaN（NaN）来判断。
    • 浮点数问题：1/3===(1-2/3)为false，要尽量避免使用。或者使用差的绝对值小于自定义的精确度来判断是否相等

  • 字符串

    • 正常字符串使用单引号或双引号包裹

    • 注意转义字符\

      • \ ' 单引号
      • \ n 换行
      • \ t 制表符
      • \ u#### 中文字符
      • \ x xx Ascll字符

    • 多行字符串编写：用tab上面那个键（英文）符号包裹

      var msg = `helloworld
      				你好
      				xiaozhi`
      

    • 模板字符串

      let name = 'xiaozhi';
      let msg = `你好啊，${name}`;
      alert(msg);
      

    • 长度属性：str.length

    • 字符串的不可变性，如str[0] = 1后不会发生改变

    • 大小写转换：str.toupperCase(),str.toLowerCase()

    • 通过字符获取索引：str.indexOf('s')

    • 字符串截取：

      • str.substring(1) 从下标为1的字符串截取到最后一个
      • str.substring(1,10) 从下标为1的字符串截取到下标为9，即[1,10)

  • 布尔值：true false

    • == 类型不一样，值一样，也会判断为true
    • === 绝对等于，必须类型和值一样才会判断为true（推荐使用）

  • null 空，undefined（如数值下标越界） 未定义

  • 数组：不限制数组内数据类型

    • 长度：arr.length，长度可变

    • 通过元素获取索引：str.indexOf('s'),字符'1'和数字1是不同的

    • 截取：slice(),用法同字符串substring()

    • 压入弹出（可一次性压入多个）

      • push 压入到尾部
      • pop 弹出尾部第一个元素
      • unshift 压入到头部
      • shift 弹出头部第一个元素

    • 排序

      • sort() 正序（如[a,b,c,d]）
      • reverse() 反序

    • arr.concat([1,2,1]) 并没有修改arr数组，只是会返回一个新的数组

    • join 打印拼接数组，使用特定的字符串连接

      let arr = [1,2,3,4,5];
      arr.join('-'); //"1-2-3-4-5"
      

    • 多维数组

      let arr = [[1,2],[3,4],["5","6"]];
      arr[1][1] //4
      

  • 对象：对象是大括号，每个属性之间用逗号隔开，最后一个不用

    var person = {
        name: "xiaozhi",
        age:18,
        tags:['帅气'，'后浪','程序员']
    }
    

    • 取对象值：person.name/person['age']
    • 判断属性或方法(如tostring)是否在对象中：aaa in bbb，判断是否是自身拥有：hasOwnproperty(),tostring为false，age为true

  • Map

    var map = new Map([['a',100],['b',66],['c',76]]);
    var name = map.get('a'); //通过key获得value
    map.set('d',84); //新增或修改
    map.delete('a'); //删除
    

  • Set：无序不重复集合

    var set = new Set([1,2,3,4,5,5,5]);
    set.add(2); //添加
    set.delete(3); //删除
    console.log(set.has(4)); //是否包含某个元素
    

• 流程控制：if、for、while与Java语法一样

  • forEach循环

    var arr = [1,2,3,4,5,6]
    age.forEach(function(value){
        console.log(value);
    })
    

  • for ... in ... (早期版本有漏洞，不推荐使用)

    var arr = [1,2,3,4,5,6]
    for(var num in age){
        //num是索引
        console.log(age[num]);
    }
    

  • for ... of ... （推荐使用）

    var arr = [1,2,3,4,5,6]
    for(let x of arr){
        console.log(X);
    }
    

函数

• 定义方式，以绝对值函数为例

  一旦执行到return，代表函数结束，返回结果；如果没有执行return，函数执行完也会返回结果undefined

  //第一种
  function abs(x){
      if(x>=0){
          return x;
      }else{
          return -x;
      }
  }
  //第二种,匿名函数，可以把结果赋值给abs，通过abs就可以调用函数
  var abd = function(x){
      if(x>=0){
          return x;
      }else{
          return -x;
      }
  }
  

• 参数问题：JavaScript可以传任意个参数，也可以不传参数

  • 假设不存在参数，如何规避

    var abd = function(x){
        //手动抛出异常来判断
        if(typeof x!== 'number'){
            throw 'Not a Number'
        }
        if(x>=0){
            return x;
        }else{
            return -x;
        }
    }
    

  • 多个参数的问题

    • arguments是一个JavaScript免费赠送的关键字，代表传递进来的所有参数，是一个数组

      var abd = function(x){
          console.log("x=>"+x);
          for(var i = 0;i < arguments.length;i++){
              console.log(arguments[i]);
          }
          if(x>=0){
              return x;
          }else{
              return -x;
          }
      }
      

    • rest：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，排除已有的参数

      rest参数只能写在最后，必须使用...标识

      function aaa(a,b,...rest){
          console.log("a=>"+a);
          console.log("b=>"+b);
          console.log(rest);
      }
      

• 变量的作用域

  • 在JavaScript中，var定义变量是有作用域的。

    • 假设在函数体中声明，则在函数体外不可使用（闭包可实现）
    • 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
    • 内部函数可以访问外部函数的成员，反之则不行
    • 函数查找变量是从自身函数开始，由内向外查找，即采用就近原则
    • 默认规范：所有变量定义都放在函数头部，便于代码维护。

  • 全局对象window，默认所有全局变量都会自动绑定在window对象下，alert()函数本身也是一个window变量

    var x=10;
    alert(x);
    alert(window.x);
    
    var old_alert = window.alert; //old_alert(x)也可以弹出
    window.alert = function(){}; //此时alert()失效了
    window.alert = old_alert； //恢复
    

  • 全局变量：由于所有的全局变量都会绑定在window上，如果不同的js文件，使用了相同的全局变量，如何减少冲突?把自己代码全部放入自己定义的为一空间名字中，降低全局命名冲突的问题

    //为一全局变量
    var jsApp = {};
    
    //定义全局变量
    jsApp.name = 'xiaozhi';
    jsApp.add = function(a,b){
        return a + b;
    }
    

  • 局部作用域let：解决局部作用域冲突的问题，推荐使用。

  • 常量const：值不可变

• 方法：方法就是把函数放在对象里面，对象只有两个东西：属性和方法

  var xiaozhi = {
      name:'xiaozhi',
      birth:1998,
      age:function(){
          var Now = new Date().getFullYear();
          return Now - this.birth;
      }
  }
  //调用属性：user.name
  //调用方法：user.age
  

  • this：默认指向调用它的那个对象，apply：方法重用

    function getAge(){
        var Now = new Date().getFullYear();
        return Now - this.birth;
    }
    var user = {
        name:'xioazhi',
        birth:1998,
        age:getAge
    }
    //xiaozhi.age() 可以正常使用
    //getAge() 指向的是window，会报错
    //getAge().apply(user,[]); //user，参数为空
    

内部对象

• 标准对象：number（数值，NaN）,string（字符串）,boolean（布尔值）,object（{},[]）,function（Math.abs）,undefined（undefined）

• Date

  var Now = new Date(); //中国标准时间
  Now.getFullYear();//年
  Now.getFullMonth();//月 0~11
  Now.getFullDate();//日
  Now.getFullDay();//星期几
  Now.getFullHours();//时
  Now.getFullMinutes();//秒
  Now.getFullSeconds();//分
  Now.getTime(); //时间戳，全球统一
  Now.toLocaleString() //"2021/2/4 上午12:46:54"
  

• JSON

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

  • 在JavaScript里面一切皆为对象，任何js支持的类型都可以用JSON表示

    • 对象都用{}

    • 数组都用[]

    • 所有键值对都用key:value

      var user = {
          name:'xiaozhi',
          birth:1998,
          age:18
      }
      //对象转json字符串
      var jsonUser = JSON.stringify(user);
      //json字符串转对象
      var user = JSON.parse('{"name":"xiaozhi","birth":18,"age":18}');
      

• Ajax:异步请求

原型

在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。

var student = {
    name:'xaiozhi',
    age:18,
    run:function(){
        console.log(this.name + "run...");
    }
};

var xiaoming = {
    name:'xiaoming'
}
//_proto_:这是每个对象(除null外)都会有的属性，这个属性会指向该对象的原型。
//设置xiaoming原型为student，有相同属性则修改，没有则继承
xiaoming._proto_ = student;
console.log(xiaoming); //name:xiaoming,age:18,run...

//给student新增一个方法
student.prototype.hello = function(){
    console.log('hello');
}
//原型链：bject.prototype._proto_的值为null跟 Object.prototype 没有原型，所以查找属性的时候查到 Object.prototype 就可以停止查找了。

class继承

语法与Java继承类似，本质还是查看对象原型。

操作BOM对象

• window：代表浏览器窗口

• Navigate：封装了浏览器的信息（不建议使用这些属性）

• screen：代表屏幕尺寸

• location：代表当前页面的URL信息

  host: "www.baidu.com"
  href: "https://www.baidu.com/"
  protocol: "https:" //协议
  reload:reload() //刷新
  location.assign('www.kuangstudy.com') //设置新的地址
  

• document：代表当前页面

  document.cookie //获取cookie
  

• history：代表浏览器的历史（不建议使用）

  history.back() //后退
  history.forward() //前进
  

操作DOM对象

• 核心：浏览器网页就是一个DOM树形结构。

• 获取节点（推荐使用JQuery）

  <div id="father">
      <h1>标题一</h1>
  	<p id="p1">p1</p>
  	<p name="p2">p2</p>
  </div>
  <script>
      var father = document.getElementById('father');
  	var children = father.children; //获取父节点下的所有子节点	
  	var h1 = document.getElementsByTagName('h1'); //根据标签类型获取，结果是数组
  	var p1 = document.getElementById('p1'); //根据id获取
  	var p2 = document.getElementsByName('p2'); //根据name获取，结果是数组
  </script>
  

• 更新节点

  p1.innerText='标题二'; //修改内容
  p1.innerHTML='<strong>标题三</strong>'; //可以解析HTML文本标签
  p1.style.color='red'; //修改样式，属性使用字符串包裹
  

• 删除节点：先获取父节点，再通过父节点删除自己。删除多个节点时，children是时刻变化的。

  var father = p1.parentElement;
  father.removeChild(p1);
  

• 插入节点：我们获得了某个节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，如果不为空则会覆盖原来的元素，应采用追加的方式

  <p id="p3">p3</p>
  <div id="father">
      <h1>标题一</h1>
  	<p id="p1">p1</p>
  	<p name="p2">p2</p>
  </div>
  <script>
      //追加已有元素
      var p3 = document.getElementById('p3');
  	var father = document.getElementById('father');
  	father.appendChild(p3);
      //创建一个新的节点添加
      var newP = document.createElement('p'); //p标签
  	newP.id = 'newP';
  	newP.innerText = 'newP';
      father.appendChild(newP);
      //创建一个标签节点（通过这个属性，可以设置任意的值）
      var newScript = document.createElement('script');
  	newScript.setAttribute('type','text/javascript');
  	father.appendChild(newScript);
  </script>
  

操作表单

• 基础操作

<form action="" method="">
    <input type="text" id="username"><br/>
	<input type="radio" name="sex" id="boy" value="boy">男
	<input type="radio" name="sex" id="girl" value="girl">女
</form>

<script>
    var username = document.getElementById('username');
	username.value = 'xiaozhi'; //赋值
	var boy = document.getElementById('boy');
	boy.checked = true; //选中
</script>

• MD5加密及表单验证

  <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script> //引入MD5js
  <form action="https://www.baidu.com" method="post" onsubmit="return a()">
  	<input type="password" name="pwd" id="pwd"><br/>
  	<button type="submit">提交</button>
  </form>
  <script>
      var pwd = document.getElementById('pwd');
  	function a(){
          if(pwd.value === ""){ // 验证密码不能为空
              alert('密码不能为空');
  			return false;
          }else{
              pwd.vaule = md5(pwd.vaule); //md5加密
  			alert(pwd.vaule);
  			return true;
          }
      }
  

jQuery

• jQuery库，里面存在大量的JavaScript的函数，API中文文档：https://jquery.cuishifeng.cn/

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> //引入jQuery.js
  

• 基础语法：$(selector).action()

• jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});

//简介写法
$(function(){
   // 开始写 jQuery 代码...
});

• JavaScript入口函数window.onload = function(){}与jQuery 入口函数的区别：

  • 执行时间：onload必须等待网页全部加载完才执行，ready只需DOM结构加载完毕
  • 执行次数：onload只能执行一次，多个只有写在最后的生效，ready可以执行多次

• 选择器,与CSS选择器相同，‘：’可以理解为种类的意思，如：p:first，p 的种类为第一个。‘[] ’可以理解为属性的意思，如：[href] 选取带有 href 属性的元素。

  • $('p').click() 标签选择器
  • $('#btn').click() id选择器
  • $('.p1').click() 类选择器
  • $("*") 选取所有元素
  • $(this) 选取当前 HTML 元素
  • $("p.intro") 选取 class 为 intro 的p标签元素
  • $("p:first") 选取第一个p标签元素
  • $("ul li:first") 选取第一个ul标签元素的第一个li标签元素
  • $("ul li:first-child") 选取每个ul标签元素的第一个li标签元素
  • $("[href]") 选取带有 href 属性的元素
  • $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的a标签元素
  • $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的a标签元素
  • $(":button") 选取所有type="button"的input标签元素和buttona标签元素,$("button")只能获取buttona标签元素
  • $("tr:even") 选取偶数位置的 元素
  • $("tr:odd") 选取奇数位置的 元素
  • $("#id", ".class") 复合选择器
  • $("#mytable td:odd") 层级选择 加 过滤选择器 奇偶（odd 或者 even）
  • $("div p:eq(2)") 索引选择器 div下的第三个p元素（索引是从0开始）
  • $("a[href='www.baidu.com']") 属性选择器
  • $("p:contains(test)") 内容过滤选择器，包含test内容的p元素
  • $(":emtyp") 内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
  • $(":hidden") 所有隐藏元素 visible
  • $("input:enabled") 选取所有启用的表单元素
  • $(":disabled") 所有不可用的元素
  • $("input:checked") 获取所有选中的复选框单选按钮等
  • $("select option:selected") 获取选中的选项元素

• 事件

  • 鼠标事件

    • click(); 单次点击元素
    • dblclick() 双击元素
    • mouseenter() 当鼠标指针穿过元素时
    • mouseleave() 当鼠标指针离开元素时
    • mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时
    • mouseup() 当在元素上松开鼠标按钮时
    • hover() 方法用于模拟光标悬停事件
    • focus() 当元素获得焦点时
    • blur() 当元素失去焦点时

  • 键盘

    • keydown() 按下未释放，在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
    • keyup() 释放
    • keydown() 键按下并释放

    <script>	
    $(document).ready(function(){
      $("input").keypress(function(event){
    	//event.which是获取ASCII码
    	alert(event.which);
    	//转换成字符
    	alert(String.fromCharCode(event.which));
    	//从event对象中key属性获取字符
        alert(event.key);
    	});
    });
    </script>
    

  • 表单

    • submit() 提交表单
    • change() 当元素的值改变时，当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

  • 文档/窗口事件

    • resize() 当调整浏览器窗口大小时
    • scroll 当用户滚动指定的元素时

• jQuery效果

  • hide()隐藏
  • show()显示
  • toggle()切换

• jQuery链，下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

  $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  //或者
  $("#p1").css("color","red")
    .slideUp(2000)
    .slideDown(2000);
  

• 捕获

  • text() 设置或返回所选元素的文本内容
  • html() 设置或返回所选元素的内容（包括 HTML 标记）
  • val() 设置或返回表单字段的值
  • attr() prop () 获取属性，对于 HTML 元素本身就带有的固有属性，如 href、target、id 和 class在处理时，使用 prop 方法,没有相应的属性，返回值是空字符串。对于 HTML 元素我们自己自定义的 DOM 属性，如a标签里action属性，在处理时，使用 attr 方法,如果没有相应的属性，返回值是 undefined。

• 设置

  • 通过 text()、html() 、val() 、attr()方法来设置内容

  $("#btn1").click(function(){
      $("#test1").text("Hello World!");
  });
  
  $("button").click(function(){
      $("#runoob").attr({
          "href" : "http://www.baidu.com",
          "title" : "百度"
      });
  });
  

  • 通过回调函数

  $("#btn1").click(function(){
      $("#test1").text(function(i,origText){
          return "旧文本: " + origText + " 新文本: Hello World! (index: " + i + ")"; 
      });
  });
  
  $("button").click(function(){
    $("#runoob").attr("href", function(i,origValue){
      return origValue + "/jquery"; 
    });
  });
  

• 添加元素

  • append() 在被选元素的结尾插入内容
  • prepend() 在被选元素的开头插入内容
  • after() 在被选元素之后插入内容
  • before() 在被选元素之前插入内容

  function appendText(){
      var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本
      var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
      var txt3=document.createElement("p");
      txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
      $("body").append(txt1,txt2,txt3);        // 追加新元素
  }
  

• 删除元素

  • remove() 删除被选元素（及其子元素），remove() 方法也可接受一个参数，允许您对被删元素进行过滤，过滤器中条件只能作用于同级，不能作用于子元素。。
  • empty() 从被选元素中删除子元素

• 操作CSS

  • addClass() 向被选元素添加一个或多个类
  • removeClass() 从被选元素删除一个或多个类
  • toggleClass() 对被选元素进行添加/删除类的切换操作
  • css() 设置或返回样式属性

  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
  });
  

• CSS方法

  • css() 返回CSS属性

  $("p").css("background-color");//返回背景颜色
  

  • 设置多个 CSS 属性

  $("p").css({"background-color":"yellow","font-size":"200%"});
  

• jQuery 尺寸

  • width() 设置或返回元素的宽度（不包括内边距、边框或外边距）
  • height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
  • innerWidth() 方法返回元素的宽度（包括内边距）
  • innerHeight() 方法返回元素的高度（包括内边距）
  • outerWidth() 方法返回元素的宽度（包括内边距和边框）
  • outerHeight() 方法返回元素的高度（包括内边距和边框）

• 遍历

  • parent() 返回被选元素的直接父元素，只会向上一级对 DOM 树进行遍历
  • parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
  • parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素

  //返回介于 <span> 与 <div> 元素之间的所有祖先元素
  $(document).ready(function(){
    $("span").parentsUntil("div");
  });
  

  • children() 方法返回被选元素的所有直接子元素，只会向下一级对 DOM 树进行遍历
  • find() 返回被选元素的后代元素，一路向下直到最后一个后代，可加过滤参数

  //返回属于 <div> 后代的所有 <span> 元素
  $(document).ready(function(){
    $("div").find("*");
  });
  //返回 <div> 的所有后代
  $(document).ready(function(){
    $("div").find("*");
  });
  

  • siblings()返回被选元素的所有同胞元素
  • next()返回被选元素的下一个同胞元素，prev()则相反
  • nextAll()返回被选元素的所有跟随的同胞元素,即后面的元素，prevAll()则相反
  • nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素，prevUntil()则相反

• 过滤

  • 最基本的过滤方法是：first(), last() 和 eq()
  • filter() 返回匹配的元素，not() 则相反，not 和 eq 可以实现反选的效果。

  $("p").filter(".url").css("background-color","yellow");//等同于
  $("p.url").css("background-color","yellow"); 
  
  $("p").first().css("background-color","yellow");//等同于
  $("p:first").ss("background-color","yellow");
  
  $("p").not(".url");//等同于
  $("p:not(.url)");
  

• AJAX

  • load()
    • 语法：$(selector).load(URL,data,callback);
    • 必需的 URL 参数规定您希望加载的 URL
    • 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合
    • 可选的 callback 参数是 load() 方法完成后所执行的函数名称。

  $("button").click(function(){
    $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
  

  • $.get()
  • 语法：$.get(URL,callback);

  $("button").click(function(){
    $.get("demo_test.PHP",function(data,status){
      alert("数据: " + data + "\n状态: " + status);
    });
  });
  

  • $.post()
    • 语法：$.post(URL,data,callback);

  $("button").click(function(){
      $.post("/try/ajax/demo_test_post.PHP",
      {
          name:"菜鸟教程",
          url:"http://www.runoob.com"
      },
      function(data,status){
          alert("数据: \n" + data + "\n状态: " + status);
      });
  });
  

  • ajax() 用于执行 AJAX（异步 HTTP）请求
    • 语法：$.ajax({name:value, name:value, ... })
    • async 布尔值，表示请求是否异步处理。默认是 true。
    • beforeSend(xhr) 发送请求前运行的函数。
    • cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。
    • complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
    • contentType 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
    • context 为所有 AJAX 相关的回调函数规定 "this" 值。
    • data 规定要发送到服务器的数据。
    • dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
    • dataType 预期的服务器响应的数据类型。
    • error(xhr,status,error) 如果请求失败要运行的函数。
    • global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
    • ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
    • jsonp 在一个 jsonp 中重写回调函数的字符串。
    • jsonpCallback 在一个 jsonp 中规定回调函数的名称。
    • password 规定在 HTTP 访问认证请求中使用的密码。
    • processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
    • scriptCharset 规定请求的字符集。
    • success(result,status,xhr) 当请求成功时运行的函数。
    • timeout 设置本地的请求超时时间（以毫秒计）。
    • Traditional 布尔值，规定是否使用参数序列化的传统样式。
    • type 规定请求的类型（GET 或 POST）。
    • url 规定发送请求的 URL。默认是当前页面。
    • username 规定在 HTTP 访问认证请求中使用的用户名。
    • xhr 用于创建 XMLHttpRequest 对象的函数。

  $("button").click(function(){
      $.ajax({url:"demo_test.txt",success:function(result){
          $("#div1").html(result);
      }});
  });