jQuery

文档加载完毕，执行js

// 第一种
$(document).ready(function() {})
// 第二种（推荐）
$(function() {})

$对象

jQuery 的别名 $ ，开发常用$

获取jquery对象

// 写法和css完全一致
$('div')
$('#id')
$('.class')
$('ul li')
$('ol>li')
$(this)

DOM转jQuery对象

$(DOM对象)

jQuery转DOM对象

// index 索引号
$('div')[index]
$('div').get(index)

常用API

设置样式

// 隐式迭代

// 把全部div标签的背景色设置了粉色
$('div').css('background', 'pink')
// 多个写成对象的形式
$('div').css({'font-size': '20px', backgroundColor: 'black'})

操作类名

$('div').addClass('current') // 添加
$('div').removeClass('current') // 移除
$('div').toggleClass('current') // 切换

显示和隐藏

/**
 * speed：slow、fast、normal(默认)、毫秒数
 * easing：linear、swing(默认)
 * callback：回调函数
 * 不给参数没有动画，开发一般不加参数
 */
$('div').show([speed], [easing], [callback])
$('div').hide([spee], [easing], [callback])
$('div').toggle([speed], [easing], [callback])

淡入淡出、渐变

$('div').fadeIn()
$('div').fadeOut()
$('div').fadeToggle()
$('div').fadeTo(speed, opacity) // 0-1

animate动画

$('div').animate({styles}, speed, easing, callback)
// styles 必选，后面的可选

stop()

// 注意写在动画之前，用于结束上一次的动画
$('div').stop().siblings().fadeTo(1000, 0.5)

滑动效果

$('div').slideDown([speed], [easing], [callback])
$('div').slideUp()
$('div').slideToggle()

筛选选择器

筛选选择器父子元素

链式编程

// 当前元素文字颜色为粉色，当前元素的兄弟元素颜色为空
$('ul .current').css('color', 'pink').siblings('li').css('color', '')
// 当前元素的兄弟元素颜色为空
$('ul .current').siblings('li').css('color', '')

操作属性

// 固有属性
$('div').prop('name') // 获取
$('button').prop('disabled', true) // 设置

// 自定义属性
$('div').attr('name') // 获取
$('div').attr('index', 2) // 设置
$('div').attr('data-index') // 获取h5里的新增属性data-index

// 数据缓存，数据存储在内存中
$('div').data('lxh') // 获取
$('div').data('lxh', 25) // 设置
$('div').data('index') // 获取h5里的新增属性data-index

操作内容

$('div').html() // 获取元素内容
$('div').html('lxh') // 修改元素内容
$('div').text() // 获取文本内容
$('div').text('lxh') // 设置文本内容

// 表单的值 val相当于原生的value
$('input').val() // 获取
$('input').val('lxh') // 设置

遍历对象

$('div').each(function(index, domEle) {}) // index索引值 domEle是DOM对象
$.each($('div'), function(index, domEle) {}) // 可以遍历数组、对象
$.each([1, 2, 3], function(index, item) {}) // 遍历数组
$.each({name: 'lxh', age: 25}, function(key, value) {}) // 遍历对象

创建、删除、添加元素

// 创建元素
var ele = $('<li>lxh</li>')
// 添加元素
$('ul').append(ele) // 添加在内部最后面
$('ul').prepend(ele) // 添加在内部最前面
$('div').after(ele) // 添加在当前元素后面
$('div').before(ele) // 添加在当前元素前面
// 删除元素
$('div').remove() // 删除当前元素，自杀
$('div').empty() // 删除当前元素里的子元素
$('div').html('') // 删除当前元素里的子元素

尺寸

位置

offset() // 返回一个对象left、top属性，距离文档的距离，不是父元素
offset({left: 100, top: 200}) // 上面是获取，这个是设置

position() // 返回一个对象left、top属性，只能获取不能设置，距离父元素的距离

scrollTop() // 获取垂直卷去的距离
scrollTop(100) // 设置
scrollLeft() // 获取水平卷去的距离

返回顶部做动画

$('html, body').stop().animate({scrollTop: 0})

事件

绑定事件

// 单个事件
$('div').click(function() {}) // 点击事件
$('div').hover(function() {}, function() {}) // 第一个函数进入，第二个函数离开
$('div').scroll(function() {}) // 滚动事件

// on()多个事件
$('div').on({
    mouseenter: function() {},
    mouseleave: function() {},
})
$('div').on('mouseenter mouseleave', function() {})

// on()事件委托
$('ul').on('click', 'li', function() {})
// 利用事件冒泡，点击事件绑定在ul身上，触发的是li身上

解绑事件

off() // 解绑所有事件
off('click') // 解绑点击事件
$('ul').off('click', 'li') // 解绑事件委托

一次事件

// 只执行一次
$('div').one('click', function() {})

自动触发事件

$('div').click() 
$('div').trigger('click')
$('div').triggerHandler('click') // 不会触发默认行为，前两种会

阻止默认事件和冒泡

event.preventDefault() 或者 return false
event.stopPropagation()

拷贝

var obj1 = {
    name: "lxh",
    age: 25,
};
var obj2 = {
    age: 18,
    obj: {
        age: 25,
    },
};
$.extend(true, obj1, obj2);
// $.extend(true, targetObj, obj) 深拷贝
// $.extend(targetObj, obj) 浅拷贝

解决冲突

// 修改$符号
var lxh = $.noConflict()
// 或者使用jQuery

jQuery插件

jQuery插件库

全屏滚动插件fullpage.js

bootstrap依赖于jQuery开发的插件

谢谢