10.jQuery属性—文档—位置操作
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了10.jQuery属性—文档—位置操作，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7840字，纯文字阅读大概需要12分钟。
内容图文
一、jquery标签属性操作
jquery的属性操作分为四个部分：html属性，dom属性，类样式操作，值操作。
1、html属性操作
对html文档的属性进行读取、设置、删除操作。
（1）attr:设置属性值或者返回被选中元素的属性值
$(‘button‘).click(function(){
//jquery的属性操作，html属性操作:attr
//attr只传一个参数，表示获取值
$(‘$ box p‘).text($(‘#box‘).attr(‘id‘)); //p标签的内容
});
//attr()如果设置两个值，表示设置属性
$(‘#box‘).attr(‘class‘, ‘foo‘); //给当前标签添加类属性
//设置多个值使用对象存储，如果设置多个类名不能使用attr()方法
$(‘#box‘).attr({‘class‘:‘foo2‘, name:‘luffy‘});
（2）removeAttr: 从每个匹配的元素中删除一个属性
//删除一个属性
$(‘#box‘).removeAttr(‘name‘);
$(‘#box‘).remobveAttr(‘class‘);
//删除多个属性
$(‘#box‘).removeAttr("name id class")
2、DOM属性操作
（1）prop:获取匹配的元素中的第一个元素的属性值
//获取第一个元素的class值
console.log($(‘li‘).prop(‘class‘)); //luffy
//设置值
//prop()获取在匹配的元素集中的第一个元素的属性值
$(‘li‘).first().prop({‘name‘:‘an‘, ‘name1‘:‘bn‘});
conole.log($(‘li‘).first());
（2）removeProp:用来删除由.prop()方法设置的属性集
//删除dom对象的name
$(‘li‘).first().removeProp();
console.log($(‘li‘).prop(‘name‘));
console.log($(‘li‘).prop(‘name1‘))
3、类样式操作
对DOm属性的className进行添加，移除操作
（1）addClass（添加类）
为每个匹配的元素添加指定的类名
$(‘div‘).addClass(‘box‘); //添加一个类名
$(‘div‘).addClass(‘box box2‘)
（2）removeClass（移除类）
从所有的匹配的元素中删除全部或者指定的类
$(‘div‘).removeClass(‘box‘) //移除指定的类
$(‘div‘).removeClass() //移除全部的类
（3）toggleClass
切换css类名。如果有就移除，如果没有就添加
$(‘span‘).click(function(){
//动态的切换class类名为active
$(this).toggleClass(‘active‘)
})
4、值操作
DOM属性value进行读取和设置操作
<div id="box">
开始
<p>我是一个段落</p>
<a href="">google</a>
<input type="text" value="哈哈" name="">
<button id="btn">按钮<>
</div>
/*
开始
我是一个段落
google
*/
（1）text：仅仅获取匹配元素包含的文本
console.log($("#box").text());
设置值：设置该所有文本内容。
$(‘#box‘).text(‘<a>google</a>‘); //设置文本
（2）html：获取选择标签所选中的内容
//html（）获取所有
console.log($(‘#box‘).html());
/*
哈哈
<p>我是一个段落</p>
<a href="">google</a>
*/
设置值：设置该值的所有内容，会替换标签中的原来的内容。
$(‘ul‘).html(‘<a href="#">google</a>‘)
//可以使用函数来设置素有匹配元素内容
$(‘ul‘).html(function(){
return ‘hello‘
})
（3）val：获取值，用于表单控件中获取值，
console.log($(‘input‘).val()); //哈哈
$(‘inpuit‘).val(‘你哈什么哈‘)；
$(‘#btn‘).click(function(){
var val = $(‘input‘).val();
//设置上去
$(‘#box‘).text(val); //<div id="box">你哈什么哈</div>
})
表单控件的常用方法：
$(‘input‘).change(function(){
console.log($(this).val())
})
二、操作表单域中的value值
<form action="">
<!--单选框-->
<input type="radio" name="sex" value="112" />男
<input type="radio" name="sex" value="11" checked="" />女
<input type="radio" name="sex" value="11" />gay
<!--复选框-->
<input type="checkbox" value="a" checked=""/>吃饭
<input type="checkbox" value="b" checked=""/>睡觉
<input type="checkbox" value="c" checked=""/>看书
<!--下拉列表-->
<select name="timespan" id="timespan" class="Wdate" >
<option value="1">8:00-8:30</option>
<option value="2">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="111" />
</form>
1、input标签中type属性规定了input元素的类型
| 值 | 描述 |
|---|---|
| button | 定义可点击按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中自读被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重制按钮，清除表单数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行输入字段，用户在其中输入文本 |
通过选择器获取所有type=’radio‘即单选框的jquery对象
console.log($(‘:radio‘)); // :radio取的是type="radio"的
类似的type= ’checkbox‘，即复选框以如下的方式获取
console.log($(‘:checkbox‘));
2、获取input中value
//1、获取单选框的value值
console.log($(‘input[type=radio]:checked‘).val()); //属性选择器 输出了
//2、复选框中value值 仅仅是获取了第一个值
console.log($(‘input[type=checkbox]:checked‘).val()); // 输出：a
//3.下拉列表被选中的值
var obj = $(‘#timespan option:selected‘);
console.log(obj.val()); // 输出：1
// 如果<option value="2" selected="">8:30-9:00</option> 则默认选中2，输出：2
3、设置input中value值
// 设置单选的值
$(‘input[type=radio]‘).val([‘113‘]);
// 设置复选框的值
$(‘input[type=checkbox]‘).val([‘b‘,‘c‘]);
// 设置下拉列表中选中的值，这里面必须要用select
$(‘select‘).val([‘3‘,‘2‘]);
4、文本框text：设置值和获取值
//文本框 设置值和获取值
console.log($("input[type=text]").val()); //获取文本框中的值
//设置值
$(‘input[type=text]‘).val(‘试试就试试‘);
三、JQuery的文档操作
<body>
<span>哈哈</span>
<ul>
</ul>
<button id="btn">按钮</button>
</body>
1、插入操作
（1）父元素.append(子元素)追加某元素，父元素中添加新的元素
//第一种方式
// 父级ul 追加 子级li
$(‘ul‘).append(‘<li><a href="#">luffy</a></li>‘);
//第二种方式
var oLi = document.createElement(‘li‘);
oLi.innerHTML = ‘路飞‘;
$(‘ul‘).append(oLi);
//第三种方式
// 如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操作
$(‘ul‘).append($(‘span‘));
（2）子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
// appendTo()方法
$(‘<a href="#">路飞2</a>‘).appendTo($(‘ul‘));
（3）prepend() 前置添加， 添加到父元素的第一个位置
prependTo() 后置添加，第一个元素添加到父元素中
// 第一种写法：
$(‘ul‘).prepend(‘<li>我是第一个元素</li>‘);
// 第二种写法:
$(‘<li>我是第一个元素</li>‘).prependTo($(‘ul‘));
（4）父.after(子) 在匹配的元素之后插入内容
父.before(子) 在匹配的元素之前插入内容
// 在ul标签前面插了一个h2标签
$(‘ul‘).before(‘<h2>我是一个二级标题</h2>‘);
// 在ul标签后面（外面）插了一个h3标签
$(‘ul‘).after(‘<h3>我是一个三级标题</h3>‘);
（5）子.insertAfter(父)
子.insertBefor(父)
// insertAfter
// 在</ul>后面插入了一个a标签
$(‘<a href="#">最后一个</a>‘).insertAfter($(‘ul‘));
// insertBefore
// 在<ul>标签前面插入了一个a标签
$(‘<a href="#">第一个</a>‘).insertBefore($(‘ul‘));
2、复制操作
clone() 克隆匹配的DOM元素并且选中这些克隆的副本。
$(‘button‘).click(function() {
// 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
3、替换操作
（1）replaceWith()：将所有匹配的元素替换成指定的HTML或DOM元素
//将所有的h5标题替换为a标签
$(‘h5‘).replaceWith(‘<a href="#">hello world</a>‘)
//将所有h5标题标签替换成id为app的dom元素
$(‘h5‘).replaceWith($(‘#app‘));
（2）replaceAll():用匹配的元素替换掉所有 selector匹配到的元素
$(‘<a href="#">替换的超链接</a>‘).replaceAll(‘button‘); // 全部替换为超链接
4、删除操作
（1）remove() 删除节点后，事件也会删除（简言之，删除了整个标签）
//remove():备选元素也被删掉了 事件没有了
$(‘ul‘).remove();
（2）empty(): 清空元素中的所有后代节点
// empty(): 清空元素中的所有后代节点(保留)
$(‘ul‘).empty();
（3）detach()：删除节点后，事件会保留
//detach():移除匹配的节点元素 删除节点后，事件会保留
var $btn = $(‘button‘).detach();
console.log($btn[0]); // <button>替换的按钮</button>
$(‘ul‘).append($btn[0]);
四、jquery的位置属性
1、position：获取匹配到的元素相对父元素的偏移位置
// 获取匹配元素的相对父元素的偏移 position
console.log($(‘p‘).position().left); // 30
console.log($(‘p‘).position().top); // 30
// 点击按钮1秒内向下移动p元素50px
var offsetTop = $(‘p‘).position().top + 50 + ‘px‘;
$(‘#btn‘).click(function () {
$(‘p‘).animate({top:offsetTop},1000)
})
2、scrollTop：获取匹配元素相对滚动条顶部的偏移 文档被卷起的像素值
scrollLeft：获取匹配元素相对滚动条左侧的偏移 文档被卷起的像素值
// 获取匹配元素相对滚动条顶部的偏移 文档被卷起的像素值
console.log($(document).scrollLeft());
console.log($(document).scrollTop());
// 监听文档滚动的jquery方法
$(document).scroll(function () {
console.log(‘水平‘+ $(document).scrollLeft());
console.log(‘垂直‘+ $(document).scrollTop());
})
3、offset：获取匹配元素在当前视口的相对偏移
返回的对象包含两个整型属性：top 和 left
// offset 获取匹配元素在当前视口的相对偏移 相对于浏览器
console.log($(‘#box‘).offset());
console.log($(‘p‘).offset().top); // 31
console.log($(‘p‘).offset().left); // 31
console.log($(‘#btn‘).offset().top); // 225
4、width()\height()：取得匹配元素当前计算的宽度/高度值
// 获取元素的宽高 不包含padding
console.log(‘宽‘+ $(‘#box‘).width()); // 宽200
console.log(‘高‘+ $(‘#box‘).height()); // 高200
设置宽高：
// 设置宽高
$(‘#box‘).width(400);
5、innerHeight：获取第一个匹配元素内部区域高度（包括补白、不包括边框）
innerWidth：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
// 获取 width+2*padding 不包括边框 获取匹配元素的内部宽度
console.log($(‘#box‘).innerWidth()); // 410
6、outerHeight：获取第一个匹配元素外部高度（默认包括补白和边框）
outerWidth：获取第一个匹配元素外部宽度（默认包括补白和边框）
// width + 2*padding + 2*border 获取匹配元素的外部宽度
console.log($(‘#box‘).outerWidth()); // 412
原文：https://www.cnblogs.com/journeyer-xsh/p/13460069.html
内容总结
以上是互联网集市为您收集整理的10.jQuery属性—文档—位置操作全部内容，希望文章能够帮你解决10.jQuery属性—文档—位置操作所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。