JQuery 一些特殊符号的使用

前言：我写博客的频率与我的清闲程度成正比。。

 

太闲了所以想记录一下JQuery里的特殊符号，级别：入门级。用到哪里写到哪里，不全面是肯定的。

其实只要接触前端就肯定少不了用jquery，但是以前太忙，都是边学边用，

所谓学，就是看别人的代码怎么写，自己怎么写。所以用来用去就是 val()、show()、hide() 仅此而已。

从来没有系统学过，以至于面试的时候一问三不知。

 

 

在这之前，先说一下如果什么特殊符号都不用，就表示是Dom元素名

例如$("div")表示获取页面中所有的div元素(集合)，$("ul")表示获取页面中所有的ul元素(集合)。

 

第一个特殊符号：    #

井号的目标很明确，只和 id名一起用，比如 $("#div1")之类的，div1为样式名，由于id名的唯一性，只会获取一个元素。

 

第二个特殊符号：      .

点如果单独放在某个单词前面，就表示是样式名为xxx的元素(集合)，比如$(".redStyle")之类的，

redStyle为样式名。

 

第三个特殊符号：     :

用法1：放在元素名前面，表示某一类元素。

例如：

$(":input")表示选择所有表单元素，例如input,select,textarea,button等元素。

 而$("input") 则只表示所有的 input元素，显然带冒号比不带冒号选择的范围更广。

 分在这一类是为了方便记忆，其实这里的input已经不再表示一个“名词“，而是一个”形容词“。

 也就是用法2中的筛选条件。

 

用法2：放在筛选条件前面，起到过滤作用

例如：

$(":hidden") 表示所有隐藏元素

 

第四个特殊符号：     [  ]

用法1：根据 属性=属性值 来筛选元素时使用

              例如：  $("li[title='蔬菜']") 表示所有title的值为“蔬菜”的li元素

 

第五个特殊符号：   空格

就目前学到的看来，空格一般是用于元素与元素之间。

 

例子如下→

用法1：用于子孙选择器

例如$("div span")表示获取div下的所有span元素集合(包括所有级层)

 

用法2：获取表单中的某一类元素的集合

例如 $("#formTest :checkbox") 表示获取id名为formTest的表单下的所有复选框，

注意，#formTest  与  :checkbox之间的空格不能少。

 

用法3：获取表单中具有相同状态的元素集合

例如 $("#formTest :checked") 表示获取id名为formTest的 表单下所有处于选中状态

的元素，比如单选框、复选框等拥有checked属性的元素。

类似的还有$("#formTest :selected")主要用于下拉框的option属性。

注意，#formTest  与  :checked之间的空格不能少。

 

第六个特殊符号：   ，

 

其他特殊符号：   >   +    ~

这几个用途比较少，放在一起说

$("div>span") 表示只选取div下第一层级的span元素集合

$("div+span") 表示选取与div在同一层级中的下一个span元素，注意，只返回一个元素

$("div~span") 表示选取与div在同一层级中的后面全部的span元素集合，注意只是同一级层中