jQuery实现网页定位滚动导航条

实际效果

实现原理

主要知识点
滚动事件:scroll

当用户滚动指定的元素时,会发生 scroll 事件。

jQuery 代码:

Select Code
1
$(window).scroll( function() { /* ...do something... */ } );

find()

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

位置

  • scrollTop:获取匹配元素相对滚动条顶部的偏移。
  • offset:获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。

attr()

设置或返回被选元素的属性值。

css类

  • addClass:为每个匹配的元素添加指定的类名。
  • removeClass:从所有匹配的元素中删除全部或者指定的类。

HTML结构

Select Code
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
<div id="menu">
<ul>
 	<li><a class="current" href="#item1">1F 男装</a></li>
 	<li><a href="#item2">2F 女装</a></li>
 	<li><a href="#item3">3F 美妆</a></li>
 	<li><a href="#item4">4F 数码</a></li>
 	<li><a href="#item5">5F 母婴</a></li>
</ul>
</div>
<div id="content">
<h1>美丽说</h1>
<div id="item1" class="item">
<h2>1F 男装</h2>
<ul>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女装</h2>
<ul>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妆</h2>
<ul>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 数码</h2>
<ul>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母婴</h2>
<ul>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
</ul>
</div>
</div>

JS部分

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
    $(document).ready(function () {
        $(window).scroll(function () {
            var items = $("#content").find(".item");
            var menu = $("#menu");
            var top = $(document).scrollTop();
            var currentId = "";
            items.each(function () {
                var m = $(this);
                if (top > m.offset().top  - 100) {
                    currentId = "#" + m.attr("id");
                } else {
                    return false;
                }
            });

            var currentLink = menu.find(".current");
            if (currentId && currentLink.attr("href") != currentId) {
                currentLink.removeClass("current");
                menu.find("[href=" + currentId + "]").addClass("current");
            }
        });
    })
</script>

实用列表页, 弹出框, 图片上传JS整理

知识点
submit([[data],fn])
概述: 当提交表单时,会发生 submit 事件。该事件只适用于表单元素。
http://jquery.cuishifeng.cn/submit.html

each(callback)
概述: 以每一个匹配的元素作为上下文来执行一个函数。意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。
http://jquery.cuishifeng.cn/each.html

serializeArray()
概述: 序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。”’注意”’,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
http://jquery.cuishifeng.cn/serializeArray.html

1. 全选/反选(Jquery实现)

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*HTML结构*/
<input type="checkbox" id="check_all">

<table class="table">
...
</table>

/*全选按钮*/
    $("#check_all").click(function () {
        if(this.checked) {
            $('.table :checkbox').prop("checked", true);
        } else {
            $('.table :checkbox').prop("checked", false);
        }
    })

2. 列表页提交:弹窗表单框,点击提交后自动关闭

第1步:添加按钮

Select Code
1
<a href="javascript:void(0)" class="btn btn-primary" onclick="add_edit_article(0)">添加文章</a>

第2步:添加按钮点击事件

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*添加文章*/
function add_edit_article(id) {
    if (id>0) {
        // 修改
    } else {
        var url = "{:U('Ucenter/Seo/add_article', array('call_back'=>'call_back_fun'))}";
        layer.open({
            type: 2,
            title: '发布文章',
            shadeClose: true,
            shade: 0.8,
            area: ['80%', '80%'],
            content: url,
        });
    }
}

/*回调函数,关闭窗口*/
function call_back_fun(v) {
    layer.closeAll();
    location.href = "弹出页面的URL";
}

第3步:弹出的页面

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public function add_article()
{
    header("Content-Type:text/html; charset=utf-8");
    if ($this->isPost()) {
        $postData = $this->_post();

        // TODO:数据校验

        // 写入数据库操作

        $call_back = $this->_get("call_back","","call_back_fun");
        echo "<script>parent.{$call_back}('success');</script>";
        exit();
    }

    $this->display();
}

3. 图片插件的使用

演示效果:

插件官网:http://www.uploadify.com/

第1步:HTML表单制作

Select Code
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
<form action="{:U('Ucenter/Seo/add_video')}" method="post" id="videoForm">
<div class="form-group">
    <label for="v_name">视频名称:</label>
    <input type="text" class="form-control" id="v_name" placeholder="视频名称" name="v_name"/>
</div>
<div class="form-group">
    <label for="cate_id">选择视频分类:</label>
    <select name="cat_id" id="cate_id" class="form-control" style="width: 300px;">
        <option value="0">请选择视频分类</option>
        <volist name="videos_category" id="vo">
            <option value="{$vo.vc_id}">{$vo.vc_name}</option>
        </volist>
    </select>
</div>
<div class="form-group">
    <label for="type">选择课程类型:</label>
    <select name="v_lesson_id" id="type" class="form-control" style="width: 300px;">
        <option value="0">请选择课程类型</option>
        <volist name="videos_lesson" id="vo" key="k">
            <option value="{$vo.l_id}">{$vo.l_name}</option>
        </volist>
    </select>
