zoukankan      html  css  js  c++  java
  • jQuery对html的操作。

    1.jQuery 中非常重要的部分,就是操作 DOM 的能力,设置内容和属性

      三个简单实用的用于 DOM 操作的 jQuery 方法:

    • text() - 设置或返回所选元素的文本内容                 设置的时候仅需写text("hello world")即可,即填充内容作为参数传入即可。以下其他函数一样
    • html() - 设置或返回所选元素的内容(包括 HTML 标记)
    • val() - 设置或返回表单字段的值,即输入字段的值。
    • attr() -用于获取或设置属性的值。且允许同时设置多个属性

    2.用jQuery添加新的html的内容

      用于添加新内容的四个 jQuery 方法:

    • append() - 在被选元素的结尾插入内容                内容都是在函数的括号里,append("hello world!")
    • prepend() - 在被选元素的开头插入内容
    • after() - 在被选元素之后插入内容
    • before() - 在被选元素之前插入内容

        <script>
        function appendText()
        {
          var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
          var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
          var txt3=document.createElement("p");
          txt3.innerHTML="Text."; // 通过 DOM 来创建文本
          $("body").append(txt1,txt2,txt3); // 追加新元素
        }
        </script>

    3.删除元素

      如需删除元素和内容,一般可使用以下两个 jQuery 方法:

    • remove() - 删除被选元素(及其子元素)
      •  remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
      • 下面的例子删除 class="italic" 的所有 <p> 元素:
      • $("p").remove(".italic");
    • empty() - 从被选元素中删除子元素

    4.获取并设置css类,即对class属性进行操作

      拥有若干进行 CSS 操作的方法:

    • addClass() - 向被选元素添加一个或多个类
    • removeClass() - 从被选元素删除一个或多个类
    • toggleClass() - 对被选元素进行添加/删除类的切换操作
    • css() - 设置或返回样式属性
      • 如需返回指定的 CSS 属性的值,实例:$("p").css("background-color");
      • 如需设置指定的 CSS 属性,实例:$("p").css("background-color","yellow");
      • 如需设置多个 CSS 属性,实例:$("p").css({"background-color":"yellow","font-size":"200%"});

    5.处理元素和浏览器窗口的尺寸

      jQuery 提供多个处理尺寸的重要方法:

    • width()           //可以获取各种尺寸,当传入有参数时,是对尺寸进行设置。
    • height()
    • innerWidth()
    • innerHeight()
    • outerWidth()
    • outerHeight()
  • 相关阅读:
    Oracle+Ado.Net(四)
    Oracle+Ado.Net(三)
    json-server 详解
    在线字体图标
    HTML页面模板代码
    CSS样式重置
    WEB前端开发流程总结
    大前端-全栈-node+easyui+express+vue+es6+webpack+react
    大前端全栈CSS3移动端开发
    jQuery学习
  • 原文地址:https://www.cnblogs.com/yyzyxy/p/7143136.html
Copyright © 2011-2022 走看看