JavaScript jQuery

发表于 分类于 阅读次数：

jQuery

1. jQuery 介绍

1.1 什么是 jQuery

jQuery 是 JavaScript 的类库

1.2 jQuery 特点

write less,do more (写得少 干得多)

1.3 jQuery 优势

  • 开源
  • 便捷的选择器
  • 方便的 dom 操作
  • 丰富的动画操作
  • 简单的 ajax 操作
  • 兼容性
  • 方便的插件机制

1.4 jQuery 缺点

添加额外的 jQuery 文件，增加网络传输量

1.5 jQuery 版本

  • jQuery 1.X 支持IE
  • jQuery 2.X IE9+ 其他…
  • jQuery 3.X IE9+ 支持最新的浏览器

2. jQuery的基本语法

https://www.jquery.com/ [官网.手册]
http://www.jq22.com/chm/jquery/index.html

2.1 jquery 入口标准的使用方式

1
2
3
4
5
6
7
8
// 标准入口
$(document).ready(function (){
    JS code
});
// 简写入口
$(function (){
    JS CODE
});

2.2 onload 与 ready 的区别

  • 触发点
    • ready 文档中的 DOM 加载完, 就触发
    • onload 文档中的 一切加载完, 才触发
  • 绑定逻辑
    • ready 可以绑定多个事件(事件监听)
    • onload 后面的绑定会覆盖前的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    // JS 
    window.onload = function(){
        console.log('onload1');
        // console.log(box);
    }
    window.onload = function(){
        console.log('onload2');
    }
    
    // JQ的标准入口
    $(document).ready(function(){
        console.log('ready1');
        // console.log(box);
    });
    $(document).ready(function(){
        console.log('ready2');
    });

</script>

2.3 链式操作风格

JQDOM.css().attr().remove()….

2.4 jQueryDOM 与 JSDOM 的区别 以及相互转化

区别

  • JQDOM 通过$()获取到一个数组对象
  • JSDOM 通过各种方法获取到一个元素标签对象

转换

  • JSDOM >>> JQDOM $(JSDOM)
  • JQDOM >>> JSDOM JQDOM.get(index) 或 JQDOM[index]
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
<h1>JQuery</h1>
<hr>

<div id="box">123456</div>

<hr>
<img src="./1.jpg" width="50" id="myimg" alt="">

<script src="./jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        var box = document.getElementById('box'); // JS DOM
        var $box = $('#box'); // JQ DOM
        console.log(box);
        // console.log($box);
        
        box.style.backgroundColor = '#f00';
        // $box.style.backgroundColor = '#f90'; // NO
        $box.css('background-color', '#f90');
        // box.css('background-color', '#09f'); // NO

        myimg.width = 600;
        // $('#myimg').width = 4000; // NO
        $('#myimg').attr('width', '1000');

        // 互相转化
        // JSDOM ---> JQDOM
        $(box).css('background-color', '#09f');

        // JQDOM ---> JSDOM
        console.log($box[0]);
        console.log($box.get(0));
        $box.get(0).style.backgroundColor = '#feeeed';
    });

</script>

2.5 jquery 命名冲突

$ 是 jQuery 的别名

3. jQuery 选择器

3.1 基本选择器

1
2
3
4
5
*           通配符选择器
#id         ID选择器
.class      CLASS选择器
tagName     标签选择器
s1,s2,sN    组合/分组选择器

3.2 层级选择器

1
2
3
4
selector selector    所有的后代元素
selector>selector    所有的子元素
selector+selector    紧邻着的下一个同辈元素
selector~selector    紧邻着的所有同辈元素

3.3 过滤选择器

1
2
3
4
5
6
7
8
9
10
:first          首个
:last           最后一个
:eq(index)      指定第几个
:lt(index)      索引小于
:gt(index)      索引大于
:even           索引为偶数的 0索引也算为偶数
:odd            索引为奇数的
:header         所有的h标签
:not(selector)  排除指定选择器所选的元素
:root           根元素 html 1.9+

3.4 内容选择器

1
2
3
4
:contains(text) 匹配包含指定文本的元素
:has(selector)  匹配含有选择器 所选择的元素的 元素
:parent         匹配含有子元素或文本的元素
:empty          匹配所有不含有子节点的元素

3.5 可见性选择器

1
2
:visible        匹配所有可见元素
:hidden         匹配所有不可见元素

3.6 属性选择器

1
2
3
4
5
6
7
selector[attribute]         选择有指定属性的元素
selector[attribute=value]   选择值等于value的元素
selector[attribute!=value]  选择值不等于value的元素
selector[attribute^=value]  选择值以value开头的元素
selector[attribute$=value]  选择值以value结尾的元素
selector[attribute*=value]  选择值包含value的元素
[][][][]...  属性选择器的进一步筛选

