• 认识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)                来回切换默认样式和指定样式

  • 相关阅读:
    extjs__(grid Panel绑定数据)
    web项目中对post请求乱码处理
    lucene之Field属性的解释
    spring整合mybatis框架
    jasperreports实现pdf文档的生成
    ireport图形化界面生成pdf文档
    iText框架(生成pdf文档)
    spring配置问题
    动手实践PHP7的HashTable
    基于epoll实现一个IO多路复用的回声服务器
  • 原文地址:https://www.cnblogs.com/shangxinfeng/p/6790432.html
Copyright © 2020-2023  润新知