jquery.fn.extend
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<!-- 1 -->
<div id="test"></div>
<script>
$("#test").css({"width":"300px","height":"200px","border":"1px solid red"});
</script> <!-- 2 -->
<script>
function person(info){
document.write(info.name+" is "+info.age+" now, and his hobby is "+info.hobby+"<br/>");
}
person({name:"xiaoming",age:"12",hobby:"swimming"});
person({age:"14",name:"xiaohong",hobby:"playing"});
</script>
<!-- 3 -->
<!-- jquery.fn.extend -->
<div id="a">123345</div>
<script>
jQuery.fn.extend({
myTest: function (info) {
//alert($(this).html()+" "+info);
$(this).css({"width":info.width,"height":info.height,"border":info.border}) }
});
$("#a").myTest({
width:"300px",
height:"200px",
border:"1px solid green"
});
</script>
</body>
</html>
jquery.fn.extend 2
jQuery.fn.myTest2= function (info) {
$(this).css({"width":info.width,"height":info.height,"border":info.border})
}
$("#b").myTest2({
width:"300px",
height:"200px",
border:"1px solid red"
});
jq实现 nav滚动时固定在顶部
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,ul,li,a{margin:0;padding: 0;}
.a{height: 130px;border: 1px solid red;}
ul li{float:left;list-style: none;}
ul li a{float:left;display: block;width:200px;text-decoration: none;color:#fff;}
ul li a:hover{background: #ff2f2f;} .mainNavFix{
position: fixed;
top:0;
z-index: 100;
}
</style>
</head>
<body>
<div class="a"></div>
<!-- nav 的高度要100%; -->
<div class="mainNav" style="height: 30px;background: red;line-height: 30px;text-align: center;width:100%;">
<ul style="margin:0 auto;width:1200px;">
<li><a href="javascript:void(0);">123</a></li>
<li><a href="javascript:void(0);">123</a></li>
<li><a href="javascript:void(0);">123</a></li>
<li><a href="javascript:void(0);">123</a></li>
</ul>
</div>
<div style="height: 1000px;border: 1px solid green;margin:0 auto;width:1200px;"></div> <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/* 滚动时 nav 固定在顶部*/
$(window).scroll(function () {
// console.log("scrollTop: "+$(window).scrollTop());
/*
if($(window).scrollTop()>130){
$(".mainNav").addClass("mainNavFix");
}else{
$(".mainNav").removeClass("mainNavFix");
}
*/
$(window).scrollTop()>130?$(".mainNav").addClass("mainNavFix"):$(".mainNav").removeClass("mainNavFix");
});
</script> </body> </html>
jq遮罩效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div, img, body, ul, li {margin: 0;padding: 0;}
li {list-style: none;}
.test{border: 1px solid red;height: 200px;width:200px;float:left;margin-right: 20px;}
.a{height: 200px;width:200px;}
.b{height: 200px;width:200px;background: #ff2f2f;display: none;}
.other .b{display: block;margin-top: -200px;}
.other .a{opacity: 0.1;}
</style> </head>
<body>
<div class="test">
<div class="a">
<img src="pic1.png" alt=""/>
<p>1123</p>
</div>
<div class="b">
.slideBox2{ width:450px; height:230px; overflow:hidden; position:relative; border:1px solid #ddd; }
.slideBox2 .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
.slideBox2 .hd ul{ overflow:hidden; zoom:1; float:left; } </div> </div>
<div class="test">
<div class="a">
<img src="pic1.png" alt=""/>
<p>1123</p>
</div>
<div class="b">
.slideBox2{ width:450px; height:230px; overflow:hidden; position:relative; border:1px solid #ddd; }
.slideBox2 .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
.slideBox2 .hd ul{ overflow:hidden; zoom:1; float:left; } </div> </div>
<div class="test">
<div class="a">
<img src="pic1.png" alt=""/>
<p>1123</p>
</div>
<div class="b">
.slideBox2{ width:450px; height:230px; overflow:hidden; position:relative; border:1px solid #ddd; }
.slideBox2 .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
.slideBox2 .hd ul{ overflow:hidden; zoom:1; float:left; } </div> </div> <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".test").mouseover(function () {
$(this).addClass("other").siblings().removeClass("other");
});
$(".test").mouseout(function () {
$(this).removeClass("other");
});
</script> </body>
</html>
dl dt dd
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
dl{width:300px;border: 1px solid red;}
dt{border: 1px solid green;float:left;width:80px;text-align: right;} /* dt 浮动*/
dd{border: 1px solid blue;width:210px;margin-left: 82px;} /* dd 添加 margin-left */
</style>
</head>
<body>
<dl>
<dt>营销业务</dt>
<dd>教育行业软件销售;自主知识产权产品：在线职业考试认证平台、实训平台、互动课堂。</dd>
</dl>
<dl>
<dt>营销务</dt>
<dd>教育行业软件销售;自主知识产权产品：在线职业考试认证平台、实训平台、互动课堂。</dd>
<dt>业务</dt>
<dd>教育行业软件销售;自主知识产权产品：在线职业考试认证平台、实训平台、互动课堂。</dd>
<dt>务</dt>
<dd>教育行业软件销售;自主知识产权产品：在线职业考试认证平台、实训平台、互动课堂。</dd>
</dl> </body>
</html>
margin-left:-100px;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid green;width:800px;margin:0 auto;">
<img src="111.png" alt="" style="float:left;"/>
<div style="float:right;border: 1px solid red;width:30px;">
<p style="background: #32aaff;height:30px;line-height:30px;width:200px;margin-left: -170px;">123556</p>
213434<br/>
234<br/>
34<br/>
</div>
</div> </body>
</html>
jQuery.extend()
<script>
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log("min: "+jQuery.min(2,3)); // => 2
console.log("max: "+jQuery.max(4,5)); // => 5 </script>
jQuery.kang-tab()
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,ul,li,div{margin: 0;padding: 0;}
li{list-style: none;}
.clear{clear: both;}
/* kang-tab */
.kang-tab{}
.kang-tab ul li{float:left;text-align: center;width:100px;cursor:pointer;}
.kang-tab ul li.other{background: #23aefa;}
.kang-tab .conAll .content{display: none;border: 1px solid green;width:300px;height: 250px;}
</style>
</head>
<body>
<div class="kang-tab" id="kang-tab1">
<ul>
<li>file</li>
<li>edit</li>
<li>view</li>
</ul>
<div class="clear"></div>
<div class="conAll">
<div class="content">this is file</div>
<div class="content">now we start edit</div>
<div class="content">what you can see</div>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery.extend({
kang_tab:function (id) {
$('#'+id+" ul li").eq(0).addClass("other");
$('#'+id+" .conAll .content").eq(0).show();
$('#'+id+" ul li").click(function () {
$(this).addClass("other").siblings().removeClass("other");
$('#'+id+" .conAll .content").eq($(this).index()).show().siblings().hide();
});
}
})
jQuery.kang_tab("kang-tab1");
</script>
</body>
</html>