zoukankan      html  css  js  c++  java
  • JQuery中的DOM操作:


    Dom分为:DOM Core(DOM核心),HTML-DOM,CSS-DOM
    (1)查找元素节点:属性选择器
    (2)查找属性节点:.attr(),例如:var $para=$("p");var p_txt=$para.attr("title");alert(p_txt);获取<p>节点的title属性
    (3)创建节点:var $li=$("<li title="123">456</li>"),$("ul").append($li);
    (4)插入节点:
    .append()向每个匹配的元素都追加内容。
    .appendTo()将所有匹配的元素都追加到指定的元素中。
    .after()在所有匹配的元素之后插入内容。
    .insertAfter()将所有匹配的元素插入到指定的元素后面。
    .before()在每个匹配的元素之前。
    .insertBefore()将所有的匹配元素插入到制定元素之前。
    (5)删除节点:
    .remove(),删除后的节点还是可以用的,(其实不是删除,只是拿到其他地方暂放,要是不用就等于删除)
    例如:$("ul li").remove(),<li>里的子节点都拿出来了,
    $("ul li").remove("li[title!=123]"),按要求来
    .empty(),清空节点里的所有元素,但是不包括目标节点。
    (6)复制节点:.clone(),;例如:$("ul li").click(function(){$(this).clone().appendTo("ul")})但是这样做是不具有任何行为的。
    需要连同行为一同复制,需要加入参数true$("ul li").click(function(){$(this).clone().appendTo("ul")})。
    (7)替换节点:
    .replaceWith(),将<li>替换<p>:$("p").replaceWith("<li></li>")
    .replaceAll(),正好相反$("<li></li>").replaceAll("p")、
    注意:替换后原来绑定的方法没了,需要重新绑定
    (8)包裹节点:
    .wrap()$("strong").wrap("<b></b>")用<b>标签包住所有匹配的<strong>标签(一对一,每个匹配的都有)
    .wrapAll()所有的何在一起被一个包裹。
    .wrapInner()将字内容包裹起来。
    (9)属性操作:
    .attr()
    获取属性值:var $para=$("p");var p_tet=$para.attr("title");
    设置属性值:$("p").attr("name","123");
    设置多个属性:$("p").attr({"title":"1234","name":"567"});
    注意:JQuery中很多都是获取和设置同一个函数,html(),text(),height(),width(),val(),css()等
    删除属性:.removeAttr()
    (10)样式操作:
    .attr():设置样式,
    .addClass()追加样式,即两个样式重叠,但是如果冲突,后面的覆盖前面的
    .removeClass()移除样式,.removeClass("c1").removeClass("c1")=.removeClass("c1 c2"),没有参数就删除所有样式ghgg
    切换样式:
    1、使用toggle(),
    2、使用toggleClass(),$("p").toggleClass("c3"),如果有就删除,如果没有就追加
    判断是否含有某个样式:.hasClass(),$("p").hasClass("c4"),有返回true,没有返回false。(注意:该方法只为了增加可读性,JQuery内
    部调用的是.is()方法,$("p").hasClass("c4")等价于$("p").is(".c4"))
    (12)设置和获取HTML、文本和值
    .html()获取和设置html内容包含里面的标签(可用于xhtml,不能用于xml)
    .text()获取和设置元素文本
    .val()获取和设置元素的值(.val()是从最后一个往前读的,如果选项的value或者text之中任意一项符合就会被选中,都会显示先选中的)
    (12)遍历节点
    .children()获得匹配的子元素的集合(只是子元素)
    .next()获取同辈的下一个
    .prev()获取前一个
    .siblings()获取同辈的所有元素
    .closest()用来寻找最近的匹配元素。首先检查当前元素是否匹配,如果匹配则直接返回元素本身,如果不匹配则向上查找父元素,逐级向
    上直到找到,如果没找到就返回空。
    (13)CSS-DOM操作:
    .css()不再多写,注意.css()获得的高度可能是auto,“10px”等,是设置的值,height()获得的是实际值,与设置无关,且没有单位。
    .offset()获得相对偏移,包含top和left属性
    .position()获得相对于最近一个position样式设置为relative或者absolute的祖父节点的相对偏移。
    .scrollTop().scrollLeft()获取和设置滚动条的位置

  • 相关阅读:
    spring boot拦截器中获取request post请求中的参数
    netty与spring学习
    拦截器,过滤器,监听器
    CA 根证书不在“受信任的根证书颁发机构”存储区
    SpringBoot整合Shiro
    远程服务接口聚合带来的性能提升
    常见软件安全性漏洞及处理
    Mybatis中的CDATA标签
    idea运行固定多个模块项目
    理解Node.js事件驱动编程
  • 原文地址:https://www.cnblogs.com/yhongyu/p/2379624.html
Copyright © 2011-2022 走看看