初步认识jq

 jQuery是一个高效、精简并且功能丰富的 JavaScript 工具库。

它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

关键词：精简，兼容，实现代码结构简化

 

为什么要用jq：

简化DOM操作，减少开发中跨浏览器问题，

强大的选择器 (sizzle)，无new构造，实现链式调用，可以对外扩展封装自己的插件。

 

jq选择器(sizzle)（选择出来的返回的是一个jq对象（类数组形式））

基本

$('ele')   可以填写dom元素的id，class，element，*（通配符）ele,ele(父子关系列div下的ul标签)等

（操作方式和CSS一致如选择id名（'#id'））里面为字符串形式

 

层级选择器

selector1 selector2              $('div ul')  div下的多个ul标签（后代选择器）（包括子孙）
parent > child                      $('div> ul')  div下的一个ul标签（子级选择器）（孙子不包括）
prve + next                          $('div+ul') div后面紧挨的ul标签（选择出prve后面紧挨着的）

prve ~ sliblings                    $('div~ul') div后面所有的同级ul标签（prve后面所有同级的元素）

 

基本筛选选择器

:first                       $('li:first')  筛选出dom结构中的第一个li标签
:not(selector)         $('li:not(:first)')  筛选出dom结构中的除了第一个li标签的所有标签
:even                      $('li:even')   筛选出dom结构中为奇数的li标签（例如135，对应的索引值为（0，2，4））
:odd                       $('li:odd')  筛选出dom结构中为偶数的li标签
:eq(index)               $('li').eq(0)  筛选出dom结构中的索引值为0的li标签
:last                         $('li:last')  筛选出dom结构中的最后一个li标签
...

内容筛选：

:contains(text)     $('li:contains(1)')  筛选li下文本内容为1的标签
:empty                 $('li:empty')   筛选li中内容（文本和标签）为空的的标签
:has(selector)       $('li:has(p)')   筛选li下的p标签
:parent                 $('li:parent')  筛选出li的父级标签

可见性

:hidden      $('p:hidden') 对p标签中CSS样式设置为display：none  的标签选择出来

:visibe        $('p:visibe') 对p标签中CSS样式没有设置为display：none  的标签选择出来

属性:attribute

[attribute]    $('div[id]')  筛选出带有id的div标签    
[attribute=value]          $('div[id=list]')  筛选出带有id=list的div标签 
[attribute!=value]         $('div[id!=list]')  筛选出非id=list的div标签
[attribute^=value]        $('div[id^=l]')  筛选出id名以l开头的的div标签

...

小结：善用方括号[] 组合使用缩小范围：例如：$("input[id][type$='man']")  --->  找到所有含有 id 属性的input，并且它的 type 属性是以 man 结尾的；

 

子元素 
:first-child           $('ul li:first-child') 筛选出多个ul下的第一个li标签
:first-of-type       $('ul li:first-of-type') 筛选出ul下同一类型li中标签的第一个
:last-child        
:last-of-type     
:nth-child            $('ul li:nth-child(2)')  筛选出ul下同一类型li中标签的第二个

...

https://www.cnblogs.com/2050/p/3569509.html  （讲的很好理解）

 

表单类型

:input                 $('input:input') 筛选出所有input标签

:text                   $('input:text') 筛选出所有input标签中type=text的input标签
:checkbox          $('input:checkbox') 筛选出所有input标签中type=checkbox的input标签

...           

     

$(fn)

这样写为立即执行函数。会立即执行$中的函数。（因为jq对象本身就为一个立即执行函数）

$(selector,[context])   （context：上下文）

例如$('div',$(li))   选择出div标签中的上下文中的标签

 

jq对象访问

each(callback)   $('div').each(fn)  给选择出来的标签添加回调函数

length        $('div').length   因为筛选出来的div以类数组的形式。就可以调用length属性
 

selector    $('div').selector 

data(removeData)  给标签添加数据$('div').data('age',18)

index([selector|element])    $('div').index()  返回div的索引值  $('.wraper').index()  返回class名为wrapper 的索引值
 
get([index])    $('li').get(3)  返回一个原生dom  <li class="fore">4</li>