【学习笔记】锋利的jQuery（一）选择器

时间：2023-03-08 18:39:53

一、要点阐述

1，jQuery创建于2006年1月的一个开源项目，强调理念是“write less,do more”，压缩后大小30KB左右。、

2，jQuery里的方法都被设计程自动操作对象集合，而非单独的对象。

3，jq对象是jq对DOM对象进行包装后产生的对象，是一个类似数组的对象，可用[0]或get(0)方法转成DOM对象。

二、jQuery和其他js库的冲突解决

//jq库在其他库之前导入时需调用noConflict()

方式1(jQuery代替$)：

jQuery.noConflict();  //把$的控制权交给其他库。

jQuery(function(){...});

方式2($xhh代替$)：

var $xhh = jQuery.noConflict();

$xhh(function(){...});

方式3(仍用$)：

jQuery.noConflict();

jQuery(function($){...});

方式4(仍用$)：

jQuery.noConflict();

(function($){

    $(function(){...});

}){jQuery};

//jq库在其他库之后导入，用jQuery代替$

jQuery(function(){...});

三、jQuery选择器

1，基本选择器和层次选择器

//基本选择器

$("#id")

$(".classname")

$("p")

$("*")  //选取所有

$("#id,.classname,p") //选取多个

//层次选择器

$("div span")  //div的所有span后代

$("div>span")  //div的子元素span

$("div+span")  //等同于$("div").next("span")

$("div~span")  //等同于$("div").nextAll("span")，注意区分.siblings()

2，过滤选择器

//基本过滤

:first/:last  //等同于:eq(0)/:eq(len-1)

:not(selector)/:has(selector)

:even/:odd

:eq(index)/:gt(index)/:lt(index) //index从0开始

//子元素过滤，需和父级元素空格开使用

:nth-child(index/even/odd)

:first-child/:last-child

:only-child   //选取其唯一的子元素

//内容过滤

:contains("xxx") //包含有“xxx”的文本内容的元素

:empty/:parent   //包括子元素的、不包括子元素的

//表现形式过滤

:header   //h1,h2,h3...标签

:animated

:focus    //当前获取焦点的元素

:hidden   //包括<input type="hidden">,"display:none","visibility:hidden"

:visible    

//属性过滤

div[id]

div[class=classname]

div[class!=classname]

div[title^=value]       //属性以value开始的div

div[title$=value]       //属性以value结束的div

div[title*=value]       //属性中含有value的div

div[attribute1][attribute2]...  //多个属性过滤

3，表单选择器和对应的过滤

表单选择器

:input  //所有表单的元素，包括input,select,button...

//以下是选择对应type属性的表单元素

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden  //比较特殊，选择的是包括表单外的所有不可见元素

表单过滤

:enabled/:disabled

:checked

:selected

4，jq常用的选择方法

filter(selector) //对本身进行筛选

find(selector)   //在后代中筛选

相关文章