元素属性操作

获取或设置元素的固有属性 porp()

$('a').porp('href'); // 只写一个属性值表示获取 ele.href
$('a').porp('title', 'hello world'); // 一个值跟一个属性表示设置

获取或设置元素的自定义属性 arrt()

$('a').attr('data-index'); // 一个代表获取 ele.getAttribute()
$('a').attr('data-index', 10); // 两个代表设置 ele.setAttribute()

元素内容操作

获取设置元素内容

$('div').html(); // 获取元素内容 包括标签  innerHTML
$('div').html('123'); // 设置元素内容

获取设置元素文本内容

$('div').text(); // 获取元素文本内容 innerText
$('div').text('123'); // 设置元素文本内容

获取设置表单元素内容

$('input').val(); // 获取内容 value
$('input').val('123'); // 设置内容

遍历元素

jquery 中的隐式迭代是对同一种元素做同一操作，如果想要给同一类元素做不同操作，就需要用到遍历

$('div').each(function (index, DOMele){...});
index: 每个元素的索引号
DOMele: 每个dom对象，不是jquery对象

元素操作

创建元素

var li = $('<li></li>'); // 动态创建一个 li 元素 ele.createElement('li');

添加元素

// 内部添加
$('ul').append(li); // ul最后一个子元素添加 li ele.appendChild(li);
$('ul').prepend(li); // ul 第一个添加子元素 ele.insertBefore(li);
// 外部添加 兄弟关系
$('div').before(li); // div 前面添加一个 li
$('div').after(li); // div 后面添加一个 li
// 删除元素
$('div').remove(); // 删除自身这个div元素
$('div').empty(); // 删除这个元素的所有子元素；

显示隐藏，上拉下拉，淡入淡出

/*
  参数都可以省略
  param1：三种预定速度之一的字符串 slow normal fast 默认normal 或者写数字 ms 例如 1000
  param2：用来指定切换效果默认是 swing 可用参数 linear
  param3：回调函数，动画完成后执行
  fateTo() 方法特殊 opacity，param1 为必填，其他选填
*/
// 效果
$('li').hide(); // 隐藏元素
$('li').show(); // 显示元素
$('li').toggle(); // 点击隐藏，点击显示 切换
// 上拉下拉
$('li').slideDwon(); // 下拉
$('li').slideUp(); // 上拉
$('li').slideToggle(); // 切换
// 淡入淡出
$('li').fadeIn(); // 淡出
$('li').fadeOut(); // 淡入
$('li').fadeToggle(); // 切换
$('li').fadeTo(time, opacity) // 时间ms 透明度 0~1

动画队列以及停止的方法

jquery 中一旦动画一旦执行，如果多次触发，就会造成动画或者效果排队执行 可以通过 stop() 方法来停止排队；stop() 一定要卸载动画或者效果的前面，因为停止的是上一次的动画

$('li').stop().slideToggle(); // 结束上一次的动画

自定义动画 animate()

animate(params,[speed],[easing],[fn]);
1, params: 想要更改的样式属性，以对象的形式传递，属性名可以不带引号，如果是复合属性则需要驼峰命名法，其余参数都可以省略
2，speed: 三种预定速度之一的字符串 slow normal fast 默认normal 或者写数字 ms 例如 1000
3, easing: 用来指定切换效果默认是 swing 可用参数 linear
4, fn: 回调函数，动画完成后执行

$('div').animate({left: 100,top: '100px',opacity: 0.5,backgrounColor: 'red'});