jquery dom操作实现图片下拉，表格行列变色,文本内容同步添加和减少

勤奋的小镇青年、

于 2021-01-25 19:14:48 发布

阅读量184

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_53106424/article/details/112971772

版权

1.图片下拉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<select name="" id="sell">
    <option>请选择主题</option>
    <option value="清新">清新</option>
    <option value="炫酷">炫酷</option>
    <option value="激情">激情</option>
</select>
<br>
<img src="img/清新.jpg" alt="" height="285" width="500">
</body>
<script>
    //通过id获取select，绑定点击事件
    $("#sell").click(function () {
        //获取当前点击的value值
        let val = $(this).val();
        //给img进行赋值
        $("img").attr("src","img/"+val+".jpg")
    })
</script>
</html>

在这里插入图片描述
2.表格行列变色

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

    </style>
</head>
<body>
    <table cellpadding="10px" cellspacing="1">
        <tr>
            <td>编号</td>
            <td>书名</td>
            <td>作者</td>
        </tr>
        <tr>
            <td>1</td>
            <td>朝花夕拾</td>
            <td>鲁迅</td>
        </tr>
        <tr>
            <td>2</td>
            <td>呐喊</td>
            <td>鲁迅</td>
        </tr>
        <tr>
            <td>3</td>
            <td>陋室铭</td>
            <td>刘禹锡</td>
        </tr>
    </table>
    <br>
    <input type="button" value="隔行变色" id="btn1">
    <input type="button" value="隔列变色" id="btn2">
</body>
<script>
    $("#btn1").click(function () {
        //获取tr为基数下的子元素背景颜色变为"#b9ffd2"
        $("tr:odd").children().css("background","#b9ffd2")
        //获取tr为偶数数下的子元素背景颜色变为"#b9ffd2"
        $("tr:even").children().css("background","aqua")
    })
    $("#btn2").click(function () {
        $("td:nth-child(even)").css("background","#b9ffd2")
        $("td:nth-child(odd)").css("background","aqua")
    })

</script>
</html>

在这里插入图片描述
3.1文本内容同步添加和删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border:1px solid red;
        }
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <input type="text"  value="">
    <div>
    </div>
</body>
<script>
		//获取input标签绑定一个键盘事件
        $("input").keyup(function () {
            $("div").text($("input").val())
        })
</script>
</html>

在这里插入图片描述
3.2文本内容同步添加和删除-双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style>
        div{
            width: 49%;
            height: 800px;
            float: left;
        }
        #div1{
            border-right: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div1">
        <input type="text" id="inp1" placeholder="双向绑定">
    </div>
    <div id="div2">
        <input type="text" id="inp2" placeholder="双向绑定">
    </div>
</body>
<script>
	//给所有的input标签绑定键盘事件
    $("input").keyup(function () {
    	//input输入框里面的内容跟你当前操作的input内容相同
        $("input").val($(this).val())
    })
</script>
</html>

在这里插入图片描述
3.3文本内容同步添加和删除-搜索历史

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style>
        div{
            width: 49%;
            height: 800px;
            float: left;

        }
        #div1{
            border-right: 1px solid red;
        }
        p{
            background-color: thistle;
        }
    </style>
</head>
<body>

    <div id="div1">
        <input type="text" id="inp1" placeholder="双向绑定">
        <input type="button" class="btn" value="搜索">
        <hr>
        <p>
            <span>搜索历史记录</span>

        </p>
        <input type="button" class="clear" value="清除历史记录">
    </div>
    <div id="div2">
        <input type="text" id="inp2" placeholder="双向绑定">
        <input type="button" class="btn" value="搜索">
        <hr>
        <p>
            <span>搜索历史记录</span>
        </p>
        <input type="button" class="clear" value="清除历史记录">
    </div>
</body>
<script>
//获取input类型为text的输入框绑定键盘事件
    $("input:text").keyup(function () {
    //input类型为text输入框里面的内容跟你当前操作的input类型为text内容相同
        $("input:text").val($(this).val())
    })
	//获取class为btn的按钮绑定点击事件
    $(".btn").click(function () {
        let val = $("input").val();
        $("p").append("<br/><span>"+val+"</span>")
    })
    //清楚p里面的内容并添加span标签
   $('.clear').click(function () {
       $("p").html(" <span>搜索历史记录</span>")
   })
</script>
</html>

在这里插入图片描述

勤奋的小镇青年、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery dom操作实现图片下拉，表格行列变色,文本内容同步添加和减少

1.图片下拉<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.3.1.min.js"></script></head><body><select name="" id="sell"&gt
复制链接

扫一扫