zoukankan      html  css  js  c++  java
  • 使用jQuery快速高效制作网页交互特效---使用jQuery操作DOM

    DOM操作分类

    1、DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById() 
    2:HTML-DOM:用于处理HTML文档,如document.forms

    3:CSS-DOM:用于操作CSS,如element.style.color=”green”

    jQuery中的DOM操作

    样式操作

    1、设置和获取样式值

    语法:

    $(selector).css(name,value)

    或者

    $(selector).css({name:value,name:value,name:value...})

    CSS属性值的方法

    语法:

    $(selector).css(name)

    2、追加样式和移除样式

    追加样式:

    语法:
    $(selector).addClass(class);


    $(selector).addClass(class1 class2 … classN);

    移除样式:

    语法:
    $(selector).removeClass(“class”) ;


    $(selector).removeClass(“class1 class2 … classN “) ;
    3、切换样式

    toggleClass()

    语法:

    $(selector).toggleClass(class) 

    4、判断是否含指定的样式

    hasClass( )方法

    语法:

    $(selector). hasClass(class);

    内容操作con

    1、HTML代码操作

    html()方法

    语法:

    html({content})

    2、标签内容操作

    语法:

    text({content})

    html()方法和text()方法的区别

    3、属性值操作

    vall()方法

    语法:

    val({value})

    节点与属性操作

    节点操作

    jQuery中节点操作

    查找节点

    创建节点

    插入节点

    删除节点

    替换节点

    复制节点

    1、查找节点

    2、创建节点元素

    语法:

    $(selector):通过选择器获取节点

    $(element):把DOM节点转化成jQuery节点

    $(html):使用HTML字符串创建jQuery节点

    3、插入节点

          插入节点方法

    4、删除节点

    $(selector).remove({expr})

    empty()

     语法:

    $(selector).empty()

    5、替换节点

    6、复制节点

    语法:

    $(selector).clone([includeEvents])

    属性操作

    1、获取与设置元素属性

    attr()用来获取与设置元素属性

    语法:

    $(selector).attr([name]) ;   【获取属性值】

    $(selector).attr({[name1:value1]…[nameN:valueN]}) ;    【设置多个属性的值】

    2、删除元素属性

    removeAttr()用来删除元素的属性

    语法:

    $(selector).removeAttr(name) ;

    节点遍历

    1、遍历子元素

    children( )方法可以用来获取元素的所有子元素

    语法:

    $(selector).children([expr]);

    2、遍历同辈元素

    语法        功能

    next([expr])    用于获取紧邻匹配元素之后的元素

             $("li:eq(1)").next().addClass("orange");

    prev([expr])    用于获取紧邻匹配元素之前的元素

             $("li:eq(1)").prev().addClass("orange");

    slibings([expr])  用于获取位于匹配元素前面和后面的所有同辈元素

             $("li:eq(1)").siblings().addClass("orange");
    3、遍历前辈元素

    jQuery中可以遍历前辈元素

    parent():获取元素的父级元素

    parents():元素元素的祖先元素

    4、其他遍历方法

    a. each( ) :规定为每个匹配元素规定运行的函数

    语法:$(selector).each(function(index,element)) ;

    Index:选择器的位置

    Element:当前的元素

    CSS-DOM操作

    语法            功能

    css()        设置或返回匹配元素的样式属性

    height([value])    设置或返回匹配元素的高度

    width([value])    设置或返回匹配元素的宽度

    offset([value])    返回以像素为单位的top和left坐标。仅对可见元素有效

    offsetParent( )    返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素

    position( )      返回第一个匹配元素相对于父元素的位置

    scrollLeft([position])  参数可选。设置或返回匹配元素相对滚动条左侧的偏移

    scrollTop([position])  参数可选。设置或返回匹配元素相对滚动条顶

  • 相关阅读:
    Fixed Table Header jQuery Plugin
    jquery实现置顶和置底特效
    HTTP_REFERER头的使用方法
    为什么使用框架?
    javascript:history的一些用法
    揭秘BYOD五大隐藏成本
    PHP中冒号、endif、endwhile、endfor使用介绍
    面对业务开拓重任,CIO们普遍显得缺乏信心
    Asp.net中的页面传值
    DropDownList的用法
  • 原文地址:https://www.cnblogs.com/dabrk/p/11051942.html
Copyright © 2011-2022 走看看