jQuery 常用方法

jQuery 常用方法

排序

1. eq() 方法
   • jQuery 中获得的对象，内部包含选择的一组原生 js 对象，在 jQuery 对象中会进行一个大的排序，这个排序与原来的 HTML 结构没有关系。
   • eq() 方法在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标。
     let $ps = $('p'),$ps.eq(0).css('background-color', 'red')
2. index() 方法
   jQuery 对象调用 index() 方法时，得到的是它自己在 HTML 结构兄弟中的下标位置,不是得到对象。与 jQuery 大排序没有关系。
   $ps.index()

排他思想

在一些事件中，希望自己是特殊的，而它的兄弟们是默认的。

排他方法

jQuery 中可以让 this 特殊设置，让兄弟 siblings 设置成默认。

1. Tab 栏特效中的排他
   • 自己的级别的排他：给自己this添加 current 类名，让其他的兄弟删除 current 类。
   • 对应的部分的排他：给对应位置的元素添加 current，其他的兄弟删除 current 类。
   • 找对应关系，使用的是自己的 index() 下标，让另一组中下标相同的项作为对应项。
   • 通过选中另一组的对应项利用 eq() 方法选择下标项。

jQuery 操作标签的内容

1. html() 方法
   html() 方法相当于原生 JS 中的 innerHTML 属性，用来获取或设置标签内部内容。 方法可以传递一个参数，自定义的字符串内容。

   • 获取：文本和内部标签（只获取到第一个元素的内容）
     语法：jQuery对象.html();
   • 设置：若设置标签时，标签会被渲染（会批量更改选择的所有元素）
     语法：jQuery对象.html(‘文本内容’);

2. text() 方法
   相当于原生 JS 中的 innerText 属性，用来获取或设置标签内部文字

   • 获取：仅仅是文本（获取到所有元素的内容）
     语法：jQuery对象.text();
   • 设置：若设置标签时，标签会被当做普通文本（会批量更改选择的所有元素）
     语法：jQuery对象.text(‘文本内容’);

3. val() 方法
   val() 方法相当于原生 JS 中的 value 属性，用来获取或设置 表单元素的内容。

   • 获取：表单元素的 value
     语法：jQuery对象.val();
   • 设置：表单元素的value
     语法：jQuery对象.val(‘文本内容’);

   注意：
   textarea 可以用这三个方法
   select获取到的是当前选中项的value，设置时是修改选中的项
   option获取到的是第一项的value，设置时是修改所有的value

jQuery 操作标签的属性

1. attr() 方法
   attr：全称 attribute，属性的意思。
   作用：用来获取或者设置标签的属性值。

   • 设置标签的属性(可以设置自定义属性)
     语法：jQuery对象.attr(name,value);
     let $ps = $('p');$ps.attr('class', 'para')
   • 获取标签属性值
     语法：jQuery对象.attr(name);

2. removeAttr() 方法
   作用：移除标签的属性
   语法：removeAttr(name);
   $ps.removeAttr('class')

3. prop() 方法
   针对：selected、checked、disabled 等表单元素的属性。此类属性的属性值与属性名相同。

   • 获取语法：$(‘input’).prop(‘属性名’);
   • 设置语法：$(‘input’).prop(‘属性名’,值);

    <input type="button" disabled='disabled' class='btn'>
    <input type="checkbox" checked='checked' class="choose">
    <script>
    // 原生js 用这种方法设置或者删除
    let