javaweb实训第二天上午——jQuery笔记(2）

<input type="button" value="动态添加按钮" id="btn">
<div id="filediv">
<input type="button" code="button" value="按钮"><br/>
</div>

<script type="text/javascript">
$(function(){
/*Jquery对象.clone()  浅克隆仅仅克隆标签 Jquery对象.clone(true)  浅克隆标签及事件  */
$("#btn").on("click",function(){//拷贝按钮
$("input[code]:first").clone(true).appendTo($("#filediv"))
})
//为标签input[code]标签绑定事件
$("input[code]").on("click",function(){
alert(1);
})
});
</script>

<input type="text" id="username" data-age="22"  data-sex="true" 
data-email="12@qq.com"
data-person='{"name":"王天霸","age":33,"sex":"男"}'/>

<input type="button" id="addAttribute"  value="添加属性" /><br />
<input type="button" id="editAttribute"  value="修改属性" /><br />
<input type="button" id="removeAttribute"  value="删除属性" /><br />
<input type="text" id="username" /> 

<script type="text/javascript">
/** 在jQuery中添加属性，修改属性使用的函数,attr("属性名",属性值)//当没有这个属性名的时候，我就是添加属性，
 * 当我有这个属性名的时候，则是修改属性*/
$(function(){
//添加属性对应的按钮
$("#addAttribute").on("click",function(){
//添加属性
$("#username").attr("abc","def");
});
//修改属性对应的按钮
$("#editAttribute").on("click",function(){
$("#username").attr("abc","你被修改了");
});
//删除属性对应的按钮
$("#removeAttribute").on("click",function(){
//删除指定的属性
$("#username").removeAttr("abc");
});
});
</script>

$(function(){
/* 需求：打印li标签中所有的值 */
//获取到所有的li元素标签
var lis = $("ul li");
console.debug(lis);
/*jQuery循环迭代的语法格式：
$.each(数组/多个值,function(i,o){
i:循环次数的索引
o:列表中的具体元素
});
*/
$.each(lis,function(i,o){
console.debug(o.innerHTML);
})
});

$(function() {
//小题目1: 点击按钮获取被选中的input标签
$("#btn").click(function(){
var inputs = $("input[name=hobbies]:checked");
console.debug(inputs);
});
//小题目2:点击按钮隐藏p标签
$("p").click(function(){
var p = $(this);//点击那个p标签，this就代表那个p标签: 并转换成jQuery对象，方便我们调用jQuery中的方法
p.hide(1000);//调用函数隐藏，被点击的p标签
});
//小题目3：表格中的行，按照偶数行，和奇数行，分别给给字体，和行背景添加颜色
$("table tr:even").css({"color":"yellow","background":"blue"});
$("table tr:odd").css({"color":"green","background":"pink"});
});

$(function(){
//一行代码
$("#btn1").click(function(){
//选中select1 下面的option标签，但凡是被选中的，追加到$("#select2")
$("#select1 option:selected").appendTo( $("#select2") )
});
$("#btn2").click(function(){
//选中select1 下面的所有option标签，追加到$("#select2")
$("#select1 option").appendTo( $("#select2") )
});
});

<script type="text/javascript">
$(function(){
$("#checkAll").click(function(){//全选
$("input[name='hobbies']").prop("checked",true)
});
$("#checkNotAll").click(function(){//全不选
$("input[name='hobbies']").prop("checked",false)
});
$("#checkUnAll").click(function(){//反选
var inpus = $("input[name='hobbies']");
    $.each(inpus,function(i,o){
     if(o.checked==true){
     o.checked=false
     }else{
     o.checked=true;
     }
    });
});
});
function checkChange(src){//全选/全不选
var res = src.checked;
$("input[name='hobbies']").prop("checked",res)
}
</script>

$(function() {
$("#btn1").click(function(){
$("#select").val("2号")//设置下拉框的值为2号，所以2号的option被选中
});
$("#btn2").click(function(){
$("#selectMultiple").val(["2号","5号"])
})
$("#btn3").click(function(){
$("input[name=checkbox]").val(["复选2","复选4"])
})
$("#btn4").click(function(){
//$("input[name=radio]").val(["单选2"]);//方式1：这里注意，即便是单选，也要用数组才行
$("input[value=单选2]").prop("checked",true);//方式2:prop 对于单选框，复选框等属性的操作
})
$("#btn5").click(function(){//打印所有被选中的
var ches = $(":checked")
$.each(ches,function(i,o){
console.debug(o)
})
})
});
</script>

<script language="javascript">
$(function(){
//添加功能实现
$("#btn_submit").click(function(){
var username = $("#username").val()
var email = $("#email").val()
var tel = $("#tel").val()
$("#userTbody").append("<tr>"
+"<td>"+username+"</td>"
+"<td>"+email+"</td>"
+"<td>"+tel+"</td>"
+"<td><a href='javascript:void(0);' οnclick='remove(this)'>删除</a></td>"
+"</tr>")
})
$("#btn_removeAll").click(function(src){
$("#userTbody").empty();                                                                                                                   
})
});
//jquery删除函数：JQuery对象.remove()删除元素自己，  JQuery对象.empty()删除元素text
function remove(src){//src 是传入得的标签
//$(src).parent().parent().remove();//比较局限，如果a标签外部还有标签，就傻逼了
$(src).closest("tr").remove();//a标签往外找，直到找到tr为止
}
</script>