jquary学习之路--2
来源:互联网 发布:马云是如何开创淘宝的 编辑:程序博客网 时间:2024/06/03 21:21
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 树
这些 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学习之路--1
- Jquary
- Jquary
- Jquary
- Jquary
- Jquary
- JQuary效果
- JQuary Note
- jquary DataTable
- JQuary注册Demo
- JQUARY异步请求
- 控制jQuary对象
- jQuary控制css样式
- Jquary常用方法
- Javasript&Jquary网上文摘
- jquary实现全选功能
- jquary在线文本编辑器
- android图片压缩工具类
- 如何在sublime内调试Javascript代码
- 自定义方法,模仿each遍历多维数组
- PHP中获取当前页面的完整URL
- java模拟getpost请求
- jquary学习之路--2
- Html初学之路01
- c语言中的位操作
- 【数据结构与算法分析】数组
- HttpHandler与HttpModule的用处与区别
- Redis与Memcache区别
- hibernate生成表中有BLOB字段的javabean,hql查询出现无效列类型异常
- hive 创建表详解
- php如何在某个时间上加一天?一小时?一星期?一个月?