jQuery-HTML
2016-06-05 15:39
399 查看
jQuery-获得内容和属性
(1)jQuery中非常重要的部分,就是操作DOM的能力jQuery提供了一系列与DOM相关的方法,这使访问和操作元素和属性变得很容易
DOM = Document Object Model(文档对象模型)
DOM定义访问HTML和XML文档的标准
(2)获得内容-text()、html()以及val()
三个简单实用的用于DOM操作的jQuery方法
.text() - 设置或返回所选元素的文本内容
.html() - 设置或返回所选元素的额内容(包括html标记)
.val() - 设置或返回表单字段的值
text()和html()实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = 'jquery.js'></script> <script> $(document).ready(function () { $('.bnt1').click(function () { alert('文本: ' + $('.test').text()) }); $('.bnt2').click(function () { alert('html: '+ $('.test').html()) }); }); </script> </head> <body> <p class="test">这是段落中的<b>粗体</b>文本</p> <button type="button" class="bnt1">显示文本</button> <button type="button" class="bnt2">显示HTML</button> </body> </html>
val()方法实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = 'jquery.js'></script> <script> $(document).ready(function () { $('.btn').click(function () { alert('Value: ' + $('.test').val()); }); }); </script> </head> <body> <p>姓名:<input type="text" class="test" value="苗帅"></p> <button type="button" class="btn">显示值</button> </body> </html>
(3)获取属性-attr()
jQuery attr()方法用于获取属性值
实例如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = 'jquery.js'></script> <script> $(document).ready(function () { $('.btn').click(function () { alert($('.test').attr('href')); }); }); </script> </head> <body> <p><a href="https://www.baidu.com" class="test">点我</a></p> <button type="button" class="btn">显示href</button> </body> </html>
2.jQuery-设置内容和属性
(1)设置内容-text(),html()以及val()我们仍然可以用前面的三个函数来完成设置内容的工作
实例如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = 'jquery.js'></script> <script> $(document).ready(function () { $('.btn1').click(function () { $('.test1').text('我已不是文本了'); }); $('.btn2').click(function () { $('.test2').html('我已不是html了'); }); $('.btn3').click(function () { $('.test3').val('jesse'); }); }); </script> </head> <body> <p class="test1">我是文本</p> <p class="test2">我是HTML</p> <p>Input field: <input type="text" class="test3" value="shreck"></p> <button type="button" class="btn1">设置文本</button> <button type="button" class="btn2">设置HTML</button> <button type="button" class="btn3">设置值</button> </body> </html>
3.jQuery-添加元素
添加新的HTML元素.append() - 在被选元素的结尾插入内容
.prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
.before() - 在被选元素之前插入内容
(1)append方法实例
实例如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = 'jquery.js'></script> <script> $(document).ready(function () { $('.btn1').click(function () { $('p').append('<b>新增文本</b>'); }); $('.btn2').click(function () { $('ol').append('<li>New item n</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 type="button" class="btn1">追加文本</button> <button type="button" class="btn2">追加列表项</button> </body> </html>
4.jQuery-删除元素
删除元素内容如需删除元素内容,一般可以使用一下俩个jQuery方法
.remove()-删除被选元素
.empty()-从被选元素中删除子元素
remove方法实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = 'jquery.js'></script> <script> $(document).ready(function () { $('button').click(function () { $('.div1').remove(); }); }); </script> </head> <body> <div class="div1" style="height: 100px;width: 300px;border: 1px;background-color: yellow;"> <p>This is a div</p> <p>This is a paragraph</p> <p>This is anothor paragraph</p> </div> <br> <button type="button">删除元素div</button> </body> </html>
5.jQuery-获取并设置CSS类
jQuery拥有若干进行CSS操作的方法,我们将学习下面这些.addClass() - 向被选元素添加一个或多个类
.removeClass() - 从被选元素删除一个或多个类
.toggleClass() - 对被选元素进行添加/删除类的切换操作
.css() - 设置或返回样式属性
toggleClass实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = 'jquery.js'></script> <script> $(document).ready(function () { $('button').click(function () { $('h1,h2,p').toggleClass('blue'); }); }); </script> <style type="text/css"> .blue { color: blue; } </style> </head> <body> <h1>标题1</h1> <h2>标题2</h2> <p>段落1</p> <p>段落2</p> <button type="button">切换CSS</button> </body> </html>
6.jQuery-css()方法
css()方法设置或返回被选元素的一个或多个样式属性返回元素 background-color值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = 'jquery.js'></script> <script> $(document).ready(function () { $('button').click(function () { alert('颜色为: ' + $('p').css('background-color')); }); }); </script> </head> <body> <p style="background-color: red">我的背景颜色</p> <button type="button">返回颜色</button> </body> </html>
设置背景颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = 'jquery.js'></script> <script> $(document).ready(function () { $('button').click(function () { $('p').css('background-color','yellow'); }); }); </script> </head> <body> <p style="background-color: red">我的背景颜色</p> <button type="button">返回颜色</button> </body> </html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Python动态类型的学习---引用的理解
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- HTML5调用摄像头实例
- JavaScript 各种遍历方式详解
- 数组方法汇总
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 土人系列AS入门教程 -- 对象篇
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)