“jQuery中非常重要的部分,就是对DOM的操作!”

“jQuery中非常重要的部分,就是对DOM的操作!”

“jQuery中非常重要的部分,就是对DOM的操作!”



一、jQuery操作HTML

方法有:

html("<b<hello world!</b>") 设置或返回所选元素的内容(含html标记)

text("hello world!") 设置或返回所选元素的文本内容

val() 设置或返回所选表单的的值,

栗子: ~~$("#text").val("不晚");~~<input type="text" id="text" value="姓名">

//将输入框内的内容改为“不晚”

attr("xx属性","x值") 设置所选元素的xx属性为x值。

也同时设置多个属性组:attr({"xx属性":"x值","yy属性":"y值"})

//区别:设置单个属性时,中间用逗号隔开;设置多个属性时,中间用冒号,属性与属性之间用逗号

添加内容:

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

删除内容:

  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素

二、jQuery操作CSS

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

三、jQuery对DOM进行遍历(traversal)

1、查找父级元素:

parent() 查找所选元素的父元素

parents() 查找所选元素的所有祖先元素

parentsUntil() 查找所选元素与until元素之间的所有祖先元素

2、查找子级元素

children() 查找所选元素直接一级的子元素

find() 查找所选元素的所有后代元素

3、查找同胞元素

siblings() 查找所选元素的所有同胞元素

next()/prev() 查找所选元素的下一个/上一个同胞元素

nextAll()/prevAll() 查找所选元素后面/前面的所有同胞元素

nextUntil()/prevUntil() 查找所选元素和until元素之间的所有同胞元素

4、过滤

first()/last() 查找所选元素集里的第一个/最后一个元素

eq(x) 查找所选元素集里的第x+1个元素

not("x") 查找所选元素集里的非x元素

jQuery对DOM的操作的更多相关文章

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

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

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

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

  3. jQuery 对dom的操作

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Jquery 对DOM 的操作

     .focus 获取焦点  .blus离开焦点----------------------------------------------------------------------------- ...

  5. jQuery的Dom插入操作图示

  6. Jquery 跨Dom窗口操作

    . 子窗口给父窗口元素赋值 function modifyTheme(id){ $("#parent_dom",window.parent.document).attr(" ...

  7. 抛弃jQuery:DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  8. HTML 学习笔记 JQuery(DOM 操作)

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  9. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

随机推荐

  1. ThinkPHP第二十四天(JQuery常用方法、TP自动验证)

    ---恢复内容开始--- 1.JQuery常用方法 A:JS中可以用json格式数据当做数组使用,如var validate={username:false,pwd:false,pwded:false ...

  2. Gow工具

    一 Gow 是什么 Gow (Gnu On Windows) is the lightweight alternative to Cygwin. It uses a convenient NSIS i ...

  3. Linux系统环境变量的四个配置文件的关系

    Linux系统环境变量配置有四个文件分别是: /etc/environment,/etc/profile,/etc/bash.bashrc,~/.bashrc 各配置文件意义 /etc/environ ...

  4. ESX与ESXi管理员必备25个命令

    [转载] 正 如所有的虚拟化管理员都知道,要应对VMware基础设施上需要的更多虚拟化管理,关键在于任务的自动化.虽然VMware ESX主机可以管理与vSphere客户端用户界面,数据中心管理员往往 ...

  5. 一起来看看css中的单位

    一起来看看css中的单位 由于一直以来对于css中的百分比单位究竟是相对于谁的比例,这个问题不是很了解,所以就专门找资料看了一下. <div class="container w500 ...

  6. java String分类trim,substring,replaceAll,indexOf使用功能

    1.trim性能 特征去掉字符串首尾空格,防止不必要的空格导致错误. public class TrimTest { public static void main(String[] args) { ...

  7. iOS设计模式——单例模式

    单例模式用于当一个类只能有一个实例的时候, 通常情况下这个“单例”代表的是某一个物理设备比如打印机,或是某种不可以有多个实例同时存在的虚拟资源或是系统属性比如一个程序的某个引擎或是数据.用单例模式加以 ...

  8. javascript函数作用域链之词法作用域

    在开发语言中常见的作用域规则有  块级作用域和词法作用域 作用域 顾名思义就是起作用的区域  定义一变量后 ,可以在此范围作用的区域 一.块级作用域就是用一个块结构分割变量的访问区域  块即{ } 代 ...

  9. 磁盘性能,你可能不知道的IOPS计算方法

    每个I/O 请求到磁盘都需要若干时间.主要是因为磁盘的盘边必须旋转,机头必须寻道.磁盘的旋转常常被称为”rotational delay”(RD),机头的移动称为”disk seek”(DS).一个I ...

  10. jquery获取多个checkbox的值异步提交给php

    html代码: <tr> <td><input type="checkbox" name="uid" value="&l ...