获得和设置内容:text( )、html( ) 以及 val( )
  • text( ) - 设置或返回所选元素的文本内容
  • html( ) - 设置或返回所选元素的内容(包括 HTML 标记)
  • val( ) - 设置或返回表单字段的值
例子:

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});
设置和修改属性:
attr( ) 方法用于设置改变属性值。
例子:
$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});
 
添加新的 HTML 内容:
  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
 
删除元素/内容:
  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素
 
jQuery 操作 CSS:
  • addClass() - 向被选元素添加一个或多个类,当然,在添加类时,您也可以选取多个元素
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性
 
jQuery toggleClass() 方法:
该方法对被选元素进行添加/删除类的切换操作,例:
$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});
 
设置 CSS 属性:
如需设置指定的 CSS 属性,请使用如下语法(多个):
css({"propertyname":"value","propertyname":"value",...});
 
jQuery 尺寸 方法:
jQuery 提供多个处理尺寸的重要方法:
  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()
 
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)
 
innerWidth() 方法返回元素的宽度(包括内边距)
innerHeight() 方法返回元素的高度(包括内边距)
 
outerWidth() 方法返回元素的宽度(包括内边距和边框)
outerHeight() 方法返回元素的高度(包括内边距和边框)
 
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)

jQuery自学笔记(四):jQuery DOM节点操作的更多相关文章

  1. jQuery:自学笔记(2)——jQuery选择器

    jQuery:自学笔记(2)——jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font ...

  2. jquery学习笔记(二):DOM元素操作

    内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...

  3. 第四章 DOM节点操作

    1.什么是DOM:DOM(document object model)文档对象模型,把每一个元素看做是一个节点,然后对节点进行增删改查的操作 2.DOM的分类:(1)Core Dom:可以对html, ...

  4. JQuery学习笔记(3)——节点操作 节点查找

    插入节点 内部插入 所谓的内部插入,就是指在节点里面的插入,而外部插入,则是在节点外面插入. append() prepend() appendTo() prependTo() append和prep ...

  5. jQuery:自学笔记(3)——操作DOM

    jQuery:自学笔记(3)——操作DOM 修改元素的属性 获取元素属性 设置元素属性 修改元素的内容 说明 有三种方式可以获取HTML元素的内容,分别是 ☐ text():设置或返回所选元素的文本内 ...

  6. 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  7. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  8. jQuery:自学笔记(4)——事件与事件对象

    jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...

  9. jQuery:自学笔记(1)——基础入门

    jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...

  10. jQuery:自学笔记(5)——Ajax

    jQuery:自学笔记(5)——Ajax 使用Ajax快捷函数 说明 出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数. 实例 1.显示 test.php 返回值(HTML 或 XML ...

随机推荐

  1. C#中的委托和事件2-1(转)

      PDF 浏览:http://www.tracefact.net/Document/Delegates-and-Events-in-CSharp.pdf引言 委托 和 事件在 .Net Framew ...

  2. Python自动化运维之11、面向对象基础

    一.简介 面向对象编程是一种编程方式,使用 “类” 和 “对象” 来实现,所以,面向对象编程其实就是对 “类” 和 “对象” 的使用.类就是一个模板,模板里可以包含多个方法(函数),方法里实现各种各样 ...

  3. BufferedOutputStream

    package file; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOutputStr ...

  4. js中将函数传递给另一个函数的解析(非常容易理解)

    $(document).ready(function(){ //JS中关于把函数作为函数的参数来传递的问题的小总结//第一,最简单的形式无参函数,直接形式函数的函数名放到括号中,再在执行部分这个函数即 ...

  5. 判断iOS设备是否越狱

    - (BOOL)isJailbroken { BOOL jailbroken = NO; NSString *cydiaPath = @"/Applications/Cydia.app&qu ...

  6. MYSQL正式环境主从复制(不锁表,不停服务)

    参考URL: http://rfyiamcool.blog.51cto.com/1030776/1016636/ 原因源于其实以前环境是有MYSQL主从复制的,且最开始主从复制之间是OK的. 但由于日 ...

  7. IBM Cognos 10 启动报错

    报错信息: 15:35:02, 'LogService', 'StartService', 'Success'. 15:35:03, CAF input validation enabled. 15: ...

  8. Java批量处理数据

    要求:共1000条数据,第一次批量插入100条,第二次批量插入101到200条,依次插入数据: 实现方式这里选择了两种常用的方式,都是使用List操作: 第一种实现思路如下: <1> 原先 ...

  9. 单网卡多IP导致的socket connect 10060超时错误

    问题: 接管别人代码时遗留的一个bug,在win7下,给一个网卡设置多个ip时,发现无法连接上服务器了.XP下就不会,这多个ip为192.168.1.127,172.1.1.13,10.0.0.1. ...

  10. SPOJ--K-query (线段树离线) 离线操作解决一些问题

    K-query Given a sequence of n numbers a1, a2, ..., an and a number of k- queries. A k-query is a tri ...