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("子点击")