jQuery查找

1. 查找: 

 jQuery新增的选择器: 

  可见性过滤: 2个

    :visible  选择可见的元素

    :hidden  选择隐藏的元素

     只能匹配: display:none和type="hidden"的两种隐藏元素

  内容过滤: 2种: 

    1. 根据元素内容中的文本关键字作为搜索条件

      :contains(关键字)

    2. 根据元素下的子元素的特征作为搜索条件

      :has(selector)

       选择子元素中有符合selector要求的  父元素

   

    :empty 选择内容为空的元素

    :parent 选择内容不为空的元素

  状态过滤: CSS3中的: 

   :disabled  :enabled   :checked  :selected

  表单元素过滤: 

   :input 选择表单中的表单元素: button input select textarea

      input 是元素选择器，只能选择input元素

   每一种type属性都对应着一种input

   每一种type属性都有专门的一个选择器跟它对应

    :text  :password  :checkbox   :radio   :submit  :reset...

 

2. 修改: 同DOM

 内容: 

  1. 原始HTML片段: $().html([新HTML片段])  .innerHTML

  2. 纯文本内容: $().text([新文本])  .textContent

  3. 表单元素的值: $().val ([新值])    .value

 属性:

  1. HTML标准属性: 2种访问方式: 

     1.核心DOM API:

      $().attr("属性名"[,新值])  .getAttribute()/.setAttribute()

     2. HTML DOM API:

      $().prop("属性名"[,新值])  elem.属性名

  2. 状态属性:

      $().prop("状态"[,bool])   elem.状态

  3. 自定义扩展属性:

      $().attr("自定义属性")   .getAttribute()/.setAttribute()

  其实attr和prop可一次修改多个属性:

   $().attr/prop({

     属性名:值,

     属性名:值,

   })

 样式:

  $().css("css属性"[,新值])  修改: elem.style.css属性=值

                   获取: var style=getComputedStyle(elem)

                           style.css属性

  $().css({

    css属性:值, //jQuery中长度数值不用加单位！

       ... : ... ,

  })

 

  用class批量修改元素的样式:

   $().addClass("class1 class2")

   $().removeClass("class1")

   $().hasClass("class1")

  

   $().toggleClass("class1") 在有或没有class1之前切换

   相当于: if(!$btn.hasClass("down"))

            //为当前按钮添加down class

            $btn.addClass("down");

          else//否则(有)

            //为当前按钮移除down class

            $btn.removeClass("down");

   

3. 按节点间关系查找: 

 2大类:

 1. 父子:

  $().parent()   elem.parentNode

  $().children(["selector"])  elem.children

     $().find("selector")  查找所有后代元素中符合selector的元素

  $().children(":first-child")  elem.firstElementChild

  $().children(":last-child")   elem.lastElementChild

 2. 兄弟:

  $().prev()   elem.previousElementSibling

    $().prevAll()  之前所有

  $().next()   elem.nextElementSibling

    $().nextAll()  之后所有

  $().siblings()  选除当前元素自己之外的所有

 

4. 添加/删除/替换/克隆

 添加: 2步:

  1. 用$("html片段")创建新元素，及其子元素

    var $elem=$("html片段");

  2. 将$()创建的新元素追加到DOM树上

     $(父元素).append($elem)  父元素.appendChild(elem)

       $(elem).appendTo(父元素)

      返回值: $(父元素).append()  return 父元素

             $(elem).appendTo()  return 子元素elem

     $(父元素).prepend($elem) 在开头插入

       $(elem).prependTo(父元素)

 

     $( child).before(elem)    父元素.insertBefore(elem, child)

     $(child).after(elem) 将elem插入到child之后

 

     $(child).replaceWith(elem)父元素.replaceChild(elem, child)

     $(elem).replaceAll(child) return 新子元素elem

 删除: $().remove()