day17--JQuery

时间:2020-12-02 07:52:17

    JQuery(中文社区:http://jquery.cuishifeng.cn/)

  模块  类库  在不同语言叫法不一样而已

  DOM/BOM/JavaScript的类库

  一、查找元素

    JQuery:

      选择器:直接找到某个或某些标签

      1.id

        $("$id")

      2.class

        <div class="c1"></div>

        $(".c1")

      3.标签

        $("a")     查找所有的<a>标签

      4.组合

        $("a,.c2,#i10")  查找<a>标签或class="c2"或id="i10"的标签

      5.层级

        $("#i1 a")  查找标签属性id="i1"下面的<a>标签

        $("#i1 >a")   查找标签属性id="i1"的子标签

      6.基本筛选器

        :first     #找到标签下面的第一个标签

        :gt(index)   :lt(index)    :ep(index)   :last 

      7、属性

        $('[attribute]')                                    具有attribute属性的所有标签

        $('[attribute="value"]')             属性等于attribute且值等于value的标签

      筛选

      实例:

        多选,反选,全选

        - 选择权

        -

          $("tb:checkbox").prop("checked")                                 #获取值

          $("tb:checkbox").prop("checked",true)                          #设置值

        -      $("#tb:checkboc").each(function(){

            //k当前索引

            //this,DOM,当前循环的元素$(this)

            }}

        -  var v=条件?false:true                         #三元运算  ,取反,真值,取假;假值,取真。

    PS:

      1.x           推荐使用1.x系列,兼容性好

      2.x

      3.x

      转换

        Jquery对象转换为Dom对象      $('#i1')[0] ===》document.getElementById("i1")

        Dom对象                                      ===》   $(Dom对象)

    引用:

      在<body>下面引用<script src="jquery-1.12.4.js"><script>引用Jquery内容

    筛选器:    --- JQuery里面根据当前标签进行筛选的标签

      $().next()                 #当前标签的下一个标签

      $().prevAll()           #查找上面所有的标签

      $().prevUntil()        #查找上面同级标签,指导截至条件位置的标签

      $().prev()                 #当前标签的上一个标签

      $().parent()              #当前标签的父标签

      $().parents()             #查找标签的所有父标签,包括祖父,祖先,顶端<html>

      $().parentsUntil()    #查找父级标签的上级标签截至

      $().children()           #当前标签所有的子标签

      $().text()                  #获取标签的内容

      $().siblings()            #获取所有的兄弟标签(sibling:兄弟姐妹)

      $().find('.content)     #查找class=content的标签

  二、操作元素

  ====》实例: