JS JavaScript 脚步语言

最新推荐文章于 2022-09-14 17:51:26 发布

uh239

最新推荐文章于 2022-09-14 17:51:26 发布

阅读量618

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_66387650/article/details/125163771

版权

本文介绍了JavaScript作为网络脚本语言的重要地位，强调了其在DOM操作和BOM管理中的作用，以及ECMAScript的核心构成。同时，文章探讨了jQuery库在简化DOM操作和事件处理上的优势，并详细讲解了JSON在JavaScript中的转换方法。最后，文章提到了AJAX在不刷新页面情况下实现数据交互的关键作用，以及如何处理服务器响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js简介

最优秀的网络脚本语言，能完成dom、窗体、导航的操作，能和服务器进行数据交互，能进行事件的处理

javascript由ECMAScript、DOM、BOM三部分组成

ECMAScript是核心语法、词法、、关键字、数据类型、运算符、语句、方法、对象

DOM是文档对象模型，支持对html元素节点的解析和处理

BOM是浏览器对象模型，支持对浏览器窗体、导航、history、屏幕属性、url等的数据信息的管理和操作。

js语法特点：
1、严格区分大小写 x 不同于大写的X
2、关键字： void break contiue while with for try catch in return var
3、保留字 public private abstract boolean int float double long enum ...
4、标识符规则
字母 | _ | $ | 数字
不能以数字开头
不能和关键字，保留字冲突
5、若类型语言
var 变量名;
6、分号可用做语句的分割
7、可以使用注释单行和多行
8、代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 语法</title>
</head>
<body>
      <h3>js--javascript  ECMA-262标准语法的实现</h3>

       <dd>
           <dt>js简介</dt>
           <dd>
               最优秀的网络基于对象的脚本语言，能完成dom、窗体、导航的操作，能和服务器进行数据交互，能进行事件的处理
           </dd>
           <dd>javascript由ECMAScript、DOM、BOM三部分组成</dd>
           <dd>ECMAScript是核心语法、词法、标识符、关键字、数据类型、运算符、语句、方法、对象</dd>
           <dd>DOM是文档对象模型，支持对html元素节点的解析和处理</dd>
           <dd>BOM是浏览器对象模型，支持对浏览器窗体、导航、history、屏幕属性、url等的数据信息的管理和操作</dd>
       </dd>

        <h3>ECMAScript js核心学习</h3>

         <h4>js的使用：在html中使用js</h4>

         <p>在html的head或body或最下面都可以使用script标签来引入对js脚本语言的使用</p>

