浅谈jQuery使用背景

        jQuery是使用原生js写成的一个库,使用简单,提高开发效率。在用js冗杂的代码解决的问题中,大部分都可以用jQuery来快速解决。

        例如:

        js中查询网页中ID为"d1"的标签是这样的

document.getElementByID("d1")

       但是在引用了jQuery库后,代码是这样的

 

$("#d1")

   事实显而易见,jQuery要比原生js简洁很多

 

jQuery引用方法

   1. 直接下载文件,然后放到目录下,src指向该文件
      2. CDN <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 必须联网

       在jQuery中,引用方法类似python中的引用类方法,jQuery.xxx不过在这里一律使用$来替代jQuery

jQuery基础:

  和原生js一样,jQuery的使用准则仍然是先查询到标签再对标签进行操作,所以查询标签依然是最重要的一点

  选择器

          id选择器: $("#id值")
          class选择器: $(".c1")
          大包大揽选择器:$("*")
          标签名选择器: $("div") $("a") $("p")
          组合选择器:$("#i1, p")

  jQuery对象

          DOM对象转换成jQuery对象
          ele --> $(ele)
        
          jQuery对象转换成DOM对象
          $ele --> $ele[index]
        
          *jQuery对象赋值给变量的时候,变量名最好以$开头,方便区分

          jQuery对象:
          DOM对象转换成jQuery对象
          ele --> $(ele)
        
          jQuery对象转换成DOM对象
          $ele --> $ele[index]
        
          jQuery在使用DOM方法时候一定要转换成DOM对象

    DOM对象要使用jQuery方法时候一定要转换成jQuery对象

  层级选择器

          层级下所有子代选择器: $("选择器1 空格 选择器2")
          层级下一层子代选择器:     $("选择器1 > 选择器2")
          毗邻选择器:     $("选择器1+选择器2")
          下位兄弟选择器:     $("选择器1~选择器2")

  筛选器

    筛选器内都是在("")里面

    使用方法    (":方法")

    参考方法地址:http://jquery.cuishifeng.cn/find.html

  属性选择器

          $("input[type='text']")  --> 注意:双引号里面用单引号

  表单选择器

    具体使用方法同筛选器,只能使用表单内的type,查询地址同上

  筛选器

             和上面的区别:上面的是写在引号里面的
          这个是作为方法来使用的
        
          * 括号里面都可以加选择器条件
        
          往后找:     
              .next()
              .nextAll()
              .nextUnitl()
            
          往前找:
              .prev()
              .prevAll()
              .prevUntil()
            
          往外层找:
              .parent()
              .parents()
              .parentsUntil()
        
          查找方法:
              .find()
                
        
          后代选择器: .children()
          兄弟选择器: .siblings()

    补充:
    
          not:
              写在引号里面的:        --> $("#my-checkbox input:not(:checked)")
              写在外面当方法用的      --> $("#my-checkbox input").not(":checked")
            
          has:
              写在引号内表示有什么的  --> $("label:has('input')")
              写在外面当方法用的:    --> $("label").has("input")

      具体多种方法查询依然遵循上述地址

  

posted on 2017-11-15 19:42  Symoon_g  阅读(471)  评论(0编辑  收藏  举报