jquary学习之路--2
11.通过jq添加元素
我们首先学习添加内容的四种方法
1)append()--在被选元素的结尾插入内容
2)prepend()--在..................开头插入内容
3)after()--..........................之后插入内容
4)before()--........................之前.........
jQuery append() 方法在被选元素的结尾插入内容。
实例
$("p").append("Some appended text.");
jQuery prepend() 方法在被选元素的开头插入内容。
实例
$("p").prepend("Some prepended text.");
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。
不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):
实例
function appendText() { var txt1="<p>Text.</p>"; // 以 HTML 创建新元素 var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素 }
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$("img").after("Some text after");$("img").before("Some text before");
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):
实例
function afterText() { var txt1="<b>I </b>"; // 以 HTML 创建新元素 var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素 var txt3=document.createElement("big"); // 通过 DOM 创建新元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素 }
12.jq删除元素
有两种方法--remove()删除被选元素(包含子元素,全部干掉,杀人连尸体都不留)
enpty()从被选的元素中删除子元素(也就是说只是删除里面的内容,就是杀人还留一个尸体)
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){$("#div1").remove();});
});
</script>
</head><body><div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div><br>
<button>删除 div 元素</button></body>
</html>
代码2
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){$("#div1").empty();});
});
</script>
</head><body><div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div><br>
<button>清空 div 元素</button></body>
</html>
上面是两个小例子 大家可以直接复制粘贴
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){$("p").remove(".italic");});
});
</script>
</head><body><p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>删除 class="italic" 的所有 p 元素</button></body>
</html>
13.jq操作css
我这里大概就想到四个给大家进行讲解
addClass();向被选元素添加一个或多个类;
removeClass();删除一个活多个元素;
toggleClass()对被选元素进行添加/删除类的切换操作;
caa()设置返回样式和属性
下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){$("h1,h2,p").addClass("blue");$("div").addClass("important");});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body><h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本!</div>
<br>
<button>向元素添加类</button></body>
</html>
下面的举例子我就不把所有的代码戴上了 我只是把主要代码写出来
<script>
$(document).ready(function(){$("button").click(function(){$("#div1").addClass("important blue");});
});
</script>
删除类的jq代码
<script>
$(document).ready(function(){$("button").click(function(){$("h1,h2,p").removeClass("blue");});
});
</script>
切换类代码
<script>
$(document).ready(function(){$("button").click(function(){$("h1,h2,p").toggleClass("blue");});
});
</script>
14.css()方法使用
css()方法就是把所使用的css使用的样式进行返回出来
我写一个例子用来显示背景颜色的例子
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){alert("Background color = " + $("p").css("background-color"));});
});
</script>
</head><body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的背景色</button>
</body>
</html>
还可以设置背景颜色
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){$("p").css("background-color","yellow");});
});
</script>
</head><body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>设置 p 元素的背景色</button>
</body>
</html>
如果设置多个就是像上面的括号里面多谢几对就好了 我就不举例子了
16.jq遍历
jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。
图示解释:
- <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
- <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
- 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
- <span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
- 两个 <li> 元素是同胞(拥有相同的父元素)。
- 右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
- <b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
提示:祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
dom树的遍历
向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
- parent()
- parents()
- parentsUntil()
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的的直接父元素:
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body><div class="ancestors"><div style="width:500px;">div (曾祖父)<ul>ul (祖父) <li>li (直接父)<span>span</span></li></ul> </div><div style="width:500px;">div (祖父) <p>p (直接父)<span>span</span></p> </div>
</div></body>
</html>
还有一个就是parents的和parent一样的只是加s指的是所有的父类,也包括父类的父类,
就不举例子了;
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
</head><body class="ancestors"> body (曾曾祖父)<div style="width:500px;">div (曾祖父)<ul>ul (祖父) <li>li (直接父)<span>span</span></li></ul> </div>
</body></html>
children()的使用和find()和parene和parents相反的 大家肯定知道是怎么回事了;节省时间就不写代码了;只是一个父类这里指的是子类!
jquary--2学习的内容比较多 我也有点累了 就不增加了 下一节我会更新利用jq查找类名,属性等方法 海域ajax的之前已经更新过了 希望大家进行查看;
致谢!!!
jquary学习之路--2相关推荐
- JQuary学习之路---初始JQuary
JQuary: JQuary概述: 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 第一个JQuary项目: 首先在JQuary官网下载JQu ...
- Redis学习之路(一)--下载安装redis
redis学习之路--下载安装redis windows安装redis 1.下载redis 2.安装 3.查看是否安装成功 windows安装redis 1.下载redis 网址:https://gi ...
- 前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由 二.动态路由+路由嵌套+404页面 三. 编程式导航 四.命名路由 五.命名视图 六.重定向和起别名 1.重定向 2.起别名 ...
- 前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言 先安装node.js环境 ...
- 学习之路-现代密码学基础-001
学习之路-现代密码学基础-第一章密码学概论 转载于:https://www.cnblogs.com/vegetables-Adanos/p/5371420.html
- 拿下斯坦福和剑桥双offer,00后的算法学习之路
董文馨,00后,精通英语,西班牙语.斯坦福大学计算机系和剑桥大学双Offer,秋季将进入斯坦福大学学习. 10岁开始在国外上学:12岁学Scratch: 13岁学HTML & CSS: 14岁 ...
- Markdown学习之路
Markdown学习之路 作者:CFishHome 转载请注明地址:https://blog.51cto.com/12731497/2164274 Markdown是什么? Markdown是一个 W ...
- [EntLib]微软企业库5.0 学习之路——第五步、介绍EntLib.Validation模块信息、验证器的实现层级及内置的各种验证器的使用方法——上篇...
本文是为后面的学习之路做铺垫,简单介绍下企业库中的Validation模块的一些相关知识,包括Validation模块的简介.用途.使用方法.默认提供的多种验证器的介绍等. 一.简介及用途 在实际的项 ...
- 转载: Qt 学习之路 2归档
Qt 学习之路 2归档 http://www.devbean.net/2012/08/qt-study-road-2-catelog/
最新文章
- 基于SSM实现在线课程学习及作业提交系统
- svg做自定义折线图表
- 160个Crackme028之对抗花指令
- Client向Server send数据,返回WSAEWOULDBLOCK错误
- 产品中心和用户中心的视角摘抄
- 不刷新页面的tab_SwiftUI小技巧之如何解决Tab切换后页面重置和List刷新bug
- Could not find *.apk!解决办法
- 用python实现(1.求输入的百倍,十位,个位数;2.输入a,b和ab间夹角,计算c边长;3.计算两点间曼哈顿距离;4.计算给定数据的几何平均数;5.计算向量的L1和L2范数)
- 最全攻略:利用LightSeq加速你的深度学习模型
- AttributeError: module ‘tensorflow._api.v2.train‘ has no attribute ‘Optimizer‘
- 取消input聚焦时的边框,去除ios点击时,自动添加的底色效果
- 微信如何封服务器ip,微信如何多开登陆?如何切换IP养号防封技巧秘籍
- 极客学院ios开发工程师系列课程
- 程序员也要学英语——英语构词法
- 【电磁场】矢量分析基础
- Python:fractions模块数值、浮点、小数转分数
- 学术论文投稿与Rebuttal经验分享
- Chem 3D软件可以改变背景吗
- 专访新浪微博黄波:千人千面,机器学习赋能用户信息流消费
- 未来时代量计算机科幻游戏,“八本科幻未来时代小说”到那个我们可以想象的极限,享受科幻美...