jQuery对象的本质和选择器以及筛选方法

目录

一、jQuery 对象和 DOM 对象 

二、jQuery对象的本质

三、jQuery选择器

四、jQuery筛选选择器

五、jQuery 筛选方法

一、jQuery 对象和 DOM 对象 

• js的对象只能用JS的属性和方法
• jq的对象只能用JQ的属性和方法
• 用原生 JS 获取来的对象就是 DOM 对象【document.getElement等方法】
• jQuery 方法获取的元素就是 jQuery 对象【$('div')等】

二、jQuery对象的本质

        利用$对DOM 对象包装后产生的对象(伪数组形式存储)

特别注意:
        只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

相互转换:
        DOM 对象与 jQuery 对象之间是可以相互转换的。

        因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

• DOM对象转换为jQuery对象：

$(DOM对象)

• jQuery对象转换为DOM对象（两种方式）

$('div')  [index]           //index是索引号
$('div')  .get[index]       //index是索引号

三、jQuery选择器

        原生JS获取元素的方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，统一获取元素的标准

1. $('#iid')— — — — 指定id元素
2. $('*')— — — — — 所有元素
3. $('.class')— — — 指定class元素
4. $('div')— — — — 根据标签获取元素
5. $('div,p,li')— — — 获取多个元素
6. $('li.class')— — — 交集获取
7. $('ul>li')— — — — 子代选择器
8. $('ul li') — — — — 后代选择器

四、jQuery筛选选择器

1. $('li:first')— — — 第一个元素
2. $('li:last')— — — 最后一个元素
3. $('li:eq(xx)')— — 索引为xx的元素
4. $('li:odd')— — — 索引为奇数的元素
5. $('li:even')— — — 索引为偶数的元素

        这里需要注意的是：索引是从0开始的 

五、jQuery 筛选方法

1. $('li').parent() — — — —父级
2. $('ul').children('li')— — 子级（如果不加参数，获取所有的，如果添加指定的元素，则按照指定的查找）
3. $('ul').find('li')— — — — 后代
4. $('li').siblings('li')— — — 兄弟
5. $('li').nextAll() — — — — 后面的
6. $('li').prevAll() — — — — 前面的
7. $('div').hasClass('aaa')— — 判断是否具有某个类名
8. $('div').eq(index)— — —  指定索引方法【eq推荐用方法】

        常用的几项：parent()        children()        find()        siblings()        eq()