3.7 子元素选择器

1
2
3
4
:first-child    选择首个子元素
:last-child     选择最后一个子元素
:only-child     选择唯一的子元素
:nth-child(n)   选择指定的第N个子元素

3.8 表单选择器

1
2
3
4
5
6
7
8
9
10
:input          选择所有 input, textarea, select 和 button 元素. 
:text 
:password 
:radio 
:checkbox 
:submit 
:image 
:reset 
:button 
:file

3.9 表单对象选择器

1
2
3
4
:enabled     匹配所有的可用元素
:disabled    匹配所有的禁用元素
:checked     匹配所有的被选中的元素
:selected    匹配所有的被选中option元素

4. 筛选

4.1 过滤

1
2
3
4
5
6
7
8
9
10
11
eq(index)           过滤出指定的某个
first()             过滤出首个
last()              过滤出最后一个
filter(selector)    满足指定选择器所选的元素
not(selector)       过滤排除
slice(start, end)   过滤出指定的一部分元素
has(selector)       过滤出 含有指定选择器所选的元素的元素

hasClass()          判断前面的集合中,是否包含有某个类
is()                判断前面的集合中,是否有某个元素符合指定的条件
map()               对JQdom的遍历,并且能取出一部分值出来

4.2 查找

都是具有破坏性,得到的对象,可能就不是前面集合的子集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
往里找:
    children()      只找子元素
    find()          找后代元素
往外找:
    parent()        父元素
    parents()       所有父级
    parentsUntil()  找到父级们,到指定位置为止
    offsetparent()  获取已定位的 父元素
    closest()       逐级向上找父级,返回找到的父级
往后找:
    next()          紧邻着的一个同级元素(后)
    nextAll()       紧邻着的所有同级元素(后)
    nextUntil()     紧邻着的所有同辈元素,直到某一个为止(后)
往前找:
    prev()          紧邻着的一个同级元素(前)
    prevAll()       紧邻着的所有同级元素(前)
    prevUntil()     紧邻着的所有同辈元素,直到某一个为止(前)
其他:
    siblings()      除了元素自己之外的所有同辈节点

4.3 串联

1
2
3
4
add()               向集合内 追加元素
andSelf() / addBack() 把之前选中的集合加入到当前集合内
end()               返回最后一个 筛选操作之前的状态
contents()          获取所有的子节点(包括文本)

5. 文档处理

5.1 内部插入

1
2
3
4
append()     内部最后
appendTo()   --
prepend()    内部最前
prependTo()  --

5.2 外部插入

1
2
3
4
after()        外部之后
insertAfter()  --
before()       外部之前
insertBefore() --

5.3 包裹

1
2
3
4
wrap()        将集合内的每一个元素 包裹在指定的元素内
wrapAll()     将整个集合元素 包裹在指定的元素内
unwrap()      去掉包裹
wrapInner()   将选中的元素里面的内容 包裹在一个标签内

5.4 替换

1
2
replaceWith()  替换谁
replaceAll()   谁被替换

5.5 删除

1
2
remove()      删除指定的元素
empty()       清空子节点

5.6 复制

1
clone()  复制

6. 属性

6.1 属性操作

1
2
3
4
5
attr()        读取/设置/修改 HTML属性 + 自定义属性
removeAttr()  移除 HTML属性 + 自定义属性

prop()        读取/设置/修改 HTML属性
removeProp()  移除 HTML属性

6.2 CSS 类

1
2
3
addClass()     添加一个类属性
removeClass()  移除一个类属性
toggleClass()  以上俩 来回切换

6.3 HTML 代码/文本/值

1
2
3
html()          相当于 innerHTML
text()          相当于 innerText
val()           相当于 .value  用于表单控件

7. CSS 操作

7.1 CSS

1
2
3
4
5
6
7
8
9
10
11
// 设置样式
$('div').css('color', '#f00').css(.....);

// 多个样式,可用JSON作为参数传递多个样式
$('div').css({
    "color" : "#f00",
    "font-size" : "100px"
});

// 读取样式
$('div').css('color');

7.2 位置

1
2
3
4
5
offset()     获取/设置  元素相对于整个文档的位置, left/top属性
position()   获取 已定位的父元素的位置

scrollTop()  获取/设置 滚动条距离上边的位置
scrollLeft() 获取/设置 滚动条距离左边的位置

7.3 尺寸

1
2
3
4
5
6
7
8
9
10
11
(不加 内边距/边框)
width()  获取/设置  CSS设置的元素宽
height() 获取/设置  CSS设置的元素高

(不加边框)
innerWidth()  获取/设置  内容+内边距的宽
innerHeight() 获取/设置  内容+内边距的高

