DOM 在 JavaScript 课程中我们详细的探讨过, 它是一种文档对象模型. 方便开发者对 html 结构元素内容进行展示和修改. 在 JavaScript 中, DOM 不但内容庞大繁杂, 而且我们开发的过程中需要考虑更多的兼容性, 扩展性.
在 jQuery 中, 已经将最常用的 DOM 操 作方法进行了有效封装, 并且不需要考虑浏览器的兼容性, 对于之前的 DOM 是一颗岑天大树枝繁叶茂让我们遥不可及, 那么 jQuery 的 DOM 树, 就是一个简笔画的小树, 所有枝叶都唾手可得.
jQuery 的遍历:
祖先:
- parent()
- parents()
- parentsUntil()
后代 :
children() find()
兄弟:
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
过滤
eq()
养成一个习惯, 如果该 jQuery 方法可以设置元素值, 那么该方法一定可以获取元素值.
DOM 元素及属性操作.
1. 设置 (获取) 元素内容.
HTML() 可以获取该元素的标签和内容
HTML(text)
text(text) 只可以获取该元素的文本内容;
- text()
- val(text)
- val()
2. 操作元素属性.(获取, 设置, 删除)
.attr( )
.attr( )的参数有几种设置方法.
1)$('div') .attr('type')获取该属性属性值
2)$('div') .attr('type','value')设置属性值
- 3)$('div') .attr({
- 'data':'valuer1',
- 'data2':'value2'
- })
设置一组属性值;
4)$('div').removeAttr('title');
3. 操作元素样式
CSS()
注: CSS()方法不仅能获取行内样式, 也能获取非行内样式
CSS() 方法的参数有几种设置方法,
CSS(name) 获取某个元素的行内样式
CSS([name1,name2,name3]) 获取多个样式, 返回值是一个数组;
CSS('name',value) 设置行内样式
- CSS({
- name1:value1,
- name2:value2
}) 设置多个行内样式
addClass( )方法
addClass(class) 给元素添加一个 class
addClass( 'class1 class2 class3' )给元素添加多个 class
removeClass(class) 给元素删除一个 class
removeClass('class1 class2 class3')给元素删除多个 class
toggleClass(class) 如果元素没有当前 class 那么添加, 如果有那么删除
选项卡 demo
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">
- </script>
- <script>
- $(function() {
- /* var a=$('div').CSS(['width','height','background'])
- for(var i in a){
- console.log(a[i])
- }*/
- /* document.onclick=function(){
- //alert(1)
- //$('div').toggleClass('abc')
- var a = $('div').CSS(['width','height'])
- $.each(a,function(index,value){
- alert(value)
- })
- }*/
- $('.warp>ul li').click(function() {
- $('.warp div').CSS('display', 'none') $('.warp div').eq($(this).index()).CSS('display', 'block')
- })
- })
- </script>
- <style>
- *{ margin: 0; padding: 0; list-style-type: none; } .warp{ width: 303px;
- height: 600px; border: 1px solid #b6b6b6; margin: 0 auto; position: relative;
- } .warp ul{ width: 304px; height: 100px; border-bottom: 1px solid #b6b6b6;
- } .warp ul li{ border-right: 1px solid #b6b6b6; float: left; width: 100px;
- line-height: 100px; text-align: center; } .warp div{ width: 303px; height:
- 500px; position: absolute; top: 100px; display: none; text-align: center;
- line-height: 500px; font-size: 100px; color: #fff; } .div1{ background:
- red; } .div2{ background: green; } .div3{ background: pink; } .active{
- background: pink; display: block; }
- </style>
- </head>
- <body>
- <div class="warp">
- <ul>
- <li>
- Tab1
- </li>
- <li>
- Tab2
- </li>
- <li>
- Tab3
- </li>
- </ul>
- <div class="div1" style="display:block">
- 1
- </div>
- <div class="div2">
- 2
- </div>
- <div class="div3">
- 3
- </div>
- </div>
- </body>
- </HTML>
demo:
- var box=$('div').CSS(['color','height','width']); // 得到多个 CSS 样式的数组对象
- for(vari in box){
- // 逐个遍历出来 alert(i+':' +box[i]);
- }
jQuery 提供了一个方法 $.each()他和 for in 一样可以遍历对象.
- $.each(obj,function(index,value){
- })
CSS 方法
width()
height()
innerWidth() 包含内边距(padding)
outerWidth()包含内边距和边框(padding border)
offset() 获取某个元素相对于浏览器窗口(可视区域的距离)
position()获取某个元素相对于父元素的偏移距离
scrollTop()获取垂直滚动条的值;
scrollTop(value)设置垂直滚动条的值;
scrollLeft()获取水平滚动条的值;
scrollLeft(value)设置水平滚动条的值;
案例: 楼梯. 选项卡.
楼梯简化版
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">
- </script>
- <script>
- $(function() {
- /* var a=$('div').CSS(['width','height','background'])
- for(var i in a){
- console.log(a[i])
- }*/
- /* document.onclick=function(){
- //alert(1)
- //$('div').toggleClass('abc')
- var a = $('div').CSS(['width','height'])
- $.each(a,function(index,value){
- alert(value)
- })
- }*/
- $('.nav li').click(function() {
- $(document).scrollTop($('div').eq($(this).index()).offset().top)
- })
- })
- </script>
- <style>
- *{ margin: 0; padding: 0; list-style-type: none; } .div1{ width: 90%;
- margin: 0 auto; height: 700px; background: red; color: #fff; line-height:
- 700px; font-size: 100px; text-align: center; } .div2{ width: 90%; margin:
- 0 auto; height: 700px; background: pink; color: #fff; line-height: 700px;
- font-size: 100px; text-align: center; } .div3{ width: 90%; margin: 0 auto;
- height: 700px; background: green; color: #fff; line-height: 700px; font-size:
- 100px; text-align: center; } .div4{ width: 90%; margin: 0 auto; height:
- 700px; background: blue; color: #fff; line-height: 700px; font-size: 100px;
- text-align: center; } .nav{ width: 80px; height: 204px; position: fixed;
- right: 20px; bottom: 40px; background: #b6b6b6; } .nav li{ height: 50px;
- line-height: 50px; text-align: center; font-size: 20px; color: #fff; cursor:
- pointer; border-top: 1px solid #b6b6b6; }
- </style>
- </head>
- <body>
- <ul class="nav">
- <li>
- div1
- </li>
- <li>
- div2
- </li>
- <li>
- div3
- </li>
- <li>
- div4
- </li>
- </ul>
- <div class="div1">
- 我是 DIV1
- </div>
- <div class="div2">
- 我是 DIV2
- </div>
- <div class="div3">
- 我是 DIV3
- </div>
- <div class="div4">
- 我是 DIV4
- </div>
- </body>
- </HTML>
jQuery 节点操作
一.创建节点 为了使页面更加智能化, 有时我们想动态的在 HTML 结构页面添加一个元素标签, 那么 在插入之前首先要做的动作就是:
1. 创建节点.
var box=$('<div id="box">节点</div>'); // 创建一个节点 $('body').append(box); // 将节点插入到 < body > 元素内部
2. 插入节点
append(content) 向指定元素内部后面插入节点 content
appendTo(content) 将指定元素移入到指定元素 content 内部后面
prepend(content) 向指定元素 content 内部的前面插入节点
prependTo(content) 将指定元素移入到指定元素 content 内部前面
after(content) 向指定元素的外部后面插入节点 content
before(content) 向指定元素的外部前面插入节点 content
3. 包裹节点
.wrap() $('div').wrap('<strong></strong>'); // 在 div 外层包裹一层 strong $('div').wrap('<strong>123</strong>'); // 包裹的元素可以带内容 $('div').wrap('<strong><em></em></strong>'); // 包裹多个元素 $('div').wrap($('strong').get(0)); // 也可以包裹一个原生 DOM 不推荐使用, 会崩溃 $('div').wrap(document.createElement('strong')); // 临时的原生 DOM $('div').unwrap(); // 移除一层包裹内容, 多个需移除多次 $('div').wrapInner('<strong></strong>'); // 包裹子元素内容
4. 节点操作
$('body').append($('div').clone(true)); // 复制一个节点添加到 HTML 中
注: clone(true)参数可以为空, 表示只复制元素和内容, 不复制事件行为. 而加上 true 参数的话, 这个元素附带的事件处理行为也复制出来.
$('div').remove(); // 直接删除 div 元素
remove()方法可以接收一个参数, 过滤需要删除的元素.
$('div').replaceWith('<span > 节点</span>'); // 将 div 替换成 span 元素
案例 1: 增加表单姓名, 搜索.
成绩单
<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <title> Document </title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"> </script> <script> $(function() { $('input[type=button]').click(function() { var name = $('input[placeholder = 请输入姓名]').val() var age = $('input[placeholder = 请输入年龄]').val() var wx = $('input[placeholder = 请输入微信号]').val() $('input[placeholder = 请输入姓名]').val('') $('input[placeholder = 请输入年龄]').val('') $('input[placeholder = 请输入微信号]').val('') var $ul = $('<ul></ul>'); $('body').append($ul); var $li1 = ('<li > 姓名:' + name + '</li>'); $ul.append($li1); var $li2 = ('<li > 年龄:' + age + '</li>'); $ul.append($li2); var $li3 = ('<li > 微信号:' + wx + '</li>'); $ul.append($li3); }) }) </script> <style> *{ margin: 0; padding: 0; list-style-type: none; } ul:after{ content: ''; display: block; clear: both; } ul{ max-width: 600px; margin:10px auto; border: 1px solid #b6b6b6; } ul li{ float: left; padding: 20px; /* background: #b6b6b6; */ margin-left: 10px; } </style> </head> <body> <input type="text" placeholder="请输入姓名"> <input type="text" placeholder="请输入年龄"> <input type="text" placeholder="请输入微信号"> <input type="button" value='点击'> </body> </HTML>
搜索
<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <title> Document </title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"> </script> <script> $(function() { $('input[type=button]').click(function() { for (var i = 0; i < $('li').length; i++) { if ($('li').eq(i).HTML() == $('input[type=text]').val()) { $('li').eq(i).CSS('background', 'red') } } }) }) </script> <style> *{ margin: 0; padding: 0; list-style-type: none; } ul:after{ content: ''; display: block; clear: both; } ul{ max-width: 600px; margin:10px auto; border: 1px solid #b6b6b6; } ul li{ float: left; padding: 20px; /* background: #b6b6b6; */ margin-left: 10px; } </style> </head> <body> <div class="search"> <input type="text" placeholder="请输入搜索内容"> <input type="button" value="搜索"> </div> <ul> <li> 杨怀智 </li> <li> 男 </li> <li> 180 </li> <li> 66 </li> </ul> <ul> <li> 234 </li> <li> 男 </li> <li> 180 </li> <li> 66 </li> </ul> <ul> <li> 12 </li> <li> 男 </li> <li> 180 </li> <li> 66 </li> </ul> <ul> <li> 111 </li> <li> 男 </li> <li> 180 </li> <li> 66 </li> </ul> </body> </HTML>
来源: http://www.jianshu.com/p/9a6e4808e3b5