Jquery的一些基础知识记录(主要关于选择器)-CSDN博客

本文链接：https://blog.csdn.net/cutemurphy/article/details/6690307

（1）原生js要给偶数序列li注册事件的话，可以用i%2，因为除2取余数为0的话，一般都是偶数，偶数序列，便是奇数行。

（2）<script type="text/javascript" src="jquery-1.5.1.js"> </script>，结束标签不能忘记。

（3）:empty，不包含子元素或者文本为空的元素。要将文本看成一种子元素。由此:parent的时候，不一定需要表面形式的子元素，自己有文本元素也可。如<p>我们是孩子</p>

（4）:hidden，包括三种，display为none的，visibility为hidden的，以及input type为hidden的。(普通js是选择不到display为none的元素的)。注意hidden要和disabled区别开，前者是隐藏，后者是禁用。

（5）属性选择器就是带中括号，而且还可以组合选择，如$(" div[id][title$='test'] ")，这里指拥有属性id，并且属性title的值以test结束的div元素。注意属性值的引号可以省略，如$(" div[id][title$=test] ")。

（6）<input type="text" name="" value="sa" id="in">这是一个文本input框，不能通过$("text")选择到，还需要在text前面加一个冒号，即$(":text")，姑且称呼为属性值选择法，这里要明白，其实text并不是一个元素，而仅仅是一个元素的属性对应的值，所以它没有元素选择那样的方式，所以前加个冒号相区别，同时我们也可用属性选择器的方式选择，两者作用等价。如：$("input[type='text']"),注意里头的text需要引号，而且是单引号。

（7）选择被选中的checkbox，可以用$("input:checked")，也可以用$(":checkbox:checked"),即可以用大的input来引用，也可以用小的具体的input类型来引用。甚至也可借鉴第6条，用属性值选择法，checked就是个属性，于是可以$(":checked")来选择，别忘记前面的冒号。

注意select下拉框，如果要选择被选中的项，可用$(":selected")这个办法（属性值选择法），但用$("select:selected")就不行，因为这里少了个空格，select和option是有上下级关系的，改为$("select :selected")就正确啦，$("input:checked")之所以不需要空格，是因为checkbox就写在input里（<input type="checkbox" checked>），不存在所谓上下级关系。还可以$("option:selected")。

（8）计算个数是用length，而非其它，可能会误以为length是长度，其实不是。如$("select:selected").length可以计算下拉列表中option被选择的个数。

（9）$(":input")这个是最特殊的一个，因为如果是$("input")的话只会选择到input，就选择不到select，textarea，button等元素，而如果前面加了冒号，则不仅仅可以选择到input系列，还可以选择select，textarea，button等元素。

（10）注意选取表单中不可用元素，是$("#form1 :enabled")，这里form的id是form1，然后form与input或者其它具体的表单有上下级关系，所以中间有空格，不能忘记。不要写成$("#form1:enabled")。

（11）：even是想选择奇数的元素，所以索引值是偶数。反之。

（12）div:first选择第一个，作用等价于div:eq(0)。div:gt:(3)索引值大于3，div:lt(3)索引值小于3。

（13）:animated，选择正在动的元素，呵呵，不会是让他马上停下来，前面有动车吧

（14）not一定要加个括号，如div:not(.f)，所有的div中class值不为f的。

（15）:header选择到标题元素。

（16）ul li是选择ul里所有的子li，而ul>li是选择ul的直接li子元素，因为可能li又会包含ul，li，所以后代的li并不在ul+li的选择范畴里。

（17）ul+p，选择ul后面的p元素，注意要紧挨着的第一个，而且ul和p是同级关系，如ul+li这样就不合适，因为有上下层关系。$("#f+p")，不要写成$("#f")+p。next( )方法可以替代，变成$("#f").next( )。next( )方法的对应方法是prev( )。

（18）ul~p，也是同级的，也是后面的，但是选择后面所有的，不仅仅指第一个。可以用nextAll( )来替代。

（19）$("#f").siblings( )，这个方法可以选择id为f的前后所有兄弟姐妹，是对nextAll( )的补充。

（20）$("div:contains('我')"),$("div:has(p)")，注意前面包含文字的话要加引号，而后面包含元素的话不需要加引号。

（21）$(div[title*='test']),这个蛮好用，但不知道属性值具体的内容时，加个星号，只要匹配到其中一部分内容就okay。

（22）还是要注意$("input:checked")和$("select :selected")，前面没空格，后者有空格，前者没上下级关系，后者其实是在给select的option子元素，所以需要空格表示上下级。

（23） $("#f").css("color","red").hide(1000).show(1000).hide(1000).show(1000);还可以这样玩，哈哈，， hide也可以带时间，同时hide和show可以交互出现通过链操作。

（24）ul li:eq(0)与ul li:first-child乍一看好象没区别，但是如果有多个ul的时候，前者只给第一个ul的第一个li加效果，而后者给所有的ul的第一个li加效果。

要注意:nth-chilid（index）的index是从1开始算的，而eq是从0起算的，所以:nth-chilid（1）相当于:eq(0)，如果只有一个ul的话。

（25）even代表偶数，odd代表奇数。。里头有d，所以“单”。$("p:odd").css("color","red")，是选择索引值为单数的，于是实际选择到的是偶数行，第2个，第4个。

（26）注意ul li:even选择所有的偶数li，而ul li:nth-child(even)，所以要注意两者形式的区别，前者放于冒号后，后者放于括号内。

（27）如果属性值里有“#,[ ]”等特殊符号，用选择器选择的时候要用“\\”两个斜杠进行转义，否则会出错。如$("#id\\#b")，这个元素的id=id#b，所以需要转义。

（28）addClass的class的c要大写C，记得。