jq相关操作

1事件:

<div class="ele">123</div>
box.onclick = function(ev){
    ev:系统传入的事件对象
    ele.innerText;
}

鼠标事件=>clientX,clientY
键盘事件=>ctrlkey,keyCode

鼠标事件:
onmouse enter|move|down|up|leave
onclick|dblclick  oncontextmenu

键盘事件:onkeydown|up
    
定时器:
setInterval|setTimeout 
setInterval(fn,1000)
clearInterval|clearTimeout

jq

jQuery是一个高效,精简并且功能丰富的javascript工具库
$是jQuery的别名
<script src = "jquery-3.3.1.js"></script>
<script>
//注意,一定在引入jQuery之后,再使用jQuery提供各种操作

选择器
①获取满足条件的所有页面元素jq对象
$("css3选择器语法");
②拿到指定索引的页面元素jq对象
$("css3选择器语法").eq(index);
③拿到指定索引的页面元素js对象(jq数组放的都是js对象)
$("css3选择器语法")[index];
$("css3选择器语法").get(index);
④js对象转jq对象
$(js对象)

文档加载

问题:
在标签建立前的jq语法中使用该标签
解决方法:
让jq语法在页面加载后再执行

文档加载方法
1.js
window.onload = function(){
}

2.jq
$(document).ready(function(){});
简写:$(function(){});

 onload结构和资源都加载完毕
		只能绑定一个事件方法
ready 结构加载完毕
		可以绑定多个事件方法
    
 页面加载的方法
1.可以保证页面结构一定加载完毕
2.可以保证数据的局部化(不会被外界直接读写)

注:导入jq一定要在使用jq之前
 <script src="js/jquery-3.3.1.js">
    </script>
    <script>
        $(function(){
            $(".top").css("background-color","cyan");}
        );
    </script>

jq操作元素对象

<script>
//    <!--更改文本-->
//    链式操作:几乎每一个方法都具有返回值(元素对象)
//    $(".top li:first-child").text("哈哈").html("<strong>鲨鱼</strong>");

    <!--更改样式-->
//    $(".top").css("width",function () {
//        width要加双引号,this是js对象,$(this)将js对象转换为jq对象
//        可以使用height(),括号不能丢,语句后的分号不能丢
//       return $(this).height()*2;
//    });
//    $(".top").height("400px").css("background-color","cyan");
//    $(".top li").css({
//    属性后的值要加双引号
//        color:"yellow",
//        fontSize:"14px",
//        float:"left"
//    });
//    console.log($(".top"));

//    console.log($)
//    console.log(jQuery)
</script>


//    修改类名
//        $(".top").addClass("bot");
//        console.log($(".top").addClass().removeClass("bot"))
//    增加全局属性
//    $("img").attr("src","http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg");
//    删除全局属性
//    $("img").removeAttr("src");
//    获取全局属性
//    console.log($("img").attr("xzh"));

jq获取盒子信息

显示信息

#盒子信息:
#宽高(content)|内边距(padding)|边框(border)|外边距(margin)

       .top {
            margin: 5px;
            padding: 10px;
            border: 20px solid green;
            width:200px;
            height: 300px;
            background-color: orange;
            list-style: none;
        }

//    var res = $(".top").css("padding");
//    console.log(res);//10px 带单位
//   var res = $(".top").width();
//    console.log(res);//width就是content的宽  200不带单位
//    var res = $(".top").innerWidth(); // 220 innerWidth w要大写,等于width加上padding宽
//    console.log(res);
//    var res = $(".top").outerWidth();//260 outerWidth 等于width 加上 padding 加上 border宽
//    console.log(res);
//    var res = $(".top").outerWidth(true);//270 加上true的话,还要再加上margin宽,
//    console.log(res);

位置信息

    .nav{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top:20px;
            left:20px;
            margin: 10px 10px;
        }

//相对窗口偏移:算margin产生的距离
   $(function () {
        var res = $(".nav").offset();//{top: 30, left: 30}//相对于窗口的偏移,要算margin的值
        console.log(res);
    });
 
//绝对定位偏移(top,left):不算margin产生的距离
      $(function () {
        var res = $(".nav").position();//{top: 20, left: 20}不算margin的值
        console.log(res);
    })
position().top
offset().top

jq操作元素对象

    <!--更改文本-->
//    链式操作:几乎每一个方法都具有返回值(元素对象)
//    $(".top li:first-child").text("哈哈").html("<strong>鲨鱼</strong>");

    <!--更改样式-->
//    $(".top").css("width",function () {
//        width要加双引号,this是js对象,$(this)将js对象转换为jq对象
//        可以使用height(),括号不能丢,语句后的分号不能丢
//       return $(this).height()*2;
//    });
//    $(".top").height("400px").css("background-color","cyan");
//    $(".top li").css({
//    属性后的值要加双引号
//        color:"yellow",
//        fontSize:"14px",
//        float:"left"
//    });

事件

$(".box").on("click",function(){
    alert($(this).text())
})

var d = "AAA"
#四个参数,第一个事件,第二个指派,第三个参数,第四个功能,
$(".box").on("click","span",{aaa:d},function(ev)){
    console.log(ev);
    console.log(ev.data.aaa);#参数保存在data属性中
    console.log(ev.clientX);
}


!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
    <div class="box">
        <span>"哈哈"</span>
        <a >"呵呵"</a>
    </div>
</body>
<script>
    var b = "aaa";
    $(".box").on("click","a",{a:b},function (ev) {
        console.log(ev.clientX);
        console.log(ev.data.a);
    })
</script>
</html>

取消默认事件;

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("div").on("contextmenu",function (ev) {
        ev.preventDefault()//第二种方法
        var bg = $(this).css("background-color");
        alert(bg);
//        return false;第一种方法

    })

父子都有点击方法时,取消父级方法

$(".sup,.sub").on("click",function (ev) {
    ev.stopPropagation();//阻止事件的传播,冒泡
    var cname = this.className;
    alert(cname);
})