元素属性，内容操作，遍历元素，元素操作

2020-04-04 22:54:43 阅读：202 来源： 互联网

元素属性操作

获取或设置元素的固有属性 `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'});

标签：动画,遍历,元素,li,获取,操作,div,ele
来源： https://www.cnblogs.com/article-record/p/12634894.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9