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

 

posted on 2017-04-30 21:09  真亦假  阅读(395)  评论(0编辑  收藏  举报

导航