jq基本使用

一、jq选择器

// 获取满足条件的所有页面元素jq对象
$('css3选择器语法');
​
// 拿到指定索引的页面元素jq对象
$('css3选择器语法').eq(index);
​
// 拿到指定索引的页面元素js对象 (jq对象转js对象)
$('css3选择器语法').get(index);
​
// js对象转jq对象
$(js对象);
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq选择器</title>
    <style>
        body .box:first-child {}
    </style>
</head>
<body>
<div class="box">123</div>
<div class="box">456</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 使用jq => 该html页面有jq环境 => 引入jq => 依赖jq,所以jq要提前引入
​
    console.log(jQuery);
    console.log($);
​
    // jq选择器
    // $("css3选择器位")
​
    // 命名小规范, jq变量一般以$开头
    var $boxs = $('.box');
    console.log($boxs);
​
    // 拿到123
​
    // js与jq对象的相互转化
​
    // jq拿到文本
    console.log($boxs.text());
​
    // 只获取第一个box
    var $box = $('.box:nth-child(1)');
    console.log($box);
    console.log($box.text());
​
    console.log($box[0].innerText);
​
    // 总结: jq对象就是用数组包裹的js对象, 可以包裹0个到多个
​
    // jq转js => 使用js语法
    var box1 = $boxs[0];
    console.log(box1);
    var box2 = $boxs.get(1);
    console.log(box2);
​
    // js转jq => 使用jq语法
    var $box1 = $(box1);
    console.log($box1);
​
</script>
</html>
View Code

 二、文档加载

// js
// 页面结构及页面所需资源全部加载完毕, 只能绑定一个事件方法 如果绑定多个，只有最后一个起作用
window.onload = function() {
}
​
// jq
// 页面结构加载完毕, 能绑定多个事件方法, 可以简写
// 一:可以保证页面结构一定加载完毕, 二:可以保证数据的局部化(不会被外界直接读写)
完整写法：$(document).ready(function({}))
简写 ：   $(function(){
})
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面加载</title>
    <script src="js/jquery-3.3.1.js"></script>
    <!--在页面加载前的脚本语句中,如何获取页面对象 => 主动睡觉,页面一加载完毕,就醒 -->
    <!--js中window提供了一个 window.onload = fn 事件: 页面结构及页面所需资源全部加载完毕, 只能绑定一个事件方法-->
    <!--jq中document提供了一个 $(document).ready(fn) 事件: 页面结构加载完毕, 能绑定多个事件方法, 可以简写-->
    <script>
        // 时间得当就可以处理, 问题多多
        // setTimeout(function () {
        //     var $box = $('#box');
        //
        //     console.log($box);
        // }, 1)
​
​
    </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>
// 一,可以保证页面结构一定加载完毕, 二,可以保证数据的局部化(不会被外界直接读写)
$(function () {
    var $box;
});
</script>
<script>
​
</script>
</html>
View Code

三、jq操作元素对象

// 链式操作: (几乎)每一个方法都具有返回值(元素对象)
​
// 1.文本内容
var res = $('.box:first-child').text("100").html("<b>888</b>");
​
// console.log(res);
​
// 2.样式
res = $('.box').eq(1)
    .css("color", "pink")
    .css("font-size", "30px")
    .css({
    backgroundColor: "orange",
    "height": "80px"
})
    .css("width", function (index,oldVal) {
    console.log(this); // js对象 转化为jq对象来使用
    console.log($(this).height());
    // 宽度为自身高度的2倍
    return $(this).height() * 2;
})
    .css("border-radius"); // 能获取计算后样式
