jQuery
文档1：点击 文档2：点击
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
一、jQuery对象
- 通过jQuery包装DOM对象后产生的对象
- jQuery 对象是 jQuery 独有的
- 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
- jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
- 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$
- $variable[0]:jquery对象转为dom对象(推荐) 或者 $variable.get(0)也一样
$("#msg").html(); $("#msg")[0].innerHTML - var $obj = $(domObj);DOM对象转jQuery对象$(document).ready(function(){});就是典型的DOM对象转jQuery对象
二、寻找元素(选择器和筛选器)
1、基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div") 2、层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div") 3、属性选择器 $('[id="div1"]') $("[name!='newsletter']") $("[name^='news']") $("input[name*='man']") $("input[id][name$='man']")//且的关系 4、表单选择器 $("[type='text']") = $("input:text") = $(":text") //注意只适用于input标签 5、表单对象属性 $("input:enabled") $("input:disabled") $("input:checked") $("select option:selected")=$("option:selected") 1、基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)") 2、过滤筛选器 $("li").eq(2) $("li").first() $("ul li").hasClass("test") $("p").filter(".selected, :first") //或的关系 3、查找筛选器 查找子标签： $("div").children(".test") $("div").find(".test") 向下查找兄弟标签： $(".test").next() $(".test").nextAll() $(".test").nextUntil() 向上查找兄弟标签： $("div").prev() $("div").prevAll() $("div").prevUntil() 查找所有兄弟标签： $("div").siblings() 查找父标签： $(".test").parent() $(".test").parents() $(".test").parentsUntil() 4、返回（选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素） $("p").find("span").end()
三、事件
1、页面载入 $(document).ready(function(){}) = $(function(){}) 2、事件绑定 //语法:标签对象.事件(函数) $("p").click(function(){}) 3、事件委派 $("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。 $("ul").on("click","li",func) $("ul").off("click","li",func) $("p").on("click", function(){ alert( $(this).text());}); 4、事件切换 $(".test").hover(enter,out) hover事件： 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。 over:鼠标移到元素上要触发的函数 out:鼠标移出元素要触发的函数
DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
<hr>
<button id="add_li">Add_libutton>
<button id="off">offbutton>
<script src="https://code.jquery.com/jquery-3.1.1.min.js">script>
<script>
/*
$("ul li").click(function(){
alert(123)
});
$("#off").click(function(){
$("ul li").off()
})
*/
$("#add_li").click(function(){
var $ele=$("");
$ele.text(Math.round(Math.random()*10));
$("ul").append($ele)
});
function test(){alert(222)}
$("ul").on("click","li",test)
$("#off").click(function(){
$("ul").off("click","li",test)
})
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
margin: 0;
padding: 0;
}
.test{
width: 200px;
height: 200px;
background-color: wheat;
}
style>
head>
<body>
<div class="test">div>
body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js">script>
<script>
function enter(){
console.log("enter")
}
function out(){
console.log("out")
}
$(".test").hover(enter,out)
/*
$(".test").mouseenter(function(){
console.log("enter")
});
$(".test").mouseleave(function(){
console.log("leave")
});
*/
script>
html>
四、操作属性
1、CSS类 $("").addClass(class|fn) $("").removeClass([class|fn]) 2、属性 $("").attr(); //对于HTML元素的自定义DOM属性，在处理时，使用attr方法。 $("").removeAttr(); $("").prop(); //对于HTML元素的固有属性，在处理时，使用prop方法。 $("").removeProp(); 注意： //像checkbox，radio和select这样的元素，选中属性对应"checked"和"selected"，这些也属于固有属性 //因此需要使用prop方法去操作才能获得正确的结果。 3、HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) 4、CSS样式 $("#c1").css({"color":"red","fontSize":"35px"}) $("p").css("color","red")
五、操作节点
1、创建一个标签对象 $("") 2、内部插入 $("").append(content|fn) ----->$("p").append("Hello"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("Hello"); $("").prependTo(content) ----->$("p").prependTo("#foo"); 3、外部插入 $("").after(content|fn) ----->$("p").after("Hello"); $("").before(content|fn) ----->$("p").before("Hello"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); 4、替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("Paragraph. "); 5、删除 $("").empty() $("").remove([expr]) 6、复制 $("").clone([Even[,deepEven]])
六、操作位置/尺寸
位置操作 $("").offset([coordinates]) //相对当前视口的偏移,只对可见元素有效。 $("").position() //相对父元素的偏移,只对可见元素有效。 $("").scrollTop([val]) //相对滚动条的偏移,此方法对可见和隐藏元素均有效。 $("").scrollLeft([val]) 尺寸操作 $("").height([val|fn]) $("").width([val|fn]) $("").innerHeight() //获取内部区域高度（包括补白、不包括边框）,此方法对可见和隐藏元素均有效。 $("").innerWidth() $("").outerHeight([soptions]) //获取外部高度（默认包括补白和边框）,设置为true时，计算边距在内,此方法对可见和隐藏元素均有效。 $("").outerWidth([options])
Title
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
七、each循环
1、$.each(obj,fn)
|
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
|
|
2、$("").each(fn)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
|
each扩展
|
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
|
八、动画效果
|
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
44
45
|
|
九、回调函数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
< html lang="en">
< head >
< meta charset="UTF-8">
< title >Title < body >
< button >fadeToggle < p >helloworld helloworld helloworld < script src="https://code.jquery.com/jquery-3.1.1.min.js"> < script >
$("button").click(function(){
$("p").fadeToggle(1000,function(){
console.log($(this).html())
})
})
|
十、扩展方法 (插件机制)
1、jQuery.extend(object)
- 扩展jQuery对象本身。
- 用来在jQuery命名空间上增加新函数。
2、jQuery.fn.extend(object)
- 扩展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
|
< html lang="en">
< head >
< meta charset="UTF-8">
< title >Title < body >
< input type="checkbox">
< input type="checkbox">
< input type="checkbox">
< script src="https://code.jquery.com/jquery-3.1.1.min.js"> < script >
//扩展jQuery对象本身
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log(jQuery.min(2,3)); // => 2
console.log(jQuery.max(4,5)); // => 5
//元素
jQuery.fn.extend({
check: function() {
$(this).attr("checked",true);
},
uncheck: function() {
$(this).attr("checked",false);
}
});
$(":checkbox:gt(0)").check()
|
十一、实例练习
左侧菜单
left_menu
Tab切换
tab
内容一
内容二
内容三
table正反选
Title
| 111 | 111 | 111 | 111 | |
| 222 | 222 | 222 | 222 | |
| 333 | 333 | 333 | 333 | |
| 444 | 444 | 444 | 444 |
模态对话框
Title
复制样式条
Title
注册验证
Title
拖动面板
轮播图
Title
<
>
表格编辑操作
Title
姓名
年龄
部门
薪水
操作
张三
23
销售部
3000
李四
32
保安部
5000
注册实例
Title
"utf-8">
Index
"button" οnclick="fadeIn();" value="加载条"/>
"shade" class="modal-backdrop hide">
class="modal">
"./images/loading_32.gif"/>
"common.css" rel="stylesheet" />class='container'>class='tab-menu-box1'>class='menu'>'tab-menu-title'>
- class='current' content-to='1'>价格趋势
- '2'>市场分布
- '3'>其他
'tab-menu-body' class='content'>'1'>content1'2' class='hide'>content2'3' class='hide'>content3
"en"> "UTF-8">
'utf-8' />
"en"> "UTF-8">
"en"> "UTF-8">第一张
class="chapter" style="height: 1500px;">第二张
class="chapter" style="height: 30px;">第三张
"en"> "UTF-8">
"en"> "UTF-8">"button" οnclick="AjaxRequest()" value="跨域Ajax" /> "container">