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插件之家