jQuery相关知识点整理

注意：选择器之前要加 " . " 或 " # " !!!

ul class="tabTitle">
        <li class="title-item  activeli">title1</li>
        <li class="title-item">title2</li>
        <li class="title-item">title3</li>
        <li class="title-item">title4</li>
    </ul>
    <div class="tabConent">
        <div class="tabConent-item ">1</div>
        <div class="tabConent-item active">2</div>
        <div class="tabConent-item ">3</div>
        <div class="tabConent-item">4</div>
    </div>

jQuery核心函数

jQuery（选择器）

通过选择器名称获取jQuery对象

获取ul列表

两种方法皆可获取ul

let tabTitle=jQuery('.tabTitle');
let tabTitle=$('.tabTitle');

获取列表项li

1.通过类名获取li

let titleItems=$('.title-item');

2.通过选择器迭代获取li

let titleItems=$('.tabTitle> li');

获取div节点

1.通过兄弟节点获取div节点

let tabConent=$('.tabTitle+div');

2.通过类名获取div节点

let tabConent=$('.tabConent');

获取DOM 节点

通过get获取

注：DOM节点对象返回来后，就只能调用DOM里面的属性和方法不能使用jQuery对象的属性和方法。

let divDom =  tabConent.get(0); 

通过数组获取

[ ]内部引用字符串形式

let divDom=tabConent['0'];

把DOM节点对象，转换成jQuery对象

let oDiv = document.getElementsByClassName('tabConent-item');
let jqDiv = $(oDiv);

jQuery（html)

功能：实现快速的创建一个DOM节点，并且返回一个jQuery对象。

let a = jQuery('<span>123</span>');
console.log(a);

输出：jQuery.fn.init [span], 包括了span DOM节点对象 ，但是这DOM节点对象是在内存中生成的，没有挂载到网页上。

jQuery(function(){}）=(document).ready()

1.功能：就是文档加载结束后，去执行函数中 的代码。在DOM文档载入完成后执行的函数
2.相当于，window.onload = function(){};

绑定事件

匿名函数的现代事件绑定

$(‘domObject’).on（’ 事件名（不写on）’，function（）{
函数体；
}）
例：

$('.title-item').on('click', function () {
            函数体；
})

发生事件：on；
取消事件：off.

属性

length

1.性质：表示jQuery对象中，有几个DOM节点对象
2.用法：

let count = tabConent.length;
console.log(count); //1 

方法

index()

1.通过集合，去找index()指定的DOM节点对象 或者是jQuery对象 在集合中，是第几个索引号。

let i = $('.tabConent-item').index($('.active'));

2.index()没有参数：返回自己在兄弟节点中是第几个索引号。

let j = $('.active').index();

removeClass()

1.功能：给某个div删除一个类
2.用法

//找到上一个被激活的DIV；让它不激活
console.log($('.tabConent >.active'));
$('.tabConent >.active').removeClass('active')

addClass()

1.功能：给某个div添加一个类
2.用法：

$('.tabConent-item').eq(i).addClass('active')

eq(index):获取当前链式操作中第N个jQuery对象，返回jQuery对象

each()

1.功能