jQuery笔记1

简介
jQuery 是一个快速、轻量级、可扩展的 js 库，它提供了易于使用的跨浏览器的API，使得访问dom，时间处理、动画效果、ajax请求变得简单。简化了JS对DOM的操作

jQuery核心

jQuery核心对象

window.jQuery = window.$ = jQuery;

在window对象中，多了两个属性，叫做jQuery 和 $
jQuery属性 和 $可以互相替代。

jQuery对象
使用jQuery获取的元素是jQuery对象，不是DOM对象，不可以使用DOM对象方法。

let div = document.getElementById("nav");
div.style.color="red";
// jQuery对象以$开头
let $div = $("#nav");//错误
$div.style.color="red";//正确

DOM对象可以和JQuery对象相互转换

//DOM --> jquery
let $div= $(dom对象);
//jquery ---> DOM
let div = $div[0]

访问节点

1、基本选择器

基本语法：$(选择器)
选择器语法 和 CSS 选择器语法一致

id / 类 / 标签 / 子元素 / 后代 / 相邻兄弟 / 属性 / 伪类

2、后代选择器

$().find(选择器) 在某个元素的后代中查找

$().children(选择器) 选择器可以不写，默认找所有子元素，否则找满足选择器的子元素

jQuery代码块:
$(function(){
    // 后代中的h1
    let h1s = $("#d").find("h1");
    console.log(h1s);
    // 所有的子元素
    h1s= $("#d").children();
    console.log(h1s);
    // 子元素中的h1
    h1s= $("#d").children("h1");
    console.log(h1s);

})

html代码块:
<div id="d">
    <h1>111</h1>
    <h1>222</h1>
    <div>
        <h1>333</h1>
    </div>
</div>

3、父选择器
$().parent() 找某个节点的 父节点

4、兄弟节点

$().siblings() 所有兄弟节点
$().next() 下一个兄弟节点
$().prev() 上一个兄弟节点
$().nextAll() 下面的所有兄弟节点
$().prevAll() 上面的所有兄弟节点
$().nextUntil(selector) 介于两个节点之间的所有节点（向下找）
$().prevUntil(selector) 介于两个节点之间的所有节点（向上找）

5、:选择器

$(“span:first”) 选择第一个span
$(“span:last”) 选择最后一个span
$(“span:even”) 第偶数个span
$(“span:odd”) 第奇数个span
$(“input:button”)或者$(“:button”) 所有的input 并且type是button的元素
$(“:checkbox”) 所有的 复选框
$(“:radio”) 所有的 单选按钮
$(“:checked”) 所有选中的checkbox / radio
$(“:selected”) 所有选中的select>option

6、选择器过滤

$().first() 满足选择器的第一个元素
$().last() 满足选择器的最后一个元素
$().eq(n) 满足选择器的第n个元素（从0开始）
$(selector1).not(selector2) 满足selector1并且不满足selector2的元素