zoukankan      html  css  js  c++  java
  • JQuery

                                               JQuery语法

    /*JQuery 语法
    *
    * 1、JQuery(“选择器”).action();通过选择器调用事件函数
    * 但JQuery中,JQuery可以用$代替,即$("选择器").action();
    * ①选择器,可以直接使用css选择器,选中元素
    * ②.action()表示对元素执行的操作;
    *
    * 2、文档就绪函数:防止了文档在完全加载(就绪)之前运行JQuery代码
    * $(document).ready(function(){
    * //JQuery代码
    * })
    * 简写: $(function(){});
    *
    * 【文档就绪函数 & 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";

     

    JQuery事件与动画

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

    /*
    * 使用on绑定事件
    */

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

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

    // ③ 调用函数时,传入自定义参数
    /*$("button").on("click",{name:"jianghao"},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元素时,无法绑定到新元素上;
    * 使用事件委派方式,当页面新增元素时,可以为所有新元素绑定事件
    *
    *
    */
    /*$("button").on("click",function(){
    var p = $("<p>444444</p>");
    $("p").after(p);
    });*/

    /*$("p").click(function(){
    alert(1);
    });*/

    /*$(document).on("click","p",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"]); 触发事件时,传递参数
    */
    /*$("p").click(function(event,arg1,arg2){
    alert("触发了P的click事件"+arg1+arg2);
    })

    $("button").click(function(){
    $("p").trigger("click",["haha","hehe"]);
    })*/


    /********************************动画*************************************/

    /* .show():让隐藏元素显示,同时修改元素的宽度、高度、opacity属性
    *
    * ① 不传参:让隐藏的元素直接显示,不进行动画
    * ② 传入时间:多少毫秒之内完成动画
    * ③ 传入(时间,函数):完成动画之后,执行回调函数
    *
    * .hide():让显示元素隐藏,与show()相反;
    *
    *
    *
    * .slideDown(): 让隐藏元素显示,效果为从上往下,增加高度
    * .slideUp(): 让显示的元素隐藏,效果从下往上,减小高度
    * .slideToggle():让显示的隐藏,让隐藏的显示
    *
    *
    * .fadeOut(): 让显示元素隐藏,淡出
    * .fadeIn(): 让隐藏元素显示,淡入
    * .fadeToggle(): 让显示的隐藏,让隐藏的显示。淡入淡出
    * .fadeTo(时间,透明度,函数):同fadeToggle,但是多了透明度参数,可以指定显示的最终透明度
    *
    *
    * .animate({最终的样式属性键值对},动画时间,动画效果("linear" "swing"),回调函数): 自定义动画

     

    JQuery高级AJax

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

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

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    url处理函数
    各种排序方法(冒泡,快速,插入,选择),二分查找
    js二叉树,前序/中序/后序(最大最小值,排序)
    vs中nuget命令的用法
    父子页面间调用
    Ubuntu16.04.2 LTS下使用编译安装程序(使用configure、make、 make install)
    windows与虚拟机的linux共享一个文件夹
    Linux下安装nginx
    Linux下安装VSCode
    Ubuntu下安装jdk
  • 原文地址:https://www.cnblogs.com/lxd564965917/p/6751681.html
Copyright © 2011-2022 走看看