初识jQuery---二

最新推荐文章于 2021-12-14 14:44:03 发布

weixin_43700362

最新推荐文章于 2021-12-14 14:44:03 发布

阅读量102

点赞数

文章标签：初始jquery

本文链接：https://blog.csdn.net/weixin_43700362/article/details/103212071

版权

程序五：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    table{
        width:500px;
        height:300px;
    }
    table ,td{
        border:1px solid #000;
        border-collapse: collapse;
    }
</style>

<body>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<script src="js/jquery-1.12.3.min.js">

</script>
<script>
//    偶数行变色
    $("tr:even").css("background","red");

//    td单元格变色的话，是隔一个变一个 第偶数个变色
//$("td:even").css("background","yellow");

</script>

</body>
</html>

程序五运行结果：

在这里插入图片描述

比较巧合的是当一行刚好有偶数个td(单元格)的话，table会整列变色。
即偶数的单元格刚好位于同列。
在这里插入图片描述

程序六：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{
        width:200px;
        height:200px;
        background: red;
    }
</style>

<body>
<div class="box"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>

//    获得背景色，两种方式：backgroundColor 或者background-color
    console.log($(".box").css("backgroundColor"));
   console.log($(".box").css('background-color'));

//设置.box的宽高皆为400px。可以加px单位，也可以不加px单位
//    $(".box").css("width","400");
//   $(".box").css("height","400px");


// 同时设置多种属性,
//    $(".box").css({
//       "width": "500",
//        "height":"300px",
//         "background":"yellow",
//    })

//设置.box的宽度为现有的基础减去30px，宽度为现有的基础上加30px
$(".box").css("width","-=30");
   $(".box").css("height","+=30");

</script>

</body>
</html>

程序六运行结果：

在这里插入图片描述

程序七：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width:200px;
        height:200px;
        background: yellow;
    }
    .box1{
        position: absolute;
        top:10px;
    }
    .box2{
        position: absolute;
        top:300px;
    }
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>

//    可以没有回调函数，即div运动到终点的时候，啥也不做。 终点为300px,时间为2000毫秒
//    $(".box1").animate({left:300},2000);

//同一元素，有多个动画的时候，会排队执行 .box1先往右移动到300px，然后背景色变为天蓝色，
//再向下移动到500px的位置。 .box1的总的运动时间为2000+2000=4000ms。
//    $(".box1").animate({left:300},2000,function(){
//        $(".box1").css("background","skyblue");
//    });
//    $(".box1").animate({top:500},2000);


//不同元素，有动画的时候，不会排队执行（会一起执行）
$(".box1").animate({left:300},2000,function(){
    $(this).css("background","skyblue");
});
$(".box2").animate({left:300},2000,function(){
    $(this).css("background","skyblue");
});
</script>

</body>
</html>

程序七运行结果：

在这里插入图片描述

程序八：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background: red;
        }
    </style>
</head>

<body>
<div class="box"></div>
<script src="js/jquery-1.12.3.min.js"> </script>
<script>

//    当.box被点击的时候，输出click和evenet。事件不带on
    $(".box").click (function(event){
        console.log("click");
        console.log(event);
    })

//当.box被进入的时候，输出mouseenter和evenet。事件不带on
    $(".box").mouseenter (function(event){
        console.log("mouseenter");
        console.log(event);
    })

//当.box被出去的时候，输出mouseleave。事件不带on
    $(".box").mouseleave (function(){
        console.log("mouseleave");

    })


</script>

</body>
</html>

程序八运行结果：

在这里插入图片描述

weixin_43700362

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识jQuery---二

程序五：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> table{ width:500px; ...
复制链接

扫一扫