04jQuery

jQuery

基本使用

顶级对象

$是jQuery的别称，在代码中可以使用jQuery代替$
jQuery对象：用jQuery方式获取过来的对象为jQuery对象。  本质是通过$把DOM对象进行包装（伪数组形式存储）
jQuery对象和DOM对象
只有jQuery对象才能使用jQuery方法，DOM对象只能使用原生的js方法
DOM对象：用原生js获取过来的对象就是DOM对象

DOM对象转换jQuery对象

直接获取对象，得到jQuery对象 
	$('对象');
已经使用原生js获取过来DOM对象
	var myvideo = document.querySelector('video');
	$(myvideo);

jQuery转换DOM对象

jQuery伪数组中取出DOM对象
    $('对象')[0].play();
    $('对象').get(0).play();

入口函数

等着页面加载完后再去执行js代码，相当于原生js中的DOMContentLoaded
    $(document).ready(function () {
        //此处为页面DOM加载完成的入口
    })

    $(function () {
        //此处为页面DOM加载完成的入口
    })

选择器

基础选择器

id选择器 	  $('#id')
全选择器  	 $('*')
标签选择器	$('div')
类选择器  	 $('.class')
并集选择器  	$('div,p,li')
交集选择器	$('li.current')

层级选择器

$('ul>li') 	  子代选择器：只选儿子
$('ul li')	  后代选择器：所有后代

筛选选择器

$('li:first')	获取第一个li元素
$('li:last')	获取最后一个li元素
$('li:eq(2)')	获取到li元素中，选择索引号为2的元素，索引号从0开始
$('li:odd')		获取到li元素中，选择索引号为奇数的元素
$('li:even')	获取到li元素中，选择索引号为奇数的元素$('ul>li')

筛选方法

$('li').parent();				查找父级  最近一级的父元素
$('ul').children('li')			查找儿子,最近一级相当于$('ul>li')
$('ul').find('li')				查找后代，相当于$('ul li')
$('.first').siblings('li')		查找兄弟节点，不包括本身
$('.first').nextAll()			查找当前元素之后的所有同辈元素
$('.first').prevAll()			查找当前元素之前的所有同辈元素
$('div').hasClass('protected')	检查当前元素是否含有某个特定的类，如果有返回true
$('li'.eq(2))					相当于 $('li:eq(2)') 索引号从0开始

设置样式

通过css设置样式

参数只写属性名：则返回属性值：
	$('选择器').css('属性')；

参数是属性名和属性值，逗号分割，是设置一组样式，属性必须加引号，值如果是数字可以不用单位和引号
	$('选择器').css('属性','值')；

参数可以是对象的形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号
    $(this).css({
        'width':"50px",
        "height":"50px",
        "background-color":"red"
    });

排他思想

$('选择器').siblings().css('color',"");

通过类名添加属性

添加类
	$('选择器').addClass("类名");

移除类
    $('选择器').removeClass("类名");

切换类
    有该类就移除，没有该类就添加
    $('选择器').toggleClass("类名");

addClass与类操作的区别：
    原生JS中className会覆盖元素原先的类名
    jQuery里面操作只是对指定类操作，不影响原先的类名

效果

显示与隐藏

显示、隐藏与切换语法规范
    $('选择器').show([speed,[easing],[fn]])
    $('选择器').hide([speed,[easing],[fn]])
    $('选择器').toggle([speed,[easing],[fn]])
    speed：可以为三种预定速度之一的字符串（慢速slow,正常normal,快速fast）或者动画时长毫米值（如：1000）
    easing：用来指定切换效果默认为慢-快-慢swing，可用参数匀速linear
    fn：回调函数，在动画执行完成后执行的函数，每个元素执行一次

滑动

下滑、上滑与切换语法规范
    $('选择器').slideDown([speed,[easing],[fn]])
    $('选择器').slideUp([speed,[easing],[fn]])
    $('选择器').slideToggle([speed,[easing],[fn]])

淡入淡出

淡入、淡出与切换语法规范
    $('选择器').fadeIn([speed,[easing],[fn]])
    $('选择器').fadeOut([speed,[easing],[fn]])
    $('选择器').fadeToggle([speed,[easing],[fn]])

修改透明度
    $('选择器').fadeTo(speed,opacity,[easing],[fn])
    speed必须写
    opacity：修改透明度取值在0-1之间，必须写

自定义动画

自定义动画语法规范
    $('选择器').animate(params,[speed],[easing],[fn])
    params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采取驼峰命名法
    speed：可以为三种预定速度之一的字符串（慢速slow,正常normal,快速fast）或者动画时长毫米值（如：1000）
    easing：用来指定切换效果默认为慢-快-慢swing，可用参数匀速linear
    fn：回调函数，在动画执行完成后执行的函数，每个元素执行一次
    例：$('div').animate({left:500,top:300,opacity:0.4});

属性操作

获取元素固有属性的值 prop("属性")
	console.log($('a').prop('href'));

设置属性的值 prop("属性","值")
	$('a').prop('title','baidu');

 获取元素自定义属性的值 attr("属性")
    console.log($('div').prop('index'));      // 获取不到undefined
    console.log($('div').attr('index'));      // 1

数据缓存 data()
    $('span').data('uname','andy');
    console.log($('span').data('uname'));     // andy
    
	获取HTML5自定义属性data-index
    console.log($('div').data('index'));      // 2

文本属性值

获取元素的内容  获取内容和标签  相当于innerHTML
console.log($('div').html());

更改元素的内容
$('div').html('456');

 获取元素的文本内容  只获取文字忽略标签  相当于innerText
