zoukankan      html  css  js  c++  java
  • 第四章 jQuery节点操作

    1.DOM操作分为三类:
    (1)DOM Core:任何一种支持DOM的编程语言都可以使用用它
    如:getElementById()
    (2)HTML-DOM:用于处理HTML文档,如document,forms
    (3)CSS-DOM:用于操作CSS,如:element.style.color="green";

    2.直接设置样式css():
    (1)css(name,value);
    (2)css({name:value,name:value,name:value});

    3.追加和移除样式:、
    (1)追加样式
    addClass(class)
    addClass(class1 class2.....)
    (2)移除样式
    removeClass("style2")
    removeClass("style1 style2")

    4.切换样式:
    toggleClass() 模拟了addClass()与removeClass()实现样式切换的过程

    5.html()和test()的区别:
    html() 用于获取第一个匹配元素的HTML内容或文本内容
    html(content) 用于设置所有匹配元素的HTML内容或者文本内容
    text() 用于获取所有匹配元素的文本内容
    text(content) 用于设置所有匹配元素的文本内容

    6.value值操作:
    获取value值:$(this).val();
    改变value值:$(this).val("");

    7.工厂函数$()用于获取或创建节点
    $(selector):通过选择器获取节点
    $(element):把DOM节点转化为JQuery节点
    $(html):使用HTML字符串创建JQuery节点

    8.插入子节点:
    append(contend) $(A).append(B)表示将B追加到A中
    appendTo(contend) $(A).appendTo(B)表示将A追加到B中
    prepend(contend) $(A).prepend(B)表示将B前位置插入到A中
    prependTo(contend) $(A).prependTo(B)表示将A前位置插入到B中

    9.插入同辈节点:
    after(contend) $(A).after(B)表示将B插入到A之后
    insertAfter(contend) $(A).insertAfter(B)表示将A插入到B之后
    before(contend) $(A).before(B)表示将B插入到A之前
    insertBefore(contend) $(A).insertBefore(B)表示将A插入到B之前

    10.替换节点:
    replaceWith():后面一个节点替换掉前面一个节点
    replaceAll():前面一个节点替换掉后面一个节点

    11.复制节点:clone()用于复制某个节点

    12.删除节点:
    remove():删除整个节点
    detach():删除整个节点,保留元素的绑定事件,附加的数据
    empty():清空节点内容

    13.获取和设置节点属性:
    attr():获取节点属性
    attr({属性:"值1",属性:"值2"}):设置节点属性

    14.删除属性:removeAttr();

    15.遍历子节点:children()方法可以用来获取元素的所有子元素
    注:在方法括号中写上选择器,表示子元素中哪一个

    16.遍历同辈元素:
    next([expr]) 用于获取紧邻匹配元素之后的元素
    prev([expr]) 用于获取紧邻匹配元素之前的元素
    siblings([expr])用于获取位于匹配元素前面和后面的所有同辈元素
    注:括号里面可以加上选择器,表示选定某些元素

    17.遍历前辈节点:
    parent():获取元素的父级元素
    parents():获取元素的祖先元素

    18.CSS-DOM
    css() 设置或返回匹配元素的样式属性
    height([value]) 设置或返回匹配元素的高度
    width([value]) 设置或返回匹配元素的宽度
    offset([value]) 返回以像素为单位的top和left坐标,此方法仅对可见元素有效。

  • 相关阅读:
    线段树 by yyb
    【SYZOJ279】滑稽♂树(树套树)
    【BZOJ2806】Cheat(后缀自动机,二分答案,动态规划,单调队列)
    【BZOJ2733】永无乡(线段树,并查集)
    【BZOJ4991】我也不知道题目名字是什么(线段树)
    【BZOJ4999】This Problem Is Too Simple!(线段树)
    【BZOJ1858】序列操作(线段树)
    【BZOJ1835】基站选址(线段树)
    【BZOJ2962】序列操作(线段树)
    【BZOJ1558】等差数列(线段树)
  • 原文地址:https://www.cnblogs.com/suola/p/8275962.html
Copyright © 2011-2022 走看看