zoukankan      html  css  js  c++  java
  • 我的HTML学习记录(七)

    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 = doucument.getElementsByTagName("p");
    * $(p); //转换为JQuery对象

     
    * ②JQuery对象转原生DOM对象:$("#p").get(0) $("#p")[0]
    * $("#p").get(0).style.color ="red";


    // 事件绑定快捷方式
    /*$("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"),回调函数): 自定义动画

    * 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的键,必须是字符串。

    *

  • 相关阅读:
    ExtJs中动态加载机制研究(转)
    ExtJs4 学习3 combox自动加载的例子
    Extjs 4学习2
    ExtJS 4学习
    javascript学习(知识点整理)
    ExtJS智能提示工具spket安装与破解
    eclipse慢 优化(转)
    疯狂学习java web5(SSI框架)
    疯狂学习java web4(jsp)
    疯狂学习java web3(javaScript)
  • 原文地址:https://www.cnblogs.com/lieyancjj/p/6752504.html
Copyright © 2011-2022 走看看