console.log($('div').text());

更改元素的内容
$('div').text('789');

获取表单的值
console.log($('input').val());

修改表单的值
$('input').val('1234')

元素操作

遍历元素

jQuery隐式迭代是对同类元素进行相同的操作，如果要给同类元素进行不同的操作就要用到遍历
	$('选择器').each(function (index, domEle) { xxx; })
	each()遍历每一个元素
	index 每个元素的索引号
	demEle是每个DOM元素对象，不是jQuery对象，如果要用jQuery方法需要给这个DOM元素转换为jQuery对象 $(domEle)
	
遍历任意对象
    $.each($('选择器'), function (index, element) {  XXX; })
	
   	var arr = ['red', 'pink', 'blue']
    $.each(arr, function (index, element) {  XXX; })  // 遍历数组
    
     $.each({
            name:'andy',
            age:18},
            function (index, element) {
                console.log(index);
                console.log(element)
        })

创建元素

动态创建一个li
	$('<li>我是后来创建的</li>');

添加元素

内部添加
	生成后为父子关系
	把元素放在匹配元素内部最后面
    $('选择器').append("内容")
	把元素放在匹配元素内部最前面
    $('选择器').prepend("内容")

外部添加
	生成后为兄弟关系
	把元素放在目标元素后面
    $('选择器').after("内容")
	把元素放在目标元素前面
    $('选择器').before("内容")

删除元素

删除匹配元素
	$('选择器').remove();

删除匹配元素集合中的所有子节点
	$('选择器').empty();

清空匹配的元素内容
	$('选择器').html('');

尺寸操作

获取匹配元素的宽度和高度
    如果参数为空则获取相应的值，返回为数字型
    如果参数为数字，则是修改相应的值，参数可以不写单位
    
只含width/height
    console.log($('div').width());
    console.log($('div').height());
    
包含padding
    console.log($('div').innerWidth());
    console.log($('div').innerHeight());
    
包含padding,border
    console.log($('div').outerWidth());
    console.log($('div').outerHeight());
    
包含padding,border,margin
    console.log($('div').outerWidth(true));
    console.log($('div').outerHeight(true));

元素偏移

设置或获取元素偏移 
	offset()
        返回被选元素相对于文档的偏移坐标，与父级没有关系
        console.log($('.two').offset());
    
	方法中含有两个属性：
    	获取距离文档顶部的距离 offset().top
		获取距离文档左侧的距离 offset().left
        console.log($('.two').offset().top);
        console.log($('.two').offset().left);

    设置元素偏移
        offset({top:10,left:30})
        $('.two').offset({top:10,left:30})

获取元素偏移
	position()
        返回被选元素相对于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准
        console.log($('.four').position());
	
    方法中含有两个属性：
        获取离距定位父级顶部的距离 position().top
        获取距离定位父级左侧的距离position().left
        console.log($('.four').position().top);
        console.log($('.four').position().left);

设置或获取元素被卷去的头部和左侧
    设置或获取元素被卷去的头部
    	scrollTop()
        console.log($(document).scrollTop());
    设置或获取元素被卷去的左侧
    	scrollLeft()
        console.log($(document).scrollLeft());

事件

单事件注册

事件 mouseover mouseout blur focus change keydown keyup resize scroll click
element.事件(function (){  事件处理程序  })

事件处理

on()绑定事件
    element.on(events, [selector], fn)
    events: 一个或多个用空格分割的事件类型
    selector： 元素的子元素选择器
    fn： 回调函数，绑定在元素身上的侦听函数
    
事件委派
	把原来加给子元素身上的事件绑定到父元素身上，把事件委派给父元素
    $('ul li').click();  // 原先是对所有小li进行绑定
    事件绑定到ul身上给ul添加点击事件，但事件的触发对象为小li，通过事件冒泡到父元素身上触发点击事件
    $('ul').on('click', 'li', function () {
        alert('11');
    })

 对于动态创建元素，on可以给动态生成的元素绑定事件   click()没有办法绑定事件

事件解绑

off()
	移除通过on()方法添加的事件处理程序
    
解绑元素所有事件处理程序
	element.off();
	$('div').off();

解绑元素上面的单个事件
	element.off('事件')
	$('div').off('click');

解绑事件委托
	element.off(events, [selector], fn)
	$('ul').off('click','li')

事件单次触发

one()
	事件只会触发一次，之后不在触发
element.one(events, [selector], fn)

事件对象

阻止事件冒泡
	e.stopPropagation();
    $('.two').on('click', function (e) {
        console.log('点击two');
        // 阻止事件冒泡
        e.stopPropagation();
    })

阻止事件默认行为
	e.preventDefault();

对象拷贝

$.extend([deep], target, object1, [objectN])
    deep：如果设置为ture为深拷贝，默认为false浅拷贝
    target：要拷贝的目标对象
    object1：待拷贝的第一个对象的对象
    objectN：待拷贝的第N个对象的对象
    浅拷贝：把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
    深拷贝：完全克隆，修改目标对象不会影响被拷贝对象

多库共存

如果$ 符号冲突 我们就使用 jQuery
	jQuery.each();
	
让jquery 释放对$ 控制权 让用自己决定
	创建一个变量代替$
	var suibian = jQuery.noConflict();

插件

jQuery插件库：http://www.jq22.com/

jquery之家：http://www.htmleaf.com/

全屏滚动：
	gitHub: https://guthub.com/alvarotrigo/fullPang.js
	中文翻译网站：http：//www.dowebok.com/demo/2014/77/

bootstrap：https://v3.bootcss.com/