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标签< ...
随机推荐
- HTML5利用link标签的rel=import引入html页面
如果是以前,我们可以使用iframe去引入,现在可以是这样的形式:<link rel="import" href="a.html" id="tm ...
- npm全局安装和本地安装和本地开发安装（npm install --g/--save/--save-dev）
详细说明参考:http://www.cnblogs.com/PeunZhang/p/5629329.html 我个人理解: 1.全局安装(npm install -g)是为了用命令行,比如在windo ...
- TypeScript Generics(泛型)
软件工程的一个主要部分就是构建组件,构建的组件不仅需要具有明确的定义和统一的接口,同时也需要组件可复用.支持现有的数据类型和将来添加的数据类型的组件为大型软件系统的开发过程提供很好的灵活性. 在C#和 ...
- Java并发编程之阻塞队列
1.什么是阻塞队列? 队列是一种数据结构,它有两个基本操作:在队列尾部加入一个元素,从队列头部移除一个元素.阻塞队里与普通的队列的区别在于,普通队列不会对当前线程产生阻塞,在面对类似消费者-生产者模型 ...
- Linux 内核数据结构：Linux 双向链表
Linux 内核提供一套双向链表的实现,你可以在 include/linux/list.h 中找到.我们以双向链表着手开始介绍 Linux 内核中的数据结构 ,因为这个是在 Linux 内核中使用最为 ...
- <<< struts 的一系列介绍
struts有什么用? 以前使用servlet开发应用系统的人深深感受到在java代码中嵌入大量html代码是一件非常痛苦的事,于是sun推出了JSP,解决了java代码中嵌入html代码的问题.但是 ...
- mybatis 批量更新
<update id="batchUpdate" parameterType="java.util.List"> <foreach colle ...
- Python Day7
概述 面向对象高级语法部分 静态方法.类方法.属性方法 类的特殊方法 反射 静态方法 通过@staticmethod装饰器即可把其装饰的方法变为一个静态方法,什么是静态方法呢?其实不难理解,普通的方法 ...
- 第二轮冲刺-Runner站立会议05
今天:将baseadapter的原理弄清楚了 明天:解决适配问题 困难:程序会停止运行
- 网络抓包wireshark
抓包应该是每个技术人员掌握的基础知识,无论是技术支持运维人员或者是研发,多少都会遇到要抓包的情况,用过的抓包工具有fiddle.wireshark,作为一个不是经常要抓包的人员,学会用Wireshar ...