</body>
</html>
<script>
    /**
     *  js语法特点
     *    1、严格区分大小写 x 不同于大写的X
     *
     *    2、关键字： void break contiue while with for try catch in return var...
     *
     *    3、保留字 public private abstract boolean int float double long enum ...
     *
     *    4、标识符规则
     *        字母 | _ | $ | 数字
     *        不能以数字开头
     *        不能和关键字，保留字冲突
     *    5、弱类型语言
     *       var es6（let const） 变量名;
     *       如果不用var定义变量，则变量为js的全局变量
     *    6、分号可用做语句的分割
     *
     *    7、可以使用注释 单行和多行
     *    8、代码块
     *
     *
     * 数据类型（原始数据类型+引用数据类型）：
     *  5种原始类型: undefined(undefined) null(null) number(number) string(string) boolean(boolean--true|false)
     *      原生类型的变量或值可以使用typeof 变量 判断其类型，判断的结果为对应类型的字面量值
     *      typeof 变量  --->返回变量的类型字符串，如下
     *       undefined --- undefined 类型
     *       number --- number类型
     *       string --- string类型
     *       boolean --- boolean类型
     *       funciton--- function类型
     *       object --- 引用类型或Null类型
     *
     *  引用数据类型：也称为对象object类型 Date Array Object Function Window ...
     *      引用变量 instanceof 引用类型 --- 在typeof类型运算符为object情况下，可以进一步使用instanceof来确定变量的引用类型
     *
     *   null和undefined的区别：
     *    1)null代表没有值，undefined代表不存在的值。
     *    2)null分配内存空间，undefined不分配内存空间。
     *    3)null可以参与运算，undefined无法参与运算。 Null参与运算时会根据运算符进行初始化，例如1+null = 1.

     *  数据类型的转换：
     *    1. 通过全局转换方法
     *       将字符串string参数按从左向右的取有效的数字结果
     *       parseInt(string,radix):
     *       parseFloat(string,radix)：
     *       将数字转换为字符串(Object)
     *       toString()
     *       valueOf()
     *    Boolean(null)
     *
     *  运算符：同java
     *
     *
     *  数组：
     *   定义方式
     *     var  arr = new Array();
     *       arr = new Array(43,5,9,10);
     *       arr= [5,3,9,30];
     *   数组api的使用
     *     删除第一个元素：arr.shift()
     *     删除最后一个元素：arr.pop()
     *     删除指定区间[start,end)的元素：arr.slice(start,end)
     *     添加一个元素到尾部：arr.push(e)
     *     排序数组中的元素：arr.sort()
     *     过滤数组中的元素得到新的数组结果：arr.filter(fn)
     *     对数组中的每个元素进行匹配得到布尔结果：arr.map(fn)
     *
     *   方法：
     *
     *      function 方法名([参数列表]){
     *
     *           方法体
     *      }
     *
     *
     *   对象：
     *     json对象：
     *      var Obj = {name:'zhangsan',age:23,sex:'男'}
     *     js方法原型混合型对象
     *      function 对象名称([参数列表]){
     *          属性初始化
     *          方法原型化
     *      }
     *
     *   js常见的内置对象
     *    window
     *    String
     *    Math
     *    Date
     *    Array
     *    RegExp
     *
     *
     *
     */
    console.log("===============数据类型及类型的转换================");
     var x, y = 2,z=null;
      var a = 3.5;
      var sval = typeof a;
      console.log("sval =" + sval);
       a = 'ab';
       var sval = typeof a;
       console.log("sval =" + sval);
      var str = 'hello';
          str = "wold";
      console.log(x);
      console.log(z);
      console.log("str ="+str);

       y = "12.3abc35";
       y = parseInt(y);
       console.log("y ="+y+(typeof y));

       y="1.25.0ab";
       y = parseFloat(y);
       console.log("y =" + y);
       a = 5;
      // alert(typeof a.toString());
      console.log("===============运算符================");
      document.write("a ="+(++a)+"<br />");

      console.log("===============语句符================");
      x = 0;
      if(x){ // 在js中 if条件中的表达式如果值为undefined | null | 0 | '' "" 则为false
          console.log("x还没有完成初始化赋值");
      }else{
          console.log("x="+x);
      }

    /*  x = prompt("请录入一个数字：(0-6)",'');
    console.log(x+"--"+typeof x);
    switch (parseInt(x)) {
          case 0:
              document.write("星期日");
              break;
          case 1:
              document.write("星期一");
              break;
          case 2:
              document.write("星期二");
              break;
          case 3:
              document.write("星期三");
              break;
          case 4:
              document.write("星期四");
              break;
          case 5:
              document.write("星期五");
              break;
          case 6:
              document.write("星期六");
              break;
      }

     var h = prompt("请输入一个数字：",'') ;

    for (var i = 0; i <parseInt(h) ; i++) { // for循环次数
        for(z=0;z<i;z++){
            document.write("&nbsp;");
        }
        for(j=0;j<5-2*i;j++){
            document.write("*");
        }
        document.write("<br/>");
    }

    var obj = {name:'zhansan',age:23,addr:"武汉"}
    for( key in obj){ // for in 用于遍历对象
        console.log(key + "::" + obj[key]);
    }
 */
    console.log("===============数组================");

    var arr = new Array();
       arr = new Array(4,5,9,10,2);
       arr = [4,5,9,10,2];
      console.log("0下标对应的元素："+arr[0]);
      arr.push(6);
      console.log(arr.toString());

      var ival = arr.shift();
      console.log("ival=" + ival);
      console.log(arr.valueOf());

     var farr = arr.filter(function (value) {
           return value > 6;
      })
    console.log("数组arr中值大于6的新的数组："+farr.valueOf());

    farr =  arr.map(function (value) {
         return value > 6
     })
    console.log(farr);

    console.log("===============方法================");

     function qiuHe(a,b) {
         return a+b;
     }

     var he = qiuHe(4,5);
    console.log("he ="+he);

    function dateFormat(fmt, date) {
        var ret;
        var opt = {
            "y+": date.getFullYear().toString(),     // 年
            "M+": (date.getMonth() + 1).toString(),  // 月
            "d+": date.getDate().toString(),         // 日
            "H+": date.getHours().toString(),        // 时
            "m+": date.getMinutes().toString(),      // 分
            "s+": date.getSeconds().toString()       // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (var k in opt) {
            // ret = new RegExp("(" + k + ")").exec(fmt);
            ret = new RegExp(k).exec(fmt);
            console.log(ret); /* ['yyyy', index: 0, input: 'yyyy-MM-dd HH:mm:ss', groups: undefined] | ['MM', index: 5, input: '2022-MM-dd HH:mm:ss', groups: undefined] */
            if (ret) {
                // fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                // fmt = fmt.replace(ret[0], (ret[0].length == 1) ? (opt[k]) : (opt[k].padStart(ret[0].length, "0")))
                fmt = fmt.replace(ret[0], (opt[k].padStart(ret[0].length, "0")))
            };
        };
        return fmt;
    }

    console.log("===============对象================");

    var obj = {name:'张三',age:23,sex:"男",score:80,study:function(){console.log("好好学习！")}}

     for(key in obj){
         console.log(obj.name+"::"+obj['age']);
     }

    obj.study();

    /**
     *  prototype : 表示js中对象的原型数据（添加为固有的数据），通过次标识可以提高对象中数据的有效性能
     * @param name
     * @param legs
     * @param color
     * @constructor
     */

    function Car(name,legs,color) {
        this.name = name;
        this.legs = legs;
        this.color = color;
        if(typeof Car._initial === 'undefined'){
            Car.prototype.showInf = function(){
               console.log("Car[name="+name+",legs="+legs+",color="+color+"]");
         }
        }
    }

    var car1 = new Car("BYD",4,"Golden");
    var car2 = new Car("BMW",8,"Grey");
    car1.showInf();
    car2.showInf();

    var now = new Date();
    console.log(now)
    console.log(dateFormat("yyyy-MM-dd HH:mm:ss", new Date()));

    console.log(Math.random());
    console.log(Math.random().toFixed(2))

    var reg = /\\d+/g; // new RegExp("d+")
    var str = "a123";
    var res = reg.test(str);
    console.log("res=" + res);





