JavaWeb(4)——jQuery(2)、书城项目第一阶段

目录

jQuery 的属性操作

jQuery 属性操作的函数

全选、 全不选、反选

DOM 的增删改

把左右元素两边位置互换

动态添加删除记录

CSS 样式操作

jQuery 动画

CSS_动画之品牌展示

jQuery 事件操作

$(document).ready(function(){}; 和 window.onload = function(){};的区别?

jQuery 中其他的事件处理方法:

事件的冒泡

javaScript 事件对象

图片跟随

使用所学知识完成书城项目第一阶段——表单验证

创建Modul项目并用Tomcat运行Web项目

项目完整结构参考

完成需求(以注册页面为例子)


jQuery 的属性操作

jQuery 属性操作的函数

  • html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。
  • text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。
  • val() 它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样 

  • attr() 可以设置和获取属性的值,不推荐操作 checked、readOnly、selected、disabled 等等,因为他们可能因为标签未定义而返回undefined错误提示。 attr 方法还可以操作非标准的属性。比如自定义属性:abc,bbj
  • prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等
  • 因此attr()与prop()是互补关系

代码演示单个操作html()、text()、val()

<!DOCTYPE html>
<html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
        <script type="text/javascript">

            $(function () {
                // 不传参数,是获取,传递参数是设置
                alert($("div").html());// 我是div标签 <span>我是div中的span</span>,获取
                $("div").html("<h1>我是div中的标题 1</h1>");// 设置对象起始和结束标签内的HTML

                // 不传参数,是获取,传递参数是设置
                alert($("div").text()); // 我是div中的标题 1,获取
                $("div").text("<h1>我是div中的标题 1</h1>"); // 设置文本信息

                // 不传参数,是获取,传递参数是设置
                $("button").click(function () {
                    alert($("#username").val());//获取
                    $("#username").val("超级程序猿");// 设置
                });
            });

        </script>
    </head>
    <body>
        <div>我是div标签 <span>我是div中的span</span></div>
        <input type="text" name="username" id="username"/>
        <button>操作输入框</button>
    </body>
</html>

 代码演示批量操作html()、text()、val()

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
/*
            // 批量操作:选中所有的class="radio"单选项的默认值为radio2
            $(":radio").val(["radio2"]);

            // 批量操作:多选框的选中状态
            $(":checkbox").val(["checkbox3","checkbox2"]);

            // 批量操作多选的下拉框选中状态
            $("#multiple").val(["mul2","mul3","mul4"]);

            // 操作单选的下拉框选中状态
            $("#single").val(["sin2"]);
*/
            //批量按顺序操作多个选框的默认值
            $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
        });

    </script>
</head>
<body>
<body>
    <!--这里的value属性所带的值表示该单选项所携带的值,与name属性凑成一个要发送的KV-->
    单选:
    <input name="radio" type="radio" value="radio1" />radio1
    <input name="radio" type="radio" value="radio2" />radio2
    <br/>
    多选:
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>

    下拉多选 :
    <select id="multiple" multiple="multiple" size="4">
        <option value="mul1">mul1</option>
        <option value="mul2">mul2</option>
        <option value="mul3">mul3</option>
        <option value="mul4">mul4</option>
    </select>
    <br/>

    下拉单选 :
    <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
    </select>
</body>
</body>
</html>

代码演示jQuery 属性操作的函数attr()、prop()

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //获取所有多选框中的第一个属性name的值及修改该属性的值
            alert( $(":checkbox:first").attr("name") ); // checkbox,获取
            $(":checkbox:first").attr("name","abc") ; // 修改该属性的值为abc,设置
            alert( $(":checkbox:first").attr("name") ); // abc,证明该属性值已经被修改

/*
            不能用attr("checked")的原因是因为如果没有多选框被选中,那么就会返还undefined,官方官方觉得返回undefined是一个错误,
            如果多选框有一个被选中了attr("checked")函数会返回checked
            改用prop("checked"),如果没有多选框被选中,那么就会返还false,表示否认的意思,就是没有一个选框被选中,
            如果如果多选框有一个被选中了attr("checked")函数会返回true,表示至少一个多选框被选中
            总结一下使用prop函数更加直观并且可以忽略因为选框没有被选中而产生的未定义错误提示返回undefined
*/
            alert($(":checkbox").attr("checked"));//undefined
            $(":checkbox").prop("checked",true );//true就是表示选中的意思,这里没有特指选中哪一个多选框,因此是全选

            // 给指定标签对象设置自定义属性abc,并设定值为abcValue,然后读取
            $(":checkbox:first").attr("abc","abcValue");
            alert( $(":checkbox:first").attr("abc") );//abcValue
        });

    </script>
</head>
<body>
<body>
    <br/>
    <!--属性checked="checked"表示多选框中默认选中该选项-->
    多选:
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2

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

全选、 全不选、反选

