jQuery的选择器与Dom操作

第一章 认识jQuery

一、jQuery简介
jQuery就是一个优秀的JavaScript库，是一个简洁的语法和跨平台的兼容性，简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。其理念：write less,do more.

二、jQuery使用方式
官方文档：https://jquery.com
进入网页后点击DOwnload下载自己所需要的版本，不同的版本有着不同的兼容性。

第二章 jQuery的选择器

一：选择器分为三大类：基本选择器、层次选择器、过滤选择器，表单选择器
1：基本选择器

   所有元素选择器  *               $("*")
   标签选择器  标签名              $("标签名")
   ID选择器    #id                      $("#id")
   类选择器    .className         $(".className")
   群组选择器  .比如one,.two   多个选择器使用逗号分隔   $(".one..two")
   复合选择器  .比如one.two   多个选择器组合使用     $(".one .two")

2:层次选择器

  后代选择器   比如body div      $("body div")
  子代选择器  body>div                $("body>div ")
  兄弟选择器  #two~div

3.过滤选择器
过滤选择器又分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象过滤选择器。
1：基本过滤选择器

  selector:first  获取所有已选择的元素中的第一个元素
  selector:last   获取所有已选择的元素中的最后一个元素
  selector:even    获取所有已选择到的元素中的索引为偶数的元素
  selector:odd     获取所有已选择到的元素中的索引为奇数的元素
  selector:eq(index) 获取所有已选择的元素中的索引为index的元素，index从0开始
  selector:lt(num)   获取所有已选择的元素中的索引值小于num的元素
  selector:gt(num)   获取所有已选择的元素中的索引值大于num的元素
  selector1:not(selector2)  获取所有已选择的元素中的除了selector2的元素
  selector:header   获取所有已选择的元素中的标题元素
  selector:animated   获取选择当前正在执行动画的所有元素

2：内容过滤选择器

  selector:contains(text)   获取所有含有文本“text”的元素.
  selector:empty     获取所有已选择到的元素中的空元素
  selector:parent    获取所有已选择到的元素中的非空元素
  selector1:has(selector2)   获取所有已选择到的元素中包含selector2的元素

3：可见性过滤选择器

    selector:visible   获取所有可见元素
    selector:hidden    获取所有不可见元素   

4：属性过滤选择器

   selector[title]   获取所有已选择的元素中具有属性title的元素
   selector[title=test]    获取所有已选择的元素中属性title的值为test的元素
   selector[title!=test]  获取所有已选择的元素中属性title的值不等于以test的元素
   selector[title^=test]  获取所有已选择的元素中属性title的值为以test开头的元素
   selector[title$=test]   获取所有已选择的元素属性title的值为以test结尾的元素
   selector[title*=test]    获取所有已选择的元素属性title属性值为包含test的元素
 

5：子元素过滤选择器

   selector:nth-child(index) 获取每个selector元素中索引为index的子元素。index从1开始
   selector:first-child      获取每一个selector父元素中的第一个子元素
   selector:last-child       获取每一个selector父元素中的最后一个子元素
   selector:only-child       获取每一个selector父元素中的只有一个子元素的元素
   selector:first-of-typ     获取每个selector元素中同类型子元素中的第一个
   selector:last-of-type     获取每个selector元素中同类型子元素中的最后一个

6：表单对象过滤选择器

   :checked    选取所有被选中的元素，用于复选框、单选框、下拉框
   :selected   选取所有被选中的元素，该选择器只适用于<option>
   :focus      选取当前获取焦点的元素
   :text       选取所有的单行文本框
   :password   选取所有的密码框
   :input      选取所有的<input>,元素。
   :enable     选取所有可用元素，仅用于支持disable属性的html元素
   :disable    选取所有不可用元素，仅用于支持disable属性的html元素。
   :radio      选取所有的单选框
   :checkbox   选取所有的多选框
   :submit     选取所有的提交按钮
   :image      选取所有的input为image的表单元素
   :reset      选取所有的input为reset的表单元素
   :button     选取所有的input为button的表单元素
   :file       选取所有的input为file的表单元素

第三章 jQuery中的Dom操作

1、查找dom节点
通过上述选择器查找
2、创建dom节点

  元素节点：var Dom = $("<div></div>")
  文本节点：var Dom = $("<div>文本内容</div>")

3、插入dom节点

  $A.append(B)将B追加到A的末尾     $("div").append("文本");
  
  $A.appendTo(B)将A追加到B的末尾
 
  prepend()     在被选元素的开头插入内容。          $("div").prepend("在开头追加文本");
       $A.prependTo(B)  将A追加到B的前面
       $A.after(B)   在A之后追加B，作为它的兄弟元素    $("div").after("<div></div>");
       $A.insertAfter(B)  在B之后追加A，作为它的兄弟元素  $('.selectorB').insertAfter('.selectorA')
       $A.before(B)    在A之前追加B，作为它的兄弟元素   $("div").before("<div></div>");
       $A.insertBefore(B)   在B之前追加A，作为它的兄弟元素  $('.selectorB').insertBefore('.selectorA')

4、删除dom节点

remove()  删除被选元素（及其子元素）可接受一个参数，允许您对被删元素进行过滤。 $("#div1").remove();
detach()    与remove()类似，但是detach()保存所有jQuery数据和被移走的元素的相关联事件。
empty()   从被选元素中删除子元素   $("#div1").empty();

5、复制dom节点

 $("#id").clone(false);
  该方法返回的是一个节点的引用，参数默认为false，为浅复制；
  参数是true,为深复制，含义是：复制元素和元素中所绑定的事件。

6、替换dom节点

   replaceWith(newContent);  用新内容替换所匹配的元素，返回被删除的元素的集合。会删除节点所有数据和事件处理程序。
   replaceAll(target);  用匹配元素替换每个目标元素。

7、包裹dom节点

$(selector).wrap(wrappingElement,function(index))  使用指定的 HTML 元素来包裹每个被选元素。
$(selector).wrapAll(wrappingElement) 使用指定的 HTML 元素来包裹所有被选元素。
$(selector).wrapInner(wrappingElement,function(index))  使用指定的 HTML 元素来包裹每个被选元素中的所有内容（innerHTML）。

8、dom节点遍历

   children([selector]) 
        用于匹配元素的子元素集合(只考虑子元素而不考虑任何后代元素)
      $('.content.inner')=>$('.content').children('.inner');  
   find(selector)
        在当前对象元素中的子元素查找，和参数所匹配的所有的后代元素
   next([selector])
        取得匹配的元素集合中每一个元素紧邻的后面兄弟元素
   nextAll([selector])
        查找当前元素之后所有的同辈元素
   prev([selector])
         取得匹配元素前面紧邻的兄弟元素
   prevAll([selector])
         取得当前元素之前所有的同辈元素
   silibinng([selector])
         取得匹配元素的前后所有的兄弟元素
   closest(selector)
         取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素
   filter(selector)
         把当前所选择的所有元素再进行筛选过滤
   parent([selector])
         取得匹配元素的集合中，每个元素的父元素
   parents([selector])
         获得集合中每个匹配元素的祖先元素