返回JQuery选......登陆

JQuery选择器练习

Immortals2019-01-01 18:49:13261

对JQuery的几种选择器进行了练习,并尝试通过JavaScript中的变量获取更改jQuery的CSS样式,但中间的链接失败了,然后改成通过简单的获取jquery的状态输出alert弹窗!


未标题-1.jpg


<!DOCTYPE html>

<html >

<head>

<meta charset=utf-8" />

<title>jquery练习</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

    <style>

table{width:360px;height:40px;line-height:40px;text-align:center;}

    </style>

</head>

<body>

<script type="text/javascript">

$(document).ready(function(){

$('tr:odd').css('background','#D3D3D3')

$('td:contains(A+)').css('color','limegreen')

$('td:contains(D)').css('color','red')

$(function(){ 

$("input[type=checkbox]").change(function() { 

alert("你选了:"+$(this).val())

}); 

});

})

</script>

<table border="1" cellspacing="0">

    <tr>

        <td>姓名</td>

            <td>语文</td>

            <td>数学</td>

            <td>英语</td>

            <td>文综</td>

            <td>理综</td>

        </tr>

        <tr>

        <td id="name1">张三</td>

            <td>A+</td>

            <td>A</td>

            <td>A</td>

            <td>B+</td>

            <td>A+</td>

        </tr>

        <tr>

        <td id="name2">李四</td>

            <td>A</td>

            <td>A+</td>

            <td>B+</td>

            <td>A+</td>

            <td>C+</td>

        </tr>

        <tr>

        <td id="name3">王五</td>

            <td>B+</td>

            <td>B</td>

            <td>D</td>

            <td>A</td>

            <td>C</td>

        </tr>

        <tr>

        <td id="name4">赵六</td>

            <td>A</td>

            <td>C+</td>

            <td>A+</td>

            <td>A</td>

            <td>D</td>

        </tr>

    </table>

    <form>

    <label><input type="checkbox" value="张三" name="" />张三</label>

    <label><input type="checkbox" value="李四" name="" />李四</label>

    <label><input type="checkbox" value="王五" name="" />王五</label>

    <label><input type="checkbox" value="赵六" name="" />赵六</label>

    </form>

</body>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送