编写当当下拉列表
问题一:动画过程中注意避免动画特效的积累
解决::not(:animated)--> $("#menu-ul:not(:animated)").slideDown(500).addClass("menu-ul-css");
问题二:两级菜单之间有边框(间隙)会影响拉伸效果
解决:将mouseover和mouseout改为mouseenter和mouseleave;
$("a").mouseenter(function(){
$("#menu-ul:not(:animated)").slideDown(500).addClass("menu-ul-css");
});
$("#menu").mouseleave(function(){
$("#menu-ul:not(:animated)").slideUp(200).removeClass("menu-ul-css");
});
使用jQuery变换网页效果
问题一:网页布局 盒子模型(定位浮动)(清除左右浮动clear: both)
DIV+CSS 普遍使用 缺点:对分辨率依赖
问题二:保留文字的原来样式
<pre></pre>
问题三:空链接
<a href="javascript:void(0);">查看全部</a>
<a href="#">查看全部</a> ->锚链接 默认返回顶部
制作轮播切换效果
问题一:css3中 nth-child 和 nth-of-type 的区别?
理解:ele:nth-of-type(n)是指父元素下第n个ele元素,而ele:nth-child(n)是指父元素下第n个元素,
且比较这个元素是否为ele,若不是,则选择失败
但是如果在nth-child和 nth-of-type前不指定标签呢?
理解:如上可见,在他们之前不指定标签类型,:nth-child(2) 选中依旧是第二个元素,无论它是什么标签。
而 :nth-type-of(2) 选中了两个元素,分别是父级.demo中的第二个p标签和第二个li标签,
由此可见,不指定标签类型时,:nth-type-of(2)会选中所有类型标签的第二个。
问题二::nth-child和:eq()的区别
理解::eq()为第一个匹配到的父类中匹配子元素,:nth-child是为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!
HTML 代码:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:nth-child(2)");
$("ul li:eq(2)");
结果:
[ <li>Karl</li>, <li>Tane</li> ]
[ <li>Brandon</li> ]
问题三:dl dt dd 是什么?
理解:dl就是定义一个列表,dt说明白了就是这个列表的标题,dd就是内容,能缩进,和UL,OL性质差不多
实现Tab切换的效果
问题一:lang(口袋)属性的使用
解决:给每个Tab元素添加一个lang属性,用来方便切换效果的实现
$("#nav>li").click(function(){
var txt=$(this).attr("lang");
if(txt=="dayTask"){
$(this).css("backgroundColor","#26a6e3");
$("#nav li:last").css("backgroundColor","#ff9400");
$("#growTask").hide();
$("#dayTask").show();
}else if(txt=="growTask"){
$(this).css("backgroundColor","#26a6e3");
$("#nav li:first").css("backgroundColor","#ff9400");
$("#growTask").show();
$("#dayTask").hide();
}
});
制作QQ简易聊天
问题一:整数的处理
解决:
// 1.只保留整数部分(丢弃小数部分)
parseInt(5.1234);// 5
// 2.向下取整(<= 该数值的最大整数)和parseInt()一样
Math.floor(5.1234);// 5
// 3.向上取整(有小数,整数就+1)
Math.ceil(5.1234);
问题二:追加和插入的使用
内部插入:
$("p").append("<b>Hello</b>");向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。
$("p").prepend("<b>Hello</b>");向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
外部插入:
$("p").after("<b>Hello</b>");在每个匹配的元素之后插入内容。
$("p").before("<b>Hello</b>");在每个匹配的元素之前插入内容。
$("p").insertAfter("#foo");把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
问题三:滚动条的生成、消失和改变位置
解决: 生存、消失:如在div元素中设置CSS样式,指定高度后添加overflow:auto;
改变位置:获得当前滚动条的位置:$("div").scrollTop();修改位置:$("div").scrollTop(num);
问题四:文字换行
设置CSS样式:word-wrap: break-word;
问题五:获取系统日期时间
解决: js中没有格式化工厂,只能一个个的获取和拼接格式
var myDate = new Date();
var year=myDate.getFullYear(); //获取当前年
var month=myDate.getMonth()+1; //获取当前月
var date=myDate.getDate(); //获取当前日
var h=myDate.getHours(); //获取当前小时数(0-23)
var m=myDate.getMinutes(); //获取当前分钟数(0-59)
var s=myDate.getSeconds();
var time=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
问题六:关于JavaScript中数组说明
1.静态声明
var arr = ["张三","李四","王五"]
arr[0];
2.动态声明
var arr = new Array();
arr[0] = "张三1";
arr[1] = "张三2";
arr[2] = "张三3";
3.特定用法
var arr = new Array();
//key->value
arr["s1001"]="张三1";
arr["s1002"]="张三2";
arr["s1003"]="张三3";
仿京东左侧菜单
问题一:效果,show(),hide();slideDown(),slideUp();fadeIn(),fadeOut()三种动画效果的区别
speed:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (可选):在动画完成时执行的函数,每个元素执行一次。
opacity:要调整到的不透明度值(0到1之间的数字).
对角线:
show(speed, [callback]):如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。
以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
hide(speed, [callback]):如果选择的元素是隐藏的,这个方法将不会改变任何东西。
以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。
toggle(speed, [callback]):如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
toggle(switch):如果switch设为true,则调用show()方法来显示匹配的元素,如果switch设为false则调用hide()来隐藏元素。
滑动:
slideDown(speed, [callback]):通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
slideUp(speed, [callback]):通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
slideToggle(speed, [callback]):通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
淡入淡出:
fadeIn(speed, [callback]):通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
fadeOut(speed, [callback]):通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
fadeTo(speed, opacity, [callback]):把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
使用HTML5验证博客园注册页面
问题一:数据校验,正则表达式
6个基本符号
^ 从头匹配
$ 结尾匹配
| 或者(多选一)
() 一种情况
[] (一个字符)选择范围
{} 出现次数
扩展
\d [0-9]
\D 非数字
\w [0-9,A-Z,a-z,_]
\W 非法字符
+ {1,} 至少一次
? {0,1} 至多一次
* {0,} 可有可无
常用
手机号码 1[3-9]\d{9}
QQ号码 [1-9]\d{5,10}
电子邮箱 \w+@\w+.\w+
个人网站 http[s]?://\w+.\w+
中文汉字 [\u4e00-\u9fa5]
0-100 (\d|[1-9]\d|100)$
应用 IP地址验证(0.0.0.0-255.255.255.255):
var info= $("#info").val();
var regInfo=/^((\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5]).){4}$/
if(regInfo.test(info+'.')){
alert("验证通过");
}else{
alert("验证失败");
}
问题二:逻辑代码和属性验证结合实现数据校验
属性绑定
<input id=" uname " type="text" required pattern="^[a-z,A-Z]\w{3,15}$"/>
<input type="submit" value="提交"/>
提交事件 -> 注意:点击事件,非提交事件
$("input[type='submit']").click(function () {
});
表单对象 -> 注意:JS对象 并非 JQ对象
var uname = document.getElementById("uname");
条件控制
uname.validity.valueMissing 是否为空
uname.validity.patternMismatch 正则表达式是否匹配
表单控制
uname.setCustomValidity(""); //空信息 放行
uname.setCustomValidity("用户名不能为空"); //信息 阻止