jQuery(一)

一.什么jQuery?
    类库类似于python中的模块
二.jQuery如何使用?
    导入jQuery文件->script标签导入
        1.直接下载jQuery的js文件,然后放在目录下,src指向该文件
        2.CDN
            示例:

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 
必须联网    

三.jQuery选择
    1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了
    2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x
    3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

    维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
四.jQuery对象

    DOM对象转换成jQuery对象
        ele --> $(ele)
        
    jQuery对象转换成DOM对象
        $ele --> $ele[index]

    *jQuery对象赋值给变量的时候,变量名最好以$开头,方便区分

五.jQuery基础语法

    $(selector).action()

六.选择器
    id选择器:

 $("#id")

    标签选择器

 $("tagName")

    class选择器

 $(".className")  

    所有元素选择器

$("*")

    组合选择器

$("#id,.className,tagName")       

    层级选择器

  子子孙孙选择器: $("选择器1 空格 选择器2")
  儿子选择器:     $("选择器1 > 选择器2")
  毗邻选择器:     $("选择器1+选择器2")
  弟弟选择器:     $("选择器1~选择器2")

七.基本筛选器:

    :first  // 第一个
    :eq(index)  // 索引等于index的那个元素
    :last  // 最后一个
    :even  // 匹配所有索引值为偶数的元素,从 0 开始计数
    :odd  // 匹配所有索引值为奇数的元素,从 0 开始计数
    :gt(index)  // 匹配所有大于给定索引值的元素
    :lt(index)  // 匹配所有小于给定索引值的元素
    :not(选择器)      // 去除所有与给定选择器匹配的元素
    :has(选择器)      // 匹配含有选择器所匹配的元素的元素

八.属性选择器

    语法:
        [attribute=value]  // 属性等于
        [attribute!=value]    // 属性不等于
    示例:
        $("input[type='checkbox']");  // 取到checkbox类型的input标签
        $("input[type!='text']");  // 取到类型不是text的input标签
        $("input[type='text']")  
    
    注意:双引号里面用单引号

九.表单

    :input             选取所有的<input>,<textarea>
    :text             选取所有的单选文本框
    :password         选取所有的密码框
    :radio             选取所有的单选框
    :checkbox         选取所有的多选框
    :submit             选取所有的提交按钮
    :image             选取所有的图像按钮
    :reset             选取所有的重置按钮
    :button             选取所有的按钮
    :file             选取所有的上传域

 


十.表单对象属性

    :enabled         选择所有可用元素
    :disabled         选取所有不可用元素
    :checked         选取所有被选中的元素
    :selected         选取所有被选中的选项元素(下拉)集合元素 

十一.
    和上面的区别:上面的是写在引号里面的,这个是作为方法来使用的
        * 括号里面都可以加选择器条件
    

    往后找:     
        .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 @ 2017-11-26 18:01  莫逆ll  阅读(70)  评论(0)    收藏  举报