day48天jQuary

今日内容

jQuery

jQuery引入

下载链接：[jQuery官网](https://jquery.com/)，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。

jquery对象和dom对象

jquery找到的标签对象称为 -- jquery对象
原生js找到的标签对象称为 -- dom对象
dom对象只能使用dom对象的方法,不能使用jquery对象的方法
jquery对象也是,它不能使用dom对象的方法

dom对象和jquery对象互相转换:
    jquery对象转dom对象 -- jquery对象[0]  示例:$('#d1')[0]
    dom对象转jquery对象 -- $(dom对象)

jQuery选择器

基本选择器

jQuery('#d1')  -- $('#d1')
基本选择器（同css）

　　 id选择器：
    $("#id")  #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，
        //通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容
    
    标签选择器：
    $("tagName")  $('div')

    class选择器：
    $(".className")  

    配合使用：
    $("div.c1")  // 找到有c1 class类的div标签

    所有元素选择器：
    $("*")

    组合选择器：
    $("#id, .className, tagName")

        选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,
        意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索
        引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象

基本筛选器

<ul>
    <li>蔡世楠</li>
    <li>尤利阳</li>
    <li id="l3">张雷</li>
    <li>申凯琦</li>
    <li id="l5">程德浩</li>
    <li>罗新宇</li>
    <li>曾凡星</li>
</ul>

:first  -- 示例:$('li:first') // 第一个
:last       // 最后一个
:eq(index)  // 索引等于index的那个元素
:even       // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd        // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)  // 匹配所有大于给定索引值的元素
:lt(index)  // 匹配所有小于给定索引值的元素
:not(元素选择器)  // 移除所有满足not条件的标签
:has(元素选择器)  // --$('li:has(.c1)')  找到后代中含有满足has里面选择器的那个标签
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签

属性选择器

[attribute]
[attribute=value]   // 属性等于
[attribute!=value]  // 属性不等于

// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");  // 取到checkbox类型的input标签
$("input[type!='text']");     // 取到类型不是text的input标签 #注意这个双引号

表单筛选器

找到的是type属性为这个值的input标签中
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

表单对象属性筛选器

:enabled   #可用的标签
:disabled  #不可用的标签
:checked   #选中的input标签
:selected  #选中的option标签

筛选器方法

下一个:
    $('#l3').next();     找到下一个兄弟标签
    $('#l3').nextAll();  找到下面所有的兄弟标签
    $('#l3').nextUntil('#l5');  #直到找到id为l5的标签就结束查找，不包含它
上一个
    $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")
父亲元素
    $("#id").parent()
    $("#id").parents()     // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
    $("#id").parentsUntil('body')   // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

儿子和兄弟元素
$('ul').children(); 
$('ul').children('#l3');  #找到符合后面这个选择器的儿子标签

$('#l5').siblings();
$('#l5').siblings('#l3'); #找到符合后面这个选择器的兄弟标签


find
    $('ul').find('#l3')  -- 类似于  $('ul #l3')
filter过滤
    $('li').filter('#l3');


.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not()  // 从匹配元素的集合中删除与指定表达式匹配的元素  $('li').not('#l3');
.has()  // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq()  // 索引值等于指定值的元素