左岸梧桐
左岸梧桐

jQuery基础课程学习笔记

这周学习的JavaScript。

课程名：JavaScript入门篇

课程地址：慕课网 http://www.imooc.com/learn/11

现整理笔记如下：

  1. jQuery 环境搭建：
    1. 引用jQuery文件库： ( 假设该文件下载后保存在项目文件夹Jscript中)
  2. jQuery 基础选择器：(基本与CSS选择器相同，但注意7~9的三个层级选择器是CSS选择器中没有的)
    1. ID选择器： $("#my_id")
    2. element(元素)选择器：$("elementName")
    3. .class(类)选择器：$(".class")
    4. *选择器：$("*")
      1. 注： 
        1. 由于使用*选择器获取的是全部元素，因此，有些浏览器将会比较缓慢，这个选择器也需要谨慎使用。
        2. 可以使用$(“div *”)的方式获取
          元素的所有子元素-详见层次选择器
    5. sele1,sele2,seleN选择器(多项选择器)：$(“sele1,sele2,seleN”)
    6. ance desc(后代)选择器：$("ance desc")
      1. 其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。
      2. 即CSS选择器中的”后代选择器“
    7. parent>child(子)选择器： $(“parent > child”)
      1. 即CSS选择器中的子选择器；
    8. prev+next(层次)选择器： $(“prev + next”)
      1. 参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。
    9. prev~siblings(层次)选择器： $(“prev ~ siblings”)
      1. 注：
        1. 参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。
        2. 区别于prev+next选择器：选取prev元素后面全部相邻的元素，而非一个
        3. 获取的是同一辈中的所有后面的元素；
  3. jQuery 过滤性选择器( 该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个/多个元素)：
    1. :first过滤选择器：( 想得到一组相同标签元素中的第1个元素)
      1. 语法：$("li:first") 即选择第一个li标签
      2. 注：
        1. :first过滤选择器的功能是获取第一个元素，常常与其它选择器一起使用，获取指定的一组元素中的第一个元素。
        2. 所谓的一组元素是“同一个父标签的同一辈元素”
    2. :last过滤选择器：
    3. :eq(index)过滤选择器： ( 从一组标签元素数组中，灵活选择任意的一个标签元素)
      1. 语法：$("li:eq(2)") 即选择li标签中的第3个
      2. 注：参数index从0开始
    4. :contains(text)过滤选择器：选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。
      1. 语法：$("li:contains('文本')")
      2. 注：
        1. 其中参数text表示页面中的文字(即innerHTML)。
        2. 参数中的text是用单引号括起来的，而整个是用双引号括起来的，不能乱，否则无效；
    5. :has(selector)过滤选择器： 功能是获取选择器中包含指定元素名称的全部元素
      1. 语法：$("li:has('p')") 即选择包含p标签的li元素
      2. 注：区别于:contains(text)选择器，一个参数是元素名称，一个参数是文本内容
    6. :hidden过滤选择器： 功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。
      1. 语法：$("input:hidden")
      2. 注：仅是获取元素而已，不改变元素原本的hidden属性
    7. :visible过滤选择器： 获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。
    8. [attribute=value]属性选择器：
      1. 语法：$("li[title='我最爱']") 即选择所有title属性=“我最爱”的li标签
      2. 注：
        1. 其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。
        2. []里面用的是“=”号，而不是“==”号，区别开逻辑运算
        3. []里面的单引号可以省略不写
    9. [attribute!=value]属性选择器： 获取不包含属性名，或者与属性名和属性值不相同的全部元素
      1. 语法：$("li[title!='我最爱']")
      2. 注：不包含属性名的也会被选择出来，而不只是属性名和属性值不相等的元素
    10. [attribute*=value]属性选择器： 获取属性值中包含指定内容的全部元素
    11. :first-child子元素过滤选择器： 获取每个父元素中返回的首个子元素
      1. 注：
        1. 其child所针对的是其父元素的child，即本元素的兄弟元素，而非本元素的child
        2. 选择li标签中的第一个标签应该是：$("li:first-child")，而非$("il:first-child")
    12. :last-child子元素过滤选择器：
    13. 注意：
      1. 过滤选择器必须要搭配其他选择器应用，即“：”之前必须有选择器，否则针对的是所有元素；
      2. “：”之前不能有空格，即前面的选择器应紧挨着“：”，否则过滤选择器无效；
  4. jQuery 表单选择器：
    1. :input：返回全部的表单元素， 不仅包括所有标记的表单元素，而且还包括