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()
时间: 2025-01-24 09:28:28

jQuery对html的操作。的相关文章

Jquery基础之DOM操作

 一.jQuery对象与Dom对象的区别 一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的对象是一样的对象.所以一些新手就很迷惑,为什么${”#Element”}不能直接innerHTML,这就是原因所在,解决方式请看下文. jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有

jQuery核心之DOM操作的常用方法

参考jQuery官网API文档 1..attr() 获取 : $( "a" ).attr( "href" ); 设置: $( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" ); $( "a" ).attr({ title: "all titles are the same too!", href: "s

jQuery中对AJAX操作的封装函数

jQuery提供了6个简化AJAX操作的函数,每个都可以代替元素AJAX中的四步代码! (1)$('xxx').load()         jQuery对象函数 (2)$.get()                   jQuery全局函数 (3)$.post()                 jQuery全局函数 (4)$.getScript()          jQuery全局函数 (5)$.getJSON()           jQuery全局函数 (6)$.ajax()     

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

jquery checkbox的相关操作——全选.反选.获得所有选中的checkbox 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']&

Jquery 对select的操作

jquery对select下拉框的操作总结... 1.通过索引值去设置select中的option的value和text var index = 1; var val = "该改为的值";      $("#selectId option:eq("+index+")").attr("selected",true);      $("#selectId option:selected").val(val); 

【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】

1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 使用jQuery前必须下载并引用jQuery的js文件,下载链接为h

jquery.cookie中的操作

jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie. 创建一个持久cookie: $.cookie(‘cookieName’,'cookieValue’,{expires:7}); 注:当指明时间时,故称为持久cookie,并

Jquery基础之事件操作

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同.    w

【jQuery基础学习】04 jQuery中的表格操作及cookie插件的使用

这章本来准备写成jQuery的表单操作和表格操作的. 然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统,所以说数据表格用到的还是比较多的.那么在这里写出来说不定还能用上. 关于jQuery的表格应用 隔行变色 $(function(){ $("tbody>tr:odd").addClass("样式1");//odd是选取奇数行 $("tbody>tr

JQuery中Ajax的操作

Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现:而Spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们:而Hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码. 前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进行完