定义
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery是一个轻量级的"写的少，做的多"的JavaScript库。源码走这里
- jQuery产生的对象时jQuery独有的，只能自己调用
书写规范
基础语法： **$( selector ). action () ** 变量定义： var v a r i a b l e = j Q u e r y 对象 ∗ ∗ 变量前并不强制加 ∗ ∗ variable = jQuery 对象 **变量前并不强制加 ** variable=jQuery对象∗∗变量前并不强制加∗∗ 符号,可以直观了解声明了一个jQuery对象
元素寻找
选择器(selector)
1、基本选择器
1
2
3
4
5
6
7
8
9
|
$(``"*"``) ``// 选取所有元素
$(``"element"``) ``// 选取标签名称的所有元素
$(``"#id"``) ``// 选取id 属性指定的元素
$(``".class"``) ``// 选取指定的 class 查找元素
$(``".calss,p,div"``) ``// 选取多样
—|—
2、层级选择器
1
2
3
4
5
6
7
|
$(``".outer div"``) ``// 后代选择器查找
$(``".outer>div"``) ``// 子代选择器查找
$(``".outer+div"``) ``// 通过毗邻查找，用的少。。只能往下找
$(``".outer~div"``) ``// 自下找，不限制紧挨
—|—
3、属性选择器
1
2
3
|
$(``'[id="div1"]'``)
$(``'["alex="sb"][id]'``) ``// 可双层属性选择
—|—
筛选器
1、基本筛选器
1
2
3
4
5
6
7
8
9
10
11
12
|
$(``'li:first'``) ``//第一个元素
$(``'li:last'``) ``//最后一个元素
$(``"tr:even"``) ``//索引为偶数的元素，从 0 开始
$(``"tr:odd"``) ``//索引为奇数的元素，从 0 开始
$(``"tr:eq(1)"``) ``//给定索引值的元素
$(``"tr:gt(0)"``) ``//大于给定索引值的元素
$(``"tr:lt(2)"``) ``//小于给定索引值的元素
$(``":focus"``) ``//当前获取焦点的元素
$(``":animated"``) ``//正在执行动画效果的元素
—|—
2、表单筛选器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$(``":input"``) ``// 匹配所有 input, textarea, select 和 button 元素
$(``":text"``) ``// 所有的单行文本框
$(``":password"``) ``// 所有密码框
$(``":radio"``) ``// 所有单选按钮
$(``":checkbox"``) ``// 所有复选框
$(``":submit"``) ``// 所有提交按钮
$(``":reset"``) ``// 所有重置按钮
$(``":button"``) ``// 所有button按钮
$(``":file"``) ``// 所有文件域
$(``"input:checked"``) ``// 所有选中的元素
$(``"select option:selected"``) ``// select中所有选中的option元素
``// 如果select默认选中想要的值 $('select').val(1)
``// 即默认选中值为1 option标签
``// 如果想选中多个值呢？？？
``// $('select').val([1,2,]) 放入一个数组即可
—|—
3、内容筛选器
1
2
3
4
|
$(``"div:contains('test')"``) ``// 包含test文本的元素
$(``"td:empty"``) ``// 不包含子元素或者文本的空元素
$(``"div:has(p)"``) ``// 含有选择器所匹配的元素
$(``"td:parent"``) ``// 含有子元素或者文本的元素
—|—
4、查找筛选器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$(``"div"``).children() ``// 查找div下的所有儿子标签
$(``"div"``).find() ``// 查找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"``).hasClass(``"test"``) ``// 查找p标签有class名字为test
—|—
更多选择器玩转
1
2
3
|
$(``"[href]"``) ``// 选取带有 href 属性的元素
$(``"a[target='_blank']"``) ``// 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$(``"a[target!='_blank']"``) ``// 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
—|—
属性操作
1、基本属性操作
1
2
3
4
5
6
7
8
9
10
|
$(``"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属性
// attr与prop区别
// attr可以找到自定义的属性、prop只能找到固有的属性
—|—
2、class操作
1
2
3
4
|
$(``"p"``).addClass(``"test"``); ``// 为p元素加上 'test' 类
$(``"p"``).removeClass(``"test"``); ``// 从p元素中删除 'test' 类
$(``"p"``).toggleClass(``"test"``); ``// 如果存在就删除,否则就添加
$(``"p"``).hasClass(``"test"``); ``// 判断有没有 'test' 类,返回布尔值
—|—
3、标签文本text/html
1
2
3
4
5
6
|
$(``'p'``).html(); ``// 返回p元素的html内容
$(``"p"``).html(``"Hello <b>test</b>!"``); ``// 设置p元素的html内容
$(``'p'``).text(); ``// 返回p元素的文本内容
$(``"p"``).text(``"test"``); ``// 设置p元素的文本内容
$(``"input"``).val(); ``// 获取文本框中的值
$(``"input"``).val(``"test"``); ``// 设置文本框中的内容
—|—
CSS操作
1、样式
1
2
3
4
|
$(``"p"``).css(``"color"``); ``// 访问查看p元素的color属性
$(``"p"``).css(``"color"``,``"red"``); ``// 设置p元素的color属性为red
$(``"p"``).css({ ``"color"``: ``"red"``, ``"background"``: ``"yellow" });
// 设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）
—|—
2、位置
1
2
3
4
5
6
7
8
|
$(``'p'``).offset() ``// 元素在当前视口的相对偏移,Object {top: 122, left: 260}
$(``'p'``).offset().top
$(``'p'``).offset().left
$(``"p"``).position() ``// 元素相对父元素的偏移,对可见元素有效，Object {top: 117, left: 250}
$(window).scrollTop() ``// 获取滚轮滑的高度
$(window).scrollLeft() ``// 获取滚轮滑的宽度
$(window).scrollTop(``'100'``) ``// 设置滚轮滑的高度为100
—|—
3、尺寸
1
2
3
4
5
6
7
8
9
|
$(``"p"``).height(); ``// 获取p元素的高度
$(``"p"``).width(); ``// 获取p元素的宽度
$(``"p:first"``).innerHeight() ``// 获取第一个匹配元素内部区域高度(包括补白、不包括边框)
$(``"p:first"``).innerWidth() ``// 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
$(``"p:first"``).outerHeight() ``// 匹配元素外部高度(默认包括补白和边框)
$(``"p:first"``).outerWidth() ``// 匹配元素外部宽度(默认包括补白和边框)
$(``"p:first"``).outerHeight(``true``)``// 为true时包括边距
—|—
文档处理
1、内部插入
1
2
3
4
|
$(``"p"``).append(``"<b>nick</b>"``); ``// 每个p元素内后面追加内容
$(``"p"``).appendTo(``"div"``); ``// p元素追加到div内后
$(``"p"``).prepend(``"<b>Hello</b>"``); ``// 每个p元素内前面追加内容
$(``"p"``).prependTo(``"div"``); ``// p元素追加到div内前
—|—
2、外部插入
1
2
3
4
|
$(``"p"``).after(``"<b>nick</b>"``); ``// 每个p元素同级之后插入内容
$(``"p"``).before(``"<b>nick</b>"``); ``// 在每个p元素同级之前插入内容
$(``"p"``).insertAfter(``"#test"``); ``// 所有p元素插入到id为test元素的后面
$(``"p"``).insertBefore(``"#test"``); ``// 所有p元素插入到id为test元素的前面
—|—
3、替换
1
2
|
$(``"p"``).replaceWith(``"<b>Paragraph.</b>"``); ``// 将所有匹配的元素替换成指定的HTML或DOM元素
$(``"<b>Paragraph.</b>"``).replaceAll(``"p"``); ``// 用匹配的元素替换掉所有selector匹配到的元素
—|—
4、删除
1
2
3
|
$(``"p"``).empty(); ``// 删除匹配的元素集合中所有的子节点，不包括本身
$(``"p"``).remove([expr]); ``// 删除所有匹配的元素,包括本身
$(``"p"``).detach(); ``// 删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)
—|—
5、复制
1
2
|
$(``"p"``).clone() ``// 克隆元素并选中克隆的副本
$(``"p"``).clone(``true``) ``// 布尔值指事件处理函数是否会被复制
—|—
循环
jQuery实现的数组循环机制
1
2
3
4
5
6
7
8
9
10
|
// 以下俩种循环虽然看似一样, 但是还是有一些区别的
// 方式一 遍历数据时，通常用
$.each(Array,``function () {
})
// 方式二 遍历DOM时, 通常用
$(element).each(``function () {
})
—|—
事件
1、事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$(``"p"``).click(); ``// 单击事件
$(``"p"``).dblclick(); ``// 双击事件
$(``"input[type=text]"``).focus() ``// 元素获得焦点时,触发 focus 事件
$(``"input[type=text]"``).blur() ``// 元素失去焦点时,触发 blur事件
$(``"button"``).mousedown() ``// 当按下鼠标时触发事件
$(``"button"``).mouseup() ``// 元素上放松鼠标按钮时触发事件
$(``"p"``).mousemove() ``// 当鼠标指针在指定的元素中移动时触发事件
$(``"p"``).mouseover() ``// 当鼠标指针位于元素上方时触发事件
$(``"p"``).mouseout() ``// 当鼠标指针从元素上移开时触发事件
$(window).keydown() ``// 当键盘或按钮被按下时触发事件
$(window).keypress() ``// 当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$(``"input"``).keyup() ``// 当按钮被松开时触发事件
$(window).scroll() ``// 当用户滚动时触发事件
$(window).resize() ``// 当调整浏览器窗口的大小时触发事件
$(``"input[type='text']"``).change()``// 当元素的值发生改变时触发事件
$(``"input"``).select() ``// 当input 元素中的文本被选择时触发事件
$(``"form"``).submit() ``// 当提交表单时触发事件
$(window).unload() ``// 用户离开页面时
—|—
2、绑定方式
1
2
3
|
$(标签).事件(函数内容)
$(标签).bind(``"事件"``,函数名)
—|—
3、页面载入
1
2
3
4
5
6
7
8
9
10
|
// 当页面载入成功后再运行的函数事件
$(document).ready(``function``(){
``......
});
// 简写
$(``function``() {
``......
});
—|—
4、页面处理
1
2
3
4
5
6
7
8
9
10
11
12
|
// bind 为每个匹配元素绑定事件处理函数，绑定多个用{}。
$(``"p"``).bind(``"click"``, ``function``(){
``alert( $(``this``).text() );
});
$(menuF).bind({
``"mouseover"``:``function () {$(menuS).parent().removeClass(``"hide"``);},
``"mouseout"``:``function () {$(menuS).parent().addClass(``"hide"``);}
});
$(``"p"``).one(``"click"``, fun...) ``// one 绑定一个一次性的事件处理函数
$(``"p"``).unbind(``"click"``) ``// 解绑一个事件
—|—
5、页面委派
…
6、事件委托
1
2
3
4
5
6
7
8
9
|
$(``'ul'``).on(``"click"``,``"li"``,``function () {
``alert(999);
});
// 阐释...
// 通过它的上级（多层上级）事件委托，当点击这个标签时才会绑定事件
// 场景：
``在页面不刷新的情况下添加一行数据，行数据有操作按钮，点击并无效果，那么通过事件委托便可以解决
—|—
7、event object
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// 所有的事件函数都可以传入event参数方便处理事件
$(``"p"``).click(``function``(event){
``alert(event.type); ``//"click"
});
(evnet object)属性方法：
event.pageX ``// 事件发生时，鼠标距离网页左上角的水平距离
event.pageY ``// 事件发生时，鼠标距离网页左上角的垂直距离
event.type ``// 事件的类型
event.which ``// 按下了哪一个键
event.data ``// 在事件对象上绑定数据，然后传入事件处理函数
event.target ``// 事件针对的网页元素
event.preventDefault() ``// 阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation()``// 停止事件向上层元素冒泡
—|—
动画效果
1、基点
1
2
3
4
|
$(``"p"``).show() ``// 显示隐藏的匹配元素
$(``"p"``).show(``"slow"``); ``// 参数表示速度,("slow","normal","fast"),也可设置为毫秒
$(``"p"``).hide() ``// 隐藏显示的元素
$(``"p"``).toggle(); ``// 切换 显示/隐藏
—|—
2、滑动
1
2
3
|
$(``"p"``).slideDown(``"1000"``); ``// 用1000毫秒时间将段落滑下
$(``"p"``).slideUp(``"1000"``); ``// 用1000毫秒时间将段落滑上
$(``"p"``).slideToggle(``"1000"``); ``// 用1000毫秒时间将段落滑上，滑下
—|—
3、淡入淡出
1
2
3
4
|
$(``"p"``).fadeIn(``"900"``); ``// 用900毫秒时间将段落淡入
$(``"p"``).fadeOut(``"900"``); ``// 用900毫秒时间将段落淡出
$(``"p"``).fadeToggle(``"900"``); ``// 用900毫秒时间将段落淡入,淡出
$(``"p"``).fadeTo(``"slow"``, 0.6); ``// 用900毫秒时间将段落的透明度调整到0.6
—|—
4、回调函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
// 回调函数指什么 一个动作完成之后执行的一段代码
// DEMO
<!DOCTYPE html>
<html lang=``"en"``>
<head>
``<meta charset=``"UTF-8"``>
``<title>Title</title>
``<script src=``"js/jquery-2.2.3.js"``></script>
``<script>
``$(document).ready(``function``(){
``$(``"button"``).click(``function``(){
``$(``"p"``).hide(1000,``function``(){
``alert(``'动画结束'``)
``})
// $("p").css('color','red').slideUp(1000).slideDown(2000)
``})
});
``</script>
</head>
<body>
``<button>隐藏</button>
``<p>helloworld helloworld helloworld</p>
</body>
</html>
—|—
扩展(插件机制)
此机制可扩展Jquery的方法或者定制一些其它的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html lang=``"en"``>
<head>
``<meta charset=``"UTF-8"``>
``<title>Title</title>
``<style>
``a{
``color: #65ff9b;
``}
``</style>
</head>
<body>
<div>Hello World</div>
<input type=``"checkbox"``>
<input type=``"radio" checked>
<script src=``"jquery-3.1.1.js"``></script>
<script>
``// 方式一
``$.extend({
``Myprint:``function (content) {
``console.log(content)
``}
``});
``$.Myprint(666);
``// 方式2
``$.fn.extend({
``check:``function () {``return this``.each(``function () {``this``.checked=``true``})},
``uncheck:``function () {``return this``.each(``function () {``this``.checked=``false``})}
``});
``$(``":checkbox"``).check();
``$(``":radio"``).uncheck()
</script>
</body>
</html>
—|—
对象访问
1
2
3
4
5
6
7
8
9
10
11
12
|
$.trim() ``// 去除字符串两端的空格
$.each() ``// 遍历一个数组或对象，for循环
$.inArray() ``// 返回一个值在数组中的索引位置，不存在返回-1
$.grep() ``// 返回数组中符合某种标准的元素
$.extend() ``// 将多个对象，合并到第一个对象
$.makeArray() ``// 将对象转化为数组
$.type() ``// 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
$.isArray() ``// 判断某个参数是否为数组
$.isEmptyObject() ``// 判断某个对象是否为空(不含有任何属性)
$.isFunction() ``// 判断某个参数是否为函数
$.isPlainObject() ``// 判断某个参数是否为用"{}"或"new Object"建立的对象
$.support() ``// 判断浏览器是否支持某个特性
—|—
jQuery拾遗
hover()
// 语法
$(selector).hover(inFunction,outFunction)
// 等同于
$( selector ).mouseover( handlerIn ).mouseout( handlerOut );
参数 描述
inFunction 必需。规定 mouseover 事件发生时运行的函数。
outFunction 可选。规定 mouseout 事件发生时运行的函数。
// DEMO
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
data()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>
实例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11
12 .HA,.HE{
13 height: 900px;
14 }
15 .HA{
16 background-color: #8aab30;
17 }
18 .HE{
19 background-color: #99aecb;
20 }
21 .go_top{
22 display: inline-block;
23 position: fixed;
24 right: 30px;
25 bottom: 50px;
26 width: 39px;
27 height: 39px;
28 background: url("go_top.png") 0 78px;
29 }
30
31 .go_top:hover{
32 background: url("go_top.png") 0 39px;
33 }
34 .hide{
35 display: none;
36 }
37
38 </style>
39
40 </head>
41 <body>
42 <div class="HA"></div>
43 <div class="HE"></div>
44 <a class="go_top hide" title="返回顶部"></a>
45
46 <script src="jquery-3.1.1.js"></script>
47 <script>
48 window.onscroll = function () {
49 var xyz = $(window).scrollTop();
50 console.log(xyz);
51 if (xyz>100){
52 $(".go_top").removeClass("hide");
53 }else {
54 $(".go_top").addClass("hide");
55 }
56 };
57
58 $(".go_top").click(function () {
59 $('body,html').animate({scrollTop:0},1000);
60 })
61
62 </script>
63 </body>
64 </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.square:hover{
background-color: black;
opacity: 0.7;
}
#play_img{
height: 340px;
width: 790px;
position: absolute;
left: 280px;
top: 100px;
}
li{
display: inline-block;
list-style: none;
}
.hide{
display: none;
}
/*圆形按钮渲染*/
.round_click{
width: 180px;
height: 20px;
position: absolute;
border-radius: 12px;
bottom: 20px;
left: 300px;
background-color: hsla(0,0%,100%,.3);
}
.round_click span{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 12px;
margin-right: 2px;
margin-left: 2px;
background-color: white;
}
.round_click .round_item{
margin-left: 10px;
}
.round_click .round_item_a{
background-color: red;
}
/*方形框按钮渲染*/
.square{
width: 30px;
height: 60px;
position: absolute;
bottom: 140px;
background-color: rgba(0,0,0,.1);
}
.click_right{
right: 0;
}
</style>
</head>
<body>
<div id="play_img">
<ul>
<li class=""><img src="photo/1.png" alt=""></li>
<li class="hide"><img src="photo/2.jpg" alt=""></li>
<li class="hide"><img src="photo/3.jpg" alt=""></li>
<li class="hide"><img src="photo/4.jpg" alt=""></li>
<li class="hide"><img src="photo/5.jpg" alt=""></li>
<li class="hide"><img src="photo/6.jpg" alt=""></li>
<li class="hide"><img src="photo/7.jpg" alt=""></li>
<li class="hide"><img src="photo/8.jpg" alt=""></li>
</ul>
<div class="round_click">
<span class="round_item round_item_a"></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</div>
<div class="square click_left"></div>
<div class="square click_right"></div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
var $photos = $("ul li"); // 获取图片数组
var $button = $(".round_click span"); // 获取按钮数组
var i = 0; // 定义变量
// 右击框事件
$(".click_right").bind("click",carousel);
// 左击框事件
$(".click_left").bind("click",leftMove);
// 鼠标悬浮于圆形按钮上方事件
$button.bind("mouseover",mouseHover);
// 自动轮播
var s = setInterval(carousel,1000);
// 右击框
function carousel() {
i++;
if (i==$photos.length){
i = 0;
$photos.eq(i).removeClass("hide");
}
$photos.eq(i-1).addClass("hide").next().removeClass("hide");
$button.eq(i).addClass("round_item_a").siblings().removeClass("round_item_a")
}
// 左击框
function leftMove() {
// 若按钮触发的图片定位,使用if判断进行操作标签
if (i>0){
$photos.eq(i).addClass("hide").prev().removeClass("hide");
$button.eq(i-1).addClass("round_item_a").siblings().removeClass("round_item_a");
i--;
}else {
i = 7;
$photos.addClass("hide");
$photos.eq(i).removeClass("hide");
$button.eq(0).removeClass("round_item_a");
$button.eq(i).addClass("round_item_a");
}
}
// 圆按钮点击事件
/*$button.click(function () {
var $index = $(this).index();
i = $index;
$photos.eq($index).removeClass("hide").siblings().addClass("hide");
$button.eq($index).addClass("round_item_a").siblings().removeClass("round_item_a")
});*/
// 鼠标位于元素圆按钮上方触发
function mouseHover() {
var $index = $(this).index();
i = $index;
$photos.eq($index).removeClass("hide").siblings().addClass("hide");
$button.eq($index).addClass("round_item_a").siblings().removeClass("round_item_a");
}
// 鼠标悬浮和鼠标离开
$("#play_img").hover(function () {
clearInterval(s);
s = undefined;
},function () {
s = setInterval(carousel,1000);
})
</script>
</body>
</html>
// offset() 方法设置或返回被选元素相对于文档的偏移坐标。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;color: white;">
<strong style="padding-left: 300px;;line-height: 40px">标题</strong>
</div>
<div style="height: 300px;">
内容......
</div>
</div>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script>
$(function () {
$('#title').mouseover(function () {
$(this).css('cursor','move');
}).mousedown(function (e) {
var _event = e || widows.event;
var old_x = _event.clientX;
var old_y = _event.clientY;
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).bind('mousemove',function (e) {
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - old_x);
var y = parent_top + (new_y - old_y);
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
}).mouseup(function () {
$(this).unbind('mousemove');
});
})
</script>
</body>
</html>
拖动面板
面板拖动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aP1NqNQe-1692921628911)(https://common.cnblogs.com/images/copycode.gif)]
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="HE">
<div class="HA">
<button onclick="add(this)">+</button>
<input type="text">
</div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
// 添加文本框
function add(self) {
var $add_ele = $(self).parent().clone();
// 修改子文本框html内容
var $remove_ele = $add_ele.children("button").html("-");
// attr() 方法设置或返回被选元素的属性和值。
$remove_ele.attr("onclick","remove_self(this)");
$(".HE").append($add_ele)
}
// 删除文本框
function remove_self(self) {
$(self).parent().remove();
}
</script>
</body>
</html>
// 在线进入编辑模式，样式还是可以调整的更加好看一些的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.edited{
width: 100px;
height: 30px;
line-height: 30px;
background-color: #b3b3b3;
text-align: center;
}
.editting{
background-color: #f0ad4e;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="editbtn" class="edited">
<a href="#">进入编辑模式</a>
</div>
<p></p>
<table border="1">
<thead>
<tr>
<th>蔬菜</th>
<th>水果</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>黄瓜</td>
<td>香蕉</td>
</tr>
<tr>
<td>胡萝卜</td>
<td>椰子</td>
</tr>
</tbody>
</table>
<script src="js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {
bindReady();
});
function bindReady() {
$('#editbtn').bind('click', function () {
if ($(this).hasClass('editting')){
$('#tb').find('tr').find('td').each(function () {
var new_text = $(this).find('input').val();
$(this).text(new_text)
});
$(this).removeClass('editting');
$(this).find('a').text('进入编辑模式');
}else {
$('#tb').find('tr').find('td').each(function () {
var text = $(this).text();
var temp = "<input type='text' value='"+ text +"'>";
$(this).html(temp)
});
$(this).addClass('editting');
$(this).find('a').text('退出编辑模式')
}
})
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="btn1">Toggle</button>
<p>This is a Toggle.</p>
<script src="jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(1000, function () {
console.log(1)
});
});
});
</script>
</body>
</html>
扫一扫
1522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
