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 ...
随机推荐
- Docker - 查看容器进程在宿主机的 PID
概述 查看 docker 进程, 在容器外的 pid 背景 docker 中运行的进程, 本质上是运行在 host 上的 这些进程, 在 host 上, 也可以有自己的 pid 如果某种情况下, 连不 ...
- 【转载】Windows环境下JNI的实现实例
转自:http://blog.csdn.net/jjunjoe/article/details/6987183 一.关于JNI: JNI(Java Native Interface):Java本地调用 ...
- 刷题72. Edit Distance
一.题目说明 题目72. Edit Distance,计算将word1转换为word2最少需要的操作.操作包含:插入一个字符,删除一个字符,替换一个字符.本题难度为Hard! 二.我的解答 这个题目一 ...
- springboot10（docker）
一 Docker 1 what's the Docker? Docker是一个开源的应用容器引擎,轻量级容器技术. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器 ...
- MyBatis（3）——配置解析
MyBatis中文参考指南:MyBatis用户指南 //------------核心配置文件说明------------// //*在注释中进行说明 <configuration> < ...
- js加密（三）企名片
1. url: https://www.qimingpian.cn/finosda/project/pinvestment 2. target: 3. 简单分析 3.1 打开调试窗口,刷新页面,看看都 ...
- leetcode 25. K 个一组翻转链表
# coding:utf-8 __author__ = "sn" """ 25. K 个一组翻转链表 给你一个链表,每 k 个节点一组进行翻转,请你返 ...
- Go第三方库之tail
Tail Demo // tail.TailFile()函数开启goroutine去读取文件,通过channel格式的t.lines传递内容. t, err := tail.TailFile(&quo ...
- C语言 time、rand、srand
C语言 time.rand.srand #include <time.h> time_t time(time_t *t); 功能:获取当前系统时间 参数:常设置为NULL 返回值:当前系统 ...
- JS高级---三种创建对象的方式
JS高级---三种创建对象的方式 字面量的方式 (实例对象) 调用系统的构造函数 自定义构造函数方式 //创建对象---->实例化一个对象,的同时对属性进行初始化 var per=new Per ...