代码演示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">

            $(function () {
                //获取多选框且name=items的标签
                var $items = $(":checkbox[name=items]");
                //获取所有name='items'的多选框标签
                var items = $("[name='items']");

                //全选按钮,把所有name='items'的多选框标签和全选的多选框勾上
                $("#checkedAllBtn").click(function () {
                    items.attr("checked", true);
                    $("#checkedAllBox").attr("checked", true);
                });

                //全不选按钮,把所有name='items'的多选框标签和全选的多选框取消勾选
                $("#checkedNoBtn").click(function () {
                    items.attr("checked", false);
                    $("#checkedAllBox").attr("checked", false);
                });

                //反选按钮
                $("#checkedRevBtn").click(function () {
                    items.each(function () {
                        this.checked = !this.checked;
                    });
                    var flag = $("[name='items']:checked").length == 4;
                    $("#checkedAllBox").attr("checked", flag);
                });

                //提交按钮,选择所有name="items"且选中的复选框对象,然后对每个复选框对象进行回调,在弹窗中显示
                $("#sendBtn").click(function () {
                    $(":checkbox[name='items']:checked").each(function () {
                        alert(this.value);
                    });
                });

                //全选(全不选)复选框
                $("#checkedAllBox").click(function () {
                    items.attr("checked", this.checked);
                });

                //全选/全不选复选框与items状态同步
                $("[name='items']").click(function () {
                    var flag = $("[name='items']:checked").length == 4;
                    $("#checkedAllBox").attr("checked", flag);
                });
            });

        </script>
    </head>
    <body>

        <form method="post" action="">

            你爱好的运动是?<input type="checkbox" id="checkedAllBox"/>全选/全不选

            <br/>
            <input type="checkbox" name="items" value="足球"/>足球
            <input type="checkbox" name="items" value="篮球"/>篮球
            <input type="checkbox" name="items" value="羽毛球"/>羽毛球
            <input type="checkbox" name="items" value="乒乓球"/>乒乓球
            <br/>
            <input type="button" id="checkedAllBtn" value="全 选"/>
            <input type="button" id="checkedNoBtn" value="全不选"/>
            <input type="button" id="checkedRevBtn" value="反 选"/>
            <input type="button" id="sendBtn" value="提 交"/>
        </form>

    </body>
</html>

DOM 的增删改

  • 内部插入
    • appendTo() #a.appendTo(b) 把 a 插入到 b 子元素末尾,成为最后一个子元素
    • prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面,成为第一个子元素
  • 外部插入:
    • insertAfter() a.insertAfter(b) 得到 ba
    • insertBefore() a.insertBefore(b) 得到 ab
  • 替换:
    • replaceWith() a.replaceWith(b) 用 b 替换掉 a
    • replaceAll() a.replaceAll(b) 用 a 替换掉所有 b
  • 删除:
    • remove() a.remove(); 删除 a 标签
    • empty() a.empty(); 清空 a 标签里的内容

代码演示

<!DOCTYPE html>
<html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">

            $(function () {

                //内部插入
                //appendTo() #a.appendTo(b) 把 a 插入到 b 子元素末尾,成为最后一个子元素
                $("<h1>标题1</h1>").appendTo($("div"));
                //prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面,成为第一个子元素
                $("<h1>标题2</h1>").prependTo($("div"));

                //外部插入
                //insertAfter() a.insertAfter(b) 得到 ba
                $("<h1>标题3</h1>").insertAfter("div");
                //insertBefore() a.insertBefore(b) 得到 ab
                $("<h1>标题4</h1>").insertBefore("div");

                //替换
                //replaceWith() a.replaceWith(b) 用 b 替换掉 a
                $("p").replaceWith("<h1>标题5</h1>");
                // $("<h1>标题</h1>").replaceWith("p");//如果用存在的东西替换不存在的东西,那该方法无效果
                //replaceAll() a.replaceAll(b) 用 a 替换掉所有 b
                $("<h1>标题6</h1>").replaceAll("a");

                //删除
                //remove() a.remove(); 删除 a 标签
                $("c").remove();
                //empty() a.empty(); 清空 a 标签里的内容,但标签对象的属性不清空
                $("b").empty();

            });


        </script>
    </head>
    <body>
        <body>
            <div>1234</div>
            <div>1234</div>
            <p>6666</p>
            <a>7777</a>
            <b margin="5px">8888</b>
            <c>9999</c>
        </body>
    </body>
</html>

 

把左右元素两边位置互换

代码演示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <style type="text/css">
            select {
                width: 100px;
                height: 140px;
            }

            div {
                width: 130px;
                float: left;
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () {
                //选中添加到右边
                $("button:eq(0)").click(function () {
                    //这里的option根据需求可有可无,表示选中option标签,下面有省略都同理
                    $("select[name=sel01] /*option*/:selected").each(function () {
                        //appendTo() #a.appendTo(b) 把 a 插入到 b 子元素末尾,成为最后一个子元素
                        $(this).appendTo("select[name=sel02]");
        
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值