jQuery中的DOM操做
DOM操做
查找节点
- $( ) - 能够经过jQuery选择器来查找元素节点
- attr( ) - 能够经过jQuery对象提供的方法来查找属性节点
- text( ) - 能够经过jQuery对象提供的方法来查找文本节点
示例代码:css
<script src="js/jquery.js"></script>
</head>
<body>
<button id="btn" name="button">按钮</button>
<script>
// 定位页面元素 - jQuery的选择器
var $btn = $('#btn');
// 指定元素的文本内容 - 相似于DOM中的textContent属性
console.log($btn.text());
// 指定元素的指定属性名获得的属性值 - 相似于DOM中的getAttribute(attrName)
console.log($btn.attr('name'));
// 为指定元素设置文本内容
$btn.text('新按钮');
$btn.attr('class','cls');
/*
jQuery查找页面元素 - 并无参考DOM中的Node对象，而是Element对象
* text()方法 - 相似于DOM中的textContent属性
* 获取 - text()
* 设置 - text(textContent)
* textContent - 表示新的文本内容
* attr()方法
* 获取 - attr(name) - 相似于DOM中的getAttribute(name)
* 设置 - attr(name, value) - 相似于DOM中的setAttribute(name, value)
*/
</script>
</body>
遍历节点
获取父节点
- parent( ) - 表示获取指定元素的父级“括号中填写可选参数
- parents() - 表示获取指定元素的祖先“括号中填写可选参数（能够不写）”closest( ) - 表示获取与指定元素第一个匹配的祖先“括号中填写匹配指定元素的选择器
- 注意:
- parents()的参数不能不写
- parent()的参数能够不写
示例代码:html
<script src="js/jquery.js"></script>
</head>
<body>
<div class="container">
<ul>
<li id="bj">北京</li>
<li>天津</li>
<li>重庆</li>
</ul>
</div>
<script>
var $bj = $('#bj');
/*
获取北京节点的父节点
parent(expr)方法
* 做用 - 获取指定元素的父元素
* 参数
* expr - 可选，表示为选择器，起到过滤做用
*/
console.log($bj.parent('div'));
/*
获取北京节点的全部祖先节点
parents(expr)方法
* 做用 - 获取指定元素的全部祖先元素
* 参数
* expr - 可选，表示为选择器，起到过滤做用
*/
console.log($bj.parents('div'));
/*
closest()方法
* 做用 - 获取指定元素的指定祖先元素，返回第一个匹配的元素
* 参数
* expr - 表示为选择器，起到过滤做用
注意 - jQuery永不报错，只是不提供结果
*/
console.log($bj.closest('div'));
</script>
</body>
获取子节点
示例代码:jquery
<script src="js/jquery.js"></script>
</head>
<body>
<div class="container">
<ul>
<li id="bj">北京
<ul>
<li>东城区</li>
<li>西城区</li>
<li>朝阳区</li>
</ul>
</li>
<li>天津</li>
<li>重庆</li>
</ul>
</div>
<script>
var $ul = $('ul:first');
// 获取指定元素的全部子元素
console.log($ul.children());
// 获取指定元素的指定后代元素
console.log($ul.find('li'));
</script>
</body>
获取兄弟节点
- siblings() - 获取指定元素全部的兄弟元素
- prev() - 获取指定元素的上一个相邻兄弟元素
- next() - 获取指定元素的下一个相邻兄弟元素
示例代码:app
<script src="js/jquery.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>南京</li>
<li>北京</li>
<li id="tj">天津</li>
<li>重庆</li>
<li>长春</li>
</ul>
</div>
<script>
var $tj = $('#tj');
// next() - 表示获取下一个相邻兄弟元素
console.log($tj.next());
// prev() - 表示获取上一个相邻兄弟元素
console.log($tj.prev());
</script>
</body>
建立节点
- $( ) - 能够建立元素节点“括号中直接填写要建立的元素
- text( ) - 能够建立文本节点“括号中直接填写要建立的文本内容
- attr( ) - 能够建立属性节点“括号中直接填写要建立的属性（先写属性名，在写属性值
- $( ) - 也能够直接建立带有属性和文本内容的元素“括号中直接填写要建立的HTML代码
示例代码:函数
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
<li>南京</li>
<li>北京</li>
<li id="tj">天津</li>
<li>重庆</li>
</ul>
<script>
// 1.建立元素节点
// var $newLi = $('<li></li>');
// 2.设置文本内容
// $newLi.text('佳木斯');
// 3.设置属性
// $newLi.attr('id','cc');
// jQuery的工厂函数接收的是字符串类型的HTML代码
var $newLi = $('<li id="cc">佳木斯</li>');
$('#city').append($newLi);
</script>
</body>
插入节点
插入内部节点
- 插入内部节点 - 就是为指定元素添加子节点
- append() - 插入到指定节点的全部子节点列表的最后面
- prepend() - 插入到指定节点的全部子节点列表的先后面
- appendTo()方法是append()方法逆操做
- prependTo()方法是prepend()方法逆操做
示例代码:this
<script src="js/jquery.js"></script>
</head>
<body>
<ul>
<li>北京</li>
<li>南京</li>
<li>天津</li>
</ul>
<script>
// 1.建立新的<li>元素
var $li = $('<li id="cc">佳木斯</li>');
// append() - 相似于DOM中的appendChild()
// $('ul').append($li);
// appendTo()方法与append()互为逆操做
// $li.appendTo($('ul'));
// prepend()方法 - 插入指定节点的全部子节点列表的最前面
$('ul').prepend($li);
</script>
</body>
插入外部节点
- 插入外部节点 - 就是为指定元素添加兄弟节点
示例代码:code
<script src="js/jquery.js"></script>
</head>
<body>
<ul>
<li>北京</li>
<li>南京</li>
<li>天津</li>
</ul>
<script>
// 1.建立新的<li>元素
var $li = $('<li id="cc">佳木斯</li>');
// $('ul').before($li);
$('ul').after($li);
</script>
</body>
删除节点
- remove( ) - 表示删除指定元素,()中填写与指定的元素相匹配的选择器
- empty( ) - 表示删除指定元素的全部后代元素 - 就是清空
- 备注: jQuery中删除节点是谁调用remove删除谁
示例代码:htm
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
<li id="bj">北京</li>
<li>南京</li>
<li>天津</li>
</ul>
<script>
// 哪一个元素调用remove() - 哪一个元素被删除
// $('#bj').remove();
// empty()表示删除后代节点，保留自身节点 - 清空
$('#city').empty();
</script>
</body>
复制节点
- clone() - 表示对指定的元素进行复制
- 注意()中填写布尔值被的无效
- true - 表示对指定元素所绑定事件进行复制
- false - 表示不对指定元素所绑定的事件进行复制
- 注意: 事件须要经过jQuery方式进行绑定才可复制
示例代码:对象
<script src="js/jquery.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
console.log('this is button');
});
/*
* jQuery的clone(boolean)方法 - 参数表示是否复制事件
* DOM的cloneNode(boolean)方法 - 参数表示是否复制后代节点
*/
var $copy = $('#btn').clone(true);
$('body').append($copy);
</script>
</body>
替换节点
- replaceWith() - 表示由被替换调用该方法进行替换,()中填写用来替换的元素
- replaceAll() - 表示由用来替换元素调用该方法进行替换()中填写被替换的元素
示例代码:事件
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
<li id="bj">北京</li>
<li>南京</li>
<li>天津</li>
</ul>
<script>
// 被替换的元素调用replaceWith()方法，该方法接收的参数是替换的元素
// $('#bj').replaceWith($('<li id="cc">长春</li>'));
// replaceAll()方法就是颠倒了的replaceWith()方法
$('<li id="cc">长春</li>').replaceAll($('#bj'));
</script>
</body>
属性操做
- attr( ) - 表示获取指定元素的指定属性
- removeAttr( ) - 表示删除指定元素的指定属性
示例代码:
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
<li id="bj">北京</li>
<li>南京</li>
<li>天津</li>
</ul>
<script>
// removeAttr()方法 - 相似于DOM中的removeAttribute()
$('#bj').removeAttr('id');
</script>
</body>
样式操做
- text() - 表示获取指定元素的文本内容
示例代码:
<style>
.one {
width: 200px;
height: 200px;
background-color: lightcoral;
}
.two {
width: 400px;
height: 400px;
background-color: yellowgreen;
}
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="box"></div>
<script>
// 经过设置style属性为<div>元素添加内联样式 - 代码可读性
// $('#box').attr('style','width:100px;height:100px;background-color:red;');
// 经过设置class属性为<div>元素添加外联样式 - 预约义
$('#box').attr('class','one');
// addClass(className)方法 - 表示添加样式(并不影响指定元素本来的样式)
$('#box').addClass('two');
// $('#box').attr('class','two');// 替换样式
/*
removeClass()方法 - 删除样式
* removeClass()方法 - 删除全部样式
* removeClass(className) - 删除指定样式
* 若是删除多个指定样式，样式名称之间使用空格分隔
*/
// $('#box').removeClass('one');
// toggleClass()方法 - 在删除指定样式与添加指定样式之间切换
// $('#box').toggleClass('one');
// hasClass(className)方法 - 判断指定元素中是否包含指定样式名称
console.log($('#box').hasClass('one'));
/*
css()方法
* css(name) - 获取指定元素的指定样式属性值
* css(name, value) - 为指定元素设置指定的样式属性值(内联样式)
* css(options) - 为指定元素设置指定的样式属性值(内联样式)
* options - 是一个对象类型的，表示全部的样式属性
*/
console.log($('#box').css('width'));
// $('#box').css('width','600px');
// $('#box').css('height','600px');
// jQuery支持链式操做 - jQuery提供的方法都统一返回jQuery对象
// $('#box').css('width','600px').css('height','600px');
$('#box').css({
width: '600px',
height: '600px'
});
</script>
</body>
HTML操做
示例代码:
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
<li id="bj">北京</li>
<li>南京</li>
<li>天津</li>
</ul>
<input type="text" value="请输入你的用户名">
<script>
console.log($('#city').html());
var $html = $('#city').html();
$html += '<li>长春</li>';
$('#city').html($html);
console.log($('input').val());
$('input').val('密码');
</script>
</body>
相关文章
- 1. JQuery中的DOM操做
- 2. jQuery中的DOM操做
- 3. 2、jQuery中的DOM操做
- 4. jQuery的DOM操做、
- 5. jquery的DOM操做
- 6. jQuery操做dom
- 7. jquery操做DOM
- 8. jquery DOM操做（一）
- 9. jQuery之DOM操做
- 10. 【jQuery】之DOM操做
- 更多相关文章...
- • Java 中操作 R - R 语言教程
- • Spring中Bean的作用域 - Spring教程
- • C# 中 foreach 遍历的用法
- • Scala 中文乱码解决
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. JQuery中的DOM操做
- 2. jQuery中的DOM操做
- 3. 2、jQuery中的DOM操做
- 4. jQuery的DOM操做、
- 5. jquery的DOM操做
- 6. jQuery操做dom
- 7. jquery操做DOM
- 8. jquery DOM操做（一）
- 9. jQuery之DOM操做
- 10. 【jQuery】之DOM操做