用jQuery写图书新增页面

最新推荐文章于 2023-06-23 16:45:50 发布
最新推荐文章于 2023-06-23 16:45:50 发布
阅读量523 收藏 1
点赞数 2
分类专栏： JSP 文章标签： css html js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xiaobai_0106/article/details/109339480
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
</head>
<body>
<div class="whole">
    <p>商品添加</p>
    <div>
        <span>
            所属类别：
        </span>
        <select>
            <option>小说</option>
            <option>玄幻</option>
            <option>武侠</option>
            <option>修仙</option>
        </select>
        <span>*</span>
    </div>

    <div>
        <span>
            图书名称：
        </span>
        <input type="text" id="bookName" class="bookName" value="">
        <span>*</span>
    </div>

    <div>
        <span>
            作者：
        </span>
        <input type="text" id="author" class="bookName" value="">
        <span>*</span>
    </div>


    <div>
        <span>
            出版社：
        </span>
        <input type="text" id="press" class="bookName" value="">
        <span>*</span>
    </div>


    <div>
        <span>
            市场价格：
        </span>
        <input type="text" id="marketPrice" class="bookName" value="">
        <span>*</span>
    </div>


    <div>
        <span>
           热卖价：
        </span>
        <input type="text" id="price" class="bookName" value="">
        <span>*</span>
    </div>

    <div>
        <span>
            图像：
        </span>
        <select>
            <option>123</option>
            <option>456</option>
            <option>789</option>
            <option>321</option>
        </select>
        <span>*</span>
    </div>

    <div>
        <span>
          是否为推荐：
        </span>
        <input type="checkbox" id="checkBox">

    </div>

    <div>
        <span>
          是否为热门：
        </span>
        <input type="checkbox" id="checkBox2">

    </div>

    <div>
        <div>
        <span>
          简单描述：
        </span>
        </div>
        <textarea rows="5" cols="30">

       </textarea>

    </div>
    <div>
        <div>
            <input type="submit" value="添加" onclick="bookJudge()">
        </div>
    </div>
