JQuery
定义
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery是一个轻量级的"写的少，做的多"的JavaScript库。源码走这里
- jQuery产生的对象时jQuery独有的，只能自己调用
书写规范
基础语法： $(selector).action() 变量定义：var $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> 拖动面板 面板拖动
<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>
JQuery
定义
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery是一个轻量级的"写的少，做的多"的JavaScript库。源码走这里
- jQuery产生的对象时jQuery独有的，只能自己调用
书写规范
基础语法： $(selector).action() 变量定义：var $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> 拖动面板 面板拖动
<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>
定义
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery是一个轻量级的"写的少，做的多"的JavaScript库。源码走这里
- jQuery产生的对象时jQuery独有的，只能自己调用
书写规范
基础语法： $(selector).action() 变量定义：var $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> 拖动面板 面板拖动
<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>
定义
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery是一个轻量级的"写的少，做的多"的JavaScript库。源码走这里
- jQuery产生的对象时jQuery独有的，只能自己调用
书写规范
基础语法： $(selector).action() 变量定义：var $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> 拖动面板 面板拖动
<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>