• 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法


    (一)认识JQuery 

         JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法

            JQuery的主旨:以更少的代码,实现更多的功能

    (二)JQuery的优势

        1)可以像CSS一样访问和操作DOM

        2)修改CSS控制页面外观

        3)简化JS代码操作

        4)事件代理更加容易

        5)动画效果使用方便

        6) Ajax技术更加完美

        7)大量的基于Jquery的插件

        8)可以自定义扩展功能插件

    (三)JQuery的语法

        格式:$(selector).action()
        美元符号$本身是Jquery对象的缩写
        选择符selector查询和查找HTML元素
        Action执行对元素的操作
        实例:$("p").hide():隐藏P元素

        这里提供一个JQuery的在线API:http://jquery.cuishifeng.cn/

    (四)多库冲突

          解决多库冲突:jQuery.onConflict()方法放弃$符号,后面使用JQuery对象的时候就不能在使用$符号,而要使用JQuery

    (五)原生JS对象和JQuery对象之间的转换

        JS对象--》JQuery对象:

            var p=document.getElementById('p');

            $(p);//转换成JQuery对象了

        JQuery对象--》JS对象:

            $(p).get(0)或者$(p)[0]//这样就得到JS原生对象了

    (六)DOM操作

      1)设置元素以及内容:
        方法名                          描述
        html()                     获取元素中的HTML内容
        html(value)                  设置元素中HTML内容
        text()                      获取元素中文本内容
        text(value)                   设置元素中文本内容
        val()                      获取表单元素中的文本内容
        val(value)                   获取表单元素中的文本内容
       2)操作元素属性 //说明:这是对标签元素属性的操作,不是CSS样式表中的属性
        attr(key)                    获取元素key属性的属性值
        attr(key,value)                设置元素key属性的属性值
        attr({key1:value1,key2:value2})      设置元素多个key属性的属性值,方法的参数就是一个Object对象
        attr(key,function(index,value){})     设置元素key通过fn来设置

      3)操作CSS样式

        方法名                       描述
      css({name1:value1,name2:value2})       设置元素多个CSS样式
      addClass(class)                   给每个元素添加一个CSS类
      addClass(class1 class2 class3)         给元素增加多个CSS类
      remove(class)                  删除元素的一个CSS类
      removeClass(class1 class2 class3)       删除元素的多个CSS类
      toggleClass(class)                来回切换默认样式和指定样式

  • 相关阅读:
    【PS技巧】常用概念和功能操作
    【存储】RAID磁盘阵列选择
    【Python 01】Python一种面向对象、解释型计算机程序设计语言
    【PS技巧】如何校正倾斜的图片
    【阿里巴巴大数据实践笔记】第14章:存储和成本管理
    【阿里巴巴大数据实践笔记】第13章:计算管理
    【阿里巴巴大数据实践笔记】第9章:阿里巴巴数据整合及管理体系
    今晚直播丨抢鲜体验-openGauss入门
    详述一则数据库死锁故障的分析过程
    前端学习笔记(一)HTML入门
  • 原文地址:https://www.cnblogs.com/shangxinfeng/p/6790432.html
Copyright © 2020-2023  润新知