jq 事件；jq选择器，与js转化，jq操作文档，属性，类名，全局变量；获取盒子信息

jq事件

鼠标事件
// 悬浮
box.onmouseenter = function () {
    box.style.cursor = "pointer";
    console.log("鼠标悬浮了")
}

// 移动
box.onmousemove = function () {
    console.log("鼠标在移动")
}

// 按下
box.onmousedown = function (ev) {
    console.log(ev);
    // 鼠标的点击点
    // ev.clientX | ev.clientY
    console.log(ev.clientX, ev.clientY);
    console.log("鼠标按下")
}

// 抬起
box.onmouseup = function () {
    console.log("鼠标抬起")
}

// 移开
box.onmouseleave = function () {
    console.log("鼠标移开")
}

// 右键: 右键按下抬起为一次右键
box.oncontextmenu = function () {
    console.log("鼠标右键")
}


键盘事件

document.onkeydown = function () {
    // console.log("键盘按下了")
}

// ev: 系统回调事件函数,传递的事件对象
// 键盘事件中,ev中有keyCode来唯一标识具体的按键
// 通过ctrlKey | shiftKey | altKey 来标签特殊按键是否为按下状态
document.onkeyup = function (ev) {
    console.log(ev);
    console.log(ev.keyCode, ev.altKey);
    console.log("键盘抬起了")
}

命名小规范, jq变量一般以$开头

    var $box=$('.box:nth-child(1)') //加$符号
    console.log($box.text()) //识别多个打印
    console.log($box[0].innerText)
     console.log($('.box').eq(1).text())
    console.log(($box.get(0)).innerText)//数组形式用索引取出就可以转变js用js语法
    var box=document.querySelector('.box')
    console.log($(box).text()) //加$符号转变为jq   jq对象就是用数组包裹的js对象, 可以包裹0个到多个


//setInterval|setTimeout  setInetval(fn, 1000)
//clearInterval|clearTimeout 通用
//清除定时器本质就是对定时器创建的数字编号进行清除操作

 <!--js中window提供了一个 window.onload = fn 事件: 页面结构及页面所需资源全部加载完毕, 只能绑定一个事件方法-->
    <!--jq中document提供了一个 $(document).ready(fn) 事件: 页面结构加载完毕, 能绑定多个事件方法, 可以简写-->
    <script>
        // 时间得当就可以处理, 问题多多
        // setTimeout(function () {
        //     var $box = $('#box');
        //
        //     console.log($box);
        // }, 1)
        //加载完毕再执行script
        //js有window .onload=function{}只能一次
        //jq有$(document).ready()可简写为$()

    </script>

    <script>
        window.onload = function() {
            console.log("window load 1");
        };
        window.onload = function() {
            console.log("window load 2");
        };
        $(document).ready(function() {
            console.log("document load 1");
        });
        $(function() {
            console.log("document load 3");
        });

        // 简写: $(fn)
    </script>
    <script>
        $(function () {  // 页面结构加载完毕
            $('.box').eq(1).text("000");
        });
    </script>
</head>
<body>
    <div id="box" class="box">123</div>
    <div class="box">456</div>
    <img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/>
</body>
<script>
// 一,可以保证页面结构一定加载完毕, 二,可以保证数据的局部化(不会被外界直接读写)

//文档
 //样式
 //类名
// 全局属性
 var $boxs=$('.box')
 console.log($boxs[0].innerText='576h')
 console.log($('.box:nth-child(1)').text('77').html('<p>678</p>') )  //链式写下去一直会返回对象
 // console.log($('.box:nth-child(2)').css('backgroundColor','orangered').css('color','yellow'))
 // console.log($('.box:nth-child(2)').css({'backgroundColor':'orangered','height':'200'}))//字典形式 :+，
 console.log($('.box:nth-child(2)').css('width',function (index,oldVal) {return $(this).height() * 2;})) //函数控制样式
 console.log($('.box:nth-child(3)').addClass('abc').removeClass('abc'))  //添加去除类名获得css样式

 console.log($('img').attr('src','http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg')
     .removeAttr("src"));
 console.log($('img').attr("ooo"));//返回对象是全局属性

 // 盒子信息:
    // 宽高 | 内边距 | 宽边 | 外边距

    // var res = $('.box').css("padding");
    // console.log(res);
    //
    // // 宽高
    // res = $('.box').width();
    // console.log(res);
    //
    // // 宽高+内边距
    // res = $('.box').innerWidth();
    // console.log(res);
    //
    // // 宽高+内边距+边框
    // res = $('.box').outerWidth();
    // console.log(res);
    //
    // // 宽高+内边距+边框+外边距
    // res = $('.box').outerWidth(true);
    // console.log(res);
    console.log($('.box').innerHeight())
     console.log($('.box').outerHeight())
  console.log($('.box').outerHeight(true))

</script>
<script>
    // 相对窗口偏移
    console.log($('.box').offset().top, $('.box').offset().left);
    //
    // // 绝对定位偏移(top,left)
    console.log($('.box').position().top, $('.box').position().left);

var d = "AAA";
// 事件名, 委派的子类(可选,了解), 参数(可选,了解), 函数
$('.box').on('click', 'span', {aaa: d}, function (ev) {
    // jq事件对象对js事件对象 兼容
    console.log(ev);
    console.log(ev.data.aaa) // 拿到传入的参数
})

// sup右键,弹出自身背景颜色
// 右键有系统自带的功能, 取消掉 => 取消默认事件
$('.sup').on('contextmenu', function (ev) {
    // 取消默认事件
    ev.preventDefault();
    var bgColor = $(this).css('background-color');
    alert(bgColor);
    // return false;
})


// sup和sub都具有单击事件
$('.sup').click(function () {
    console.log("父点击")
})

// 子父拥有同样事件时,子响应了事件,会将事件传递给父,父级也会响应同样的事件
$('.sub').click(function (ev) {
    // 阻止事件的传播 => 阻止事件的冒泡
    ev.stopPropagation();
    console.log("子点击")

jq 事件；jq选择器，与js转化，jq操作文档，属性，类名，全局变量；获取盒子信息

猜你喜欢