首页 > 代码库 > 69-72属性值和表单的获取
69-72属性值和表单的获取
jquery69_attr1.html
属性值的获取
jquery72_html.html
<script type="text/javascript">
$(function() {
//把d2中的html替换d1中
//$("#d1").html($("#d2").html());
//text方法仅仅只是获取文本，而不会获取标签信息
$("#d1").html($("#d2").text());
});
</script>
</head>
<body>
<div id="d1">
第一个div
</div>
<div id="d2">
<ul>
<li>八戒</li>
<li>悟空</li>
<li>无忌</li>
</ul>
</div>
</body>
</html>
jquery72_node.html
<script type="text/javascript">
$(function() {
//在d1这个元素中插入d3这个元素(在d1节点的最后插入)，插入之后，d3就消失
//$("#d1").append($("#d3"));
//如果原始节点是数组，会在多个节点中插入
// $(".ddd").append($("#d3"));
//把d1插入到d3中,注意append和appendTo的区别
//$("#d1").appendTo($("#d3"));
//包装集为.ddd
//$(".ddd").appendTo($("#d3")).css("color","#f00");
//包装集为d3
//$("#d3").append($(".ddd")).css("color","#f00");
//在节点前面插入
//$("#d1").prepend($("#d3"));
//在d1后面插入d3,insertAfter和appendTo
//$("#d1").after($("#d3"));
//在d1的前面插入d3,insertBefore和insertAfter类似
//$("#d1").before($("#d3"));
//移除元素
//$("#d2").remove();
//清空了d3中的所有元素
//$("#d3").empty();
//从包装集中删除满足条件的元素
//$("#d3 li").detach("li:contains(‘悟空‘)").css("color","#f00");
//此时返回的包装集是d1,remove的时候就是remove了d1，还剩下hello,
//变相完成了节点的替换
//$("#d1").before("<div>hello</div>").remove().css("color","#f00");
//replaceWith方法就是基于以上原理实现的，此时包装集没有任何意义，指向了被移除的元素
// $("#d1").replaceWith("<div>ok</div>").css("color","#f00");
//在d1的位置用d3来包裹之后，替换d1
// $("#d1").wrap($("#d3"));
//两个元素都会被包裹
//$(".ddd").wrap($("#d3"));
//取消包裹
//$("ul").unwrap();
//把一组元素包裹进去
//$(".ddd").wrapAll($("#d3"));
//用d3包裹了d1中的值之后，才插入到d1中
$("#d1").wrapInner($("#d3"));
});
</script>
</head>
<body>
<div id="d1" class="ddd">
第一个div
</div>
<div id="d2" class="ddd">第2个div</div>
<div id="d3">
<ul>
<li>八戒</li>
<li>悟空</li>
<li>无忌</li>
</ul>
</div>
</body>
</html>
jquery73_form.html 表单操作
$(function() {
$("#btn").click(function(){
//获取表单的值
//alert($("#username").val());
//设置表单的值
// $("#username").val("我来了");
//alert($("input[name=‘password‘]").val());
//checkbox得到的是一个数组，需要进行遍历
// $("input[name=‘interest‘]:checked").each(function(n){
// alert($(this).val());
// });
//checkbox只能传入数组
//$("input[name=‘interest‘]").val(["足球","篮球","羽毛球"]);
// alert($("input[name=‘sex‘]:checked").val());
//$("input[name=‘sex‘]").val(["1"]);
// $("input[name=‘sex‘][value=http://www.mamicode.com/‘1‘]").prop("checked","true");
// alert($("input[name=‘sex‘]:checked").val());
//能够获取select的值
//alert($("#address").val());
//获取select中的所有文本
//alert($("#address").text());
//注意:要一个空格，不让会找select被checked的元素
//加个空格就是找子元素
alert($("#address :checked").text());
//{username:xx,password:xx,interester:[2,1,],sex:x,address:add}
$("#address").val(2);
//作业1:写一个方法可以将表单中的值创建为json-->直接创建为字符串
//作业2:
});
});
</script>
</head>
<body>
<form id="myform">
用户名：<input type="text" name="username" id="username"/><br/>
密 码:<input type="password" name="password" id="password"/><br/>
用户兴趣:<input type="checkbox" name="interest" value=http://www.mamicode.com/"足球"/>足球
<input type="checkbox" name="interest" value=http://www.mamicode.com/"篮球"/>蓝球
<input type="checkbox" name="interest" value=http://www.mamicode.com/"羽毛球"/>羽毛球
<input type="checkbox" name="interest" value=http://www.mamicode.com/"游泳"/>游泳
用户性别:<input type="radio" name="sex" value=http://www.mamicode.com/"0">男
<input type="radio" name="sex" value=http://www.mamicode.com/"1">女
用户户籍:<select name="address" id="address">
<option value=http://www.mamicode.com/"1">北京
<option value=http://www.mamicode.com/"2">上海
<option value=http://www.mamicode.com/"3">昭通
<option value=http://www.mamicode.com/"4">彝良
</select> <br/>
<input type="button" value=http://www.mamicode.com/"测试数据" id="btn"/>
</form>
</body>
</html>
69-72属性值和表单的获取