jQuery 的基本使用

1. jQuery是 JavaScript 的类库 特点 是写得少 干得多

    1.1 jQuery优势

        ① 开源

        ② 便捷的 选择器

        ③ 方便的dom操作

        ④ 丰富的动画操作

        ⑤ 简单的ajax操作

        ⑥ 兼容性

        ⑦ 方便的插件机制

    1.2 jQuery缺点

        额外的 添加 jQuery文件,增加网络传输量

2. jQuery的基本语法

    https://www.jquery123.com/ [手册]


    2.1 jquery标准的使用方式

        标准入口

        $(document).ready(function(){

            JS ..

        });

        简写入口

        $(function(){

            JS...

        });


    2.2 ready和onload的区别

        1). 触发点

            ready 文档中的dom加载完就触发

            onload 文档中的一切都加载完 才触发

        2). 绑定逻辑

            ready 可以绑定多个事件(事件监听)

            onload 后面的绑定 会覆盖前面的代码


    2.3 链式操作风格

        JQDOM.css().attr().css();


    2.4 jQueryDOM 与 JSDOM 的区别 以及相互转化

        区别:

            JQDOM 通过 $() 获取到的是一个数组对象

            JSDOM 通过 GET... 获取到的是一个元素对象

        互相转换:

            JSDOM -> JQDOM    $(JSDOM)

            JQDOM -> JSDOM    JQDOM[index]   JQDOM.get(index)


    2.5 jquery命名冲突

        $



4. jQuery的选择器  

    4.1 基本选择器

        *       通配符选择器

        #id     ID选择器

        .class  class选择器

        tagName 标签选择器

        s1,s2,s3 组合/分组选择器

    4.2 层级选择器

        selecotor selecotor  所有的后代元素

        selecotor>selecotor  所有的子元素

        selecotor+selecotor  紧邻着的下一个同辈元素

        selecotor~selecotor  紧邻着的所有同辈元素

    4.3 过滤选择器

        :first         首个

        :last          最后一个

        :eq(index)     指定第几个

        :lt(index)     索引小于

        :gt(index)     索引大于

        :even          索引为偶数的,0索引算作为偶数

        :odd           索引为奇数的

        :header        所有的h标签

        :not(selector) 排除指定选择器所选的元素

    4.4 内容选择器

        :contains(text)  匹配包含指定文本的元素

        :has(selector)   匹配含有选择器的所匹配的元素的元素

        :parent          匹配含有子元素或文本的元素

        :empty           匹配所有不含子元素 或文本的元素

    4.5 可见性选择器

        :hidden       匹配所有不可见元素

        :visible      匹配所有可见元素

    4.6 属性选择器

        select[attrname]            选择有指定属性的元素

        select[attrname='value']    选择值 等于value的元素

        select[attrname!='value']   选择值 不等于value的元素

        select[attrname^='value']   选择值 以value开头的元素

        select[attrname$='value']   选择值 以value结尾的元素

        select[attrname*='value']   选择值 包含value的元素

        [][][][]....                多个属性选择器,进一步做筛

    4.7 子元素选择器

        :first-child    是否为首个子元素

        :last-child     是否为最后一个子元素

        :nth-child(n)   是否为父元素的第N个子元素

        :only-child     是否为父元素的唯一子元素(独苗)

    4.8 表单选择器

        :input 

        :text 

        :password 

        :radio 

        :checkbox 

        :submit 

        :image 

        :reset 

        :button 

        :file 

        :hidden 

    4.9 表单对象选择器

        :enabled    匹配所有可用元素

        :disabled   匹配所有不可用元素

        :checked    匹配所有被选中的元素

        :selected   匹配所有被选中的select元素

5. 筛选

    5.1 过滤

        eq(index)   过滤出指定的某个

        first()     过滤出首个

        last()      过滤出最后一个

        filter(selector) 过滤出满足后面条件的某些

        not(selector) 过滤排除

        slice(start, end)  截取出一部分JQDOM

        has(selector) 过滤出含有选择器的所匹配的元素的元素

        hasClass()  判断前面的集合中 是否包含指定的类

        is(selector) 判断前面的集合中 是否有元素符合后面的表达式

        map()        对JQ进行遍历,并取出一部分值出来

    5.2 查找

        都是具有破坏性的操作,找到的对象,可能就不是前面集合的子集

        children()  只找子元素

        find()      找后代元素

        parent()        父元素

        parents()       父元素们

        parentsUntil()  父元素们,到指定为某个为止

        offsetParent()  获取已定位的父元素

        closest()       逐级向上找父级,返回找到的父级

        next()          紧邻着的下一个同辈元素(后)

        nextAll()       紧邻着的所有的同辈元素(后)

        nextUntil()     紧邻着的同辈元素,直到某个为止(后)       

        prev()          紧邻着的下一个同辈元素(前)

        prevAll()       紧邻着的所有的同辈元素(前)

        prevUntil()     紧邻着的同辈元素,直到某个为止(前)

        siblings()      除了元素自己以外的同辈元素

    5.3 串联

        add()           向集合内 追加新元素

        andSelf()       之前选中的集合,加入到当前集合内

        end()           返回最后一个破坏性操作之前的状态

        contents()      获取所有的子节点(包括文本)

6. 文档处理

    6.1 内部插入

        append()       内部最后

        appendTo()     --

        prepend()      内部最前

        prependTo()    --

    6.2 外部插入

        after()         外部最后

        insertAfter()   --

        before()        外部最前

        insertBefore()  --

    6.3 包裹

        wrap()          将集合内的 每个元素包裹在 指定元素内

        wrapAll()       将整个集合元素包裹在 指定元素内

        unwrap()        去掉包裹

        wrapInner()     包裹在里面

    6.4 替换

        replaceWith()   替换谁

        replaceAll()    谁被替换

    6.5 删除

        remove()        删除元素

        empty()         清空子节点

    6.6 复制

        clone()         复制


download.jpg

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.5.2 Zero

WX:xcs345525801 QQ:345525801 Tel:19521445850 Email:xcssh868@163.com

Copyright © 2020 许承胜个人博客 版权所有 备案号:皖ICP备18014705号-1