jquery属性的获取与设置
2016-06-03 17:53
260 查看
最近做新的皮肤包发现对jquery和js有一个提升,呵呵哒。
没什么提升的感觉。
最近用的比较多的又是tab切换,不过好像前端时间很忙一直没有贴出代码来。
<ul class="sell_name container">
<li class="col-md-1 cur">
NEW<br>RELEASED
</li>
<li class="col-md-1 ">
BEST<br>SELLING
</li>
<li class="col-md-1 ">
SPECIAL<br>OFFERS
</li>
</ul>
<div class="a_clear"></div>(清除浮动,等价于<div style="clear:both;"></div>)
<div class="prodiv selldiv">被切换的内容块</div>(给open属性设置diaplay:block;)
<div class="prodiv selldiv">被切换的内容块 </div>
<div class="prodiv selldiv">被切换的内容块 </div>
--------js-----------------
<script type="text/javascript">var $j = jQuery.noConflict(); (一般用不到置换’$‘符号)
$j(function() {
$j(".sell_name li").click(function() {
$j(".sell_name li").eq($j(this).index()).addClass('cur').siblings().removeClass('cur');
$j(".selldiv").hide().eq($j(this).index()).fadeIn();
});
});</script>
新的皮肤包的backtotop过渡的比较自然可能是用了动画的原因
--------------------源码贴出来了-------------------------
$jq(
document).
ready(
function(){
// hide #back-top first
$jq("#back-top").hide();
// fade in #back-top
$jq(function
() {
$jq(
window).
scroll(
function
() {
if
(
$jq(
this).
scrollTop() >
100) {
$jq(
'#back-top').
fadeIn();
}
else
{
$jq(
'#back-top').
fadeOut();
}
});
// scroll body to 0px on click
$jq(
'#back-top').
click(
function
() {
$jq(
'body,html').
animate({
scrollTop:
0
},
800 );
return false;
});
});
});
(忽略$jq一般情况下可以用$代替,这里是为了避免库冲突)
没什么提升的感觉。
最近用的比较多的又是tab切换,不过好像前端时间很忙一直没有贴出代码来。
<ul class="sell_name container">
<li class="col-md-1 cur">
NEW<br>RELEASED
</li>
<li class="col-md-1 ">
BEST<br>SELLING
</li>
<li class="col-md-1 ">
SPECIAL<br>OFFERS
</li>
</ul>
<div class="a_clear"></div>(清除浮动,等价于<div style="clear:both;"></div>)
<div class="prodiv selldiv">被切换的内容块</div>(给open属性设置diaplay:block;)
<div class="prodiv selldiv">被切换的内容块 </div>
<div class="prodiv selldiv">被切换的内容块 </div>
--------js-----------------
<script type="text/javascript">var $j = jQuery.noConflict(); (一般用不到置换’$‘符号)
$j(function() {
$j(".sell_name li").click(function() {
$j(".sell_name li").eq($j(this).index()).addClass('cur').siblings().removeClass('cur');
$j(".selldiv").hide().eq($j(this).index()).fadeIn();
});
});</script>
新的皮肤包的backtotop过渡的比较自然可能是用了动画的原因
--------------------源码贴出来了-------------------------
$jq(
document).
ready(
function(){
// hide #back-top first
$jq("#back-top").hide();
// fade in #back-top
$jq(function
() {
$jq(
window).
scroll(
function
() {
if
(
$jq(
this).
scrollTop() >
100) {
$jq(
'#back-top').
fadeIn();
}
else
{
$jq(
'#back-top').
fadeOut();
}
});
// scroll body to 0px on click
$jq(
'#back-top').
click(
function
() {
$jq(
'body,html').
animate({
scrollTop:
0
},
800 );
return false;
});
});
});
(忽略$jq一般情况下可以用$代替,这里是为了避免库冲突)
相关文章推荐
- MVC JQuery 上传插件uploadify
- Jquery面向对象:自定义的页签控件
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
- jQuery select 清空保留第一项
- jquery file upload 后台收到的文件名中文乱码, filename中文乱码
- jQuery $.post()返回类型为json时不进入回调函数的原因及解决方法
- jQuery选择器大全整理
- jQuery选择器大全整理
- jQuery中Ajax事件顺序及各参数含义
- 使用jquery中height()方法获取各种高度大全
- jquery 解析json文件
- JavaScript jQuery 入门回顾
- jquery.tmpl()小例子2
- jquery.teml()小例子
- jQuery深入之源码解析(二)——自调用匿名函数
- jquery固定表头和列头
- JQuery中ajax处理跨域的三大方式
- jQuery .tmpl(), .template()学习
- 亲测!Jquery2.0不支持IE8-了
- jquery模板jquery.tmpl.js使用教程