Saber 酱的抱枕

Fly me to the moon

12/8
2014
学习

jq选择器大全

元素选择器:使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

属性选择器:使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

组选择器: 同时选择多个对象,逗号分隔

$("div,#test1,p,.test2,#test3")  

后代选择器: 一个节点后的多个对象

$("div .test")

子选择器: :仅选择一个节点后的第一个子对象

$("div>.test") 

临近选择器: 选取下一个兄弟节点

$("div + #test")

jq选择器大全

12/8
2014
学习

文章标题点击后变成少女祈祷中

因为见到萌图萝莉网首页的文章标题点击之后会变成“少女祈祷中……”,感觉挺有意思的,于是把本站也改成了这样的。

	<script type="text/javascript">
	$(document).ready(function (){
	   $(".post_h a").click(function (){
	       $(this).text("少女祈祷中……");
	   });
	});
	</script>

代码渣渣,明明很简单的语句但是由于语法错误云云折腾了近半个小时。

文章标题点击后变成少女祈祷中

11/1
2014
学习

js出错排查的一些注意事项

最近做的网站,都已经上线了,但是同事的百度浏览器用兼容模式查看发现superslide没有生效,原本应该是滚动显示的banner图一张张竖着排了下来。后来用ietester的ie8模式重现了此问题。虽然确实从代码上找出了些问题,但还是让我感叹低版本ie8的纠错容错能力太差了。

1.需要的js是否都加载了
2.有无语法错误,例如js被注释,或js最后的结束标记复制的时候留在了原地,导致标签错误
3.jq放在所有js的最前面
4.查看是否引用了多个jq,如头部模板引入了一个,底部模板又引入了一个(即使是同一个jq文件),保留一个就行
5.如果底部有很多乱七八糟的js,例如广告的、统计的,那么把我们直接用script标签写出的js代码移到底部前面去,以免受到其影响。
6.如果有些选择器已经不存在了,删除对应的js代码。例如首页有两个地方用到了supersild,二级页面却只用了一个。如果直接复制第一个页面的js代码到二级页面,那么第二个元素不存在,ie就会报错。
7.如果怀疑有js和jq有冲突,可以试下用稍低版本的jq,或者把js一个个删除排查。
8.也许可以试试在页面头部添加之类的玩意,死马当做活马医,这类玩意参数很多,具体可百度。

js出错排查的一些注意事项

10/30
2014
学习

jquery并非越新越好——为了兼容性

最近做的网站引用了SuperSlide,其需要jq的支持,于是我不假思索下载了2.0.3版本的jq。这是个比较新的版本,现在项目都快上线了,有个同事用360极速浏览器的兼容模式查看,发现SuperSlide没有生效。后来我就拿ie8实验,在ietest里用ie8模式打开此网页后,不断报错:

这个大概是jq根据SuperSlide的指令执行操作被浏览器报错

这个是SuperSlide使用的jquery()方法不起效

去你妹的吧,在各种百度各种尝试,浪费最少半小时之后,忽然想到以前一件事情,某投资网站根据用户输入的数值来计算相应的其他值,我当时也是把jq换成新版本就报错了。只是我这里chrome里面没报错,只有ie8有问题,果断把jq换成百度cdn的1.9,世界清静了,又用I6模式看了下,连IE6都给我跪下了爆裂吧IE!!!就你们IE和系统捆绑紧,xp的ie只能到ie8,诚心找事啊

jquery并非越新越好——为了兼容性

10/14
2014
学习

研究SuperSlide的记录

已弃坑。我下面试的几次,都是自己对其示例进行了结构的简化,想要以后用着方便,事实证明这么做意义不大,该用的时候拉过来源代码直接修改就成了。以后只做一些补充就行了。

用superslide做焦点图,其切换间隔太快,但是demo文档里又没有这个参数设置,于是去查看官网的参数文档,找到了interTime参数,如下:

jQuery(".slideBox").slide({mainCell:".bd ul",effect:"fold",autoPlay:true,interTime:5000});

css里有些地方得改一下:

.slideBox .bd{ position:relative; height:100%; z-index:0; left:50%; margin-left:-960px;  }/*这里设置居中*/
/*.slideBox .bd img 如无必要,不要设置width,否则可能导致图片变形*/
/*指示器默认是靠右的,可能会被右侧的漂浮广告挡住,给.slideBox .hd设置一个right值比较合适。*/

注意参数最后是不加分号的,加了报错。另附动画效果参数:

[v1.0] fade:渐显; || top:上滚动;|| left:左滚动;|| topLoop:上循环滚动;|| leftLoop:左循环滚动;|| topMarquee:上无缝循环滚动;|| leftMarquee:左无缝循环滚动;
[v2.0] fold:淡入淡出
[v2.1] slideDown:下拉效果
Read More →

研究SuperSlide的记录

10/5
2014
学习

jq控制元素的平滑移动

说到平滑似乎就离不开定时器...这次用的是元素的left值来移动的,本意是想做个模仿桌宠移动的东东,在网页上左右跑。最后似乎也差不多了

只有刚开始的时候隐藏在左侧窗口范围外,造成一个出场效果。之后就左右来回走了。

用到了一个水平翻转图片的css:transform:scaleX(-1);
Read More →

jq控制元素的平滑移动

09/21
2014
学习

jq的css()方法

此方法用来修改css属性,例:

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
     $("p").css("color","red");
  });
});
</script>

如果不修改而只是获取css属性的值,那么括号内只写属性就行了

jq的css()方法

09/10
2014
学习

jq输出html代码

jq中可以使用html()输出html代码,形如

$("#sv").html("<audio autoplay='autoplay' src='src'></audio>");

只是注意,双引号中间是html代码,html代码中出现的引号就只能用单引号了。

参考:http://holysonll.blog.163.com/blog/static/2141390932013411113333559/

jq输出html代码

08/27
2014
学习

jq发送验证码倒计时效果

一般是给手机发送验证码的按钮,发送一次之后一定时间内不可再发送,从网上找了一个例子试了试。

首先是html部分,先引入jq,然后主体部分就一个按钮,样式可以忽略

接下来是js部分
[code lang="js decode:true ">
wait就是设置的时间了,有两个地方要改;元素的ID根据情况;两个状态下显示的文字也可以改。基本就这些了。

参考:http://www.ipanta.com/article/show/96.html
(一开始我是直接复制过来放在demo里面试的,点了一次发送之后确实出现了倒计时,但是过了一会儿回来一看,计时到了-460秒了,还没有变回去。看了看发现是这个网页的判断条件存在问题,在重置判断里面加上了倒计时小于等于0的条件,然后就能正常用了~

jq发送验证码倒计时效果