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标签< ...
随机推荐
- 狼人杀BETA阶段计划简介
狼人杀beta阶段任务与目标 简介 一.前言 狼人杀alpha阶段终于在组团刷夜中结束了,我们取得了一些成绩,同时也暴露了团队的一些问题.但不管怎样,有了在alpha版本中收获的经验,我们将在beta ...
- Problems about trees
Problems (1) 给一棵带边权的树,求遍历这棵树(每个节点至少经过一次)再回到起点的最短路程. 答案是显然的:边权之和的两倍. (2)给一棵带边权的树,求遍历这棵树(每个节点至少经过一次)的最 ...
- 配置maven
http://www.cnblogs.com/liunanjava/archive/2015/11/05/4936037.html
- Debian 8中dpkg -i自动解决依赖关系
dpkg -i 后#apt-get update &&apt-get -f install
- AngularJS常用插件与指令收集
angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...
- js自适应屏幕高度
//自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...
- 前端工具之Gulp
Gulp是一款前端自动化的工具,如果能熟练使用Gulp来进行开发一定可以节省很多的时间,也可以快速的提高工作效率. 在使用Gulp之前就是要配置好Gulp安装的环境,这是我们能使用Gulp快速开发的第 ...
- cf723a The New Year: Meeting Friends
There are three friend living on the straight line Ox in Lineland. The first friend lives at the poi ...
- MVVM开发模式简单实例MVVM Demo【续】
本文将接着上篇文章,介绍一下三点:(Universal App) 1.将添加Product集合,绑定到列表 2.给点击ListBox的添加选项改变时的事件(要附加依赖属性,和Button点击事件不同) ...
- JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...