实验6&知识点

最新推荐文章于 2024-08-04 16:33:59 发布

Blue_porcelain

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量109

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/Blue_porcelain/article/details/130324907

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        #wordArea{
            margin-right: 140px;
        }
        #searchArea{
            float: right;
            width: 120px;
        }
        #header input{
            width: 100%;
        }
    </style>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
        $().ready(function(){
            $("#searchArea").on("click",showDetail);

            $("#wordArea input").on("input",function(){
                $.ajax({
                    url: "http://43.136.217.18:8081/getSimilarWords",
                    data:{word:$(this).val()},
                    type:"GET",
                    datatype:"json",
                    success:function(data){
                        if(data.state=="SUC"){
                            var html = "<ul>";
                            for(var i in data.content){
                                html+= "<li>" + data.content[i] + "</li>"; 
                            }
                            html += "</ul>";
                            $("#contentArea").html(html);
                            $("#contentArea li").on("click",function(){
                                $("#wordArea input").val($(this).text());
                                showDetail();
                            });
                        }
                        else{
                            $("#contentArea").html(data.msg);
                        }
                    },
                    error:function(data){
                        $("#contentArea").html("系统错误消息");
                    }
                });
            });
        });

            function showDetail(){
                var word1 = $("#wordArea input").val();
                $.ajax({
                    url: "http://43.136.217.18:8081/getWordDetail",
                    data: {word: word1},
                    type: "GET",
                    datatype: "json",

                    success:function(data){
                        if(data.state == "SUC"){
                            var html1 = "<ul>";
                            for(var i in data.content){
                                for(var j in data.content[i].trans){   
                                    html1 += "<li>" + data.content[i].trans[j].pos;
                                    html1 += data.content[i].trans[j].chn + "</li>";
                                }  
                            }
                            html1 += "</ul>";
                            $("#contentArea").html(html1);
                        }
                        else{
                            $("#contentArea").html(data.msg);
                        }
                    },
                    error:function(data){
                        $("#contentArea").html("系统错误消息");
                    }
                });
            }
        
    </script>
</head>
<body>
    <div id="header">
        <div id="searchArea"><input type="button" value="查询"></div>
        <div id="wordArea"><input type="text" placeholder="请输入英文词汇"></div>
    </div>
    <div id="contentArea"></div>
</body>
</html>

1. 页面数据缓存
(1)以键值对保存和存储临时数据，可在一个页面保存，另一个页面打开
localStorage.setItem("key", value);
localStorage.getItem("key");

(2)例：
在a.html保存姓名
localStorage.setItem("name", "张三");
在b.html中取出姓名
var name = localStorage.getItem("name");

2. 复选框
<input type="checkbox" id="checkItem" value="1">
(1)获取复选框的值
$("#checkItem").val();

(2)获取复选框是否被选中
$(this).is(":checked")

(3)复选框被选中后获取值
$("#checkItem").click(function(){
if($(this).is(":checked")){
var value = $("#checkItem").val();
}
});

3. 单选框
(1)利用name分组，name相同的单选框为一组
<input type="radio" value="男" name="sex">男<br>
<input type="radio" value="女" name="sex">女<br>
<input type="radio" value="普通用户" name="userType">普通用户<br>
<input type="radio" value="管理员" name="userType">管理员<br>

(2)在jquery中获取一组单选框被选中的值
$("input[name='sex']:checked").val();

(2)选择后获取本组单选框的值
$("input[name='sex']").click(function(){
var value = $("input[name='sex']:checked").val();
alert(value);
});

4. 下拉菜单
<select id="menu">
<option value="四川">四川</option>
<option value="湖北">湖北</option>
<option value="广东">广东</option>
</select>

(1)在jquery中获取被选选项值
$("#menu").val()

(2)选择下拉选项后获取被选选项值
$("#menu").change(function(){
var value = $("#menu").val();
alert(value);
});

Blue_porcelain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实验6&知识点

input type="radio" value="普通用户" name="userType">普通用户<br><input type="radio" value="管理员" name="userType">管理员<br><input type="radio" value="男" name="sex">男<br><input type="radio" value="女" name="sex">女<br>localStorage.setItem("name", "张三");(2)选择后获取本组单选框的值。
复制链接

扫一扫