saber 酱的抱枕

Fly me to the moon

12/8
2014
学习

jq选择器大全

saber 撰写 无回复 1,047次查看

元素选择器：使用 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
学习

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

saber 撰写 无回复 1,472次查看

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

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

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

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

11/1
2014
学习

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

saber 撰写 无回复 1,015次查看

最近做的网站，都已经上线了，但是同事的百度浏览器用兼容模式查看发现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并非越新越好——为了兼容性

saber 撰写 无回复 1,113次查看

最近做的网站引用了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的记录

saber 撰写 无回复 1,620次查看

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

用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控制元素的平滑移动

saber 撰写 无回复 943次查看

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

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

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

jq控制元素的平滑移动

09/21
2014
学习

jq的css()方法

saber 撰写 无回复 1,168次查看

此方法用来修改css属性，例：

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

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

jq的css()方法

09/10
2014
学习

jq输出html代码

saber 撰写 无回复 1,249次查看

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发送验证码倒计时效果

saber 撰写 无回复 969次查看

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

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

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

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

jq发送验证码倒计时效果

1 2 3 4