jQuery 拥有可操作 HTML 元素和属性的强大方法。


jQuery DOM 操作

jQuery 中非常重要的部分,就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

DOM = Document Object Model(文档对象模型)

DOM 定义访问 HTML 和 XML 文档的标准:

"W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。"


获得内容 - text()、html() 以及 val()

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

  • text() - 设置或返回所选元素的文本内容

  • html() - 设置或返回所选元素的内容(包括 HTML 标记)

  • val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:

实例

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

尝试一下 »

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值:

实例

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

尝试一下 »


获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值:

实例

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

尝试一下 »

jQuery 捕获的更多相关文章

  1. JQuery:JQuery捕获HTML

    JQuery:捕获HTML1.jQuery - 获取内容和属性介绍: jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuer ...

  2. jQuery捕获

    获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元 ...

  3. jQuery捕获-获取DOM元素内容和属性

    一.获取内容 1.text()-设置或返回所选元素的文本内容 2.html()-设置或返回所选元素的内容(包括HTML标记) 3.val()-设置或 返回表单字段的值 $(document).read ...

  4. 使用JS或jQuery模拟鼠标点击a标签事件

    <a id="alink" href="abc.aspx"  style="visibility: hidden;">下一步&l ...

  5. 使用JS或jQuery模拟鼠标点击a标签事件代码

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  6. JQuery 方法合集(懒人备记)

    原创文章,转载请私信.谢谢~ PS:请将jquery的引用文件放在head的标签内 语法:$(selector).action() $(document).ready(function(){ // 开 ...

  7. jquery模拟点击A标签的问题

    我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久. 先看下边的代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <htm ...

  8. jquery基础研究学习【HTML】

    jQuery HTMLjQuery 捕获jQuery 设置jQuery 添加元素jQuery 删除元素jQuery CSS 类jQuery css() 方法jQuery 尺寸 笔记:

  9. javaScript 笔记(6) --- jQuery(下)

    目录 --- jQuery HTML --- jQuery 遍历 --- jQuery Ajax jQuery HTML: jQuery 捕获:三个简单实用的用于 DOM 操作的 jQuery 方法: ...

随机推荐

  1. geotrellis使用(三十七)COG 基础介绍

    前言 Geotrellis 已经迭代到了 2.0 版本(截止写作此文时为 2.0.0-SNAPSHOT 版),2.0 版多了很多新的特性,其中最重要的应该就是 COG,COG 是什么鬼?刚看到时我也是 ...

  2. scrapy爬取极客学院全部课程

    # -*- coding: utf-8 -*- # scrapy爬取极客学院全部课程 import scrapy from pyquery import PyQuery as pq from jike ...

  3. VueJs(2)---VueJs开发环境的搭建和讲解index.html如何被渲染

    VueJs开发环境的搭建和讲解初始框架 有关如何搭建vue.js框架我这看了一篇文章,自己也根据它进行搭建环境. 文章地址:vue.js2.0实战(1):搭建开发环境及构建项目 接下来对初始的框架进行 ...

  4. JAVA_扫雷游戏(布置地雷)

    1.要为扫雷游戏布置地雷,扫雷游戏的扫雷面板可以用二维int数组表示.如某位置为地雷,则该位置用数字-1表示, 如该位置不是地雷,则暂时用数字0表示. 编写程序完成在该二维数组中随机布雷的操作,程序读 ...

  5. [LeetCode] Sliding Window Median 滑动窗口中位数

    Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...

  6. mybatis学习成长之路(一)

    从小白开始学习,希望自己学习的过程可以帮助更多需要的人,参考网址:https://www.cnblogs.com/ysocean/p/7237499.html 1.mybatis的jar包下载地址:h ...

  7. python--元祖和字典

    一.1:元祖:tuple  在python中,元祖也是一个list, 它和list的区别是list中的元素可以修改,而元祖中的元素不可以修改. 2:元祖的定义:用小括号() 二.1.字典  字典全程d ...

  8. flex布局小记

    越来越深刻的感到日事日毕的必要性,很久之前就做了备忘说要深刻学习flex布局,没想到一拖就拖到了这个时候! 一,什么是flex布局: flex布局即flexible box布局,也就是弹性盒模型或者弹 ...

  9. SpringIOC学习二

    Spring的IOC容器通过依赖注入DI(dependency injection)来实现程序之间的依赖关系,达到解耦的方式依赖的方式:a.基于xml文件配置的注入    * 构造函数注入    * ...

  10. discuz7.2 faq.php 注入漏洞分析

    写在前面的话:分析完整个漏洞,不得不感叹,发现漏洞的人真的好细心呀. 在分析整个漏洞之前,没看poc,然后就直接看faq.php 准备试试自己发现漏洞的能力,但是分析完一整个php,也是卡在 in() ...