</script>

js-dom操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js_dom 学习</title>

</head>
<body>
         <h3>这是标题标签</h3>
         <div id="div0"></div>
         <div class="div1"></div>
         <div class="div2">
             <table>
                 <tr><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th></tr>

             </table>
         </div>
         <div class="div3"></div>


</body>
</html>
<script>

    /**
     *  js操作dom元素对象内容
     */


    var div0Ele = document.getElementById("div0");

     div0Ele.innerText = "这是一个div0";

    var div1Ele = document.getElementsByClassName("div1")[0].innerHTML = "<p><font color='red'>这是一个div1</font></p>"

    var users = [{name:'张三',age:23,sex:"男",score:80},{name:'李四',age:24,sex:"男",score:80},{name:'王五',age:25,sex:"男",score:80}];

    //动态显示在表格
    var tabEle = document.getElementsByTagName("table")[0];

    // tabEle.rows[0].innerHTML = "<tr><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th></tr>";
 //往表格中插入数据
    for (var i = 0; i < users.length; i++) {
        var trEle = document.createElement("tr");
        var user = users[i];
        trEle.innerHTML = "<td>"+user.name+"</td><td>"+user.age+"</td><td>"+user.sex+"</td><td>"+user.score+"</td>";
        tabEle.appendChild(trEle);
    }



    /**
     *  js操作css样式
     */
    tabEle.style.backgroundColor="yellow";
    tabEle.style="background-color:red;width:border:3px solid blue"


    /**
     * 
     * js操作元素节点和属性
     */


    var divEle = document.getElementsByClassName("div3");
    //创建一个p元素节点
    var html = document.createElement("p");//<p></p>
    var text = document.createTextNode("这是一个p元素标签");
    html.appendChild(text);//<p>这是一个p元素标签</p>
    //p标签中加入属性
    html.setAttribute("align","center" );
    //跳转的地址
    window.location.href="kb1.app";
    
    //每隔一秒写上时间
    window.setInterval(function (){
        document.write(dateFormat(yyyy-MM-dd HH:mm:ss:SSS))
    },1000)

JQuery

Jquery的作用和意义：

1、write less,do more，写更少代码，做更多的事情

2、是js的封装库轻量级框架

3、能对DOM进行更便捷的操作（元素、内容、样式），更优雅的函数库封装，对事件更灵活的处理方式，对数据的处理更为方便。

Jquery的HelloWorld：

jqurery的文档加载完成事件

$(document).ready(function() {
alert('hellowworld');
});

  JQuery的使用步骤
 1.添加JQuery库文件到页面
   2.在<script>标签中使用
   注意：先引入，后使用
   <!DOCTYPE html>
  <html>
  	<head>
  		<meta charset="UTF-8">
  		<title>hellowworld</title>
  		<script src="js/jquery-1.11.1.js" charset="UTF-8"></script>
  		<script type="text/javascript">

   //原生态的加载完成事件
       window.onload = function (ev) {
           var divEle = document.getElementById("div");
       
           console.log(divEle)
       
           divEle.innerHTML ="<font color='red'>这是一个div</font>"
       }
       
       window.onload =function (ev) {
           console.log("这是文档加载完成事件！！")
       }



  			$(document).ready(function() {
  				alert('hellowworld');
  			});
             $(function(){
                      console.log("这是第一个Jquery程序！！")

                 })

                 $(function () {
                     // var divEle = document.getElementById("div");
                     // divEle.innerHTML ="<font color='red'>这是一个div</font>"
                    // $("#div").html("<font color='red'>这是一个div</font>")
                    $("#div").text("<font color='red'>这是一个div</font>")
                 })

  		</script>
  	</head>
  	<body>
  	</body>
</html>

jQuery和DOM的关系及转换

 JQuery对象<----->DOM对象可以互相转化
   $jq对象 = $(dom元素对象)
   dom元素对象 = $jq对象[0] 或 $jq对象.get(0)
  注意：jQuery对象和dom对象互相关联，不要混为一团。    
  <!DOCTYPE html>
  <html>
  	<head>
  		<meta charset="UTF-8">
  		<title>jquery对象</title>
  	<script src="js/jquery-1.11.1.js" charset="UTF-8"></script>
  		<script type="text/javascript">		
  			$(document).ready(function() {
  				//DOM对象
  				var div = document.getElementById('div');
  				div.innerHTML="使用dom对象操作";
  				//jquery对象
  				var $div = $("#div");
  				$div.html('使用jquery对象操作');  
  			})	
              
              // DOM对象和jQuery对象
                  $(document).ready(function() {
  				jqToDom();
  				function domToJq() {
  				//DOM对象转换为jquery对象的方式
  				var div = document.getElementById('div');
  					var $div = $(div);
  					$div.html('使用jquery对象操作');
  				}
  			   function jqToDom() {
  			/**$('input')可以获取全部input
  					因此通过此函数返回的jquery对象中封装了多个dom对象
  					通过数组下标可以获取第n个dom对象
  					也可以通过get(n)获取第n个dom对象
  					* */
  			     var $input = $('input');
  		//多个dom对象都封装在jquery对象中，
  		//只需要设置jquery对象的属性就可以批量修改多个dom对象
  					$input.attr('checked',true);
  					/*使用数组下标获取dom对象*/
  					var firstInput = $input[0];
  					//使用get方法获取
  					var firstInput = $input.get(0);
  					//使用dom对象
  					firstInput.checked = false;
  				}
  			});			 
  		</script>
  	</head>
  	<body>
  		<div id="div">
  			
  		</div>
          
          <div>
  			<input type="checkbox" name="checkbox"  />
  			<input type="checkbox" name="checkbox"  />
  			<input type="checkbox" name="checkbox"  />
  		</div>
  	</body>
  </html>

