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

    一,查找节点
      1,查找元素节点
      使用选择器 var $li = $("ul li:eq(1)");
      2,查找属性节点
      attr()方法,传人一个参数返回相应属性值,传人两个参数,设置相应属性
    二,创建节点
      1,创建元素节点
      var $li_1 = $("<li></li>");
      $("ul").append($li_1);
      2,创建文本节点
      var $li_1 = $("<li>香蕉</li>");
      $("ul").append($li_1);
      3,创建属性节点
      var $li_1 = $("<li title="li">香蕉</li>");
      $("ul").append($li_1);
    三,插入节点
      append():$(A).append(B),向元素A内部追加B
      appendTo():$(A).appendTo(B),向元素B内部追加A
      prepend():$(A).prepend(B),向元素A内部前置B
      prependTo():$(A).prependTo(B),向元素B内部前置A
      after():$(A).after(B),在A元素的后面添加B
      insertAfter():$(A).insertAfter(B),在B元素的后面添加A
      before():$(A).before(B),在A元素的前面添加B
      insertBefore():$(A).insertBefore(B),在B元素的前面添加A
    四,删除节点
      1,remove()方法
      同时删除了其后代节点,删除了绑定的事件,返回一个指向已被删除的节点的引用,还可以继续使用
      可以通过传递参数选择性的删除
      2,detach()方法
      所有绑定的事件,附加的数据都会保留下来
      3,empty()方法
      清空节点,删除所有后代节点
    五,复制节点
      clone(),传人参数true,表示同时复制了元素绑定的事件
    六,替换节点
      replaceWith(),$("p").replaceWidth("<li></li>"),用li替换p标签,同时替换了原有绑定的事件
      replaceAll(),$("<li></li>").replaceAll("p"),同上
    七,包裹节点
      wrap(),$("strong").wrap("<b></b>"),用b标签包围strong标签,标签之前没有空隙
      1,wrapAll()方法,用法同上,效果是有格式,包围标签和被包围标签之间换行
      2,wraplnner()方法,$("strong").wraplnner("<b></b>"),将strong标签的子元素用b标签包围
    八,属性操作
      1,获取属性设置属性
      attr()方法,传入一个参数即属性名称,返回相应的属性值,传入两个参数属性名和属性值,设置属性
      attr("":"","":""),用来设置同一个元素的多个属性
    2,删除属性
      removeAttr(),传入要删除的属性名称
    九,样式操作
      1,获取样式和设置样式
      $("").attr("class"),返回某个对象的class属性
      $("").attr("class",""),设置某个对象的class属性,会替换原有类
      2,追加样式
      addClass(),追加一个新的class属性
      3,移除样式
      removeClass(),传入一个要删除的类
      4,切换样式
      toggle(function(){},function(){})
      toggleClass(),传入一个类名,进行交替添加删除
      5,判断是否含有某个样式
      hasClass(),传入一个要判断的类名,存在返回true,不存在返回false
      is(".class")
    十,设置和获取HTML,文本和值
      1,html(),获取和设置某个元素中的HTML内容,参数为空表获取,参数为html格式为设置
      2,text(),获取和设置某个元素中的文本内容,参数为空表获取,参数为文本表添加设置
      3,val(),用来获取和设置某个元素(文本框,下拉列表,单选框)的值,如果为多选返回所有选择的值的数组
      defaultValue属性,指当前文本框的默认值
    十一,遍历节点
      1,childer(),返回所有子元素
      2,next(),后面紧邻的同辈元素
      3,prev(),前面紧邻的同辈元素
      4,siblings(),前后所有的同辈元素
      5,closest(),返回最先匹配的祖先元素,从自身开始搜索
      6,parent(),返回父元素,parents(),返回祖先元素,closest(),最先匹配的祖先元素
    十二,css-dom操作
      css(),获取和设置元素的样式属性
      设置透明度使用opacity属性,获取设置高度使用height属性,获取设置宽度使用width属性
      $("p").css("opacity":"0.5").height(100).width()
      1,offset()
      获取元素当前视窗的相对偏移,返回两个属性top和left
      $("p").offset().left;
      2,position()
      获取元素position样式设置为relative或者absolute的父节点的相对偏移,返回对象包括两个属性top和left
      3,scrollTop()和scrollLeft()
      分别 获取和设置滚动条距顶端和左端的距离

  • 相关阅读:
    IO—》字节流&字符流
    IO—》递归
    IO—》File类
    IDEA快速升级模块版本号
    redis使用Jackson2JsonRedisSerializer序列化问题
    git 创建管理多用户
    linux后台启动程序脚本实例
    linux 安装配置kafka脚本
    linux 安装配置zookeeper脚本
    linux安装配置JDK脚本
  • 原文地址:https://www.cnblogs.com/b0xiaoli/p/3675110.html
Copyright © 2011-2022 走看看