JQuery框架

JQuery : (javascript 的代码框架)

jQuery作用：

简化代码，提高效率。

jQuery主旨：

write less do more

引入 jQuery 框架

    <script type="text/javascript" src="/scripts/jquery-3.3.1.js"></script>

基础语法是：

$(selector).action(执行对元素的操作)  

ready() 方法:

当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法
如：

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideToggle();
  });
});

语法 1

$(document).ready(function)

语法 2

$().ready(function)

语法 3

$(function)

程序一：

函数：

函数	作用
event.preventDefault()	阻止元素发生默认的行为
event.stopPropagation()	该方法将停止事件的传播，阻止它被分派到其他 Document 节点。
element.show( [ speed [ , callback ] ] )	指定的 时间内显示 element 所对应那些元素
element.hide( [ speed [ , callback ] ] )	在 指定的 时间内隐藏 element 所对应那些元素
element.on( type , callback )	为指定的元素绑定事件处理函数

<script type="text/javascript">
            (function () {
                
                var hide = function (e) {
                    e.stopPropagation();//停止事件传播
                    e.preventDefault();//取消默认事件
		    //hide( );在 指定的 时间内隐藏 element 所对应那些元素
                    $( ".hello" ).hide( 1000 ); // "slow" 慢  , "fast" 快
                    $( "button[type=button]" ).html( "显示" ) ;
                    $( "button[type=button]" ).on( "click" , show );
                };

                var show = function(e){
                    e.stopPropagation();
                    e.preventDefault();
		    //show(); 指定的 时间内显示 element 所对应那些元素
		   //第一个参数 speed 表示显示速度
		   //第二个参数 callback 表示显示操作完成后所执行的函数
                    $( ".hello" ).show( 1000 ); // "slow" 慢  , "fast" 快
                    $( "button[type=button]" ).html( "隐藏" ) ; //  document.querySelector( "button[type=button]" ).innerHTML = "隐藏" ;
                    $( "button[type=button]" ).on( "click" , hide );//为指定的元素绑定事件处理函数
                }

                $( "button[type=button]" ).on( "click" , show );


                /*
                var btn = document.querySelector( "button[type=button]" );
                var show = function(){
                    var list = document.querySelectorAll( ".hello" );
                    var array = Array.from( list ) ;
                    array.forEach( function( e ){
                        e.style.display = "block" ;
                    });
                };
                btn.addEventListener( "click" , show , false );
                */

            })();
        </script>

等待文档就绪：

  <script type="text/javascript">
            (function () {

                var show = function () {
                    var list = $( ".hello" );
                    $.each( list , function( index , element ){
                        console.log( element );
                    } );
                };

                $( show ); // $( document ).ready( show );

            })();
        </script>

构造元素：

        <script type="text/javascript">
            (function () {
                // 将 选择器 命中的所有元素 封装到一个 jQuery 实例中
                var btn = $( ".wrapper button" ); // jQuery( ".wrapper button" ) ;

                var produce =  function(e){
                    e.stopPropagation(); // 停止事件传播
                    e.preventDefault() ; // 取消事件的默认行为

                    // 根据 参数传入的 字符串 构造相应的 DOM ，并将该 DOM 对象 封装到一个 jQuery 对象(instance)中
                    var e = $( "<div style='text-align:center;border:1px solid blue ;'>" + Date.now() + "</div>" );

                    $( ".wrapper" ).append( e ) ;

                };
                btn.on( "click" , produce );
            })();
        </script>

load

<a href="" onclick="load()">使用JQuery执行load方法</a>

有两次刷新，  先走 onClick的方法，取到数据回来之后，赋值显示。 
接着 走 href=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。所以导致看不见值。


//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
		//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
		$("#aaa").val(responseText);
	}); 

Get

$.get("/day16/DemoServlet02"  , function(data ,status) {
		$("#div01").text(data);
	});

赋值显示

• val(“aa”);

只能放那些标签带有value属性

• html(“aa”); —写html代码
• text(“aa”);

其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

load & get

• load

  $("#元素id").load(url地址);

  $("#div1").load(serlvet); —> 使用的get请求，回来赋值的时候， 使用text（）;去赋值

• get

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

    使用案例： $.get("/day16/DemoServlet02"  , function(data ,status) {
    	$("#div01").text(data);
    });
  

• post

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

   function post() {
   	$.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
   		//想要放数据到div里面去。 --- 找到div
   		$("#div01").html(data);
   	});
   }
  

使用JQuery去实现校验用户名

	function checkUserName() {
		//1. 获取输入框的内容
		var name = $("#name").val();
		
		//2. 发送请求
		$.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
			//alert(data);
			if(data == 1){//用户名存在
				//alert("用户名存在");
				$("#span01").html("<font color='red'>用户名已被注册</font>");
			}else{
				//alert("用户名可用");
				$("#span01").html("<font color='green'>用户名可以使用</font>");
			}
		} );
		//3. 输出响应的数据到页面上。
	}