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++模板实现
0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...
- Alpha阶段第十次Scrum Meeting
情况简述 Alpha阶段第十次Scrum Meeting 敏捷开发起始时间 2016/11/3 00:00 敏捷开发终止时间 2016/11/4 00:00 会议基本内容摘要 详细定义了API接口,汇 ...
- wpf 客户端 添加qq客服咨询
使用qq推广 站点:http://shang.qq.com/v3/widget.html 复制里面的html代码: <a target=" src="http://wpa.q ...
- Maven：将Jar安装到本地仓库和Jar上传到私服
1.依赖如下: <dependency> <groupId>org.quartz-scheduler.internal</groupId> <artifact ...
- IBatis 批量插入数据之SqlBulkCopy
public void AddLetters(IList<int> customerIds, string title, string content, LetterEnum.Letter ...
- sql server 执行上100mb sql sql sql server 无法执行脚本 没有足够的内存继续执行
cmd osql -S 服务器名称 -E -i sql文件路径 ------------------------------------------------------ 最近遇到一个问题,在sq ...
- MapReduce的ReduceTask任务的运行源码级分析
MapReduce的MapTask任务的运行源码级分析 这篇文章好不容易恢复了...谢天谢地...这篇文章讲了MapTask的执行流程.咱们这一节讲解ReduceTask的执行流程.ReduceTas ...
- javascript的document中的动态添加标签
document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数.我们可以利用这些函数动态改变html的节点. 1.JavaScri ...
- 配置SQL server远程连接（局域网）
具体步骤: 1) 2) 3) 4) 5) 6) 7) 最后为了防火墙有影响,直接把防火关了,测试连接通过在来设置防火墙.
- Windows 7安装解压版MySQL 5.6（不包含配置文件优化）
到官网下载MySQL5.6 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html, 提供了 .exe版本 和 .zip解压版,因为我的操作系统是64位的 ...