JQuery事件动画以及A.jax

JQuery语法
    *
    * 1、JQuery("选择器").action();通过选择器调用事件函数
    *  但JQuery中，JQuery可以用$代替，即$("选择器").action();
    *  ①选择器，可以直接使用CSS选择器，选中元素
    *  ② .action()表示对元素执行的操作;
    * 2、文档就绪函数：防止文档在完全加载(就绪)之前运行JQuery代码
    *  $(document).ready(function(){
    *   //JQuery代码
    *   });
    *  简写： $(function(){
    *     //JQuery代码
    *    });
    *
    *  【文档就绪函数& window.onload区别】
    *  ①window.onload需在网页所有内容加载完成后执行(包括图片音频)
    *   文档就绪函数，只需要在网页DOM结构加载以后就可以执行
    *  ②window.onload只能写一个，写多个只会执行最后一个
    *   文档就绪函数，可以写多个，也不会被覆盖
    * 3、JQuery对象与原生DOM对象互转
    *  ①原生DOM对象转JQuery对象： $(DOM对象);
    *   var p=document.getElementsByTagName("p");
    *   $(p);    //转换为JQuery对象
    *  ②JQuery对象转原生DOM对象：$("#p").get(0)    $("#p")[0]
    *   $("#p").get(0).style.color="red";

 

   //事件绑定快捷方式
//    $("button:first").click(function(){
//     alert("哈哈哈");
//    });

 

   // ①使用on进行单事件绑定
//   $("button").on("click",function(){
//    //$(this)取到当前调用事件函数的对象
//    console.log($(this).html());
//   });

   //②使用on同时为多个事件，绑定同一函数
//   $("button").on("mouseover click",function(){
//    console.log($(this).html());
//   });

   //③调用函数时，传入自定义参数
//    $("button").on("click",{name:"12345"},function(event){ 
//     //使用event.data.属性名   找到传入的参数
//     console.log(event.data.name);
//    });

   //④使用on进行多事件多函数绑定
//   $("button").on({
//    click:function(){
//     console.log("click")
//    },
//    mouseover:function(){
//     console.log("mouseover")
//    },
//   });

   //⑤使用on进行事件委派
   //>>>将原本需要绑定到某元素上的事件，改为绑定在父元素乃至根节点上，然后委派给当前元素生效；
   //  eg:$("p").click(function(){});
   //      $(document).on("click","p",function(){});
   //  >>>作用：默认的绑定方式，只能绑定到页面初始时已有的p元素，当页面新增p元素时，无法绑定到新元素上；             使用事件委派方式，当页面新增元素时，可以为所有新元素绑定事件
//   $(document).on("click","button",function(){
//    alert(1);
//   });

 *off()取消事件绑定
   *
   * 1、$("p").off():取消所有事件
   * 2、$("p").off("click"):取消点击事件
   * 3、$("p").off("click mouseover"):取消多个事件
   * 4、$(document).off("click","p"):取消事件委派
   * */

使用one()绑定事件，只能执行一次

//   $("button").one("click",function(){
//    alert(1);
//   });

 .trigger("event"):自动触发某元素的事件
    * $("p").trigger("click",["haha","hehe"]);触发事件时，传递参数

.show()：让隐藏的元素显示，同时修改元素的宽度、高度、opacity属性
    *
    *  ①不传参：让隐藏的元素直接显示，不进行动画
    *  ②传入时间：多少毫秒之内完成动画
    *  ③传入(时间，函数)：完成动画之后，执行回调函数

.hide()：让显示元素隐藏，与show()相反；
    *
    *  .slideDown():让隐藏元素显示，效果为从上往下，增加高度
    *  .slideUp():让显示的元素隐藏，效果为从下往上，减小高度
    *  .slideToggle():让显示的隐藏，让隐藏的显示
    *
    *  .fadeOut():让显示元素隐藏，淡出
    *  .fadeIn():让隐藏元素显示，淡入
    *  .fadeToggle():让显示的隐藏，让隐藏的显示，淡入淡出
    *  .fadeTo(时间，透明度，函数)：同fadeToggle，但是多了透明度参数，可以指定显示的最终透明度
    *
    *  .animate({最终的样式属性键值对}，动画时间，动画效果("linear""swing")，回调函数)：自定义动画

HTTP:超文本传输协议
    *
    * URL：统一资源定位符
    * 组成：协议名：//主机名(IP地址)：端口号/项目资源地址?传递参数的键值对#锚点
    * eg:htttp://127.0.0.1:8080/jd/index.html?name=jd
    *   
    *  localhost或127.0.0.1表示本机IP

JSON对象
    *
    * 1、JSON对象是键值对的集合，键与值之间用":"分隔，多个键值对之间用","
    * 2、多个JSON对象，可以放到数组中去。JSON对象和数组，可以相互嵌套
    *
    * JSON的键，必须是字符串

转载于:https://www.cnblogs.com/lwhvicky/p/6754458.html