jQuery学习笔录7（jQuery中的文本操作）

来源：互联网发布：adb mac最新版本编辑：程序博客网时间：2024/05/22 06:37

Part1 涉及到了fieldset,添加伪类css，focus。

最后复习一下表单的知识

<form id="regForm" runat="server" method="post" action="#">        <fieldset>            <legend>个人基本信息</legend>            <div >                <label for="username">名称:</label>                <input id="username" type="text" />            </div>            <div >                <label for="pass">密码:</label>                <input id="pass" type="password"/>            </div>            <div >                <label for="msg">详细信息:</label>                <textarea id="msg"></textarea>            </div>        </fieldset>    </form>

css

<style type="text/css">        input:focus , textarea:focus{            border:1px solid #f00;            background:#fcc;        }    </style>

PartB TextArea高度及滚动条scrollTop

  <form >        <div class="msg">            <div class="msg_caption">                <span class="bigger">放大</span>                <span class="smaller">缩小</span>                <span class="up">向上</span>                <span class="down">向下</span>            </div>            <div>                <textarea id="comment" rows="8" cols="20">                    加油加油↖(^ω^)↗加油加油↖(^ω^)↗加油加油↖(^ω^)↗加油加油↖(^ω^)↗                    加油加油↖(^ω^)↗                    加油加油↖(^ω^)↗                    加油加油↖(^ω^)↗                </textarea>            </div>        </div>    </form>

jquery

1 stop([clearQueue] [,gotoEnd])

这2个参数皆为可选参数，值为Boolean类型。

clearQueue ：规定是否停止被选元素的所有加入队列的动画。

gotoEnd ：规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

2 animate(params [,speed] [,callback]);

3 $("comment").height(),有括号

<script>    $(".bigger").click(function(){    console.info(0)       if($("#comment").height()<500)       {console.info(1)            $("#comment").height($("#comment").height()+50);       }    })     $(".smaller").click(function(){        if($("#comment").height()>50)        {            $("#comment").animate({height:"-=50"},400);        }    })    //滚动条    $(".up").click(function(){        if(!$("#comment").is(":animated"))        {            $("#comment").animate({scrollTop:"-=50"},400);        }    })    $(".down").click(function(){        $("#comment").stop(true).animate({scrollTop:"+=50"},400);    })</script>

PartC 复选框：全选，全不选，反选，联级反应

each() 每一个,attr()属性等用法

<body>    <form id="form1" runat="server">    <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="CheckAll" value="全选" />    <input type="button" id="CheckNo" value="全不选" />    <input type="button" id="CheckRev" value="反选" />    <input type="button" id="send" value="提交" />    </form></body>

jquery

1:过滤 2 val()输出复选框内容

if($("input[name=StoreIDVice6]").val()=="") {
$("input[name=StoreIDVice]").val("-1");
}

3 val()给属性赋值

<script>    $("#CheckAll").click(function(){    //alert($("input[type='checkbox']:checked"))//        if(!$("input[type='checkbox']:checked"))//过滤出来的是 check上的，而且返回值是object        $("input[type='checkbox']").attr("checked",true);//[]属性对话    })    $("#CheckNo").click(function(){        $("input[type='checkbox']").attr("checked",false);//这都是对于checkbox整体的赋值    })    $("#CheckRev").click(function(){  //反选需要对每一个checkbox进行赋值        $("[name=items]:checkbox").each(function(){            //$(this).attr("checked",!$(this).attr("checked"));            this.checked=!this.checked;        })    })    $("#send").click(function(){        var str="你选择的是:\r\n";        $("input[name=items]:checkbox:checked").each(function(){            str += $(this).val()+"\r\n";        })        alert(str);    })    $("#CheckedAll").click(function(){//        if(this.checked){//            $("[name=items]:checkbox").attr("checked",true)//        }else{//            $("input[name=items]:checkbox").attr("checked",false);//        }        //we can do like that:         $("[name=items]:checkbox").attr("checked",this.checked);    })    $("[name=items]:checkbox").click(function(){        var flag=true;        $("[name=items]:checkbox").each(function(){            if(!this.checked){                flag=false            }        })        $("#CheckedAll").attr("checked",flag);    })</script>