(标准元素大小: 内容+内边距+边框)
outerWidth()  获取/设置  实际的宽
outerHeight() 获取/设置  实际的高

PS.

1
2
3
4
5
6
7
8
9
10
11
$(window).height()   //浏览器时下窗口可视区域高度
$(document).height() //浏览器时下窗口文档的高度
$(document.body).height() //浏览器时下窗口文档body的高度
$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width()   //浏览器时下窗口可视区域宽度
$(document).width() //浏览器时下窗口文档对于象宽度
$(document.body).width() //浏览器时下窗口文档body的高度
$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding margin

$(document).scrollTop()  //获取滚动条到顶部的垂直高度
$(document).scrollLeft() //获取滚动条到左边的垂直宽度

8. 事件

8.1 绑定事件 / 事件委派

  1. 简写方式 JQDOM.event(function(){})
  2. 标准绑定方式 bind() / on() [支持事件委托]
  3. one() 绑定一次性 事件

8.2 解绑定

  • unbind()
  • off() [支持 事件委派]

8.3 事件的自动触发

trigger()

8.4 阻止默认事件 和 事件冒泡

  • 阻止默认事件: 在事件内使用 return false
  • 使事件不冒泡: 在冒泡的事件内 return false

9. 动画效果

9.1 基本

1
2
3
show()     显示
hide()     隐藏
toggle()   切换 显示/隐藏

9.2 滑动效果

1
2
3
slideDown()   下滑动
slideUp()     上滑动
slideToggle() 切换 上/下滑动

9.3 淡入淡出

1
2
3
4
fadeIn()      淡入
fadeOut()     淡出
fadeToggle()  切换  淡入/出
fadeTo()      指定透明度 0: 透明; 1: 不透明

9.4 自定义动画

1
2
3
animate(JSON,time)  自定义动画
stop()       停止
delay()      延迟

10 ajax

10.1 ajax 请求

  • JQDOM.load() 对象是 JQDOM
  • $.get() 对象是 JQ本身
  • $.post()
  • $.ajax()
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
<body>
    <h1>JQ AJAX</h1>
    <button id="btn">加载</button>
    <hr>
    
    <div id="box"></div>

    
    <script src="./jquery-3.3.1.min.js"></script>
    <script>
    $(function (){
        $('#btn').click(function(){
            // load()
            // $('#box').load('./php/1.php');
            
            // get
            // $.get('./php/1.php', function(data){
            //     $('#box').html(data);
            // });
            
            // post
            // $.post('./php/1.php', function(data){
            //     $('#box').html(data);
            // });

            // ajax  
            $.ajax({
                // type : 'get',
                method : 'post',
                url    : './php/1.php',
                success: function (data){
                    $('#box').append(data +'<br>');
                },
                error  : function(){
                    alert('AJAX 执行失败');
                }
            });
        });
    });
    </script>
</body>
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
<body>
    <h1>JQ AJAX</h1>
    <button id="btn">加载</button>
    <hr>
    <hr>
    <div id="box"></div>

    
    <script src="./jquery-3.3.1.min.js"></script>
    <script>
    $(function (){
        $('#btn').click(function(){
            /*// get
            $.get('./php/4.php', function(data){
                // eval() / JSON.parse()
                console.log(data);
            }, 'json');*/

            // ajax  店长推荐
            $.ajax({
                // type : 'get',
                method : 'get',
                url    : './php/4.php',
                dataType : 'json',
                success: function (data){
                    console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        $('<li>').html(data[i].name).appendTo('#box');
                    }
                },
                error  : function(){
                    alert('AJAX 执行失败');
                }
            });
        });
    });
    </script>
</body>

10.2 获取表单中数据

serialize()

10.3 jsonp 处理

$.getScript()

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
<body>
    <h1>JQ-JSONP</h1>
    <button onclick="loadHtml()">加载</button>
    <hr>

    <div id="box"></div>

    <script src="./jquery-3.3.1.min.js"></script>
    <script>
        function makedata(obj){
            // alert(obj);
            box.innerHTML = '';
            // JSON.parse()  // NO
            for (var i in obj) {
                box.innerHTML += i  + ' : ' + obj[i] + '<br>';
            }
        }

        // JSONP 关键步骤
        function loadHtml(){
            // // 创建JS对象
            // var js = document.createElement('script');
            // // 设置JS标签的src值
            // js.src = 'http://127.0.0.1/s86/JS16-JQ03/php/7.php';
            // // 添加这个JS对象到页面之中
            // document.body.appendChild(js);
            // 
            $.getScript('http://127.0.0.1/s86/JS16-JQ03/php/7.php');
        }

    </script>

</body>

11. jQuery 其他方法

