jQuery学习（三）
jQuery文档操作方法
1、内部追加内容
- 选择器追加到内容
append(content)在当前jQuery对象内部所包含的DOM对象的内部的最后追加content对应的内容，其中content可以是jQuery对象、DOM对象、HTML
jQuery对象：$("body").append($("#hello"))
DOM对象：$("body"),append(document.createElement（"div"）)
HTML字符串:$("body"),append("<h1>hello world</h1>")
prepend(content)在当前jQuery对象内部所包含的DOM对象的内部的最前追加content对应的内容，其中content可以是jQuery对象、DOM对象、HTML
jQuery对象：$("body").prepend($("#hello"))
DOM对象：$("body"),prepend(document.createElement（"div"）)
HTML字符串:$("body"),prepend("<h1>hello world</h1>")
- 内容追加到选择器
appendTo(selector)将当前的jQuery对象内部所包含的DOM对象添加到对应的选择器选择的元素的内部最后方
prepend(selector)将当前的jQuery对象内部所包含的DOM对象添加到对应的选择器选择的元素的内部最前方
- 测试案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM</title>
<style>
.even{width:80%;margin: 20px auto; border:1px solid #ff6f13;}
.odd{width:80%;margin: 20px auto; border:1px solid #3e88ff;}
.new{border:1px solid red;margin: 10px 10px;}
.inner{background-color: #7FFFD4;margin: 10px 10px;}
</style>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var fn = function () {
//选中class列表中包含的所有元素返回一个jQuery对象
var jo=$(".odd");
//在jo所包含的dom上添加content对应的内容
jo.append("<div class='new'>append context</div>");
}
$("#append").click(fn);
$("#prepend").click(function () {
var div = document.createElement("div");
div.classList.add("new");
div.innerHTML="prepend context";
$(".odd").prepend(div);
});
$("#append-to").click(function () {
//先确定需要添加的内容(必须是jQuery对象，否则不能使用appendTo方法)
var content = $("<div class='new'>context appendTo</div>");
content.appendTo($(".even>.inner"));
});
$("#prepend-to").click(function () {
var content = $("<div class='new'>context prependTo</div>");
content.prependTo($(".even>.inner"));
}); });
</script>
</head>
<body>
<div>
<a id="append">append</a>
<a id="prepend">prepend</a>
<a id="append-to">appendTo</a>
<a id="prepend-to">prependTo</a>
</div> <div class="even">
<div class="inner">1</div>
</div>
<div class="odd">
<div class="inner">2</div>
</div>
<div class="even">
<div class="inner">3</div>
</div>
<div class="odd">
<div class="inner">4</div>
</div>
</body>
</html>
2、外部追加内容
- 选择器追加到内容
after(content)在当前jQuery对象内部所包含的DOM对象的外部的最后追加content对应的内容，其中content可以是jQuery对象、DOM对象、HTML
jQuery对象：$(".inner").append($("#hello"))
DOM对象：$(".inner"),append(document.createElement（"div"）)
HTML字符串:$(".inner"),append("<h1>hello world</h1>")
before(content)在当前jQuery对象内部所包含的DOM对象的外部的最前追加content对应的内容，其中content可以是jQuery对象、DOM对象、HTML
jQuery对象：$(".inner").prepend($("#hello"))
DOM对象：$(".inner"),prepend(document.createElement（"div"）)
HTML字符串:$(".inner"),prepend("<h1>hello world</h1>")
- 内容追加到选择器
insertAfter(selector)将当前的jQuery对象内部所包含的DOM对象添加到对应的选择器选择的元素的外部最后方
insertBefore(selector)将当前的jQuery对象内部所包含的DOM对象添加到对应的选择器选择的元素的外部最前方
- 测试案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM</title>
<style>
.even{width:80%;margin: 20px auto; border:1px solid #ff6f13;}
.odd{width:80%;margin: 20px auto; border:1px solid #3e88ff;}
.new{border:1px solid red;margin: 10px 10px;}
.inner{background-color: #7FFFD4;margin: 10px 10px;}
</style>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var fn = function () {
//选中class列表中包含的所有元素返回一个jQuery对象
var jo=$(".inner");
//在jo所包含的dom上添加content对应的内容
jo.after("<div class='new'>after context</div>");
}
$("#after").click(fn);
$("#before").click(function () {
var div = document.createElement("div");
div.classList.add("new");
div.innerHTML="before context";
$(".inner").before(div);
});
$("#insert-after").click(function () {
//先确定需要添加的内容(必须是jQuery对象，否则不能使用appendTo方法)
var content = $("<div class='new'>context insertAfter</div>");
content.insertAfter($(".even>.inner"));
});
$("#insert-before").click(function () {
var content = $("<div class='new'>context insertBefore</div>");
content.insertBefore($(".even>.inner"));
});
});
</script>
</head>
<body>
<div>
<a id="after">after</a>
<a id="before">before</a>
<a id="insert-after">insertAfter</a>
<a id="insert-before">insertBefore</a>
</div> <div class="even">
<div class="inner">1</div>
</div>
<div class="odd">
<div class="inner">2</div>
</div>
<div class="even">
<div class="inner">3</div>
</div>
<div class="odd">
<div class="inner">4</div>
</div>
</body>
</html>
3、包裹元素
- wrap(node)用node对应的内容来包裹当前jQuery对象所包含的DOM节点
jQuery对象内部所包含的每个DOM对象都被单独包裹(打小包)
- wrapAll(node)用用node对应的内容来包裹当前jQuery对象所包含的DOM节点
jQuery对象内部所包含的所有的DOM对象都包裹在同一个node内部(打大包)
- 测试案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM</title>
<style>
.even{width:80%;margin: 20px auto; border:1px solid #ffb7d9;}
.odd{width:80%;margin: 20px auto; border:1px solid #3e88ff;}
.new{border:1px solid red;margin: 10px 10px;padding: 10px 10px;}
.inner{background-color: #7FFFD4;margin: 10px 10px;}
</style>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#wrap").click(function () {
var node = document.createElement("div");
node.classList.add("new");
//为jo所包含的DOM对象穿衣服
var jo =$(".inner")
jo.wrap(node); }); $("#wrap-all").click(function () {
var node = document.createElement("div");
node.classList.add("new");
//将jo对应的jQuery对象所包含的DOM对象全部到同一个node内部
var jo =$(".inner")
jo.wrapAll(node); }); $("#wrap-inner").click(function () {
var node = document.createElement("div");
node.classList.add("new");
//将jo对应的jQuery对象所包含的DOM对象全部到同一个node内部
var jo =$(".inner")
jo.wrapInner(node); });
});
</script>
</head>
<body>
<div>
<a id="wrap">wrap</a>
<a id="wrap-all">wrapAll</a>
<a id="wrap-inner">wrapInner</a>
</div> <div class="even">
<div class="inner">1</div>
</div>
<div class="odd">
<div class="inner">2</div>
</div>
<div class="even">
<div class="inner">3</div>
</div>
<div class="odd">
<div class="inner">4</div>
</div>
</body>
</html>
4、内容的相关操作
- 测试案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM</title>
<style>
.even{width:80%;margin: 20px auto; border:1px solid #ffb7d9;min-height: 20px;}
.odd{width:80%;margin: 20px auto; border:1px solid #3e88ff;min-height: 20px;}
.new{border:1px solid red;margin: 10px 10px;padding: 10px 10px;}
.inner{background-color: #7FFFD4;margin: 10px 10px;min-height: 10px;}
</style>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#replace-with").click(function () {
var node = document.createElement("div");
node.classList.add("new");
//被替换的jQuery对象
var jo =$(".inner")
//确定替换后显示的内容
var replacae="<div class='new'>new content</div>";
//用replace对应的内容替换jo对象所包含的DOM对象(逐个替换)
jo.replaceWith(replacae); }); $("#replace-all").click(function () {
var node = document.createElement("div");
node.classList.add("new");
//被替换的jQuery对象
var jo =$(".inner")
//确定替换后显示的内容（必须是jQuery对象，否则无法调用replaceAll方法）
var replacae=$("<div class='new'>new content</div>");
//用replace对应的内容替换jo对象所包含的DOM对象(逐个替换)
replacae.replaceAll(jo); }); $("#empty").click(function () {
var node = document.createElement("div");
node.classList.add("new");
//将jo对应的jQuery对象所包含的DOM对象全部到同一个node内部
var jo =$(".inner")
jo.wrapInner(node); }); $("#remove").click(function () {
var node = document.createElement("div");
node.classList.add("new");
//将jo对应的jQuery对象所包含的DOM对象全部到同一个node内部
var jo =$(".inner")
jo.wrapInner(node); }); $("#empty").click(function () {
$(".inner").empty();//元素还在内容置为空innerHtml=""
}); $("#remove").click(function () {
$(".inner").remove();//删除元素
}); $("#remove-expression").click(function () {
$(".inner").remove(":contains('3')");//删除元素带条件
}); $("#clone-true").click(function () {
var targe = $(".even:last");
//只有采用这种方式绑定的事件才会有效果
targe.bind("click",function () {
alert("哈哈哈");
})
//克隆的元素会有绑定方法
var cloned =targe.clone(true);
$(".odd:last").after(cloned);
}); $("#clone-false").click(function () {
var targe = $(".even:last");
targe.bind("click",function () {
alert("哈哈哈");
})
//克隆的元素不会有绑定方法
var cloned =targe.clone(false);
$(".odd:last").after(cloned);
});
});
</script>
</head>
<body>
<div>
<a id="replace-with">replaceWith</a>
<a id="replace-all">replaceALL</a>
<a id="empty">empty</a>
<a id="remove">remove</a>
<a id="remove-expression">remove(expression)</a>
<a id="clone-true">clone(true)</a>
<a id="clone-false">clone(false)</a>
</div> <div class="even">
<div class="inner">1</div>
</div>
<div class="odd">
<div class="inner">2</div>
</div>
<div class="even">
<div class="inner">3</div>
</div>
<div class="odd">
<div class="inner">4</div>
</div>
</body>
</html>
jQuery CSS方法
1、addClass(className)添加对应类名的样式
removeClass(className)移除样式
2、css(properties)其中properties是一个键值对集合
css(name,value)设置属性值
css(name) 获取值
3、height()等价于css("height")
height(newHeight) 等价于 css("height",newHeight)
width()等价于css("width")
width(newWidth) 等价于 css("width",newWidth)
4、position()返回第一个匹配元素的位置（相对于它的父元素）。
测试案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery position</title>
<style>
.container{height:300px;width: 80%;margin: 20px auto;box-shadow: 0 0 10px 8px #eee;position: relative}
.child{line-height:50px ;height:50px;width: 100px;text-align: center;position: absolute;left: 50px;top: 30px;border: 1px solid blue;}
</style>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$(".child").click(function () {
var pos =$(this).position();
console.log(pos);
console.log(pos.top);
console.log(pos.left);
})
});
</script>
</head>
<body>
<div class="container">
<div class="child">
天天向上
</div>
</div>
</body>
</html>
jQuery 遍历方法
1、length获得当前的jQuery对象内部所包含的DOM对象的个数
get() 获得当前的jQuery对象内部所包含的DOM对象组成的数组
get(index)DOM 获取当前的jQuery对象内部的下标是index的DOM对象
eq(position)jQuery 获取当前的jQuery对象内部的下标是position的DOM对象对应的jQuery对象
index(subject) 获取Query对象内部下标
测试案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM</title>
<style>
.even{width:80%;margin: 20px auto; border:1px solid #ff6f13;}
.odd{width:80%;margin: 20px auto; border:1px solid #3e88ff;}
.inner{background-color: #7FFFD4;margin: 10px 10px;}
</style>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#length").click(function () {
var jo=$(".even");
console.log(jo.length)
}); $("#get").click(function () {
var jo=$(".even");
console.log(jo.get())
}); $("#get-num").click(function () {
var jo=$(".even");
console.log(jo.get(1))
}); $("#eq-num").click(function () {
var jo=$(".even");
console.log(jo.eq(1))
}); $("#index").click(function () {
var jo=$(".even");
var subject=$(".even:last");
console.log(jo.index(subject))
});
});
</script>
</head>
<body>
<div>
<a id="length">length</a>
<a id="get">get()</a>
<a id="get-num">get(num)</a>
<a id="eq-num">eq(num)</a>
<a id="index">index</a>
</div> <div class="even">
<div class="inner">1</div>
</div>
<div class="odd">
<div class="inner">2</div>
</div>
<div class="even">
<div class="inner">3</div>
</div>
<div class="odd">
<div class="inner">4</div>
</div>
</body>
</html>
2、$.each()、jo.each()遍历元素
测试案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM</title>
<style>
.even{width:80%;margin: 20px auto; border:1px solid #ff6f13;}
.odd{width:80%;margin: 20px auto; border:1px solid #3e88ff;}
.inner{background-color: #7FFFD4;margin: 10px 10px;}
</style>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#jQuery-each").click(function () {
/*遍历jQuery对象*/
var jo=$(".even");
$.each(jo,function (index,DOMObject) {
console.log(index);
console.log(DOMObject);
});
/*遍历数组*/
var arr=["番茄炒蛋","辣椒炒肉"];
$.each(arr,function (index, element) {
console.log(index);
console.log(element);
});
/*遍历键值对*/
var map = {"name":"Amy","age":"21"};
$.each(map,function (key,value) {
console.log(key);
console.log(value);
});
}); $("#object-each").click(function () {
var jo=$(".even");
console.log(jo.get())
}); });
</script>
</head>
<body>
<div>
<a id="jQuery-each">$.each()/jQuery.each()</a>
<a id="object-each">jo.each()</a>
</div> <div class="even">
<div class="inner">1</div>
</div>
<div class="odd">
<div class="inner">2</div>
</div>
<div class="even">
<div class="inner">3</div>
</div>
<div class="odd">
<div class="inner">4</div>
</div>
</body>
</html>
转载请于明显处标明出处
https://www.cnblogs.com/AmyZheng/p/9720633.html
jQuery学习（三）的更多相关文章
- Jquery 学习三
一.each语句 1.each语句的功能 在jQuery中,通过$函数获取的都是jQuery对象.通过测试可知,jQuery对象是一个类数组的特殊对象,其是DOM对象的集合.而each语句就是专门用于 ...
- JQuery学习三(隐式迭代和节点遍历)
在JQuery中根据id获取控件,如果输入id错误是不报错的. 必要时可以通过写判断语句进行判断是否id写错 <!DOCTYPE html> <html xmlns="ht ...
- jQuery学习三——事件
代码如下: <!DOCTYPE html> <html> <head> <title>jquery事件</title> </head& ...
- jQuery学习(三)
事件 on方法可以将一个事件绑定在jQuery对象上,当你的操作触发了这些事件时,便会调用你所绑定的函数. 例如,给某个超链接绑定点击事件. <head> <meta http-eq ...
- jquery 学习(三) - 遍历操作
HTML代码 <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p&g ...
- jQuery学习(三)——选择器总结
1.基本选择器 id选择器:$(“#id名称”); 元素选择器:$(“元素名称”); 类选择器:$(“.类名”); 通配符:* 多个选择器共用(并集) 案例代码: <!DOCTYPE html& ...
- 初步学习jquery学习笔记（三）
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
- jQuery学习-事件之绑定事件（三）
在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event ...
- jquery学习笔记(三)：事件和应用
内容来自[汇智网]jquery学习课程 3.1 页面加载事件 在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
随机推荐
- 16 符号 xargs
03. 系统特殊符号: 1) 基础符号系列 美元符号:$ 叹号符号: ! 取反 竖线符号: | 管道符号 前一个命令执行结果交给后面命令处理 xargs 命令|xargs 命令 xargs: 将信息进 ...
- Apache Kafka（四）- 使用 Java 访问 Kafka
1. Produer 1.1. 基本 Producer 首先使用 maven 构建相关依赖,这里我们服务器kafka 版本为 2.12-2.3.0,pom.xml 文件为: <?xml vers ...
- java_爬虫_获取经过js渲染后的网页源码
md 弄了一天了……(这个月不会在摸爬虫了,浪费生命) 进入正题: 起初是想写一个爬虫来爬一个网站的视频,但是怎么爬取都爬取不到,分析了下源代码之后,发现源代码中并没有视频的dom 但是在浏览器检查元 ...
- selenium的定位方法-多元素定位
在实际工作中,有些时候定位元素使用ID.NAME.CLASS_NMAE.XPATH等方法无法定位到具体元素,会发现元素属性有很多一致的,这个时候使用单元素定位方法无法准确定位到具体元素,例如,百度首页 ...
- 【Python】变量命名习惯
仅供参考,个人习惯
- 微信小程序 获取cookie 以及设置 cookie
小程序开发中我们需要获取到后端给的cookie进行请求验证,但是微信并没有帮我们保存cookie,那么我们要维持会话需要自己来保存cookie,并且请求的时候加上cookie 1.获取cookie 在 ...
- 普及C组第二题（8.2）
1340. [南海2009初中]jumpcow(牛跳) (Standard IO) 题目: John的奶牛们计划要跳到月亮上去.它们请魔法师配制了 P (1 <= P <=150,000) ...
- 将 master 节点服务器从 k8s 集群中移除并重新加入
背景 1 台 master 加入集群后发现忘了修改主机名,而在 k8s 集群中修改节点主机名非常麻烦,不如将 master 退出集群改名并重新加入集群(前提是用的是高可用集群). 操作步骤 ssh 登 ...
- Codeforces Round #610 (Div. 2)C（贪心，思维）
沿时间轴枚举,发现关键时间点在于新题目被锁定的前一时间,那是新的题目还没有被锁定并且距离旧的题目已经被锁定的最晚时间,对这些时间点进行操作 #define HAVE_STRUCT_TIMESPEC # ...
- mongodb的一些操作
插入: db.inventory.insert( { _id: 10, type: "misc", item: "card", qty: 15 } ) db.i ...