JQuery选择器

Jquery的选择器是Jquery如何便利的定位找到DOM中的对象
   常用的选择器见jquery1.7手册
  基本 
  层级
  基本
  内容
  子元素
  表单
  表单对象属性
  jquery选择器 $("选择器")
		   2.1 基本类型选择器 
		      #id : id选择器  $("#div1") -->document.getElementById("div1">
		      element:元素选择器 $("div") --->document.getElementsByTagName("div");	
		      .class:类选择器 $(".div") ---> document.getElementsByClassName("div");
		      seletor1,selector2,selector3:组合条件选择器 ，根据组合条件获取DOM中的对象
		      parent > child:父子关系选择器 $("#div1 > p")
		 
		   2.2 过滤选择器  :选择器
		              
		   2.3 关系型选择器
		      $e.parent(): 子元素找父元素对象
		      $e.children("选择器")
		      $e.siblings():获取$e的所有的兄弟对象
		      $e.next():获取$e的下一个紧挨着的兄弟对象
		      $e.pre()：获取$e的上一个紧挨着的兄弟对象
  <!DOCTYPE html>
  <html>
  	<head>
  		<meta charset="UTF-8">
  		<title>基础选择器</title>
  		<style type="text/css">
  			.pStyle {
  				width: 100px;
  				height: 100px;
  				background-color: yellow;
  			}
  		</style>
  		<script src="js/jquery-1.11.1.js" charset="UTF-8"></script>
  		<script>
  			$(function(){
  			    $("#div")[0].innerHTML = "这是id选择器"
  
  				$(".pStyle").text("这是class类选择器")
            
                //>代表其子类*代表子类所有的
  				$("#div1>*:eq(0)").css("background-color","red");
  
  			    $("article").css({"backgroundColor":'orange',color:"blue"})
  			})
  		</script>
  	</head>
  	<body>
  		<h2>id选择器</h2>
  		<div id="div">
  			
  		</div>
  
  		<h2>类选择器</h2>
  		<p class="pStyle"></p>
  
  		<h2>通配选择器</h2>
  		<div id="div1">
  			<span>span中的内容</span>
  			<p>p中的内容</p>
  		</div>
  
  		<h2>元素选择器</h2>
  		<article>
			article中的内容
  			
		</article>
  	</body>
</html>

JQuery节点样式操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.11.1.js" charset="UTF-8"></script>
		<style>
		.tabCss{
				background-color: orange;
			}

		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="" id="table">
			<tr>
				<td><input type="checkbox"/></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
		</table>
		<input type="button" onclick="addBClass()" value="添加背景样式类" />
		<input type="button" onclick="deleteBClass()" value="删除背景样式类" />
		<input type="button" onclick="toggleClass()" value="反转样式类" />
	</body>
</html>
<script>

	$(function(){
		$("table").css("tabCss")
        $("table").addClass("tabCss")
        $("table").attr("class","tabCss")
		
	})


</script>

JQuery属性操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.11.1.js" charset="UTF-8"></script>
	</head>
	<body>
		<img  id = "img" src=''/>

		<script>
		   var $img =  $("#img");
		   var idVal= $img.attr("id")
			console.log(idVal)
         // $img.attr("src","images/lxyk_office2.jpg");
           $img.prop("src","images/lxyk_office2.jpg");
		</script>

		<input type="text" id="text" value="默认值" />

		<script>
			var inputVal = $("#text").val(); // inputEle.value
			console.log("inputVal ="+inputVal)
            $("#text").val("有参数设置值")
		</script>

		<div id="outerDiv">
			<input type="checkbox" id = 'selectAll' />
			<input type="checkbox"/>
			<input type="checkbox"/>
			<input type="checkbox"/>
			<input type="checkbox"/>
		</div>
		<script>
			//元素发生变化事触发
			$("#selectAll").change(function(){
			     alert(11)
			})


		</script>

		
	</body>
</html>

