06jQuery-04-DOM操作

jQuery既然是为了帮助你能从js的繁琐中解脱出来,自然在DOM操作上也有自己的一套。

1、修改Text和HTML

之前我们提到过,如果用JS的话,你要修改Text或者HTML需要用到其innerHTML和innerText属性,但是放在jQuery里面,你需要用到的是html()方法和text()方法,而且这两个方法很巧妙,如果你不传参,就是获取值;传参,就是更改值
<!-- HTML结构 --> 
<ul id="test-ul"><li class="js">JavaScript</li><li name="book">Java &amp; JavaScript</li>
</ul>//jQuery操作
$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'
9
1
<!-- HTML结构 --> 
2
<ul id="test-ul">
3
    <li class="js">JavaScript</li>
4
    <li name="book">Java &amp; JavaScript</li>
5
</ul>
6
7
//jQuery操作
8
$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
9
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'

一个jQuery对象是可以包含0个或者多个DOM对象的,所以实际上它的方法会作用到每个DOM的节点上。

2、修改CSS

jQuery中可以使用css()方法对其CSS进行批量修改,比如高亮显示:
$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');
1
1
$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');

同样地,如果css方法的第二个参数不传值,那么默认会返回现有属性:
var div = $('#test-div');
div.css('color'); // '#000033', 获取CSS属性
2
1
var div = $('#test-div');
2
div.css('color'); // '#000033', 获取CSS属性

3、新增class 

var div = $('#test-div');
div.hasClass('highlight'); // false, class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class
4
1
var div = $('#test-div');
2
div.hasClass('highlight'); // false, class是否包含highlight
3
div.addClass('highlight'); // 添加highlight这个class
4
div.removeClass('highlight'); // 删除highlight这个class

新增class属性可以很好地配合CSS用来进行效果展示:
<!-- HTML结构 -->
<style>
.highlight {color: #dd1144;background-color: #ffd351;
}
</style><div id="test-highlight-css"><ul><li class="py"><span>Python</span></li><li class="js"><span>JavaScript</span></li><li class="sw"><span>Swift</span></li><li class="hk"><span>Haskell</span></li></ul>
</div>//你可以这样使用jQuery配置css
var div = $('#test-highlight-css');
div.addClass('highlight');
21
1
<!-- HTML结构 -->
2
<style>
3
.highlight {
4
    color: #dd1144;
5
    background-color: #ffd351;
6
}
7
</style>
8
9
<div id="test-highlight-css">
10
    <ul>
11
        <li class="py"><span>Python</span></li>
12
        <li class="js"><span>JavaScript</span></li>
13
        <li class="sw"><span>Swift</span></li>
14
        <li class="hk"><span>Haskell</span></li>
15
    </ul>
16
</div>
17
18
19
//你可以这样使用jQuery配置css
20
var div = $('#test-highlight-css');
21
div.addClass('highlight');

4、隐藏和显示DOM

var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示
3
1
var a = $('a[target=_blank]');
2
a.hide(); // 隐藏
3
a.show(); // 显示

5、获取DOM信息

//获取DOM的高宽等信息
// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500//操作DOM节点的属性
<div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性
div.attr('name'); // undefined//获取和设置对应value值
input.val(); // 'test'
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com
19
1
//获取DOM的高宽等信息
2
// HTML文档大小:
3
$(document).width(); // 800
4
$(document).height(); // 3500
5
6
7
//操作DOM节点的属性
8
<div id="test-div" name="Test" start="1">...</div>
9
var div = $('#test-div');
10
div.attr('data'); // undefined, 属性不存在
11
div.attr('name'); // 'Test'
12
div.attr('name', 'Hello'); // div的name属性变为'Hello'
13
div.removeAttr('name'); // 删除name属性
14
div.attr('name'); // undefined
15
16
17
//获取和设置对应value值
18
input.val(); // 'test'
19
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com

还要提一下的是,jQuery中还有一个方法叫做prop(),和attr()是类似的,但是对于某些可以没有值的属性来说,处理方式两者有所不同,例如:
<input id="test-radio" type="radio" name="test" checked value="1">
1
1
<input id="test-radio" type="radio" name="test" checked value="1">

以上代码中的checked,通常我们写作 checked="checked",但是在HTML5中是可以直接写 checked 这种方式的,两者对于其的处理方式是:
var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true
3
1
var radio = $('#test-radio');
2
radio.attr('checked'); // 'checked'
3
radio.prop('checked'); // true

