Jquery学习记录

最新推荐文章于 2024-01-20 21:49:50 发布

张家浚xxlxck

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量172

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/dkz97/article/details/103514622

版权

基本目录

1.Jquery基本入门
1. 概念
2. 快速入门
3. JQuery对象和JS对象区别与转换
4. 选择器
5. DOM操作

概念:

是一个javaScript的框架，用于简化JS开发的
    主要优化html文档操作，事务处理，动画设计和ajax交互

快速入门

Js对象和JQuery对象的区别和相互转换

1.JQuery对象由于是框架封装了不少东西，使用起来会更加的方便
2.JQuery和JS的对象，方法不能互通，不能通用
3.相互转换:
    Js --> JQuery    $(js对象)
    JQuery --> Js:  JQuery对象[索引] \  JQuery.get(索引)

选择器

筛选具有相似特征的元素(标签)，就是按照条件把元素找出来，然后进行jq操作

    1.基本操作学习
        1.事件绑定

            $("选择器").click(function() {})

        2.入口函数
            $(function(){ 代码 }) 相当于 window.load = function() {}  不过jq的入口函数可以又多个，window的只能有一个

        3.样式控制
            $("选择器").css("属性名","属性值")

    2.选择器分类
        1.基本选择器:
            1.标签选择器
                语法: $("标签名称")  获取所有匹配该标签名称的元素

            2.id选择器
                语法: $("#id的属性值") 获取与指定id属性值匹配的元素

            3.类选择器
                语法: $(".类的值")   获取指定的class属性值匹配的元素

            4.并集选择器
                语法: $("选择器1,选择器2,..")   获取多个选择器中的元素

        2.层级选择器
            1.后代选择器
                语法: $("A B")  选择 A元素中的所有 B元素 把下面的各级全都拿了的

            2.子选择器
                语法: $("A > B")    选择A元素内部的B的子元素  只拿下一级的

        3.属性选择器
            1.属性名称选择器
                $("A[属性名]")  选择A元素并且有该属性名的元素

            2.属性选择器
                $("A[属性名='属性值']")   选择A元素并且里面有属性名与属性值匹配的元素

            3.复合属性选择器
                $("A[属性名1='属性值'][属性名2='属性值']")  选择A元素，但是需要有多个条件

        4.过滤选择器
            1. 首元素选择器
            	语法： :first 获得A元素中的第一个元素   $("A:first") 下面的以此类推

            2. 尾元素选择器
            	语法： :last 获得选择的元素中的最后一个元素

            3. 非元素选择器
            	语法： :not(selector) 不包括指定内容的元素

            4. 偶数选择器
            	语法： :even 偶数，从 0 开始计数

            5. 奇数选择器
            	语法： :odd 奇数，从 0 开始计数

            6. 等于索引选择器
            	语法： :eq(index) 指定索引元素

            7. 大于索引选择器
            	语法： :gt(index) 大于指定索引元素

            8. 小于索引选择器
            	语法： :lt(index) 小于指定索引元素

            9. 标题选择器
            	语法： :header 获得标题（h1~h6）元素，固定写法


        5. 表单过滤选择器
            1. 可用元素选择器
          	    语法： :enabled 获得可用元素

          	2. 不可用元素选择器
          		语法： :disabled 获得不可用元素

          	3. 选中选择器
          		语法： :checked 获得单选/复选框选中的元素

          	4. 选中选择器
          		语法： :selected 获得下拉框选中的元素

DOM操作

1.对标签内容进行操作的方法
    1. html(): 获取/设置元素的标签体内容   <a><font>内容</font></a>  --> <font>内容</font>
    2. text(): 获取/设置元素的标签体纯文本内容   <a><font>内容</font></a> --> 内容
    3. val()： 获取/设置元素的value属性值

2.对属性进行操作的方法
    1. 通用属性操作
        1. attr("属性名","属性值"): 获取/设置元素的属性 一个参数就获取，两个参数就设置
    	2. removeAttr("属性名"):删除属性
    	3. prop():获取/设置元素的属性
    	4. removeProp():删除属性

    	注意:attr和prop区别？
    		1. 如果操作的是元素的固有属性，则建议使用prop
    		2. 如果操作的是元素自定义的属性，则建议使用attr

    2. 对class属性操作
    	1. addClass("值"):添加class属性值
    	2. removeClass("值"):删除class属性值
    	3. toggleClass("值"):切换class属性
    		* toggleClass("one"):
    		* 判断如果元素对象上存在class="one"，则将属性值one删除掉。  如果元素对象上不存在class="one"，则添加
    	4. css("属性名","值"):



3. CRUD操作:
    a.添加子元素的4个方法，两组
        1. append():父元素将子元素追加到末尾
            对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
        2. prepend():父元素将子元素追加到开头
            对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
        3. appendTo():
            * 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
        4. prependTo()：
            * 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头


    b.添加同级元素的4个方法，两组
        5. after():添加元素到元素后边
            * 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
        6. before():添加元素到元素前边
            * 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
        7. insertAfter()
            * 对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1和对象2是兄弟关系
        8. insertBefore()
            * 对象1.insertBefore(对象2)： 将对象1添加到对象2前边。对象1和对象2是兄弟关系

    c.删除元素的方法
        9. remove():移除元素
            * 对象.remove():将对象删除掉
        10. empty():清空元素的所有后代元素。
            * 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点