jquery 20161014
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>
jquery 20161014的更多相关文章
- jQuery轮播插件SuperSlide【2016-10-14】
[一.页面实现轮播效果] (1)效果下图可以自动轮播 (2)代码 autoPlay控制是否轮播 //banner轮播 $(".banner").slide({mainCell:& ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
随机推荐
- C语言拾遗（一）
越来越体会到C语言的重要性,不管是在计算机底层的理解上,还是在算法数据结构上,所以遂决定重新拾起C语言,不定期更新一些知识点. 推荐博客:http://blog.csdn.net/itcastcpp ...
- SQL 优化tips
1. 陷阱, 1)几个表进行join,然后过滤 等价于 2)分别过滤为小表后,再join? 并不完全.2)确实比1)效率高,但要注意一些NULL值过滤.否则2)得到的结果比1)多
- 【BZOJ-2476】战场的数目 矩阵乘法 + 递推
2476: 战场的数目 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 58 Solved: 38[Submit][Status][Discuss] D ...
- a版本冲刺第八天
队名:Aruba 队员: 黄辉昌 李陈辉 林炳锋 鄢继仁 张秀锋 章 鼎 学号 昨天完成的任务 今天做的任务 明天要做的任务 困难点 体会 408 继续学习第一行代码至第四章,阅读队友代码 着手 ...
- eclipse添加js，html，jsp编辑输入补充提示
1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activation triggers for java的值为:zj ...
- 【Beta】第四次任务发布
PM 日常管理&dev版宣传(周日开始). 后端 #99 服务发布 验收条件:使dev版能在www.buaaphylab.com下运行. 前端 #87 登录后能够查看与下载用户收藏的报告.生成 ...
- php常用数组函数小结
count函数 作用:计算数组中元素的个数或对象的属性个数 返回值: 数组或者对象, 返回数组的单元个数或者对象的属性个数 Null,返回0 非数组,也非NULL,通通返回1 <?php $ar ...
- Google Map API V3开发（3）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- [译]ES6新特性:八进制和二进制整数字面量
原文:http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binar ...
- PHP输出XML文件函数
PHP输出XML文件函数 function xml_out($content, $charset = 'utf-8') { @header("Expires: -1"); @hea ...