1
2
3
each()   遍历JQ DDM元素
get()    获取某个索引的元素
index()  当前元素的索引值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <h1>JQ-其他</h1>
    <hr>

    <ul id="list">
        <li>赠汪伦 - 李先生</li>
        <li>李白乘舟将欲行，</li>
        <li>忽闻岸上踏歌声。</li>
        <li>桃花潭水深千尺，</li>
        <li>不及汪伦送我情。</li>
    </ul>


    <script src="./jquery-3.3.1.min.js"></script>
    <script>

        $('#list li').each(function (i, n){
            console.log(i, n, this, $(this).index());
        });

    </script>

</body>

特效-纵向导航条(手风琴)

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #nav{
            margin: 40px;
        }
        #nav h3{
            width: 200px;
            line-height: 40px;
            padding: 0 20px;
            border: 1px solid #999;
            background-color: #abcdef;
            cursor: pointer;
        }
        #nav ul{
            width: 242px;
            display: none;
        }
        #nav li{
            width: 200px;
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            border: 1px solid #aaa;
            background-color: #f5f5f5;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>JQ 纵向导航条 手风琴效果</h1>
    <hr>

    <div id="nav">
        <h3>用户管理</h3>
        <ul>
            <li><a>用户列表</a></li>
            <li><a>添加用户</a></li>
            <li><a>用户黑名单</a></li>
            <li><a>用户权限</a></li>
        </ul>
        <h3>分类管理</h3>
        <ul>
            <li><a>分类列表</a></li>
            <li><a>添加分类</a></li>
            <li><a>分类权限</a></li>
        </ul>
        <h3>商品管理</h3>
        <ul>
            <li><a>商品列表</a></li>
            <li><a>添加商品</a></li>
            <li><a>商品黑名单</a></li>
            <li><a>商品权限</a></li>
        </ul>
        <h3>订单管理</h3>
        <ul>
            <li><a>订单列表</a></li>
            <li><a>添加订单</a></li>
            <li><a>订单权限</a></li>
        </ul>
        <h3>系统管理</h3>
        <ul>
            <li><a>系统列表</a></li>
            <li><a>添加系统</a></li>
            <li><a>系统黑名单</a></li>
            <li><a>系统权限</a></li>
        </ul>
    </div>


    <script src="./jquery-3.3.1.min.js"></script>
    <script>
    
        $(function(){
            $('#nav ul').eq(4).show();

            // 事件
            $('#nav h3').click(function(){
                // 展开
                /*$(this)
                .next('ul')
                .slideDown(1000)
                .siblings('ul')
                .slideUp(1000);*/
                $(this)
                .next('ul').slideDown(1000)
                .siblings('ul').slideUp(1000);
            });
        });
        
    </script>

特效-jq放大镜

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
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>放大镜</title>
	<script src='./jquery-1.8.3.min.js'></script>
	<script src='jquery.jqzoom-core.js'></script>
	<script>
		$(function(){
			//使用jqzoom
			$('.myclass').jqzoom({
				
			});
		})
	</script>
	<style>
			
	</style>
	<link rel="stylesheet" href="jquery.jqzoom.css">
</head>
<body>
    
		<a href="./images/big01.jpg" class='myclass' title='大图'>
			<img src="./images/small01.jpg" alt="">
		</a>

</body>

PS:jQuyer常见插件总结

  1. 五星级评价插件 jRating
    插件主页：http://www.myjqueryplugins.com/jquery-plugin/jrating
  2. 流行的图片展示插件 unSlider
    插件主页： http://www.bootcss.com/p/unslider/
  3. 相册插件 Galleriffic
    插件主页：http://www.twospy.com/galleriffic/index.html
  4. 日期选取插件 Datepicker
    插件主页：http://jqueryui.com/datepicker/
  5. 事件日历插件 xGCalendar
    主页 https://github.com/xuanye/xgcalendar
  6. 表单插件 JQuery.form
    主页：http://plugins.jquery.com/form/
  7. 表单验证插件 jQuery.validate
    主页 http://plugins.jquery.com/validate/
  8. 表格插件 jqGrid 和 Flexigird
    主页： http://www.jqgrid.com/
    主页：http://flexigrid.info/
  9. 树状列表插件 zTree
    主页：http://www.ztree.me/v3/main.php#_zTreeInfo
  10. 对话框插件
    主页：http://www.fancybox.net/
  11. 图片放大插件jQzoom
    主页： http://www.oschina.net/p/jqzoom
  12. 图片上传插件 jQuery File Upload
  13. 网站导航栏插件 jQuery.mmenu
    主页：http://mmenu.frebsite.nl/
  14. 可拖放布局插件 gridster.js
    主页：http://gridster.net/
    15 页面便条插件 jStickyNode
    主页 http://tympanus.net/codrops/2009/10/30/jstickynote-a-jquery-plugin-for-creating-sticky-notes/