• JQuery基础与事件和动画


    JQuery语法
     1、JQuery("选择器").action; 通过选择器调用时间函数
     但Jquery可以用$符号代替,即$("选择器").action;
     ①选择器可以直接使用css选择器,选中元素
     ②.action表示直接对元素执行的操作;
    2、文档就绪函数:防止文档在完全加载之前运行Jquery代码
     $(document).ready(function(){
    JQuery代码
    });
    文档就绪函数简写方式
    $(function(){

    });
    3、[文档就绪函数&window.onload区别]
    1、window.onload需在网页所有内容加载完成后执行(包括图片音频)
    文档就绪函数,只需要在网页DOm结构加载以后便会执行
    2、 window.onload,只能写一个,写多个只会执行最后一个
    文档就绪函数,可以写多个,也不会被覆盖

    4、JQuery与原生DOM互转
    ①原生DOM对象转JQuery对象: $(DOM对象)
    var p = document.getElementsByName("p");
    $(p) 转换为JQwery对象
    ②JQuery对象转原生DOM对象: $("#p").get(0) $("#p")[0]
    $("#p").get(0).style.color = "red";

    使用on绑定事件* ①、使用on进行单事件绑定*//*$("button").on("click",function(){//$(this)取到当前调用时间函数的对象console.log($(this).html());})*///②使用on同时为多个事件,绑定同一函数/*$("button").on("click mouseover",function(){

    //$(this)取到当前调用时间函数的对象
    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进行事件委派
     >>>将原本需要绑定到某元素上的事件改为绑定在父元素乃至根节点上,然后委派给当前元素生效
     >>>作用:默认的绑定方式只能绑定到页面初始时的已有元素,当页面新增元素时,无法绑定到新元素上
    使用事件委派方式,当新页面新增元素时,可以为所有新元素绑定事件

     $("button").on("click",function(){
    var p = $("<p>dsjsdio</p>")
    $("p").after(p)
    })
    $(document).on("click","p",function(){
    alert("1")
    })
    //使用.one()绑定的函数只能执行一次
    $("button").one("click", function(){
    alert("1");
    });
    //.trigger("event");自动触发某元素的事件

     $("p").click(function(event,arg1,arg2){//触发事件时传递参数
    alert("触发了p的click事件"+arg1+arg2)
    })
    $("button").click(function(){
    $("p").trigger("click",["haha","hehe"])
    })*/

    动画

     .show()
    ①不传参:让隐藏的元素直接显示,不进行动画
    ②传入时间:多少毫秒之内完成动画

     ③传入(时间,函数): 完成动画之后执行回调函数
     show()动画执行效果:同时修改元素的宽度、高度、opacity属性

     .hide()效果:让显示元素影藏,与show相反

     .slideDown():让隐藏元素显示,从上往下高度增加
     .slideUp():让显示元素隐藏,从下往上高度减少
    .slideToggle():让显示的隐藏,让隐藏的显示
     
     .fadeOut():让显示的隐藏,淡入
    .fadeIn():让隐藏的显示,淡出
    .fadeToggle():让显示的隐藏,让隐藏的显示,淡入淡出
    .fadeTo(时间,透明度,函数):同.fadeToggle(),但是多了透明度参数,可以指定显示的透明度
     .animate自定义动画
    $("p").animate({
    "50px",
    opacity: "0.2",
    },5000,"linear",function(;){
    })
    $("p").fadeOut(5000,function(){
    alert("1");
    })
    })
    off() 取消事件绑定
    1、$("p").off():取消所有事件
    2、$("p").off( "click")取消点击事件
    3、$("p").off( "click mouseover")取消多个事件
    4、$(document).off("click","p")取消委派事件



  • 相关阅读:
    easyUI中textbox或number的数值大小校验
    个人附加作业
    个人最终总结
    结对编程————电梯调度
    visual studio 2013的使用和单元测试
    第三次作业(二)
    团队作业之个人总结篇
    结队编程之总结篇
    电梯调度系统(界面由C图形库编绘)
    软件工程作业单词统计
  • 原文地址:https://www.cnblogs.com/adaia/p/6793056.html
Copyright © 2020-2023  润新知