JQuery对DOM的操作：

 内容操作：
    元素内容操作：
    jq操作DOM内容		
  		  1 获取和设置
  			   获取input框中的值：
  			       $e.val()
  			 设置input框中的值 
  			       $e.val("要设置的值")
  			 获取一般元素标签中的值 
  			       $e.html()|$e.text()
  			 修改或设置一个元素标签中的值      
  			        $e.html("要插入的内容")|$e.text("要插入的内容作为纯文本")
  			 获取一个元素标签中的值
  			        $e.html()|$e.text()
  		 2 添加元素
  		   2.1 父子关系添加元素
  		      $父.append("要添加的子元素")
  		      $子.appendTo($父|e)		
  		    2.2 兄弟关系添加元素
  		      $e.before("要添加的元素")：在e元素标签的前面添加元素
  		      $e.after("要添加的元素")：在e元素标签的后面添加元素
  		 3 删除一个元素
  		     $e.remove()
   <div id="div">
   </div>
    $(function () {
                       // var divEle = document.getElementById("div");
                       // divEle.innerHTML ="<font color='red'>这是一个div</font>"
                      // $("#div").html("<font color='red'>这是一个div</font>")
                      $("#div").text("<font color='red'>这是一个div</font>")
       })
  
   <input type="text" id="text" value="默认值" />
  		<script>
  			var inputVal = $("#text").val(); // inputEle.value
  			console.log("inputVal ="+inputVal)
              $("#text").val("有参数设置值")
  		</script>

Jquery的事件机制

Event事件操作：
 页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常见 DOM 事件：
鼠标事件	 键盘事件	 表单事件	文档/窗口事件
click	    keypress  submit	  load
dblclick	keydown	  change	  resize
mouseenter	keyup	  focus	      scroll
mouseleave             blur       unload
hover	                   
		<script src="js/jquery-1.11.1.js" charset="utf8"></script>
		<h1>事件处理</h1>
		<div id="outerDiv" style='width: 100px;height: 100px;background-color: yellow;'>
	        <img src="" alt="加载图片失败！" />
			<input type='button' id='te' value='按钮' />	
		</div>
		<script>
            /**
			 *  $e.on(types, selector, data, fn, one):绑定DOM元素e事件类型type到指定的选择器selector上
			 *  @param
			 *   types：事件类型，比如click、focus、blur、change、etc
			 *   seletor：jquery选择器，id、class、etc
			 *   data：json格式的数据，绑定到事件对象Event的data上，提供给fn使用
			 *   fn：功能方法
			 *   one：限定次绑定事件执行的次数，为1则限定只能执行一次事件，非1或不写则不限制
			 *
             */
              //点击事件
			$("#outerDiv").on("click","#te,img",{src:'images/logo2.png',count:1},function(e) {//e:事件对象
                // console.log(e);
                //  console.log(typeof e.currentTarget.nodeName);
                // var isButtonSel = (e.handleObj.selector.split(",")[0]==='#te')
				// var isImgSel = (e.handleObj.selector.split(",")[1]==='img')
                if (e.currentTarget.nodeName==='INPUT') { //如果点击的是按钮
                   $("img").attr('src', e.data.src)
                   console.log("按钮被点击了！！" + (e.data.count++))
               }
               if(e.currentTarget.nodeName==='IMG'){ // 如果点击的是img
                   console.log("img元素被点击了!!");
               }
		    })
			   // 使用off取消绑定事件
              $("#outerDiv").off("click")

               //使用on带jsondata数据给事件
			$("#te").on("click",{src:'images/logo2.png',count:1},function (e) {
                  $("img").prop('src', e.data.src)
                console.log("按钮被点击了！！" + (e.data.count++))
            })

			   // 直接使用click事件方法并带json数据绑定个event事件对象上
            $("#te").click({src:'images/logo2.png',count:1},function(e){
                console.log(arguments);
                $("img").prop('src', e.data.src)
                console.log("按钮被点击了！！" + (e.data.count++))
			})
              // 直接使用click事件方法，不带data数据
            $("#te").click(function(e){
                console.log(e.target);
            })

            // 不传事件对象和其它数据，直接使用click事件函数
            $("#te").click(function () {
                $("img").prop('src','images/logo2.png')
            })
		</script>
 小结：jquery对事件的使用非常灵活，大家可以根据自己的需要，灵活选择

JQuery的动态效果

JQuery的动态效果
  隐藏和显示效果：
    $e.hide(speed,[callback]);                
    $e.show(speed,[callback]);
  渐隐和渐显:
    $e.fadeIn(speed,[callback]);
    $e.fadeOut(speed,[callback]);
    $e.fadeTo(speed,opacity,[callback]);
    $e.fadeToggle(speed,[callback]);
  滑动效果:
    $e.slideDown(speed,[callback]);
    $e.slideUp(speed,[callback]);
  动画效果：
    $e.animate({params},[speed],[callback]);  
      需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 ma
rgin-right，等等。也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=，比如 height：'+=50px'等。
    $e.stop([stopAll],[goToEnd]);
     stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。
  链式调用：
  $e.fn1.fn2.fn(k)...
  对同一个DOM对象e按顺序逐次执行fn方法

JQuery的其它常见操作

方法	        描述  
each():	为每个匹配元素执行函数
<h2>each</h2>
		<ul id="ul">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>

		<script>
       // 遍历：each
            var $lis = $("#ul>li");
            $lis.each(function(index,e){
                console.log(index + "::" + e)
				console.log(e.innerText)
			})
		</script>

