JQuery选择器和筛选器

1.一款轻量级的JS框架.JQuery核心js文件才几十kb，不会影响页面加载速度。

2.丰富的DOM选择器，jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，js可能要写好几行代码，而 jQuery-行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

3.链式表达式.JQuery的链式操作可以把多个操作写在-行代码里，更加简洁.

4.事件、样式、动画支持。jQuery还简化了js操作css的代码， 并且代码的可读性也比js要强。

5.Ajax操作支持。JQuery简化了Ajax操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 

6.跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

7.插件扩展开发.JQuery有着丰富的第三方的插件，例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面 上的组件都有对应插件,并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

 jQuery对象和dom对象

jQuery找到的对象为---------jQuery对象

如果不引入jQuery找到的对象为--------dom 对象

dom对象只能使用dom对象的方法  不能使用jQuery对象的方法

jquery对象也是，他不能使用dom对象的值

转换

        jquery对象转化为dom对象  -- jquery对象[0]

         dom对象转化为jquery对象-- $dom对象

jquery选择器

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

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对象

 jquery基本筛选器

<ul>
    <li>语文</li>
    <li>数学</li>
    <li id="l3">英语</li>
    <li><span>历史</span></li>
    <li id="l5">化学</li>
    <li>生物</li>
    <li>地理</li>
</ul>
<script src="jquery.js"></script>

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

 

 

 

 属性选择器

<div title="xx">haha</div>

[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标签

<div>
    <span>用户名：</span>
    <input type="text">
     <span>密码：</span>
    <input type="password">
    <input type="radio" name="sex">
    <span>man</span>
    <input type="radio" name="sex">
    <span>woman</span>
    <input type="checkbox" name="hobby">
        <span>eat</span>
    <input type="checkbox" name="hobby">
        <span>singing</span>
    <input type="checkbox" name="hobby">
        <span>dance</span>
    <select name="" id="">
        <option value="1">玛卡巴卡</option>
        <option value="2">汤波荔波</option>
    </select>
</div>
<script src="jquery.js"></script>

 

 

 筛选器方法

下一个:
    $('#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()  // 索引值等于指定值的元素