</div>
<script>
    // 父类下的第一层的div居中 设置宽高
    $(".whole>div").css("width", "350px").css("height", "30px").css("margin", "0 auto");
    // 父类下的第一层的第九个div 设置宽高背景颜色
    $(".whole>div:eq(9)").css("width", "350px").css("height", "80px").css("background-color", "darkgray");
    // 父类下的第一层的第九个div下的div 设置垂直居中
    $(".whole>div:eq(9)>div").css("line-height", "80px").css("float", "left");
    // 父类下的第一层的第九个div下的div 设置宽高水平居中
    $(".whole>div:eq(10)>div").css("height", "30px").css("width", "20px").css("margin", "0 auto");
    // 所有的p标签字体颜色为红色
    $("p").css("text-align", "center").css("color", "red");
    //设置*颜色为红色
    $(".whole>div:eq(5)>span:eq(1)").css("color", "red");
    $(".whole>div:eq(1)>span:eq(1)").css("color", "red");
    $(".whole>div:eq(2)>span:eq(1)").css("color", "red");
    $(".whole>div:eq(3)>span:eq(1)").css("color", "red");
    $(".whole>div:eq(4)>span:eq(1)").css("color", "red");
 
    // 得到一个Class的数组
    var boxs = document.getElementsByClassName("bookName");
    //打印长度
    console.log(boxs.length);

    function bookJudge() {
        var mes=["请填写图书名称","请填写作者","请填写出版社","请填写市场价格","请填写热卖价个"];
        var mes1= boxs[0].value;
        var mes2= boxs[1].value;
        var mes3= boxs[2].value;
        var mes4= boxs[3].value;
        var mes5= boxs[4].value;

        if(mes1==""){
            alert(mes[0]);
        }else if(mes2==""){
            alert(mes[1]);
        }else if(mes3==""){
            alert(mes[2]);
        }else if(mes4==""){
            alert(mes[3]);
        }else if(mes5==""){
            alert(mes[4]);
        }else{
            alert("注册成功");
        }


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

在这里插入图片描述

JQuery制作图书简介页面
weixin_46528860的博客
10-14 2956
第二章 JQuery选择器 练习1：制作图书简介页面 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>图书简介</title> <link rel="stylesheet" href="css/bookStyle.css"> </head> <body> <section..
使用jQuery制作图书简介
liuyan11223的博客
07-06 1212
jQury里添加样式和鼠标点击事件
jQuery 页面新增 与 删除
Xiaobai_0106的博客
11-03 325
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> <style> table, th, td { border: 1px solid
jQuery基础--制作图书简介页面
weixin_50419323的博客
10-27 2537
需求： 实现代码：
jQuery版图书馆管理系统
04-10
1、系统需求分析及数据库建模 2、主界面WebOS搭建 3、实现图书馆管理系统的登录 4、实现图书馆信息管理 5、更改口令及利用用户自定义控件技术简化代码 6、利用母板页技术及JSOOP思想实现书架信息管理(1) 7、利用母板页技术及JSOOP思想实现书架信息管理(2) 8、系统管理-权限设置 9、实现读者管理-读者类型管理 10、实现图书管理-图书类型管理 11、实现读者管理-读者档案管理(1) 12、实现读者管理-读者档案管理(2) 13、实现图书管理-图书档案管理 14、实现图书借阅功能 15、实现图书续借及归还功能 16、实现系统查询模块-图书档案与图书借阅查询 17、实现图书借阅排行榜及报表打印 18、完善权限控制及实现桌面快键方式功能 19、图书借阅排行榜-数据统计分析及图表显示 20、利用jquery-treeview实现读者借书清单
JQuery图书管理系统
萌新程序猿的博客
10-24 2762
使用JQuery制作一个简易的图书管理系统，实现增删改查，并从数据库中导入数据
Ajax入门——第一节：案例：用jQuery和Ajax编码的图书管理系统
123加油的博客
07-05 1773
用到的 css 库 用到的 javascript 库 用到的 vs code 插件 1.先导入和 2.然后写HTML文件，利用Bootstrap 3 Snippets插件，进行页面的渲染，如下： 5. 运行的结果如下： 6.继续渲染UI界面，输入 插入 7.按下enter键，产生如下代码： 8.复制类名为的类，产生3个输入框，再写一个按钮 9. 渲染的ui效果如下 10.为了让3个输入框和一个按钮横向排列，在总类里面加入类名即可，为了美观，并加个边距 11.结果： 12.表格，输入bs
使用JavaScript和jQuery实现表格增删改(图书管理系统)
KKKKKKKMAx的博客
11-03 1033
使用JavaScript和jQuery实现表格增删改(图书管理系统)
第9讲：使用ajax技术实现增删改查及分页显示功能（jQuery）
最新发布
软件之家的博客
06-23 1435
本讲内容首先讲解jQuery对ajax的支持，分别讲解$.post,$.get,$.ajax等方法，这些方法的参数，使用方法及区别。最后对ajax的综合应用举例：在同一个页面实现新增，修改，删除学校资料，分页列表等功能，前端使用html静态页面，使用MySQL数据库，后台使用servlet技术实现。
【JAVA项目实战】【图书管理系统】用户删除功能【Servlet】+【JQuery】+【Mysql】
ALi.S的博客
07-31 2612
这里是【JAVASE】项目实战的第三节课，接着前面的用户新增功能继续做，今天做的是用户的删除功能，使用【servlet】、【JQuery】、【Mysql】来实现该功能。
制作一个简单的JQuery页面
12-30
制作一个简单的JQuery页面，制作一个简单的JQuery页面
JQuery版图书馆管理系统功能演示
07-26
1、系统需求分析及数据库建模 2、主界面WebOS搭建 3、实现图书馆管理系统的登录 4、实现图书馆信息管理 5、更改口令及利用用户自定义控件技术简化代码 6、利用母板页技术及JSOOP思想实现书架信息管理(1) 7、利用母板页技术及JSOOP思想实现书架信息管理(2) 8、系统管理-权限设置 9、实现读者管理-读者类型管理 10、实现图书管理-图书类型管理 11、实现读者管理-读者档案管理(1) 12、实现读者管理-读者档案管理(2) 13、实现图书管理-图书档案管理 14、实现图书借阅功能 15、实现图书续借及归还功能 16、实现系统查询模块-图书档案与图书借阅查询 17、实现图书借阅排行榜及报表打印 18、完善权限控制及实现桌面快键方式功能 19、图书借阅排行榜-数据统计分析及图表显示 20、利用jquery-treeview实现读者借书清单
jquery 学习书籍以及随书代码，非常顶用
09-27
好定西，神器jquery。。此书是亚马逊经典图书，非常靠谱
图书目录页面
07-09
按照图书目录的样子写的一个简单页面！每个标题所对应的页码，标题下边有简短的介绍！
当当网源代码 jQuery
12-18
ACCP7.0 第九章当当网的代码 要的速度了
制作图书简介页面（JavaScript）
weixin_48112113的博客
08-02 5850
1. 任务要求 1）熟悉jQuery的选择器； 2）掌握jQuery的基本选择器； 3）掌握jQuery对象的click()方法； 4）掌握jQuery对象的css()方法；
jQuery实现图书添加页面输入信息验证
weixin_45750969的博客
10-29 397
1.实现原理 jQuery blur()方法 实现此功能 2.jQuery blur()方法： blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的 描述: 触发所有段落的blur事件 jQuery 代码: $("span").blur(); 描述: 任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。 jQuery 代码: $("span").blur( function () { alert("Hello World!"
jQuery:书籍展示效果
weixin_34218579的博客
06-29 506
前段时间在国外的博客上看到这个jQuery的书籍展示效果，觉得很是不错，并下载了源码，自己重新编写了CSS和JS，效果:如下说明：因为在此页面中是通过使用iframe标签引入外部页面，加上显示页面的宽度有限，所以当鼠标移动到Info图标上时，部分内容被遮盖住，这时你可以通过外部链接查看：Demo具体代码实现如下：（源代码下载）1.html代码:1 2 3 4 5 6 7 8 9 ...
jQuery 点击超链接生成一个的页面，点击几次，生成几个新页面
weixin_30609287的博客
01-20 137
var App = { openWindow : function(url) { var date=new Date(); var dateTimes=date.getDate(); window.open(url+"a"+dateTimes) }} 页面中使用： <a href="javascript:App.openWindow(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值