serialize():序列化表单中字段的值为字符串
serializeArray(): 方法通过序列化表单值来创建对象（name 和 value）的数组。
<form action="">
     First name: <input type="text" name="FirstName" value="Mickey" /><br>
     Last name: <input type="text" name="LastName" value="Mouse" /><br>
</form>
<script>
$(document).ready(function(){ 
    $("div").text($("form").serialize());  // FirstName=Mickey&LastName=Mouse
    $("div").text($("form").serializeArray()); //[{FirstName:Mickey}，{LastName：Mouse}]
});
</script>
get():	获取由选择器指定的 DOM 元素
   获取第一个 <p> 元素的名称和值：
      $("button").click(function(){
         x=$("p").get(0);
         $("div").text(x.nodeName + ": " + x.innerHTML);
      });
index(): 从匹配元素中搜索给定元素
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
        <li>Soda</li>
    </ul>   
    <script>
       $(document).ready(function(){
         $("li").click(function(){
           alert($(this).index());
         });
       });
    </script>
$.noConflict():	释放变量 $ 的 jQuery 控制权
     noConflict() 方法释放变量 $ 的 jQuery 控制权。该方法也可用于为 jQuery 变量规定新的自定义名称。
    eg: var jq=$.noConflict();
$.param():	创建数组或对象的序列化表示形式（可在生成 AJAX 请求时用于 URL 查询字符串中）
    <script>
          $(document).ready(function(){
            personObj=new Object();
            personObj.firstname="John";
            personObj.lastname="Doe";
            personObj.age=50;
            personObj.eyecolor="blue"; 
            $("button").click(function(){
              $("div").text($.param(personObj));
            });
          });
     </script>
     执行结果为：firstname=John&lastname=Doe&age=50&eyecolor=blue

json和字符串

js中

1、字符串转json对象,调用parse方法

var  json={'name':'lisi','age':21};

    var ob = JSON.parse(data);

2、json对象转为字符串，调用JSON.stringify()方法

    var str = JSON.stringify(data);

jquery

将格式完好的JSON字符串转为与之对应的JavaScript对象

var jsonObj=$.parseJSON(json);

将一个JSON对象转换成字符串

 var str=$.stringify(Jsonobj)

json的动画事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<img src="images/lxyk_office2.jpg" width="100%"/><br/>
		<input type="button" value="隐藏" id='but1' />
		<input type="button" value="显示" id='but2' />
		<input type="button" value="使用toggle完成显示隐藏" id='but3' />
	</body>
</html>
<script>

	$().ready(function () {
	    var $img = $("img");
	   $("#but1").click(function () {
           // $img.hide();隐藏
		   // $img.show();显示
		   // $img.toggle();在显示隐藏来回切换
           // $img.slideUp("");//以滑动方式隐藏 <p> 元素：
           $img.animate({width:'100px',height:'100px',opacity:0.2},5000,function(){
               alert("完成动画效果了！")//动画效果变到设置的高宽
		   })
       })
	   $("#but2").click(function () {
           // $img.show();
           $img.slideDown();//以滑动方式显示隐藏的 <p> 元素：
       })
	   $("#but3").click(function () {
           // $img.toggle();
		   $img.slideToggle();//通过使用滑动效果，在显示和隐藏状态之间切换 <p> 元素：
       })

    })


</script>

jquery对表单的验证操作

  jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API，下载地址：http://libs.cdnjs.net/jquery-validate/1.19.3/

