jQuery方法（1）

标签：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中索引为偶数的标签

筛选器：对元素进行筛选，准确的获取或判断某个元素

1. 找到所有元素的第一个：$(‘li‘).frist()//所有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）操作

1. 给一个元素添加某个属性（prop:操作标准属性）

　　　　　　//给 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(‘hello world‘)

　　　　　　// 获取元素的 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‘})  // 给元素设置一组样式

jQuery方法（1）

标签：react   传参数   定义   选中   索引   移除   插件   效果   rop   

原文地址：https://www.cnblogs.com/52580587zl/p/13204690.html