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 ...
随机推荐
- usage: git remote add [<options>] <name> <url> -f, --fetch fetch the remote branches --tags import all tags and associated objects when fetching
按照git官网提示输入 git pushgit remote add origin git@github.com:***3 / elm-1.git -u 链接git远程仓库 出现错误 usage: g ...
- 【正确使用vim编辑器的姿势】
"vi:可视化接口(Visual Interface) vim:是vi的增强版(vi iMprove) vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中 ...
- C# 程序集（Assembly）
程序集 程序集是代码进行编译是的一个逻辑单元,把相关的代码和类型进行组合,然后生成PE文件.程序集只是逻辑上的划分,一个程序集可以只由一个文件组成,也可由多个文件组成.不管是单文件程序集还是多文件程序 ...
- bugku flag在index里
原题内容: http://120.24.86.145:8005/post/ Mark一下这道题,前前后后弄了两个多小时,翻了一下别的博主的wp感觉还是讲的太粗了,这里总结下自己的理解: 首先打开这道题 ...
- React源码解析之React.Children.map()(五)
一,React.Children是什么? 是为了处理this.props.children(this.props.children表示所有组件的子节点)这个属性提供的工具,是顶层的api之一 二,Re ...
- Spring - Spring Boot - 应用构建与运行
概述 spring boot 应用构建 spring boot 应用运行 背景 之前的看了看 Spring 的书, 结果老懒没实践 而且后续有别的想法, 但这个始终是第一步 1. 准备 知识 java ...
- Docker - 创建第一个 docker 实例
1. 概述 安装完准备开始使用 2. 环境 os centos 7 docker docker - ce 19.03 3. 步骤 启动docker > systemctl start docke ...
- python的MySQLdb库基本使用介绍
MySQLdb库 import MySQLdb 简介 提供mysql的基本操作(包括建表,读取表数据,插入数据到表) 数据库操作基本步骤 #!/usr/bin/python # -*- coding: ...
- sublime-text3 安装 emmet 插件
下载sublime,http://www.sublimetext.com/ 安装package control :https://packagecontrol.io/ins... 这个地址需要翻墙,访 ...
- blog主题——黑夜
blog主题,存储一下 /* Author: Io_oTI*/ /*Public*/ * { margin: 0; padding: 0; box-sizing: border-box; trans ...