validate()的可选项
描述	  代码
debug：进行调试模式（表单不提交）。	
$(".selector").validate
({
    debug:true
})
把调试设置为默认。	
$.validate({
    debug:true
})
submitHandler：通过验证后运行的函数，里面要加上表单提交的函数，否则表单不会提交。	
$(".selector").validate({
    submitHandler:function(form) {
        $(form).ajaxSubmit();
    }
})
ignore：对某些元素不进行验证。	
$("#myform").validate({
    ignore:".ignore"
})
rules：自定义规则，key:value 的形式，key 是要验证的元素，value 可以是字符串或对象。	
$(".selector").validate({
    rules:{
        name:"required",
        email:{
            required:true,
            email:true
        }
    }
})
messages：自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数。	
$(".selector").validate({
    rules:{
        name:"required",
        email:{
            required:true,
            email:true
        }
    },
    messages:{
        name:"Name不能为空",
        email:{       
            required:"E-mail不能为空",
            email:"E-mail地址不正确"
        }
    }
})
groups：对一组元素的验证，用一个错误提示，用 errorPlacement 控制把出错信息放在哪里。	
$("#myform").validate({
    groups:{
        username:"fname 
        lname"
    },
    errorPlacement:function(error,element) {
        if (element.attr("name") == "fname" || element.attr("name") == "lname")   
            error.insertAfter("#lastname");
        else    
            error.insertAfter(element);
    },
   debug:true
})
OnSubmit：类型 Boolean，默认 true，指定是否提交时验证。	
$(".selector").validate({  
    onsubmit:false
})
onfocusout：类型 Boolean，默认 true，指定是否在获取焦点时验证。	
$(".selector").validate({   
    onfocusout:false
})
onkeyup：类型 Boolean，默认 true，指定是否在敲击键盘时验证。	
$(".selector").validate({
   onkeyup:false
})
onclick：类型 Boolean，默认 true，指定是否在鼠标点击时验证（一般验证 checkbox、radiobox）。	
$(".selector").validate({
   onclick:false
})
focusInvalid：类型 Boolean，默认 true。提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。	
$(".selector").validate({
   focusInvalid:false
})
focusCleanup：类型 Boolean，默认 false。当未通过验证的元素获得焦点时，移除错误提示（避免和 focusInvalid 一起使用）。	
$(".selector").validate({
   focusCleanup:true
})
errorClass：类型 String，默认 "error"。指定错误提示的 css 类名，可以自定义错误提示的样式。	
$(".selector").validate({ 
    errorClass:"invalid"
})
errorElement：类型 String，默认 "label"。指定使用什么标签标记错误。	
$(".selector").validate({ 
   errorElement:"em"
})
wrapper：类型 String，指定使用什么标签再把上边的 errorELement 包起来。	
$(".selector").validate({
   wrapper:"li"
})
errorLabelContainer：类型 Selector，把错误信息统一放在一个容器里面。	
$("#myform").validate({   
    errorLabelContainer:"#messageBox",
    wrapper:"li",
    submitHandler:function() { 
        alert("Submitted!") 
    }
})
showErrors：跟一个函数，可以显示总共有多少个未通过验证的元素。	
$(".selector").validate({  
    showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
        this.defaultShowErrors();
    }
})
errorPlacement：跟一个函数，可以自定义错误放到哪里。	
$("#myform").validate({  
    errorPlacement:function(error,element) {  
        error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})
success：要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。	
$("#myform").validate({        
    success:"valid",
        submitHandler:function() { 
            alert("Submitted!") 
        }
})

使用方式：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery.validate.js的表单验证器使用演示示例</title>
		<script src="js/jquery-1.11.1.js" charset="UTF-8"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css" >
		<script src="plugins/jquery-validation-1.19.3/dist/jquery.validate.js"></script>
		<script src="plugins/jquery-validation-1.19.3/dist/localization/messages_zh.js"></script>
		<style>
			form{
				margin: 200px auto;
			}
			.error{
				color: red;
			}
		</style>
	</head>
	<body>
		   <div class="panel panel-body">
			<form id="login" action="" style="height: 300px;width:560px; ">
				<fielset>
					<legend align="center"> 用户登陆 </legend>
					 <div class="form-group row">
						<label for="username" class="col-md-offset-3 col-md-2 col-sm-2" style="height: 30px">用户名</label>
						<div class="col-sm-4 col-md-4">
						<input type="text" class="form-control" id="username" name="username" >
						</div>
					  </div>
					  <div class="form-group row">
					<label for="password" class="col-md-offset-3 col-md-2 col-sm-2" style="height: 30px">密码</label>
						<div class="col-sm-4 col-md-4">
						<input type="text" class="form-control" id="password" name="pwd">
						</div>
					 </div>
					<div class="form-group row">
					  <button type="reset" id="reset" class="btn btn-primary mb-2 col-md-offset-5 ">重&nbsp;置</button>
					   <button type="submit" class="btn btn-primary mb-2  ">登&nbsp;陆</button>
					</div>
				</fielset>
		    </form>
		   </div>
	</body>
</html>
<script>

	$().ready(function(){

	    // alert("文档加载完成！！")

		// 创建表单验证器
		var validator = $("#login").validate({
              rules:{  // 规则属性

                  username:{required:true},
				  pwd:{required:true,range:[6,20]}

			  },
            messages:{ // 自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数。
                username:"Name不能为空",
                pwd:{
                    required:"E-mail不能为空",
                    email:"E-mail地址不正确"
                }
            },
            errorElement:"em",// 类型 String，默认 "label"。指定使用什么标签标记错误。
			submitHandler:function(form){
                  form.submit();
			},
			debug:true, //进行调试模式（表单不提交）。
		})

        $("#reset").click(function() {
            validator.resetForm();
        });
	})

</script>

JQuery的Ajax操作

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了网页页面的局部更新。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了网页页面的局部更新。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
$e.ajax({json格式的settings})
     async：布尔值，表示请求是否异步处理。默认是 true。
     type：定请求的类型（GET 或 POST）。
     data：规定要发送到服务器的数据。
     url：定发送请求的 URL。默认是当前页面。
     contentType：发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。     
     dataType：预期的服务器响应的数据类型。
     beforeSend(xhr)：发送请求前运行的函数。
     success(result,status,xhr)：当请求成功时运行的函数。     
     error(xhr,status,error)：如果请求失败要运行的函数。
     complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
$e.load(URL,[data],[callback]);
$e.get(URL,[data]，[callback(res,status,xhr)]，[datatype]) res:事件对象  status状态码  xhr：浏览器核心对象
$e.post(URL,[data]，[callback(res,status,xhr)]，[datatype])
   URL:必需的 参数规定您希望加载的 URL。
   data:可选的  参数规定与请求一同发送的查询字符串键/值对集合。
   callback:可选的 ,规定当请求成功时运行的函数。
         额外的参数：
           data - 包含来自请求的结果数据
           status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
           xhr - 包含 XMLHttpRequest 对象
   datatype:可选的 规定预期的服务器响应的数据类型,字符串xml          
          默认地，jQuery 会智能判断。
          可能的类型：
          "xml" - 一个 XML 文档
          "html" - HTML 作为纯文本
          "text" - 纯文本字符串
          "script" - 以 JavaScript 运行响应，并以纯文本返回
          "json" - 以 JSON 运行响应，并以 JavaScript 对象返回
          "jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 "?callback=?" 到 URL 来规定回调
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.1.js" charset="UTF-8"></script>
</head>
<body>
    <div id="div1">


    </div>
    <img src="images/logo2.png" >
</body>
</html>
  <script>
    $(function(){
 var $div = $("#div1")
      // $e.load 请求
       $("div").load("stus.json",function(res,statusTxt,xhr){          
            var jsonObj = JSON.parse(res);
           console.log(jsonObj);
           var $table = $("<table><tr><th>学生id</th><th>学生姓名</th><th>学生年龄</th><th>JavaSE</th><th>MySql</th><th>Jdbc</th></tr></table>");
 //dom对象用forEach  jQuery用each  value和i对象json对象的下标和值       
          jsonObj.forEach(function(value,i){
             var $tr = $("<tr><td>"+value.sid+"</td><td>"+value.name+"</td><td>"+value.age+"</td>                   <td>"+value.scores[0]+"</td><td>"+value.scores[1]+"</td><td>"+value.scores[2]+"</td></tr>");
                $table.append($tr) //子加父
                $tab.appendTo($div)//父加子
           })
           $(this).html($table)
           console.log(statusTxt);
           console.log(xhr);
       })
        // $.get 请求
      $.get("/ajaxServlet",{uname:"zhangsan",pwd:1234},function(res,status,xhr){
          console.log(typeof res);
          console.log(res instanceof Array);
          res.forEach(function (v,i) {
              console.log(v);
          })
      },"json")

      // $.post 请求
      $.post("/ajaxServlet",{uname:"zhangsan",pwd:1234},function(res,status,xhr){
          console.log(typeof res);
          console.log(res instanceof Array);
          res.forEach(function (v,i) {
              console.log(v);
          })
      },"json")

      // $.ajax 请求
      $.ajax({
          async:true,
          type:"post",
          contentType:"application/json;chaset=utf8"
          url:"/ajaxServlet",
          data:{uname:"zhangsan",pwd:1234},
          beforeSend:function(xhr){
              console.log("ajax 执行前触发的函数，可以初始化发送数据");
          },
          success:function(res,status,xhr){
                  console.log(typeof res);
                  console.log(res instanceof Array);
                  res.forEach(function (v,i) {
                      console.log(v);
                  })
          },
          error:function(xhr,status,error){

          },
          complete:function(xhr,status){
              console.log("ajax 执行最后触发的函数！！");
              console.log(xhr);
              console.log(status);
          },
          dataType:"json"
        })      
</script>
  小结：

stux.json

[
  {"sid":1,"name":"zhangsan","age":23,"scores":[85,89,90,92]},
  {"sid":2,"name":"lisi","age":24,"scores":[85,89,90,92]},
  {"sid":3,"name":"wangwu","age":25,"scores":[85,89,90,92]},
  {"sid":4,"name":"zhaoliu","age":26,"scores":[85,89,90,92]}

]

Ajaxserlet

package com.lxyk.controller;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(urlPatterns = "/ajaxServlet")
public class AjaxServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

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

        String uname = req.getParameter("uname");
        String pwd = req.getParameter("pwd");

        System.out.println("uname=" + uname + "::  pwd=" + pwd);
        String jsonArrStr = "[\n" +
                 "  {\"sid\":1,\"name\":\"zhangsan\",\"age\":23,\"scores\":[85,89,90,92]},\n" +
                 "  {\"sid\":2,\"name\":\"lisi\",\"age\":24,\"scores\":[85,89,90,92]},\n" +
                 "  {\"sid\":3,\"name\":\"wangwu\",\"age\":25,\"scores\":[85,89,90,92]},\n" +
                 "  {\"sid\":4,\"name\":\"zhaoliu\",\"age\":26,\"scores\":[85,89,90,92]}\n" +
                 "\n" +
                 "]";

        resp.getWriter().write(jsonArrStr);


    }
}

解决浏览器不支持AJAX创建XMLHttpRequest对象

 $(function () {
       
            var xhr;
           function getXhr(){
               var xmlhttp;
               if (window.XMLHttpRequest)
               {// code for IE7+, Firefox, Chrome, Opera, Safari
                   xmlhttp=new XMLHttpRequest();
               }
               else
               {// code for IE6, IE5
                   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
               }
               return xmlhttp;
           }
          // 获取XMLHttpRequest
            xhr = getXhr();

            xhr.open("post","/ajaxServlet",true)
            xhr.onreadystatechange = function(){
                if(this.readyState===4&&this.status===200){
                    console.log(this.responseText);
                    // console.log(this.responseXML);
                    var jsonArrObj = JSON.parse(this.responseText);
                    createTab(jsonArrObj)
                }
            }
            xhr.send("uname=fgh&pwd=123")


   })

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得xml形式的访问数据


open 创建新的 EventSource 对象，并规定发送更新的页面的 URL。

EventSource 对象用于接收服务器发送事件通知：

 onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200：”ok“ 404：未找到页面