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

    javascript的dom操作可以分为三个方面DOM core(核心) 、  HTML-DOM 和 CSS-DOM

    插入节点的方法append()          向每个匹配的元素的内部追加内容    $("p").append("<b>你好</b>")

    appendTo()        将所有的匹配的元素追加到指定的元素中。  $("<b>你好!!</b>").appendTo("p")

    prepend()   向每个匹配的元素前置内容。$("p").prepend("<b>你好</b>")

    prependTo()   将匹配元素添加到指定元素。$("<b>你好!</b>")prependTo("p")

    after()   insertAfter()before()insertBefore()

    删除节点:jquery提供了两个删除节点的方法remove()和empty()$("ul li:eq(1)").remove();//获取到第二个li元素,将它从网页中删除。

    empty()严格来说就是删除节点,而是清空节点。他能清空元素中的所有元素$("ul li:eq(1)").empty();复制节点$(this).clone(true).appendTo("body");

    替换节点    replaceWith() 和 replaceAll()

    replaceWith()的方法将所有匹配的元素都替换成了制订的HTML或者DOM$("p").replaceWith("<b>你最喜欢的水果是什么?</b>") 

    把原来p里的内容换成指定的内容

    包裹节点:用一个节点把其他的标记包裹起来,jquery提供了wrap()和warpAll()和warpInner()
    $("strong").warp("<b></b>");//用b标签把<strong>的元素包起来


    属性操作:attr()获取和设置元素的属性    $("p").attr("title") 获取p的title属性。   $("p").attr("title", "you  title") 设置title属性removeAttr() 删除元素的属性   


    样式操作:获取样式和设置样式
    $("p").attr("class") 获取class  $("p").attr("class","my class")  设置class为myclass追加样式$("p").addClass("another");添加another的class属性样式 addClasss()和attr()的区别addClass是添加class样式,而attr()是在现有的基础上进行改变。


    删除样式;$("p").removeClass("high")           移除所选元素的名称为high的class属性$("p").removeClass("high another")   移除所选元素的两个class样式$("p").removeClass()                  移除所选元素的所有的class属性


    切换样式:toggle() $("dfdf").toggle(function(){//操作样式   代码3},function(){//操作样式   代码4}交替执行代码3和代码4
    设 置和获取HTML 文本和值html()方法$("p").html("<strong>你喜欢的水果是什么?</strong>")text() 方法相当于javascript中的innertext,支持所有的浏览器val()方法获取文本框的值

    遍历节点

    children()方法  获得子元素  next()方法    获取匹配元素后面紧邻的同辈元素。例如,p元素的同辈元素是ul  li的无序列表获取ul的一种方法就是$("p").next()得到的值就是ul的无序列表  prev()方法是next()方法的逆方 法 siblings()方法 获取匹配元素前后所有的同辈元素,不分前后  closet()取得最近的匹配元素  遍历节点的方法有很多  find() filter() nextAll() prevAll() parent() parents()

  • 相关阅读:
    数据类型基础
    变量的三个特征
    常量
    变量
    django基础 -- 2. django初识
    django基础 -- 1. 前奏 web框架的本质
    前端 --- 7 Bootstrop框架
    前端 --- 6 jQuery 初始
    前端 --- 5 BOM 和 DOM
    前端 --- 4 js
  • 原文地址:https://www.cnblogs.com/li-mei/p/4949845.html
Copyright © 2011-2022 走看看