有些网站上输入日期的输入框是点击后会弹出日历界面,今天要用这个效果,找到了My97 DatePicke。这个控件不依赖jq,也不会与jq产生冲突。效果如下:
很长一段时间以来,我发布或者更新文章时提交都特别慢,页面提交二十来秒才算提交完成,打开成功后的页面。我为此很纠结,后来发现其实提交几秒后刷新页面就可以看到已经更新了,后面那么长时间是在干嘛呢?
刚才闲得无聊去看百度sitemap插件的收录数量,忽然想起了这货会向百度提交我发表或更改的文章,可能导致提交过程变长,于是去禁用之,再去编辑文章,更新速度马上恢复正常了,反复测试后确定了元凶就是这个插件,果断停用之。
说起来这个插件是向百度提交我博客文章的,可是现在百度我的域名只能看到首页一条结果,太坑了吧,禁用之也不为过。据说新域名有一个月观察期,不知是否如此,反正我个人博客也不稀罕在百度有什么排名,随它便了
百度sitemap插件导致修改文章提交时间变长
id为dome的列表下有几个li标签,想要点击其中一个时使其变色,其他的li不变色,而且可以随便点。我先用js的思路考虑,貌似是要搞数组,但现在用jq来写,jq的数组怎么写我还不知道呢,顿时头大。后来试了试,没用数组就解决了
this是个很好用的东东,另外#dome>li可以是dome里面的任何一个li,不用像js那样整数组,排编号了,很方便
jq对li进行遍历改变样式
有时候给一个元素添加鼠标点击事件,先在js里面写好函数,然后在元素上写 onclick="hide()",但是有时候不想写的太多(除了不好看,给函数起名字也起得头晕),可以封装到js里面,不在元素里面写事件了。
简单的结构:
注意嵌套的对应层次不要错误
一例:
[code lang="js decode:true ">$(function(){
$("#tab1").click(function(){
$("#tabmain2,#tabmain3,#tabmain4").hide();
$("#tabmain1").show();
})
})
参考:http://zhidao.baidu.com/link?url=tdN7HCNRnZzadkeUUat0HisIUzTdxZA-Otfuu85VEURQoTSLWbWvx3FTK2iNAvCazOR74Q3QhKdGmkvreVM0Uq
w3c之类的都没有最外层的function,导致我试了好多次都没成功,晕
jq给元素添加鼠标动作事件
今天用到了$("#uc>dd").hide();这样的用法,稍后补全
一、基本选择器
选择器 | 描 述 | 返回 | 示例 |
#id | 根据给定id匹配一个元素 | 单个元素 | $("#test") 选取id为test的元素 |
.class | 根据给定类名匹配一个元素 | 集合元素 | $(".test") 选取class为test的元素 |
element | 根据给定元素名匹配一个元素 | 集合元素 | $("p") 选取p元素 |
selector1,selector2...selectorN | 将每一个选择器匹配到元素合成后一起返回 | 集合元素 | $("div , span ,p , myClass")选取所在div span 和拥有class为myClass的标签的一组元素 |
* | 匹配所有元素 | 集合元素 | $("*") 选取所在的元素 |
jq选择器大全
做tab切换的时候经常会遇到改变元素样式的情况,可以预设一个class,点击后改变classname
function s_tabmain1 () { $("#tabmain2,#tabmain3,#tabmain4").hide(); $("#tabmain1").show(); $("#tab1").addClass('h'); $("#tab2,#tab3,#tab4").removeClass('h'); }
http://www.cnblogs.com/xcsn/archive/2013/03/04/2943293.html
jq添加移除classname
<audio autoplay="autoplay" preload="none" loop="loop" controls="controls" src="src" style="width:600px;"></audio>
可惜不支持预设音量。
chrome的样式:
IE9的样式:
firefox的样式:
chrome比起其他浏览器少了总时常的显示
w3对的audio解释:http://www.w3school.com.cn/html5/html5_audio.asp
利用html5 audio标签插入音乐
效果如图(不要点,这真的是图←_←):
我是在A5站长网找到的这个特效,喜欢它的原因是它够简洁实用,添加几句代码就行了,不像有的例子,为了一个小小的下拉菜单竟然引入了2个外部js文件(带上jq就3个了),何苦来哉?
首先引入jq,然后说一下html代码(CSS部分省略)
<ul class="mainnav"> <li><a href="index.html">首页</a></li> <li class="subnav"> <a href="">配资中心</a> <dl> <dd><a href="">免费操盘</a></dd> <dd><a href="">日操盘</a></dd> <dd><a href="">月操盘</a></dd> </dl> </li> <li><a href="cpyy.html">任务大厅</a></li> <li><a href="#">合伙人模式</a></li> <li><a href="#">股宝盆</a></li> <li><a href="#">互助基金</a></li> <li><a href="#">金融商学院</a></li> </ul>
这里边重要的部分就是结构和class名:
结构是在li标签内的a标签后放入下拉菜单,这个示例使用dl写的下拉菜单。
然后给每个有下拉菜单的li设置同样的class,没有下拉菜单的li的class不要和有下拉菜单的一样。至于ul的class什么的没有关系。
然后就是在头部插入js代码:
<script type="text/javascript"> $(function(){ $("dl").hide(); $("li.subnav").hover(function(){ $(this).find("dl").stop(true,true); $(this).find("dl").slideDown(); },function(){ $(this).find("dl").stop(true,true); $(this).find("dl").slideUp(); }); }) </script>
注意把第四行的li.classname换成自己的class名。
保存之后查看网页,鼠标经过li的时候下拉菜单就会出现。但是有时候鼠标一离开li下拉菜单就隐藏了,导致点不到,这时候需要给下拉菜单添加定位,添加一个确保它在上层的z-index值(如果不想这样可以对li如此设置,多数情况下也有效)。
jq的导航下拉菜单一例
有些选择器我还不怎么会用,所以从w3复制过来
选择器 | 例子 | 例子描述 | CSS |
---|---|---|---|
.class | .intro | 选择 class="intro" 的所有元素。 | 1 |
#id | #firstname | 选择 id="firstname" 的所有元素。 | 1 |
* | * | 选择所有元素。 | 2 |
element | p | 选择所有
元素。 |
1 |
element,element | div,p | 选择所有
元素和所有
元素。 |
1 |
element element | div p | 选择
元素内部的所有
元素。 |
1 |
element>element | div>p | 选择父元素为
元素的所有
元素。 |
2 |
element+element | div+p | 选择紧接在
元素之后的所有
元素。 |
2 |
[attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
[attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |
:link | a:link | 选择所有未被访问的链接。 | 1 |
:visited | a:visited | 选择所有已被访问的链接。 | 1 |
:active | a:active | 选择活动链接。 | 1 |
:hover | a:hover | 选择鼠标指针位于其上的链接。 | 1 |
:focus | input:focus | 选择获得焦点的 input 元素。 | 2 |
:first-letter | p:first-letter | 选择每个
元素的首字母。 |
1 |
:first-line | p:first-line | 选择每个
元素的首行。 |
1 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个
元素。 |
2 |
:before | p:before | 在每个
元素的内容之前插入内容。 |
2 |
:after | p:after | 在每个
元素的内容之后插入内容。 |
2 |
:lang(language) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个
元素。 |
2 |
element1~element2 | p~ul | 选择前面有
元素的每个
|
3 |
[attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 元素。 | 3 |
[attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 元素。 | 3 |
[attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 元素。 | 3 |
:first-of-type | p:first-of-type | 选择属于其父元素的首个
元素的每个 元素。 |
3 |
:last-of-type | p:last-of-type | 选择属于其父元素的最后
元素的每个 元素。 |
3 |
:only-of-type | p:only-of-type | 选择属于其父元素唯一的
元素的每个 元素。 |
3 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个
元素。 |
3 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个
元素。 |
3 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个
元素的每个 元素。 |
3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 | 3 |
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个
元素。 |
3 |
:root | :root | 选择文档的根元素。 | 3 |
:empty | p:empty | 选择没有子元素的每个
元素(包括文本节点)。 |
3 |
:target | #news:target | 选择当前活动的 #news 元素。 | 3 |
:enabled | input:enabled | 选择每个启用的 元素。 | 3 |
:disabled | input:disabled | 选择每个禁用的 元素 | 3 |
:checked | input:checked | 选择每个被选中的 元素。 | 3 |
:not(selector) | :not(p) | 选择非
元素的每个元素。 |
3 |
::selection | ::selection | 选择被用户选取的元素部分。 | 3 |
CSS选择器
我的网站加了favicon.ico之后,后台页面会显示,前台页面不显示,很是郁闷。后来想起我的主题里有一项设置,可以手动输入favicon.ico的地址。
输入之后在页面头部出现了如下代码:
其实也就是指定了favicon.ico的url。如果我们没有这么写,浏览器会自动寻找网站根目录下的favicon.ico,但是为什么之前只有后台可以显示这个就不清楚了,也许和浏览器有关?
另外可参考:http://kzyblog.com/610.html