</div>
<div class="form-group">
    <label for="v_teacher">选择博主:</label>
    <select name="v_teacher_id" id="v_teacher" class="form-control" style="width: 300px;">
        <option value="0">请选择博主</option>
        <volist name="videos_teacher" id="vo" key="k">
            <option value="{$vo.t_id}">{$vo.t_name}</option>
        </volist>
    </select>
</div>
<div class="form-group">
    <label for="v_code">播放码:</label>
    <input type="text" class="form-control" id="v_code" placeholder="填写视频播放码" name="v_code"/>
</div>
<div class="form-group">
    <label for="keywords">关键字:</label>
    <input type="text" class="form-control" id="keywords" placeholder="关键字" name="keywords"/>
</div>
<div class="form-group">
    <label for="file_upload">封面图片:</label>
    <input type="file" id="file_upload" multiple="true"/>
    <img src="" style="display: none" id="upload_image" width="200"/>
    <input type="hidden" name="image" id="upload_image_input" multiple="true" value=""/>
</div>
<div class="form-group">
    <label for="description">短描述:</label>
    <textarea name="description" id="description" class="form-control" name="keywords" cols="30"
              rows="3"></textarea>
</div>
<button type="button" class="btn btn-default" onclick="checkForm()">提交</button>
<input type="reset" class="btn btn-default" value="重置">
<div></div>
</form>

第2步:引入JS,CSS文件

Select Code
1
2
3
<script src="__PUBLIC__/uploadify/jquery.min.js" type="text/javascript"></script>
<link href="__PUBLIC__/uploadify/uploadify.css" rel="stylesheet">
<script src="__PUBLIC__/uploadify/jquery.uploadify.js" type="text/javascript"></script>

第3步:编写JS

Select Code
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
<script type="text/javascript">
    // 检查表单内容
    function checkForm() {
        var v_name = $("input[name='v_name']").val();
        var v_code = $.trim($("input[name='v_code']").val());
        var keywords = $("input[name='keywords']").val();
        var image = $("input[name='image']").val();
        var cat_id = $("select[name='cat_id']").val();
        var v_lesson_id = $("select[name='v_lesson_id']").val();
        var v_teacher_id = $("select[name='v_teacher_id']").val();
        var description = $.trim($("textarea[name='description']").val());
        var error = "";

        if (v_name == "") {
            error += "视频名称不能为空<br />";
        }
        if (v_code == "") {
            error += "播放码不能为空<br />";
        }
        if (v_code.length != 32) {
            error += "播放码长度必须为32<br />";
        }
        if (keywords == "") {
            error += "关键字不能为空<br />";
        }
        if (image == "") {
            error += "必须上传封面图片<br />";
        }
        if (cat_id == "" || cat_id == "0") {
            error += "请选择视频类别<br />";
        }
        if (v_lesson_id == "" || v_lesson_id == "0") {
            error += "请选择课程类别<br />";
        }
        if (v_teacher_id == "" || v_teacher_id == "0") {
            error += "请选择博主<br />";
        }
        if (description == "") {
            error += "描述内容不能为空<br />";
        }
        if (description.length > 250) {
            error += "描述内容最多250字<br />";
        }

        if (error) {
            layer.alert(error);
            return false;
        }
        return $("#videoForm").submit();
    }

    var SWF = '__PUBLIC__/uploadify/uploadify.swf';
    var UPLOAD_IMG = '{:U("Home/Image/upload")}';

    $(function () {
        $("#file_upload").uploadify({
            height: 40,
            swf: SWF,
            uploader: UPLOAD_IMG,
            width: 120,
            buttonText: '图片上传',
            fileObjName: 'file',
            fileTypeExts: '*.gif;*.jpg;*.png',
            onUploadSuccess: function (file, data, response) {
                if (response) {
                    var obj = JSON.parse(data);
                    if (obj.status == 0) {
                        alert(obj.info);
                        return false;
                    }
                    $("#upload_image").attr("src", obj.img_url);
                    $("#upload_image").show();
                    $("#upload_image_input").attr("value", obj.img_url);

                }
            }
        });
    });

</script>

第4步:表单提交

Select Code
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
public function add_video()
{
    header("Content-Type:text/html; charset=utf-8");

    $videos_category = M("VideosCategory")->field('vc_id,vc_name')->select();
    $videos_teacher = M("VideosTeacher")->field('t_id,t_name')->select();
    $videos_lesson = M("VideosLesson")->field('l_id,l_name')->select();
    $this->assign('videos_category', $videos_category);
    $this->assign('videos_teacher', $videos_teacher);
    $this->assign('videos_lesson', $videos_lesson);

    if ($this->isPost()) {
        $postData = $this->_post();
        // TODO:数据校验

    $data = array(
            'v_name' => $postData['v_name'],
            'v_lesson_id' => $postData['v_lesson_id'],
            'v_teacher_id' => $postData['v_teacher_id'],
            'v_code' => $postData['v_code'],
            'v_picture' => $postData['image'],
            'v_keywords' => $postData['keywords'],
            'v_description' => $postData['description'],
            'zan_num' => 0,
            'create_time' => date('Y-m-d H:i:s')
        );

    $model = M('');
        $model->startTrans();
        $video_id = D("VideosInfo")->add($data);
        if (!$video_id) {
            $model->rollback();
        }

        $data_body = array(
            'video_id' => $video_id,
            'cat_id' => $postData['cat_id'],
        );

        $result = D("VideosCategoryInfo")->add($data_body);
        if ($result) {
            $model->commit();
        } else {
            $model->rollback();
        }

        $call_back = $this->_get("call_back","","call_back_fun");
        echo "<script>parent.{$call_back}('success');</script>";
        exit();
    }

    $this->display();
}

