jQuery学习笔录7（jQuery中的文本操作）
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>