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 ...
随机推荐
- MySQL学习（九）小结
redo-log 和 bin-log 是如何联系起来的? update 语句在更新的时候先更新内存后,写 redo-log 然后 bin-log ,其中后面一步是使用了两阶段提交, 也就是每一个更新都 ...
- Educational Codeforces Round 82 (Rated for Div. 2)D（模拟）
从低位到高位枚举,当前位没有就去高位找到有的将其一步步拆分,当前位多余的合并到更高一位 #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h&g ...
- Java 读取网络资源文件 获取文件大小 MD5校验值
Java 读取网络资源文件 获取文件大小 MD5校验值 封装一个文件操作工具类: package c; import java.io.*; import java.net.HttpURLConnect ...
- linux系统下如何打开端口
1)vi /etc/sysconfig/iptables 2)-A INPUT -m state --state NEW -m tcp -p tcp --dport xxxxxxxxxx -j ACC ...
- MP4文件格式分析及分割实现(附源码)
MP4文件格式分析 MP4(MPEG-4 Part 14)是一种常见的多媒体容器格式,它是在“ISO/IEC 14496-14”标准文件中定义的,属于MPEG-4的 ...
- Educational Codeforces Round 76 (Rated for Div. 2) A. Two Rival Students
You are the gym teacher in the school. There are nn students in the row. And there are two rivalling ...
- 3.0 java学习网站
1.http://www.rupeng.com/Courses/Index/51 2.https://www.zhihu.com/question/25255189
- 每天进步一点点------FPGA 静态时序分析模型——reg2reg
2. 应用背景 静态时序分析简称STA,它是一种穷尽的分析方法,它按照同步电路设计的要求,根据电路网表的拓扑结构,计算并检查电路中每一个DFF(触发器)的建立和保持时间以及其他基于路径的时延要求是否满 ...
- CRPR/CPPR
S CRPR clock reconvergence pessimism removal C CPPR clock path pessimism removal 剔除公共clock path上的悲 ...
- Hadoop3.1.1源码Client详解 : 入队前数据写入
该系列总览: Hadoop3.1.1架构体系——设计原理阐述与Client源码图文详解 : 总览 紧接着上一篇: Hadoop3.1.1源码Client详解 : 写入准备-RPC调用与流的建立 先给出 ...