prop()的返回值更合理一些,不过,用 is() 方法判断更好:
var radio = $('#test-radio');
radio.is(':checked'); // true
2
1
var radio = $('#test-radio');
2
radio.is(':checked'); // true

类似的属性还有selected,处理时最好用is(':selected')。

6、添加DOM

之前我们提到过,要添加DOM的话可以使用html()这种方式,原始简单粗暴。

实际上有个更好的方法 append(),它不仅像html()一样可以直接添加片段,还可以传入原始的DOM对象、jQuery对象和函数对象
// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM对象:
ul.append(ps);// 添加jQuery对象:
ul.append($('#scheme'));// 添加函数对象:
ul.append(function (index, html) {return '<li><span>Language - ' + index + '</span></li>';
});
x
1
// 创建DOM对象:
2
var ps = document.createElement('li');
3
ps.innerHTML = '<span>Pascal</span>';
4
// 添加DOM对象:
5
ul.append(ps);
6
7
// 添加jQuery对象:
8
ul.append($('#scheme'));
9
10
// 添加函数对象:
11
ul.append(function (index, html) {
12
    return '<li><span>Language - ' + index + '</span></li>';
13
});

append() 把DOM添加到最后,相应的 prepend() 把DOM添加到最前。

特别注意:如果要添加的DOM节点已经存在于HTML文档中,它会首先从文档移除,然后再添加,换句话说,对于已经存在于HTML中的DOM节点,可以使用append()方法达到移动的目的

和append方法很类似的有个方法叫做 after(),其作用是在被选元素后插入指定的内容,仔细看看区别在于:
  • append() 是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容
  • after() 是在被选元素的结束标签后面(即该被选元素的外部)插入指定的内容

也就是说,append() 实际上是类似于在某个节点中添加其子节点,而after()是某个节点之后添加兄弟节点,也就是说,after()是用于同级节点的,对应的,还有before()方法。

7、删除DOM

拿到对应的DOM节点的jQuery对象以后,直接调用 remove() 方法就可以删除了,如果该jQuery对象包含多个DOM节点,还可以实现批量删除。


转载于:https://www.cnblogs.com/deng-cc/p/6684044.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/269660.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决 swap file “*.swp”already exists!问题

Linux下难免要开启多个vim共同编辑同一个文件&#xff0c;这时再次保存就会出现&#xff1a; swap file "*.swp" already exists! [O]pen Read-Only, (E)dit anyway, (R)ecover, (D)elete it, (Q)uit, (A)bort:原因&#xff1a; 使用vim编辑文件实际是先copy一份临…

java天气预报webservice_webservice之实现天气预报

前通过传智的视频自学了webservice的基本使用&#xff0c;也了解到webservice就是一种跨编程语言和跨操作系统平台的远程调用技术。对于这些理论知识在这里也不再做过多的解释&#xff0c;本次主要就是记录与分享使用cxf 框架完成远程调用气象局提供的接口&#xff0c;来实现天…

CSS下拉菜单

例子&#xff1a; 鼠标移动到按钮上打开下拉菜单。&#xff08;在这里我将下拉菜单的内容的链接设置为百度首页&#xff09; 下拉菜单 菜单内容 1 菜单内容 2 菜单内容 3HTML 部分&#xff1a; 制作下拉菜单可以使用任何的 HTML元素来打开下拉菜单&#xff0c;如&#xff1a;&l…

maven跳过单元测试-maven.test.skip和skipTests的区别

第一种 -Dmaven.test.skiptrue&#xff0c;不执行测试用例&#xff0c;也不编译测试用例类。 一 使用maven.test.skip&#xff0c;不但跳过单元测试的运行&#xff0c;也跳过测试代码的编译。 mvn package -Dmaven.test.skiptrue<plugin> <groupId>org.apache.m…

linux下java命令行参数_Java调用Linux命令行

Java调用Linux命令行Java语言以其跨平台性和简易性而著称&#xff0c;在Java里面的lang包里(java.lang.Runtime)提供了一个允许Java程序与该程序所运行的环境交互的接口&#xff0c;这就是Runtime类&#xff0c;在Runtime类里提供了获取当前运行环境的接口。那么java怎么调用Li…

BZOJ 4810 莫队+bitset

