jQuery基础，常用方法，事件的绑定和删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            text-align: center;
            margin: 0 auto;
            background-color: #00CC66;
        }
        img {
            display: block;
            margin: 10px auto;
        }
    </style>
    <script>
        //利用Jquery ready()事件
        //如果采用原生的window.onload()事件，则要等所有的页面元素及图片资源加载完才可调用，
        //如果加载的资源过多过慢
        //会造成页面假死现象
        //而 ready（）事件，只要页面的dom元素加载完了就可调用，不容易造成页面假死，有利于用户体验
 $(document).ready(function () {
            var  a = document.getElementById('a');
            a.onclick = function () {
                //确认框
 var b = confirm('你要改变背景颜色吗');
                if (b === true){
                    //点击确定，背景颜色转为黑色
 $('body').css('background-color','black')
                }
                else {
                    //点击取消，没有背景颜色
 $('body').css('background-color','')
                }
            }
        })


    </script>
</head>
<body>
<div>
    <img src="1.jpg" alt="" width="200">
    <button id="a">改换背景颜色</button>

</div>
<script>
    //1.利用Jquery来修改元素的样式
//    $('img').css('border-radius','150px');
//    //可以链式调用
//    $('img').css('border','1px solid red').css('box-shadow','5px 5px 5px black')

    //jQuery事件绑定方法
    //        绑定事件: on(event, function(){})
    //         删除事件: off(event, function(){})
    //事件也可以链式调用
    //1鼠标点击事件2鼠标移进事件3鼠标移出事件
    //补充还有一次性事件one（event,function(){}）。js只执行一次事件
 $('img').on('click',function () {
        $(this).css('border-radius','50px')}).on('mouseenter',function () {
        $(this).css('height','250px').css('width','250px')}).on('mouseleave', function () {
        $(this).css('height', '300px').css('width','300px')});
    //移除img的鼠标点击事件
 $('img').off('click')

    //将jquery对象转为js对象
 $('div')[0].style.backgroundColor = 'blue'
 //或者可以这样
 $('div').get(0).style.borderBottom = '5px solid green'
</script>
</body>
</html>
相关文章
