Java学习之------jQuery

最新推荐文章于 2021-06-28 16:44:22 发布

原创最新推荐文章于 2021-06-28 16:44:22 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

博客主要围绕jQuery展开，介绍了利用jQuery使表格偶数行变色，提及数组下标从0开始。还阐述了jQuery选择器以美元符号开头及隐式迭代，同时列举了常见的jQuery事件方法，如$ document.ready()和click()。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery

jQuery是一个简洁的JavaScript框架,它的宗旨是"write less,do more" .

首先看一下，利用jQuery来使表格的偶数行变色。数组下标是从0开始的呦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<table id="tb" border="1px">
    <tbody id="tbody">
    <tr>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>7</td>
    </tr>
    </tbody>

</table>

<script src="jquery-3.4.1.min.js"></script>
<script>
//tr:even 选中tr的偶数行 所有的tr打印出来是一个数组 下标是从0开始计算的
    $("tr:even").css("background-color","blue");
</script>
</body>
</html>

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js">

    </script>
</head>
<body>
<!--<a href="">你好啊</a>
<p id="i">432</p>
<div class="c"></div>
<span>pig</span>-->
<input type="button" value="按钮">
<script>
    $("[value ='按钮']").keydown(function () {
        console.log("go")
    })
    $("[value ='按钮']").keyup(function () {
        console.log("上去了")
    })
    $("[value ='按钮']").keypress(function () {
        console.log("按压")
    })

    //$==jquery 就是工厂函数
    //()选择什么标签加工
    

    


</script>
</body>
</html>

隐式迭代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script src="jquery-3.4.1.min.js"></script>
<script>
//隐式迭代,可以选择多个css样式,用大括号包起来
    $("li").css({"background":"red","color":"20px"});
</script>
</body>
</html>

jQuery 中所有选择器都以美元符号开头:$()。
常见的jQuery事件方法；
　5.1 $ document.ready()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../environment/jquery-3.4.1.min.js"></script>

</head>
<body>
<p>
    你好啊
</p>
<script>
    $(document).ready(function () {
        alert("文档加载成功");
    });

</script>
</body>
</html>

在这里插入图片描述
　5.2 click()

<body>
<p>
    你好啊
</p>
<div id="i">我是i标签</div>
<script>
    $(document).ready(function () {
        alert("文档加载成功");
    });
    $("#i").click(function () {
    //当点击i标签的内容，就会触发下列事件
       alert("触发i标签");
    });

</script>
</body>

在这里插入图片描述