思路&#xff1a; 看完这道题根本没有思路啊.... 然后我就膜拜了一波题解... 这神tm乱搞思路 维护两个bitset 第一个bitset代表当前区间哪些数出现过 第二个bitset是 maxp-p出现过 差为x的时候 就用第一个bitset与一下它右移x就好了 和为x的时候 就第一个bitset与一下第二个bi…

java -p_javap命令详解 - JackieYeah的个人空间 - OSCHINA - 中文开源技术交流社区

一、用法javap [ 选项 ] classes二、描述javap命令反汇编一个或多个类文件。它的输出由使用的选项决定。如果没有使用选项&#xff0c;javap命令将打印输出传递给它的类的包&#xff0c; protected和public属性和方法。javap打印输出到标准输出。选项命令行选项。classes一个或…

初识RPC概念

什么是RPC RPC 全称 Remote Procedure Call——远程过程调用。在学校学编程&#xff0c;我们写一个函数都是在本地调用就行了。但是在互联网公司&#xff0c;服务都是部署在不同服务器上的分布式系统&#xff0c;如何调用呢&#xff1f; RPC技术简单说就是为了解决远程调用服务…

JAVA编码(41)—— 线程池队列执行任务(ThreadPoolQueue)(1)

废话少说&#xff0c;上代码 package com.sinosoft;import java.util.concurrent.*;/*** Created by xushuyi on 2017/4/9.*/ public class ThreadPoolQueue {/*** 定义线程池中最大的线程数量*/private static final Integer THREADPOOLSIZE 100;/*** 创建线程队列*/private …

Dubbo介绍

1:什是Dubbo 2&#xff1a;架构图 3:节点角色说明 4&#xff1a;调用关系说明

一键去除网页BOM属性【解决乱码,头部空白,#65279问题】

几个常出现的问题&#xff1a; 1.网站打开空白 2.页面头部出现多余的空白 3.网站出现乱码&#xff0c;如“锘&#xfffd;” 解决方法可以是&#xff1a; 1.选用专业的编辑器&#xff0c;例如notepad&#xff0c;sublime&#xff0c;editplus这样不会自动签名。 2.sublime通过如…

java 关闭语句_java.sql.SQLRecoverableException: 关闭的语句

数据库连接池配置&#xff1a;数据库链接在运行时报错&#xff1a;Caused by: java.sql.SQLRecoverableException: 关闭的语句at oracle.jdbc.driver.OracleClosedStatement.exitImplicitCacheToActive(OracleClosedStatement.java:4667)at oracle.jdbc.driver.OraclePreparedS…

编程英语学习【转】

一种绝对提高开发水平的方法 目录 一、概要二、常用单词 2.1、初级单词第一节第二节第三节第四节第五节第六节第七节第九节第十节第十一节第十三节第十四节第十五节第十六节第十七节2.2、高级部分三、《Java语言程序设计》书中单词频率排行四、常见异常与错误翻译 4.1、java中4…

下载的java游戏怎么运行不了_java运行环境下载

java运行环境下载对这款游戏感兴趣的玩家可以来我们网站下载试玩。"No," said Elsie, sharply. "Ill quote you a text: Eat, drink, and be merry, and let me alone.""Its not your sex that I am clasping, but you&#xfffd;&#xfffd;YOU, m…

Mac idea使用Command + p 快捷键查看一个类的构造函数需要传入什么参数

Mac idea使用Command p 快捷键查看一个类的构造函数需要传入什么参数 如下图所示

TortoiseGit不同分支合并代码

现在有主分支master和分支day2.现在要把day2上的变更合并到主分支master上&#xff01; 1.首先切换到目标分支master上。 说明当前分支是master分支。 2.在master分支上查看提交记录,即show log一下。 3.切换到源分支上 4.选中你所有的提交&#xff0c;右键&#xff0c;Cherry …

java jdk 类加载机制_JDK源码阅读之类加载

java类加载类的生命周期(类加载过程)LLIUUVPR加载(Loading)链接(Linking)验证(Verification)准备(Preparation)解析(Resolution)初始化(Initialization)使用(Using)卸载(Unloading) 类类加载器种类BootstrapClassLoader&#xff1a;C编写&#xff0c;负责加载java核心类库Launc…

2017.4.11 AM

练恋有词U28单元单词及应用 转载于:https://www.cnblogs.com/bgd140201219/p/6696472.html