jQuery个人笔记

jQuery

jQuery 元素位置

1. offset()
2. position()
3. scrollTop()/scrollLeft()

*offset()、*position()

html部分

	<div class="father">
        <div class="son"></div>
    </div>

css部分

* {
    margin: 0;
    padding: 0;
}
        
.father {
    margin: 100px;
    width: 500px;
    height: 500px;
    background-color: #f0f;
}
        
.son {
    width: 200px;
    height: 200px;
    background-color: #0f0;
}

javascipt部分

		$(function() {
            // 1.获取设置距离文档的位置（偏移）offset，总以文档为基准
            console.log($('.son').offset());
            // 返回一个对象，得到头部距离和左边距离
            console.log($('.son').offset().top);
            console.log($('.son').offset().left);

            // 修改位置，传入对象,,原理是给它添加了relative定位
            $('.son').offset({
                top: 200,
                left: 200
            })


            // 2.设置距离带有定位父级位置（偏移）position  如果没有带有定位的父级，则以文档为准
			console.log($('.son').position());
            // 返回一个对象，相对于父级的

            //此方法只能获取，不能设置
            // 所有下方语句无效
            $('.son').position({
                top: 200,
                left: 200
            });
        })

*scrollTop()/scrollLeft()设置或获取元素被卷曲的头部和左部

html部分

	<div class="back">返回顶部</div>
    <div class="container"></div>

css部分

* {
    margin: 0;
    padding: 0;
}
.back {
    position: fixed;
    right: 100px;
    bottom: 100px;
    background-color: yellow;
    cursor: pointer;
}
        
.container {
    width: 960px;
    height: 1500px;
    background-color: skyblue;
    margin: 400px auto;
}        

javascript部分

		// 被卷去的头部 scrollTop() / 被卷去的头部 scrollLeft()
        $(function() {
            // 页面滚动事件
			// 初始化页面的滚动距离
            $(document).scrollTop(200);


            var boxTop = $('.container').offset().top;
            $(window).scroll(function() {
                    // console.log($(document).scrollTop());
                    if ($(document).scrollTop() >= boxTop) {
                        $('.back').fadeIn();
                    } else {
                        $('.back').fadeOut();
                    }
                })
                // 返回顶部

            // animate动画函数里面有个scrollTop属性，可以设置位置
            // 做动画只能是元素做动画
            $('.back').click(function() {
                $('html,body').stop().animate({
                    scrollTop: 0
                });
            })
        })

jQuery 事件on绑定

*on(events,[selector],fn)

	<div></div>
    <ul>
        <li>1孩子</li>
        <li>2孩子</li>
        <li>3孩子</li>
        <li>4孩子</li>
        <li>5孩子</li>
    </ul>

		* {
            margin: 0;
            padding: 0;
            bottom: 0;
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        
        .active {
            background-color: blue;
        }

语法：

1.events:一个或多个用空格分隔的事件类型，如'click'或'keydown'';
2.selector:元素的子元素选择器
3.回调函数

优势一：

在匹配元素上绑定一个或者多个事件的事件处理函数

$('div').on({
    mouseenter: function() {
    // 鼠标进入
        $(this).css({
            'background': 'skyblue'
        })
    },
    click: function() {
    // 鼠标点击
        $(this).css({
            'background': 'purple'
        })
    },
    mouseleave: function() {
    // 鼠标离开
        $(this).css({
            'background': 'black'
        })
    }
})

或者

$('div').on('mouseenter mouseleave', function() {
	// 多个事件，依次运行
      $(this).toggleClass('active');
})

优势二：

可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素

$('ul').on('click', 'li', function() {
    // $(this)
    console.log($(this));// li元素的jQuery对象
})

优势三：动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件

$('ul').on('click', 'li', function() {
    // $(this)
    console.log($(this));// li元素的jQuery对象
})

var li = $('<li>我是后来创建的</li>');
$('ul').append(li);

jQuery 事件off解绑

 1. $('p').off();//解绑p元素所有事件处理程序
 2. $('p').off('click');//解绑p元素上面的点击事件 
 3. $('ul').off('click','li');//解绑事件委托

jQuery 事件one绑定一次性事件

$('p').one('click',function(e){
	alert(e);
})

jQuery 自动触发事件

1. 元素.事件()
2. 元素.trigger(‘事件’)
3. 元素.triggerHandler(‘事件’),此方法，不会触发元素的的默认行为

 1. element.click()// 简写形式  
 2. element.trigger('click')//自发触发模式 
 3. element.triggerHandler('click');//自发触发模式   

jQuery 拷贝

$.extend([deep],target,object1,[objectN])

 1. deep:如果设true为深拷贝，默认为false浅拷贝。
 2. target:要拷贝的目标对象。
 3. object1:待拷贝到第一个对象的对象。
 4. objectN:待拷贝到第N个对象的对象
 5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
 

具体使用

var target = {};
var obj = {
    id: 1,
    name: 'fei',
    msg: {
        age: 5
    }
}
$.extend(true, target, obj);
console.log(target);
target.msg.age = 45;
target.msg.name = 'nihao';
console.log(target); // 数据已经被修改
console.log(obj); // 数据还是obj

jQuery 多库并存

1. 问题描述：
   jQuery使用 $ 作为标识符，随着jQuery的流行，其他js库也会用这 $ 作为标识符，这样一起使用会引起冲突。

2. 客观需求：
   需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。

3. jQuery解决方案：

   1. 把里面的$符号统一改为jQuery，比如jQuery(‘div’).
   2. jQuery变量规定新的名称： $.noConflict() 如：var xx = $.noConfict();

$(function() {
    function $(ele) {
        return document.querySelector(ele);
    }
    console.log($('div'));
    // 如果$冲突，我们就用jQuery
    // $.each();
    // jQuery.each();
    // 让jQuery释放对$控制权，让出还是自己用可以自己决定
    var suibian = jQuery.noConflict();
    console.log(suibian('input'))
})

jQuery 插件

• jQuery插件常用网站：

1. jQuery插件库 go
2. jQuery之家 go

• jQuery插件使用步骤：

1. 引入相关文件。（jQuery文件和插件文件）
2. 复制相关html、css、js(调试插件)

jQuery 懒加载

• 图片懒加载(图片使用延迟加载可提高网页下载速度。它也能帮助减轻服务器负载)当我们页面滑动到可视区域，再显示图片。
• 我们使用jQuery插件库 EasyLazyload。注意，此时的js引入文件和js调用必须写到DOM元素（图片）最后面

jQuery 全屏滚动(fullpage.js)

• gitHub:go
• 中文翻译网站：go

jQuery $.each()

• $.each( object, callback )

1. object Object类型 指定需要遍历的对象或数组。
2. callback Function类型 指定的用于循环执行的函数。

        $.each(data, function(i, n) {
            console.log(n);
            console.log(data[i]);
            // n和data[i]值相等，i是data的索引，n是data的值
        })