一、简介
1、什么是jQuery
jQuery是一个轻量级、快速简洁的javaScript库，能让我们方便快捷的选择元素操作元素属性。
2、下载地址
3、jQuery使用方式
$("div")等价于jQuery("div"),通常使用前者。
二、查找元素
1、选择器
a、基本选择器
<!--基本选择器-->
$("#id") //ID选择器
$("div") //元素选择器
$(".classname") //类选择器
$(".classname,.classname1,#id1") //组合选择器
<!--层级选择器-->
$("#id>.classname ") //子元素选择器
$("#id .classname ") //后代元素选择器
$("#id + .classname ") //紧邻下一个元素选择器
$("#id ~ .classname ") //兄弟元素选择器
<!--属性选择器-->
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id=‘123‘]") // id属性值为123的div 元素
$("div[id=‘!123‘]") // id属性值不等于123的div 元素
$("div[id=‘^qq‘]") // id属性值以qq开头的div 元素
$("div[id=‘$zz‘]") // id属性值以zz结尾的div 元素
$("div[id=‘*bb‘]") // id属性值包含bb的div 元素
$("input[id][name$=‘man‘]") //多属性选过滤，同时满足两个属性的条件的元素
b、表单选择器
<!--表单选择器-->
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
<!--表单对象属性-->
$("input:enable") //可用input元素
$("input:disable") //禁用的input元素
$("input:checked") //所有选中的元素
$("select option:selected") //select中所有选中的option元素
2、筛选器
a、基本筛选器
<!--基本筛选器-->
$(‘li:first‘) //第一个元素
$(‘li:last‘) //最后一个元素
$("li:even") //索引为偶数的元素
$("li:odd") //索引为奇数的元素
$("li:eq(1)") //给定索引值的元素
$("li:gt(0)") //大于给定索引值的元素
$("li:lt(2)") //小于给定索引值的元素
$(":focus") //当前获取焦点的元素
$(":animated") //正在执行动画效果的元素
b、内容筛选器
$("div:contains(‘John‘)") //包含John文本的元素
$("td:empty") //不包含子元素或者文本的空元素
$("div:has(selector)") //含有选择器所匹配的元素
$("td:parent") //含有子元素或者文本的元素
c、可见性筛选器
$("tr:hidden") //所有隐藏的tr元素
$("tr:visible") //所有可见的tr元素
3、过滤器
过滤器行为基本和筛选器一致，但过滤器作为方法来调用，使用更加灵活，因此尽可能使用过滤器而不是筛选器。
a、过滤
$("p").eq(0) //当前操作中第N个jQuery对象,类似索引
$(‘li‘).first() //第一个元素
$(‘li‘).last() //最后一个元素
$(this).hasClass("test") //元素是否含有某个特定的类,返回布尔值
$(‘li‘).has(‘ul‘) //包含特定后代的元素
$(‘li‘).slice(0,2) //选取一个子集，如果起始是负数，则从后开始。
$("input[type=‘checkbox‘]").parent().is("form") //如果其中至少有一个元素符合这个给定的表达式就返回true。
b、查找
<!--查找-->//查找方法中都可以带表达式进行过滤
$("div").children() //div中的每个子元素,第一层
$("div").find("span") //div中的包含的所有span元素,后代$("div").contents() //div下的所有节点，包括文本节点而不是元素。
$("p").next() //紧邻p元素后的一个同辈元素
$("p").nextAll() //p元素之后所有的同辈元素
$("#test").nextUntil("#test2") //id为"#test"元素之后到id为‘#test2‘之间所有的同辈元素,掐头去尾
$("p").prev() //紧邻p元素前的一个同辈元素
$("p").prevAll() //p元素之前所有的同辈元素
$("#test").prevUntil("#test2") //id为"#test"元素之前到id为‘#test2‘之间所有的同辈元素,掐头去尾
$("p").parent() //每个p元素的父元素
$("p").parents() //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2") //id为"#test"元素到id为‘#test2‘之间所有的父级元素,掐头去尾
$("div").siblings() //所有的同辈元素,不包括自己
$("p").find("span").end() //结束当前链条中的最近的筛选操作，并将匹配筛选之前的元素。
三、操作元素
1、属性操作
a、基本属性操作
<!--属性操作-->
$("img").attr("src"); //返回文档中所有图像的src属性值
$("img").attr("src","test.jpg"); //设置所有图像的src属性
$("img").removeAttr("src"); //将文档中图像的src属性删除
$("input[type=‘checkbox‘]").prop("checked", true); //选中复选框
$("input[type=‘checkbox‘]").prop("checked", false);
$("img").removeProp("src"); //删除img的src属性
//需要注意的是：当我们对checkbox,radio,select等选择性的表当取选中状态的时候，不要使用checked属性，而使用prop属性。
b、CSS类操作
$("p").addClass("selected"); //为p元素加上 ‘selected‘ 类
$("p").removeClass("selected"); //从p元素中删除 ‘selected‘ 类
$("p").toggleClass("selected"); //如果存在就删除,否则就添加
c、HTML代码/文本/值
$(‘p‘).html(); //返回p元素的html内容
$("p").html("Hello <b>test</b>!"); //设置p元素的html内容
$(‘p‘).text(); //返回p元素的文本内容
$("p").text("test"); //设置p元素的文本内容
$("input").val(); //获取文本框中的值
$("input").val("test"); //设置文本框中的内容
2、CSS操作
a、CSS样式操作
$("p").css("color"); //访问查看p元素的color属性
$("p").css("color","red"); //设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" }); //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）
b、位置
$(‘p‘).offset() //元素的border外边界相对浏览器视口的偏移,Object {top: 16, left: 16}
$(‘p‘).offset().top
$(‘p‘).offset().left
$("p").position() //元素的margin外边界相对于有postion属性的父元素的padding内边界距离,对可见元素有效，Object {top: 2, left: 2}，如果父元素没有设置postion属性会一直向外查找直到body元素，这时就和offset的值相同。
$(window).scrollTop() //获取滚轮滑的高度
$(window).scrollLeft() //获取滚轮滑的宽度
$(window).scrollTop(‘100‘) //设置滚轮滑的高度为100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding:0;
margin:0;
}
.d1 {
height: 100px;
width:100px;
border: 1px solid blue;
padding: 2px;
margin: 4px;;
background-color: #cccccc;
position: relative;
}
.d2{
height:50px;
width:50px;
margin: 9px;
padding:11px ;
border: 5px solid red;
}
</style>
<script src="jquery-2.1.1.min.js"></script>
</head>
<body >
<div class="d1">
<div class="d2"></div>
</div>
<script>
console.log($(".d2").offset())
console.log($(".d2").offset().top)
console.log($(".d2").offset().left)
console.log($(".d2").position())
offset和postion
c、尺寸
$("div").height(); //元素的高度,实际高度（不包括margin,padding,border）
$("div").width(); //元素的宽度,实际宽度（不包括margin,padding,border）
$("div").innerHeight() //元素内部区域高度(height+上下padding)
$("div").innerWidth() //元素内部区域宽度(width+左右padding)
$("divt").outerHeight() //元素外部高度((height+上下padding+上下border)
$("div").outerWidth() //元素外部宽度(width+左右padding+左右border)
$("div").outerHeight(true) //为true时包括(margin)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 100px;
width:100px;
border: 1px solid blue;
padding: 2px;
margin: 4px;;
}
</style>
<script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<div>
</div>
<script>
console.log($("div").height()) //100
console.log($("div").width()) //100
console.log($("div").innerHeight()) //104
console.log($("div").innerWidth()) //104
console.log($("div").outerHeight()) //106
console.log($("div").outerWidth()) //106
</script>
</body>
</html>
尺寸样例
3、文档处理
a、内部插入
<!--内部插入-->
$("p").append("<b>test</b>"); //每个p元素内后面追加内容
$("p").appendTo("div"); //p元素追加到div内后
$("p").prepend("<b>Hello</b>"); //每个p元素内前面追加内容
$("p").prependTo("div"); //p元素追加到div内前
b、外部插入
<!--外部插入-->
$("p").after("<b>test</b>"); //每个p元素同级之后插入内容
$("p").before("<b>test</b>"); //在每个p元素同级之前插入内容
$("p").insertAfter("#test"); //所有p元素插入到id为test元素的后面
$("p").insertBefore("#test"); //所有p元素插入到id为test元素的前面
c、替换
<!--替换-->
$("p").replaceWith("<b>Paragraph. </b>"); //将所有匹配的元素替换成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的元素替换掉所有 selector匹配到的元素
d、删除
<!--替换-->
$("p").replaceWith("<b>Paragraph. </b>"); //将所有匹配的元素替换成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的元素替换掉所有 selector匹配到的元素
e、复制
<!--复制-->
$("p").clone() //克隆元素并选中克隆的副本
$("p").clone(true) //布尔值指事件处理函数是否会被复制
四、动态效果
<!--基本效果-->
$("p").show() //显示隐藏的匹配元素
$("p").show("slow"); //参数表示速度,("slow","normal","fast"),也可为1000毫秒
$("p").hide() //隐藏显示的元素
$("p").toggle(); //切换 显示/隐藏
<!--滑动效果-->
$("p").slideDown("1000"); //用1000毫秒时间将段落滑下
$("p").slideUp("1000"); //用1000毫秒时间将段落滑上
$("p").slideToggle("1000"); //用1000毫秒时间将段落滑上，滑下
<!--淡入淡出效果-->
$("p").fadeIn("1000"); //用1000毫秒时间将段落淡入
$("p").fadeOut("1000"); //用1000毫秒时间将段落淡出
$("p").fadeToggle("1000"); //用1000毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用1000毫秒时间将段落的透明度调整到0.6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1 隐藏与显示-->
<!--2 淡入淡出-->
<!--3 滑动-->
<!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事-->
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(1000);
});
//用于切换被选元素的 hide() 与 show() 方法。
$("#toggle").click(function(){
$("p").toggle(2000);
});
});
</script>
</body>
</html>
隐藏和显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#flipshow,#content,#fliphide,#toggle{
padding: 5px;
text-align: center;
background-color: blueviolet;
border:solid 1px red;
}
#content{
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flipshow">出现</div>
<div id="fliphide">隐藏</div>
<div id="toggle">toggle</div>
<div id="content">helloworld</div>
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#flipshow").click(function(){
$("#content").slideDown(1000);
});
$("#fliphide").click(function(){
$("#content").slideUp(1000);
});
$("#toggle").click(function(){
$("#content").slideToggle(1000);
})
});
</script>
</body>
</html>
滑动
滑动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button>
<div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
<div id="id2" style="display:none; width: 80px;height: 80px;background-color: orangered "></div>
<div id="id3" style="display:none; width: 80px;height: 80px;background-color: darkgreen "></div>
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#in").click(function(){
$("#id1").fadeIn(1000);
$("#id2").fadeIn(1000);
$("#id3").fadeIn(1000);
});
$("#out").click(function(){
$("#id1").fadeOut(1000);
$("#id3").fadeOut(1000);
$("#id2").fadeOut(1000);
});
$("#toggle").click(function(){
$("#id1").fadeToggle(1000);
$("#id2").fadeToggle(1000);
$("#id3").fadeToggle(1000);
});
$("#fadeto").click(function(){
$("#id1").fadeTo(1000,0.4);
$("#id2").fadeTo(1000,0.5);
$("#id3").fadeTo(1000,0.1);
});
});
</script>
</body>
</html>
淡入淡出
淡入淡出
自定义，待补充。。
所有的效果都可以添加回调函数callback()。
五、事件
特殊的--页面载入事件
在页面载入后才开始执行脚本
$(document).ready(function(){
代码块
});
//简写
$(function() {
代码块
});
1、基本事件类型
<!--鼠标事件-->
$("p").click(); //单击事件
$("p").dblclick(); //双击事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup() //元素上放松鼠标按钮时触发事件
$("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover() //当鼠标指针位于元素上方时触发事件
$("p").mouseout() //当鼠标指针从元素上移开时触发事件
$("p").foucusin() //当元素获得焦点时，触发 focusin 事件。
$("p").focusout() //当元素失去焦点时触发 focusout 事件。
$("p").hover(fun_mouseover,fun_mouseout) //当鼠标移到元素上时触发fun_mouseover函数，当鼠标移出元素时触发fun_mouseout函数
<!--表单事件-->
$("input[type=text]").focus() //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur() //元素失去焦点时,触发 blur事件
$("input").select() //当input 元素中的文本被选择时触发事件
$("input").change() //当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
$("form").submit() //当提交表单时触发事件
<!--键盘事件-->
$(window).keydown() //当键盘或按钮被按下时触发事件
$(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup() //当按钮被松开时触发事件
<!--窗口和页面事件-->
$(window).scroll() //当用户滚动时触发事件
$(window).resize() //当调整浏览器窗口的大小时触发事件
$(window).unload() //用户离开页面时
2、事件处理
3.0后基本只是用on替代以前的bind，live，delegate等方法，因此这里仅介绍on方法。on方法支持事件冒泡。
a、事件绑定
.on( events [, selector ] [, data ], handler(eventObject) )表达式
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
$("#elem").click(function(){})
<!--on绑定方式-->
$("#elem").on(‘click‘,function(){}) //on方式
$("#elem").on("mouseover mouseout",function(){ }); //多个事件绑定同一个函数
$("#elem").on({ //多个事件绑定不同函数
mouseover:function(){},
mouseout:function(){},
});
$("#elem").one(‘click‘,function(){}) //绑定一个一次性的事件处理函数
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 100%;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>on绑定多事件</h2>
<h4>测试一</h4>
<div class="left">
点击触发：on(‘click‘,fn)
<div id="test1"></div>
</div>
<script type="text/javascript">
//事件绑定一
$("#test1").on(‘click‘, function(e) {
$(this).text(‘触发事件：‘ + e.type)
})
</script>
<h4>测试二</h4>
<div class="left">
点击触发：on(‘mousedown mouseup‘)
<div id="test2"></div>
</div>
<script type="text/javascript">
//多事件绑定一
$("#test2").on(‘mousedown mouseup‘, function(e) {
$(this).text(‘触发事件：‘ + e.type)
})
</script>
<h4>测试三</h4>
<div class="right">
点击触发：on(mousedown:fn1,mouseup:fn2)
<div id="test3"></div>
</div>
<script type="text/javascript">
//多事件绑定二
$("#test3").on({
mousedown: function(e) {
$(this).text(‘触发事件：‘ + e.type)
},
mouseup: function(e) {
$(this).text(‘触发事件：‘ + e.type)
}
})
</script>
</body>
</html>
事件绑定样例
b、事件委托
$("#elem").on(‘click‘,“p",function(){}) //事件绑定在最上层#elem元素上，当用户触发在p元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>on事件委托</h2>
<div class="left">
<div class="aaron">
<a>点击这里</a>
</div>
</div>
<script type="text/javascript">
//给body绑定一个click事件
//没有直接a元素绑定点击事件
//通过委托机制，点击a元素的时候，事件触发
$(‘body‘).on(‘click‘, ‘a‘, function(e) {
alert(e.target.textContent)
})
</script>
</body>
</html>
事件委托样例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 100px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>事件委托，通过事件对象区别触发元素</h3>
<div class="left">
<div class="aaron">
<ul>
<li>点击：触发一</li>
<li>点击：触发二</li>
<li>点击：触发三</li>
<li>点击：触发四</li>
</ul>
</div>
</div>
<script type="text/javascript">
//多事件绑定一
$("ul").on(‘click‘,function(e){
alert(‘触发的元素是内容是: ‘ + e.target.textContent)
})
</script>
</body>
</html>
事件委托样例二
c、事件解除
//假设绑定两个事件$("elem").on("mousedown mouseup",fn)
$("elem").off("mousedown") //删除一个事件
$("elem").off("mousedown mouseup") //删除所有事件
$("elem").off() //删除所有事件
//假设绑定两个事件$("div").on("mousedown","p,a",fn)
$("div").off( "click", "**" ) //删除所有委托事件
$("div").off( "click", "p" ) //删除p元素委托事件
3、事件对象
$("p").click(function(event){
alert(event.type); //"click"
});
(evnet object)属性方法：
event.pageX //事件发生时，鼠标距离网页左上角的水平距离
event.pageY //事件发生时，鼠标距离网页左上角的垂直距离
event.type //事件的类型
event.which //按下了哪一个键event.timeStamp //这个属性返回事件触发时距离1970年1月1日的毫秒数。时间戳
event.data //在事件对象上绑定数据，然后传入事件处理函数
event.target //事件针对的网页元素，js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
event.preventDefault() //阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation() //停止事件向上层元素冒泡event.currentTarget //冒泡前的当前触发事件的DOM对象, 等同于this.
4、自定义事件
。。待补充
六、扩展
1、扩展方法
//方式一
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
2、扩展jQuery功能
//方式二
jQuery.extend({
min: function(a, b) { return a < b ? a : b; }, //三元运算
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //2
$.max(4,5); //5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="title">111</div>
<div class="title">222</div>
<script src="jquery-2.1.1.min.js"></script>
<script>
jQuery.fn.extend({
show1: function () {
var val = this.text();
val = val + "sb";
return val;
},
show2: function () {
}
});
var ret = $(".title").show1();
console.log(ret);
jQuery.extend({
s1: function (arg) {
var val = $(arg).text();
return val + "sb";
},
s2: function () {
}
});
var ret2 = $.s1(".title");
console.log(ret2);
</script>
</body>
</html>
两种扩展样例
七、jQuery工具函数
$.trim() //去除字符串两端的空格
$.each() //遍历一个数组或对象，for循环,return false能跳出each循环
$.inArray() //返回一个值在数组中的索引位置，不存在返回-1
$.grep() //返回数组中符合某种标准的元素
$.extend() //将多个对象，合并到第一个对象
$.makeArray() //将对象转化为数组
$.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
$.isArray() //判断某个参数是否为数组
$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
$.isFunction() //判断某个参数是否为函数
$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象
$.support() //判断浏览器是否支持某个特性
八、实例部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.divH {
height: 1800px;
}
.divT {
width: 50px;
height: 50px;
font-size: 23px;
background-color: #2F4F4F;
color: white;
position: fixed;
right: 18px;
bottom: 18px;
}
.divT:hover{
cursor: pointer;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="divH"></div>
<div class="divT hide" onclick="ReturnTop();"><strong>返回顶部</strong></div>
<script src="jquery-2.1.1.min.js"></script>
<script>
window.onscroll = function () {
var current = $(window).scrollTop();
if (current > 180){
$(".divT").removeClass("hide");
}else {
$(".divT").addClass("hide");
}
};
function ReturnTop() {
$(window).scrollTop(0);
}
</script>
</body>
</html>
返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
border: 1px solid #ccc;
line-height: 40px;
}
.menu li{
display: inline-block;
color: white;
}
.menu li:hover {
cursor: pointer;
}
.menu a{
padding: 11px;
}
.content{
border: 1px solid #ccc;
height: 300px;
font-size: 30px;
}
.hide{
display: none;
}
.current{
background-color: #0099dd;
color: black;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current" onclick="Tab(this);">菜单一</li>
<li xxx="c2" onclick="Tab(this);">菜单二</li>
<li xxx="c3" onclick="Tab(this);">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script src="../../jquery-1.12.4.js"></script>
<script>
function Tab(self) {
$(self).addClass("current").siblings().removeClass("current");
var x = "#" + $(self).attr("xxx");
$(x).removeClass("hide").siblings().addClass("hide");
}
</script>
</body>
</html>
左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
background-color: #dddddd;
}
.w{
margin: 0 auto;
width: 980px;
}
.pg-header{
background-color: black;
color: white;
height: 48px;
}
.pg-body .menu{
position: absolute;
left: 200px;
width: 180px;
background-color: white;
float: left;
}
li {
list-style-type: none;
}
.pg-body .menu .active{
background-color: #425a66;
color: white;
}
.pg-body .fixed{
position: fixed;
top: 10px;
}
.pg-body .content{
position: absolute;
left: 385px;
right: 200px;
background-color: white;
float: left;
}
.pg-body .content .item{
height: 900px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w"></div>
</div>
<div class="pg-body">
<div id="menu" class="menu">
<ul>
<li menu="funcOne">第一章</li>
<li menu="funcTwo">第二章</li>
<li menu="funcStree">第三章</li>
</ul>
</div>
<div id="content" class="content">
<div class="item" con="funcOne">床前明月光</div>
<div class="item" con="funcTwo">疑是地上霜</div>
<div class="item" con="funcStree" style="height: 100px">我是郭德纲</div>
</div>
</div>
<script src="jquery-2.1.1.min.js"></script>
<script>
window.onscroll = function () {
//滚轮下滑，菜单固定
var scrTop = $(window).scrollTop();
if (scrTop >= 48){
$("#menu").addClass("fixed");
}else {
$("#menu").removeClass("fixed");
}
var windowHeight = $(window).height(); //视窗高度
$(".item").each(function () {
var itemTopOffset = $(this).offset().top; //章节顶部离文档顶部距离
var itemBotOffset = $(this).height() + itemTopOffset; //章节底部离文档顶部距离
var menuCon = $(this).attr("con");
//进入正常章节条件判断
if ((itemTopOffset < scrTop) && (scrTop < itemBotOffset)){
$("ul [menu=‘" + menuCon +"‘]").addClass("active").siblings().removeClass("active");
return false //return false才能跳出each循环。
}
})
//判断是否已经到达文档底部，如果到达底部，就激活最后一章标签。
if ((windowHeight + scrTop) == $(document).height()){
$("ul .active").removeClass("active");
$("li:last").addClass("active");
}
}
</script>
</body>
</html>
滚动菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
border: 1px solid #ccc;
line-height: 40px;
}
.menu li{
display: inline-block;
color: white;
}
.menu li:hover {
cursor: pointer;
}
.menu a{
padding: 11px;
}
.content{
border: 1px solid #ccc;
height: 300px;
font-size: 30px;
}
.hide{
display: none;
}
.current{
background-color: #0099dd;
color: black;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current">菜单一</li>
<li xxx="c2" >菜单二</li>
<li xxx="c3" >菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script src="jquery-2.1.1.min.js"></script>
<script>
//方法一，直接绑定在元素上
// $("li[xxx]").on("click",function () {
// $(this).addClass("current").siblings().removeClass("current");
// var x = "#" + $(this).attr("xxx");
// $(x).removeClass("hide").siblings().addClass("hide");
//
// })
//方法二，绑定在父元素上，冒泡事件e.target相当晕上面方法的this
$("ul").on("click",function (e) {
console.log(e.target)
$(e.target).addClass("current").siblings().removeClass("current");
var x = "#" + $(e.target).attr("xxx");
$(x).removeClass("hide").siblings().addClass("hide");
})
</script>
</body>
</html>
TAB菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--onclick="Add(this);"-->
</head>
<body>
<div class="outer">
<div class="section">
<div class="icons" style="display: inline-block">
<a ><button>+</button></a>
</div>
<div class="inputs" style="display: inline-block">
<input type="checkbox">
<input type="text" value="IP">
</div>
</div>
</div>
<script src="jquery-2.1.1.min.js"></script>
<script>
// $(".outer .section").on("click","button",function () {
// //parentsUntil(".outer")包括了多个父元素，因此需要.last()来选择最外层的父元素。
// //.end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
// $(this).parentsUntil(".outer").last().clone().find("button").text("-").attr("onclick","Remove(this);").end().appendTo(".outer")
// })
// function Remove(self) {
// $(self).parentsUntil(".outer").last().remove()
// }
$("button").on("click",function () {
$(this).parentsUntil(".outer").last().clone().find("button").text("-").attr("onclick","Remove(this);").end().appendTo(".outer")
})
function Remove(self) {
$(self).parentsUntil(".outer").last().remove()
}
</script>
</body>
</html>
添加删除元素并绑定事件
时间： 2024-10-30 05:57:40