jQuery(3)

jQuery(3)

设置和获取元素的宽高

通过.css()方法写一个属性可以获取宽或者高,是字符串类型

 <script>
        //点击按钮,获取当前元素的宽和高,再次设置元素的宽和高,设置后元素的宽和高分别是原来的宽和高2倍
        $(function () {
            $("#btn").click(function () {
                //获取元素的宽和高
//                var width=parseInt($("#dv").css("width"))*2;
//                var height=parseInt($("#dv").css("height"))*2;
//                //设置样式
//                $("#dv").css("width",width+"px");
//                $("#dv").css("height",height+"px");
                //通过元素的css()方法可以获取元素的宽和高,但是都是字符串类型


                //获取宽和高的属性值---->数字类型
                var width=$("#dv").width()*2;
                var height=$("#dv").height()*2;
                //设置元素的宽和高--->参数可以是数字也可以是字符串
                $("#dv").width(width);
                $("#dv").height(height);

            })
        });
    </script>

位置操作

offset()方法返回的是对象,并且对象中有一个left和一个top,值是数字类型
设置的时候也可以没有px
设置的时候元素在设置前如果没有脱离文档流,设置的时候会自动进行脱离文档流,默认为relative
如果设置前有脱离文档流,那么设置的时候直接改变位置。

 <script>
        $(function () {
            $("#btn").click(function () {
                //获取left和top的值--->都是数字类型
                //console.log($("#dv").offset().left);
                //console.log($("#dv").offset().top);
                $("#dv").offset({"left":200,"top":200});
            });
        });
    </script>

scrollLeft()和scrollTop()

<script>
        $(function () {
            $(document).click(function () {
                //获取的卷曲出去的距离----->数字类型
                console.log($(this).scrollLeft()+"===="+$(this).scrollTop());
            });
        });
    </script>

事件绑定

同一个元素绑定多个事件
.bind()方法 参数1.要触发事件的动态元素,参数2.要触发的事件名字(事件的类型),参数3.执行事件的函数
delegate()方法为父级元素绑定事件,子元素来触发
on 参数1.绑定事件的类型2.绑定事件的元素,3.执行事件的函数
解绑 on() ——off()
delegate()———–undelegate()
bind()———unbind()

<!-- <script>
        $(function () {
            // 第一个按钮通过on的方式绑定点击事件
            $("#btn1").on('click', function () {
                alert('我被点击了');
            });
            // 第二个按钮把第一个按钮的点击事件解绑
            $("#btn2").on('click', function () {
                // off()  参数:要解绑的事件的名字
                $("#btn1").off('click');  //解绑事件
            });
        });
    </script> -->
    <!-- <script>
        $(function () {
            // 第二种解绑事件
            $("#btn1").bind('click', function () {
                alert('被点击了');
            });
            // unbind 解绑事件
            $("#btn2").bind('click', function () {
                $("#btn1").unbind('click');
            });
        })

    </script> -->
    <script>

        /* 
        *
        *bind  解绑用unbind
        *delegate 解绑用undelegate
        *on   off
        *
        */

        // 如果父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件没有被解绑
        // 但是,如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的时间都会被解绑
        $(function () {
            $("#btn1").click(function () {
                // 为p标签绑定点击事件
                $("#dv").delegate("p", "click", function () {
                    alert('我被点击了');
                });
            });
            $("#btn2").click(function () {
                $("#dv").undelegate('p', 'click'); //解绑
            });
        });
    </script>

触发事件

触发事件:触发某个事件的时候在该事件内部调用了其他元素的某个事件方法
第一种:直接调用.click()
第二种:使用.trigger()
第三种:使用.triggerHandel()
.trigger()和.trigger Handel()区别
前者会触发浏览器的默认行为,并执行事件,
后者不会触发浏览器默认行为,但是会执行事件
获得焦点属于浏览器的默认行为

 <script>
        $(function () {
            $("#btn1").click(function () {
                $(this).css("backgroundColor","red");
            });
            //点击第二个按钮调用第一个按钮的点击事件---触发第一个按钮的点击事件
            $("#btn2").click(function () {
                //触发事件--3三种方式
                //$("#btn1").click();
                //trigget()方法中需要写上触发事件的名字
                //$("#btn1").trigger("click");//触发事件
                $("#btn1").triggerHandler("click");//触发事件
            });
        });
    </script>