​
// console.log(res);
​
// 3.类名
res = $('.box:nth-child(3)').addClass("abc").removeClass("abc");
​
console.log(res);
​
// 4.全局属性
$('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"));
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq控制元素对象</title>
​
    <style>
        .abc {
            background-color: red;
            /*...*/
        }
        .box {
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="box">001</div>
<div class="box">002</div>
<div class="box">003</div>
​
<img src="" alt="" ooo="100w">
</body>
​
<script src="js/jquery-3.3.1.js"></script>
​
​
<script>
    $(function () {
        // 链式操作: (几乎)每一个方法都具有返回值(元素对象)
​
        // 1.文本内容
        var res = $('.box:first-child').text("100").html("<b>888</b>");
​
        // console.log(res);
​
​
        // 2.样式
        res = $('.box').eq(1)
            .css("color", "pink")
            .css("font-size", "30px")
            .css({
                backgroundColor: "orange",
                "height": "80px"
            })
            .css("width", function (index,oldVal) {
                console.log(this); // js对象 转化为jq对象来使用
                console.log($(this).height());
                // 宽度为自身高度的2倍
                return $(this).height() * 2;
            })
            .css("border-radius"); // 能获取计算后样式
​
        // console.log(res);
​
        // 3.类名
        res = $('.box:nth-child(3)').addClass("abc").removeClass("abc");
​
        console.log(res);
​
        // 4.全局属性
        $('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"));
    })
</script>
</html>
View Code

四、jq获取盒子信息

  • 显示信息

// 盒子信息:
// 宽高 | 内边距 | 宽边 | 外边距
​
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);

  • 位置信息

// 相对窗口偏移: 算margin产生的距离
console.log($('.box').offset().top, $('.box').offset().left);
​
// 绝对定位偏移(top,left): 不算margin产生的距离
console.log($('.box').position().top, $('.box').position().left);
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq获取盒子信息</title>
    <style>
        body {
            margin: 0;
        }
        .sup {
            width: 350px;
            height: 350px;
            background-color: pink;
            position: relative;
            margin: 10px;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
            padding: 10px;
            border: 20px solid black;
            margin: 50px;
            position: absolute;
            top: 5px;
            left: 5px;
        }
    </style>
</head>
<body>
    <div class="sup">
        <div class="box"></div>
    </div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 盒子信息:
    // 宽高 | 内边距 | 宽边 | 外边距
​
    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);
​
​
</script>
<script>
    // 相对窗口偏移
    console.log($('.box').offset().top, $('.box').offset().left);
​
    // 绝对定位偏移(top,left)
    console.log($('.box').position().top, $('.box').position().left);
​
</script>
</html>
View Code

六、事件

// 事件名, 函数
$('.box').on('click', function (ev) {
    // jq事件对象对js事件对象 兼容
    console.log(ev);
})
// 取消默认事件: 取消系统自带的功能, 右键的右键框, a标签点击的href转跳
ev.preventDefault(); | 事件方法 return false;
​
// 阻止事件的传播(阻止事件的冒泡): 父子有同样事件,子响应了事件,会将事件传递给父,父级也会响应同样的事件
// 只让子点击子相应,只点击到父,父相应,子级需要阻止事件的传播
ev.stopPropagation();
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq事件</title>
    <style>
        .sup {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="sss">123</span>
        <i>456</i>
    </div>
​
    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // $('.box').on('click', function () {
    //     // alert(this.innerText);
    //     alert($(this).text())
    // })
    
    // $('.box').click(function () {
    //     alert($(this).text())
    // })
​
    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("子点击")
    })
​
</script>
</html>
View Code

七、jq动画

// 鼠标悬浮事件
$('.box').on('mouseenter', function () {
    // {动画的属性们} 动画事件 动画效果(可插件,省略) 动画结束的回调函数fn
    $(this).animate({
        width: "400px",
        height: "400px",
        "background-color": "red" // 原生jq不支持颜色动画
    }, 1000, function () {
        console.log("变大结束")
    })
​
})
// 鼠标移开事件
$('.box').on('mouseleave', function () {
    $(this).animate({
        width: "200px",
        height: "200px"
    }, 1000, function () {
        console.log("动画完成时的回调函数")
    })
})
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq动画(了解)</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>

<script>
    $('.box').on('mouseenter', function () {
        // console.log(11111111)
        $(this).animate({
            width: "400px",
            height: "400px",
            "background-color": "red"
        }, 1000, function () {
            console.log("变大结束")
        })

    })

    $('.box').on('mouseleave', function () {
        // console.log(22222222)
        $(this).animate({
            width: "200px",
            height: "200px"
        }, 1000, function () {
            console.log("动画完成时的回调函数")
        })
    })
    
</script>
</html>
View Code

八、jq结合css动画

<style>
    .box { /*第一状态*/
        width: 200px;
        height: 200px;
        background-color: brown;
        margin: 100px auto;
        transition: 1s;
    }
    .box.move { /*第二状态*/
        margin-top: 50px;
        width: 300px;
        height: 300px;
        background-color: yellow;
    }
</style>
<body>
    <div class="box"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>

<script>
    $('.box').on('mouseenter', function () {
        $(this).addClass('move'); // 添加了move类名,从第一状态动画到第二状态
    })

    $('.box').on('mouseleave', function () {
        $(this).removeClass('move'); // 删除了move类名,从第二状态动画到第一状态
    })

</script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq&css动画</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: brown;
            margin: 100px auto;
            transition: 1s;
        }
        .box.move {
            margin-top: 50px;
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>

<script>
    $('.box').on('mouseenter', function () {
        $(this).addClass('move');
    })

    $('.box').on('mouseleave', function () {
        $(this).removeClass('move');
    })
</script>
</html>
View Code

 

 

posted @ 2019-01-28 20:34  zhao_peng  阅读(936)  评论(0)  编辑  收藏  举报