jQuery 学习笔记元素操作

本文将介绍对元素的基本操作(CRUD)

Getting and Setting Information About Elements

.html() 获取或设置html内容
.text() 获取或设置text内容，html将被跳过
.attr() 获取或设置属性
.width()获取或设置宽度(px)
.height()获取或设置高度(px)
.position() 获取位置
.val()获取或设置form元

<!doctype html><html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="jquery-1.10.2.min.js"></script><style type="text/css">#myDiv{width: 100px;height: 120px;background-color: #FEEEEE;}</style>
</head>
<body><div id="myDiv"><p>First</p><p>Second</p></div><script type="text/javascript">$("#myDiv p:first").html("width = " + $("#myDiv").width() + " height = " + $("#myDiv").height());</script>
</body>
</html>

上面的例子实现了将div中第一个p标签的内容设置为该div的宽度和高度

Moving, Copying, and Removing Elements

有很多方式可以用来操作元素，但通常通过两种途径来完成

将选中的元素放在相对于其他元素的地方
将其他元素放在相对于选中元素的地方

jQuery 根据这两种方法分别提供了两类函数

.insertAfter() 将选中的元素放在给定参数的后面
.insertBefore()
.appendTo()
.prependTo()

另外一类为

.after() 将给定参数里的元素放在选中元素的后面
.before()
.append()
.prepend()

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body><div id="myList"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></div><script type="text/javascript"> var $firstClone = $("#myList li:first").clone();$("#myList").append($firstClone);</script>
</body>
</html>

上面的例子将复制li中的第一个元素，并添加到myList的后面

$("#myList li:first").insertAfter("#myList"); 会实现同样的效果

上面显著的这一行代码则是对元素的clone

Removing Elements

.remove() 用来删除没有关联的数据和事件的元素
.detach() 用来删除有关联数据和是事件的元素
empty() 不会删除元素，只会将元素的内容清空

Creating New Elements

$() 用来产生一个新元素
append()也可以用来添加新元素

var $newDiv = $("<div>New Element</div>");
$newDiv.appendTo("#myDiv");$("#myList").append("<li>new</li>");

Manipulating Attributes

添加单一属性

$("a").attr("href","http://www.baidu.com");

添加多个属性

$("a").attr( href:"http://www.baidu.com", rel: "super-special" });

使用函数

$( "#myDiv a:first" ).attr( "href", function( idx, href ) {return "/new/" + href;
});

转载于:https://www.cnblogs.com/xviubu/p/3440450.html

jQuery 学习笔记元素操作相关推荐

html添加删除元素属性,jQuery学习笔记——.attr()和.removeAttr()方法操作元素属性
今天主要和大家一起分享一下如何使用jQuery的jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现:.attr():jQu ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
jQuery学习笔记开篇
开始学习人见人爱花见花开的jQuery. jQuery是一个轻量级,快速简洁的javascript框架.它的官方网址是(http://jquery.com/).jQuery的优点是它容量小巧,简洁和简 ...
jquery学习笔记及常用函数封装
二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...
jQuery学习笔记（黑马课堂+补充）
JQuery学习笔记(自用) 1.DOM对象和jQuery对象 DOM对象:原生JS取到的对象 getElementsById() getElementsByTagName() 特点:只能调用Dom方 ...
jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...

jQuery 学习笔记元素操作

Getting and Setting Information About Elements

Moving, Copying, and Removing Elements

Removing Elements

Creating New Elements

Manipulating Attributes

jQuery 学习笔记元素操作相关推荐

最新文章

热门文章

jQuery 学习笔记 元素操作

Getting and Setting Information About Elements

Moving, Copying, and Removing Elements

Removing Elements

Creating New Elements

Manipulating Attributes

jQuery 学习笔记 元素操作相关推荐

最新文章

热门文章

jQuery 学习笔记元素操作

jQuery 学习笔记元素操作相关推荐