JQuery(三)——操作HTML和CSS内容
2015-08-24 15:39
771 查看
前边我们学习过JS通过DOM来操作HTML(详看DOM(一)——HTML DOM ),这篇博客我们来看一下JQuery是如何方便的对HTML以及CSS进行各种操作呢?顺便两者之间相互比较一下,看其差别。
一,首先看一下JQuery如何获取想要操作的元素的内容和属性的:
1,获得内容 -text()、html() 以及 val()
三个简单实用的用于 DOM操作的 jQuery方法:
text() -设置或返回所选元素的文本内容
html() -设置或返回所选元素的内容(包括 HTML标记)
val() -设置或返回表单字段的值
2,获取属性 - attr()
好,我们来举一个简单例子,获取属性值:
二,上边是获取了网页中一些元素的内容,或者属性,下边我们如果想改变呢?如何设置呢?当然可以直接设置,也可以通过函数来获取设置。看两个例子:
1,改变属性的值:
2,利用回调函数进行修改设置的:
三,当然我们也可以添加和删除一些HTML元素。
1,添加的几个方法:
例子:利用append添加文本和列表项:
after和before和他们的基本上也相同,不再演示,当然这里我们也可以一块添加若干个新元素,看一下这个例子:
2,删除的几个方法,具体用法不再赘述,和上边的几个方法都是一样的:
四,JQuery操作CSS
jQuery拥有若干进行 CSS操作的方法。下边为几种常用的方法
addClass() -向被选元素添加一个或多个类
removeClass() -从被选元素删除一个或多个类
toggleClass() -对被选元素进行添加/删除类的切换操作
css() -设置或返回样式属性
我们来看一个css()方法的例子:
五,直接控制元素和浏览器窗口的大小:
Jquery尺寸方法:
jQuery提供多个处理尺寸的重要方法:
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
看一个例子吧:
当然上边都是一些小例子,不过我们可以模仿这些小例子,来学习这些知识,然后举一反三通过API文档来学习其他的方法属性等,不过这些都是经常使用的,还是需要我们好好掌握的。通过JQuery能方便我们的很多编写代码,所以JQuery还是需要好好继续学习的!!!
一,首先看一下JQuery如何获取想要操作的元素的内容和属性的:
1,获得内容 -text()、html() 以及 val()
三个简单实用的用于 DOM操作的 jQuery方法:
text() -设置或返回所选元素的文本内容
html() -设置或返回所选元素的内容(包括 HTML标记)
val() -设置或返回表单字段的值
2,获取属性 - attr()
好,我们来举一个简单例子,获取属性值:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片 <span style="font-size:18px;"> <!DOCTYPE html> <html> <head> <script src="/jquery/jquery.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert($("#ljh").attr("href")); }); }); </script> </head> <body> <p><a href="http://blog.csdn.net/liujiahan629629" id="ljh">刘佳翰的博客链接</a></p> <button>我的博客链接</button> </body> </html> </span>
二,上边是获取了网页中一些元素的内容,或者属性,下边我们如果想改变呢?如何设置呢?当然可以直接设置,也可以通过函数来获取设置。看两个例子:
1,改变属性的值:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片 <span style="font-size:18px;"> <!DOCTYPE html> <html> <head> <script src="/jquery/jquery.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#ljh").attr({ "href" : "/article/1339645.html", "title" : "刘佳翰博客中的一篇文章" }); }); }); </script> </head> <body> <p><a href="http://blog.csdn.net/liujiahan629629" id="ljh">刘佳翰的博客</a></p> <button>改变 href 和 title 值</button> <p>请把鼠标指针移动到链接上,或者点击该链接,来查看已经改变的 href 值和已经设置的 title 值。</p> </body> </html> </span>
2,利用回调函数进行修改设置的:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片 <span style="font-size:18px;"> <!DOCTYPE html> <html> <head> <script src="/jquery/jquery.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); }); }); </script> </head> <body> <p id="test1">这是<b>粗体</b>文本。</p> <p id="test2">这是另一段<b>粗体</b>文本。</p> <button id="btn1">显示旧/新文本</button> <button id="btn2">显示旧/新 HTML</button> </body> </html> </span>
三,当然我们也可以添加和删除一些HTML元素。
1,添加的几个方法:
方法名 | 含义 |
Append() | 在被选元素的结尾插入内容 |
Prepend() | 在被选元素的开头插入内容 |
after() | 在被选元素之后插入内容 |
before() | 在被选元素之前插入内容 |
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片 <span style="font-size:18px;"> <!DOCTYPE html> <html> <head> <script src="/jquery/jquery.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ //添加文本 $("p").append(" <b>Appended text</b>."); }); $("#btn2").click(function(){ //添加列表 $("ol").append("<li>Appended item</li>"); }); }); </script> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">追加文本</button> <button id="btn2">追加列表项</button> </body> </html> </span>
after和before和他们的基本上也相同,不再演示,当然这里我们也可以一块添加若干个新元素,看一下这个例子:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片 <span style="font-size:18px;"> <!DOCTYPE html> <html> <head> <script src="/jquery/jquery.js"></script> <script> function appendText() { var txt1="<p>Text.</p>"; // 以 HTML 创建新元素 var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); txt3.innerHTML="Text."; // 通过 DOM 来创建文本 $("body").append(txt1,txt2,txt3); // 追加新元素 } </script> </head> <body> <p>This is a paragraph.</p> <button onclick="appendText()">追加文本</button> </body> </html> </span>
2,删除的几个方法,具体用法不再赘述,和上边的几个方法都是一样的:
方法名 | 含义 |
Remove() | 删除被选元素及其子元素 |
Empty() | 从被选元素中删除子元素 |
jQuery拥有若干进行 CSS操作的方法。下边为几种常用的方法
addClass() -向被选元素添加一个或多个类
removeClass() -从被选元素删除一个或多个类
toggleClass() -对被选元素进行添加/删除类的切换操作
css() -设置或返回样式属性
我们来看一个css()方法的例子:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片 <span style="font-size:18px;"> <!DOCTYPE html> <html> <head> <script src="/jquery/jquery.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); }); }); </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> </span>
五,直接控制元素和浏览器窗口的大小:
Jquery尺寸方法:
jQuery提供多个处理尺寸的重要方法:
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
看一个例子吧:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片 <span style="font-size:18px;"> <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height() + "</br>"; txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br> <button>显示 div 的尺寸</button> <p>outerWidth(true) - 返回元素的宽度(包括内边距、边框和外边距)。</p> <p>outerHeight(true) - 返回元素的高度(包括内边距、边框和外边距)。</p> </body> </html> </span>
当然上边都是一些小例子,不过我们可以模仿这些小例子,来学习这些知识,然后举一反三通过API文档来学习其他的方法属性等,不过这些都是经常使用的,还是需要我们好好掌握的。通过JQuery能方便我们的很多编写代码,所以JQuery还是需要好好继续学习的!!!
相关文章推荐
- jquery+CSS实现的多级竖向展开树形TRee菜单效果
- JQuery(一)——初步总结
- jQuery超酷平面式时钟效果代码分享
- JQuery(二)——简单动画效果
- jquery无法设置checkbox选中即没有变成选中状态
- jquery实现可横向和竖向展开的动态下滑菜单效果
- jQuery插件手把手教会(一)
- jQuery学习笔记--jQuery Ajax
- jQuery支持添加事件的日历特效代码分享(3种样式)
- jquery整理
- jquery 插件
- jquery/js实现验证聚焦,失焦
- 项目总结—jQuery EasyUI- DataGrid使用
- jquery mobile
- 10个超棒jQuery表单操作代码片段
- jquery马赛克拼接翻转效果代码分享
- jquery 元素选择器集合
- jQuery 表单对象属性过滤现则器
- jquery 地址栏链接与a标签链接匹配 特效代码总结(二)
- jquery extend的用法