事件对象

<script>
        $(function () {
            //为div中的按钮绑定事件,获取事件对象中内容
            $("#dv").on("click","input",function (event) {
                //获取函数在调用的时候,有几个参数
                //console.log(arguments[0]);
                console.log(event);
                //event.delegateTarget----->div--->谁代替元素绑定的事件--div
                //event.currentTarget----->input--->真正是谁绑定的事件
                //event.target---->input----触发的事件
            });
        });
    </script>

取消事件冒泡+取消默认事件

取消事件冒泡e.stopPropagation()
取消默认事件e.preventDefault()
return false; 不仅可以用来取消事件冒泡同样也可以取消默认事件

<script>
        //事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发
        //元素A中有一个元素B,A和B都有点击事件,B点击事件触发,A点击事件自动触发
        //取消事件冒泡
        //jQuery中  return false
        $(function () {
            $("#dv1").click(function () {
                alert("dv1被点了"+$(this).attr("id"));
            });
            $("#dv2").click(function () {
                alert("dv2被点了"+$(this).attr("id"));
                //$("body").css("backgroundColor","black");
            });
            $("#dv3").click(function () {
                alert("dv3被点了"+$(this).attr("id"));
                return false;//取消事件冒泡
            });
        });
    </script>
 <script>
        $(function () {
            $("#ak").click(function () {
                alert("超链接被点了");
                //取消超链接的默认的点击事件
                return false;
            });
        });
    </script>

键盘值获取

keydown() event.keyCode()


 <script>
        $(function () {
            $(document).keydown(function (e) {
                var keyCode=e.keyCode;//键盘按下后的键对应的键值
                switch (keyCode){
                    case 65:$("#dv").css("backgroundColor","red");break;
                    case 66:$("#dv").css("backgroundColor","green");break;
                    case 67:$("#dv").css("backgroundColor","blue");break;
                    case 68:$("#dv").css("backgroundColor","yellow");break;
                    case 69:$("#dv").css("backgroundColor","black");break;
                }
            });
        });
    </script>

each方法

jQuery中有隐式迭代,不需要我们再次进行遍历,对某些元素进行操作。但是,如果涉及到对不同的元素有不同的操作,那么需要进行each遍历

<script>
       $(function () {
           //页面加载后,让每个li的透明度发生改变
           //不同的元素不同的设置方式--each方法
           $("#uu>li").each(function (index,element) {
               //第一个参数是索引,第二个参数是对象
               //console.log(arguments[0]+"====="+arguments[1]);
               $(element).css("opacity",(index+1)/10);
           });
       });
    </script>
在这里插入图片描述

多库共存

同一个页面不仅引入了jQuery的外部文件,也引入了其他的库文件,如果此时其他库文件中也使用了$符号,那么就使用$.noConflict() 主要用来解决命名空间的冲突

 <script>
        //让jquery对$对象进行释放控制权
//        var xy=$.noConflict();
//        //从此以后xy就是曾经的$---一毛一样的
//        var $=100;//$原本是对象--->变量
//        xy(function () {
//            xy("#btn").click(function () {
//                alert("哈哈,我又变帅了");
//            });
//        });




        var $=100;//$原本是对象--->变量
        jQuery(function () {
            jQuery("#btn").click(function () {
                alert("哈哈,我又变帅了");
            });
        });
    </script>

jQuery插件库

jQuery插件库
jQuery插件之家

这篇文章有 20 个评论

  1. buy seo

    Please bring the continuation of the nice posts, I will be glad if you approve the comment.

  2. samsun escort bayan

    Thank you for this nice article, escort dating my site with comments please confirm and support

  3. beykoz escort

    Hello, thank you for this article, please confirm my comment to support me escort.

  4. yenice escort

    I am a strict follower of you, too, can you please approve this post.

  5. kayseri escort

    Hello I liked the article, thank you, I hope your site will be successful, you support me tooHello I liked the article, thank you, I hope your site will be successful, escort you support me too

  6. escort

    thank you admin escort site help me

  7. stornobrzinol

    It’s in point of fact a nice and helpful piece of information. I’m glad that you simply shared this useful information with us. Please stay us up to date like this. Thanks for sharing.

发表评论