标签：react 传参数 定义 选中 索引 移除 插件 效果 rop
JQuery：是js中的插件
属于第三方库，插件提供一个函数
jq是将原生js中的DOM操作全部封装了，可以增删改查，添加事件、修改内容样式、ajax事件、js动画。
monment.js 日期处理插件 http://momentjs.cn/
swiper 轮播图插件 https://www.swiper.com.cn/
jq的最新版3.x ，但是一般用1.x版本的（兼容低版本的IE678）
特点：
1.jq选择器选中的结果是伪数组
2.jq中伪数组上的所有设置方法，都对选中的所有元素都有效果（为了减少循环）
3.jq中的大部分设置方法返回的还是伪数组
4.jq中的API都是方法
5.很多方式，传入参数是设置，不传参数是获取
伪数组的本质是对象
jq中的伪数组的设置型方法一般都会针对所有的选中的元素
如果插件功能太多会用框架 vue或react
选择器和筛选器：用来帮我们获取DOM元素
选择器：可以用jQuery（‘‘）或者$(‘‘)
1.直接找到第一个：$(‘li:frist‘)//找到所有li中的第一个
2.直接找到最后一个：$(‘li:last‘)//找到所有li中的最后一个
3.直接找到第几个：$（‘li:eq(3)‘）//找到li中索引为3的那个
4.找到奇数个：$(‘li:odd‘)//找到所有li中索引为奇数的
5.找到偶数的标签：$(‘li:even‘)//找到所有li中索引为偶数的标签
筛选器：对元素进行筛选，准确的获取或判断某个元素
2.找到所有元素中的最后一个：$(‘li‘).last()//所有li中的最后一个
3.找到某个元素的下一个兄弟元素：$(‘li:eq(3)‘).next()//找到索引为3的li的下一个li
4.找到某个元素的上一个兄弟元素：$(‘li:eq(3)‘).prev()//找到索引为3的li的上一个li
5.找到某个元素的后面的所有兄弟元素：$(‘li:eq(3)‘).nextAll()//找到索引为3的li后面所有li
6.找到某个元素的前面的所有兄弟元素：$(‘li:eq(3)‘).prevAll()//找到索引为3的li前面所有li
7.找到某个元素的父元素：$(‘li:eq(3)‘).parent()//找到索引为3的li的父元素
8.找到某个元素的所有结构父级，直到html为止：$(‘li:eq(3)‘).parents()//找到索引为3的li所有父级
9.找到一组元素中的某一个 ：$(‘li‘).parents().find(‘body‘)//在li的父级中找到所有的body标签。
$(‘div‘).find(‘.box‘)//找到div标签下所有的后代元素中所有类名为box的元素。
10.找孩子节点：$(‘li‘).children()
11.除了自己之外所有的兄弟: $(‘li‘).siblings（）
属性（property）操作
//给 div 元素添加一个 id 属性，值是 box
$(‘div‘).prop(‘id‘,‘box‘)
// 获取 div 的 id 属性
console.log($(‘div‘).prop(‘id‘))
2.给一个元素添加某个自定义属性(attr:操作自定义属性)
// 给 div 添加一个 index 属性，值是 1
$(‘div‘).attr(‘index‘, 1)
// 获取 div 的 index 属性
console.log($(‘div‘).attr(‘index‘))
3.移除元素的某一个属性
// 移除元素自己本身的属性
$(‘div‘).removeProp(‘id‘)
// 移除元素的自定义属性
$(‘div‘).removeAttr(‘index‘)
4.类名操作（设置，添加方法都会对所有类名生效）
（1）判断某一个元素有没有某一个 class
$(‘div‘).hasClass(‘box‘) // true 表示该元素有 box 类名，false 表示该元素没有 box 类名
（2）给元素添加一个类名
$(‘div‘).addClass(‘box2‘) // 给 div 元素添加一个 box2 类名
（3）移除元素的类名（不传参数时移除全部类名）
$(‘div‘).removeClass(‘box‘) // 移除 div 的 box 类名
（4）切换元素类名（有就删除，没有就添加）
$(‘div‘).toggleClass(‘box3‘) // 如果元素本身有这个类名就移除，本身没有就添加
5.操作元素内容
（1）// 给元素的 innerHTML 赋值
$(‘div‘).html(‘<span>hello world</span>‘)
// 获取元素的 innerHTML
$(‘div‘).html()
（2）// 给元素的 innerText 赋值
$(‘div‘).text(‘hello world‘)
// 获取元素的 innerText
$(‘div‘).text()
（3）// 给元素的 value 赋值
$(‘input‘).val(‘admin‘)
// 获取元素的 value 值
$(‘input‘).val()
6.样式操作
1-$(‘div‘).css(‘width‘, ‘100px‘)// 给元素设置一个 css 样式
2-$(‘div‘).css(‘width‘)// 获取元素的某一个样式
3-$(‘div‘).css({width: ‘100px‘, height: ‘200px‘}) // 给元素设置一组样式
标签：react 传参数 定义 选中 索引 移除 插件 效果 rop
原文地址：https://www.cnblogs.com/52580587zl/p/13204690.html
