码迷,mamicode.com
首页 > Web开发 > 详细

有一种很方便的东西叫jQuery

时间:2017-04-24 10:00:19      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:操作   加载   参数   dom   内容   func   ide   锚点   animate   

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

有一种很方便的东西叫jQuery

标签:操作   加载   参数   dom   内容   func   ide   锚点   animate   

原文地址:http://www.cnblogs.com/c-hl/p/6755038.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!