第5步:图片上传图片方法

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public function upload()
{
    import('ORG.Net.UploadFile');
    $upload = new UploadFile();
    $upload->maxSize = 3145728;
    $upload->allowExts = array('jpg','png','gif', 'jpeg');
    $upload->savePath = './Public/Uploads/video/';
    if (!$upload->upload()) {
        $data = array(
            'status' => 0,
            'info' => $upload->getErrorMsg(),
        );
    } else {
        $info = $upload->getUploadFileInfo();
        $data = array(
            'status' => 1,
            'info' => 'ok',
            'img_url' => ltrim($info[0]['savepath'] . $info[0]['savename'], '.'),
        );
    }
    $this->ajaxReturn($data, 'JSON');
}

分享2个简单实用的jQuery选择器

1、子选择器:nth-child 匹配其父元素下的第N个子或奇偶元素。

nthchild

代码实例:

Select Code
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
<script>
        $(document).ready(function(){
            $("ol li:nth-child(5n)").addClass("last");
        })
    </script>
    <style>
        *{ color: #666; text-decoration-line: none;}
        .last a{color: #f00;}
    </style>
    </head>
    <body>
    <ol>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
    </ol>

2、选择的标签加class,其他同级元素标签移除class

removeclass

Select Code
1
2
3
4
5
6
7
8
9
<!-- 
点击的当前li添加class, 其他移除class
-->
<script>
    $("ol li a").click(function(){
        $(this).parents().children().removeClass('last');
        $(this).parent().addClass('last');
    })
</script>

自定义jQuery,理解jQuery核心实现原理

实现核心功能:
1.自定义$(selector)函数,通过$(‘#red’),$(‘.gold’)调用;
2.添加.html,.css, .attr方法;

jQuery优点:
1.隐式迭代(自动循环)
2.完美的链式操作(连贯操作)
3.完美的错误处理(不报错)

自定义jquery代码:

Select Code
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
// 自调函数引入
(function(window){
	window.$ = $;
	window.jQuery = $;	//取别名

	function $(selector)
	{
		var mark = selector.substr(0,1);
		var element = selector.substr(1);

		var obj = [];
		switch(mark){
			case '#':
				obj[0] = document.getElementById(element);
				break;

			case '.':
				obj = document.getElementsByClassName(element);
				break;

			default:
				obj = document.getElementsByTagName(element);
				break;
		}
		console.dir(obj);

		obj.html = function(val)
		{
			if (val === undefined) {
				return obj[0].innerHTML;
			} else{
				for(var i=0; i<obj.length; i++)
				{
					obj[i].innerHTML = val;
				}
			}
			//实现连贯操作
			return this;
		}

		//用于修改style样式的方法
		obj.css = function(key,val)
		{
		    if (val === undefined) {
		        return obj[0].style[key];
		    } else {
		        for (var i=0; i<obj.length; i++) {
		            obj[i].style[key] = val;
		        }
		    }
		    //实现连贯操作
		    return this;
		}

		// 修改属性
		obj.attr = function(key, val)
		{
			if (val === undefined) {
				return obj[0][key];
			} else{
				for (var i = 0; i < obj.length; i++) {
					obj[i][key] = val;
				}
			}
			return this;	//实现连贯操作
		}

		return obj;
	}
}(window));

html:

Select Code
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
//**********************html部分代码*************/
	<p>111111111111111111</p>
	<p id="red">111111111111111111</p>
	<p class="gold">111111111111111111</p>
	<p>111111111111111111</p>
	<p>111111111111111111</p>
	<p>111111111111111111</p>
	<p id="attr" title="获得属性">111111111111111111</p>
	<p title="2222">111111111111111111</p>
	<p title="3333">111111111111111111</p>
	<p>111111111111111111</p>
	<p>111111111111111111</p>

//**********************js部分代码*************/
<script>
	// 原生js
	// var red = document.getElementById('red');
	// red.style.color = 'red';

	// jQ写法:$('#red').css('color', 'red')
	// $('#red').css('color', 'red');
	$('.gold').css('color', 'red');
	$('#red').html('123');
	// alert($('#red').html());

	// 修改属性
	// alert($('#attr').attr('title'));
	$('#attr').attr('title', '修改属性值');
</script>

源码:https://github.com/webjust/case-study/blob/master/jquery/01custom_my_jquery/js/myjquery.js