标签：
今天遇到这么几个问题：
1.$().map();
map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。
2 选择器（： >）
:是指定type :input <input>元素
.radio type="radio"的元素
3.$(‘div :checkbox‘).each(function (){}）
就是遍历 div获取的每个值
5.Jq只能用一次，就哟不了--》（只能触发一次单击事件）
我的循环使用调用2.0估计就出问题了, 用1.8 1.9就没这问题-
一：JQ 复选框、单选框使用（全选、取消、反选、显示数据）
<script src="jquery-1.8.3.js"></script> //2.0的只能触发一次事件，不知道什么原因
<script type="text/javascript" type="text/javascript">
$(function () {
$(‘#btn‘).click(function () { //选择所有选项框
$(":checkbox").attr(‘checked‘, true);
});
$(‘#btn2‘).click(function () { //取消所有选项框
$(":checkbox").attr(‘checked‘, false);
});
$(‘#btn3‘).click(function () { //显示选项框数据
$(‘:checkbox‘).each(function (k, v) { //k 代表序列号,v代表值
//alert($(‘:radio:checked‘).val()); 只会显示第一个
alert(‘v=‘ + $(v).val() + ‘ K=‘ + k);
});
});
$(‘#btn4‘).click(function () { //反选
$(‘:checkbox‘).each(function () {
$(this).attr(‘checked‘,!$(this).attr(‘checked‘));
});
});
})
</script>
二 面板切换 （1.Ul<lli切换 2.div滚动）
1.
UI:
<style type="text/css"> div { width: 200px; height: 500px; border: 1px solid blue; } #ul1 { list-style-type: none; margin: 0; padding: 0; } #ul1 li { text-align: center; font-size: 20px; font-weight: bolder; background-color: Orange; border-bottom: 5px solid gray; cursor:pointer; } #ul1 li ul { margin:0; padding:0; list-style-type:none; display:none; } #ul1 li ul li { font-size:15px; font-weight:bolder; background-color:pink; } <div> <ul id="ul1"> <li>幼儿园同学 <ul> <li>鼻涕虫</li> <li>臭臭</li> <li>爱哭鬼</li> <li>凤姐</li> </ul> </li> <li>小学同学 <ul> <li>梅超风</li> <li>张无忌</li> <li>乔峰</li> <li>乔布斯</li> </ul> </li> <li>初中同学 <ul> <li>盖茨</li> <li>拉登</li> <li>萨达姆</li> <li>卡扎菲</li> </ul> </li> </ul> </div>
JS:
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(‘#ul1>li‘).click(function () {
$(this).children(‘ul‘).show(500); //
//$(‘ul‘, $(this)).show(500);
$(this).siblings().children(‘ul‘).hide(500);
});
});
</script>
2.
UI:
<div id="dvTab"> <ul> <li>新闻</li> <li>图片</li> <li>深度</li> <li>军事</li> </ul> <div id="dvNews"> 新闻新闻新闻 </div> <div id="dvPic"> 图片，图片图片图图片图片图图图片贴图 </div> <div id="dvDeep"> 深度深度深度深度十多年对于 </div> <div id="dvMl"> 军事军事军事军事 </div> </div>
JS:
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
// $(function () {
// $(‘#dvTab div:gt(0)‘).css(‘display‘, ‘none‘);
// $(‘#dvTab ul li‘).mouseover(function () {
// var txt = $(this).text();
// switch (txt) {
// case "新闻": $(‘#dvNews‘).show().siblings(‘div‘).hide(); break;
// case "图片": $(‘#dvPic‘).show().siblings(‘div‘).hide(); break;
// case "深度": $(‘#dvDeep‘).show().siblings(‘div‘).hide(); break;
// case "军事": $(‘#dvMl‘).show().siblings(‘div‘).hide(); break;
// }
// });
// });
//很好
$(function () {
$("#dvTab >div:gt(0)").hide();
$("#dvTab ul >li").mouseover(function () {
$($("#dvTab div").get($(this).index())).show().siblings("div").hide();
});
});
</script>
三 JQ->cookie 用来点击保存密码或者，信息操作记录吧 点赞什么的=>
调用： $.cookie(‘Name‘);
增加： $.cookie(‘Name‘,‘Value‘)
<style type="text/css"> </style> <script src="jquery-1.8.3.js" type="text/javascript"></script> <script src="jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { if ($.cookie(‘username‘)) { $(‘span‘).text($.cookie(‘username‘)); } else { $(‘span‘).text(‘游客‘); } $(‘#btn‘).click(function () { $.cookie(‘username‘, $(‘#txt‘).val()); alert(‘记录了‘); }); }); </script> 欢迎<span>有游客</span> <input type="button" name="name" value="记住帐号" id="btn" /> <input type="text" name="name" value="" id="txt" />
标签：
原文地址：http://www.cnblogs.com/0to9/p/4965851.html
