1、打开html开发工具，新建一个html代码页面。
2、在html页面创建三个p标签，给这三个p标签设置不同的内容。
3、引入jquery库。在title标签后面引用下载好的jqueryjs文件。
4、 在jquery引用库标签后面新建一个script标签，在这个标签里面添加一个DOM加载完成后执行函数。
5、在DOM加载完成后执行函数里面添加点击p标签时获取当前元素的上一个元素对象。
6、保存html代码后使用浏览器打开，点击p标签d出框就会显示当前点击标签的上一个标签的内容。
jQuery 选择器中 :last 表示最后一个元素，所以表示含有某类属性的最后一个元素可用如下代码表示
$("test-class:last") // 表示最后一个属于test-class类的元素示例如下：
创建Html元素
<div class="top"><ul>
<li>list-1</li>
<li class="selected">list-2</li>
<li class="selected">list-3</li>
<li>list-4</li>
<li class="selected">list-5</li>
</ul>
<span>红色列表项表示属于selected类，d出框显示了最后一个属于selected类的元素的内容</span>
</div>
设置css样式
divtop{margin:50px;padding:10px;width:300px;height:250px;border:2px dashed #ebbcbe;}li{padding:5px;}
liselected{color:red;font-weight:bold;}
span{color:#999;}
编写jquery代码
$(function(){$("ul")click(function() {
alert($("liselected:last")text());
});
})
观察显示效果
padding 属性可以按照方向分开来写。
<style>
outer {
width:400px;
height:400px;
border: 2px solid #000;
}
inner {
width:200px;
height:200px;
background-color:green;
/padding:40px 80px;运行效果是一样的/
padding-top:40px;
padding-right: 80px;
padding-bottom: 40px;
padding-left: 80px;
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
1、jQuery设置css样式
<div style="background-color:#ffffff;padding-left:10px;">测试jQuery动态获取padding-left</div>
2、用css()方法返回元素的样式属性
$("div")css("padding-left"));
3、用css()设置样式
$("div")css("color","yellow");
4、设置多个样式
$("div")css({"background-color":"yellow","font-size":"200%"});
var css = {
background-color: '#EEE',
height: '500px',
margin: '10px',
padding: '2px 5px' };
$("div")css(css);
使用过程中需要主要获取的高度范围包含 盒子模型中的哪些元素、
height() : 其高度范围是所匹配元素的高度 height；（content 的高度）
innerHeight() : 其高度范围是所匹配元素的高度 height + padding ；
outerHeight() : 其高度范围是所匹配元素的高度height + padding + border ；
outerHeight(true) : 其高度范围是所匹配元素的高度 height + padding + border + margin ；
同理宽度有： width() | innerWidth() | outerWidth() | outerWidth(true)
jQuery 选择器中 :last 表示最后一个元素，所以表示含有某类属性的最后一个元素可用如下代码表示
$("test-class:last") // 表示最后一个属于test-class类的元素
示例如下：
创建Html元素
<div class="top">
<ul>
<li>list-1</li>
<li class="selected">list-2</li>
<li class="selected">list-3</li>
<li>list-4</li>
<li class="selected">list-5</li>
</ul>
<span>红色列表项表示属于selected类，d出框显示了最后一个属于selected类的元素的内容</span>
</div>
设置css样式
divtop{margin:50px;padding:10px;width:300px;height:250px;border:2px dashed #ebbcbe;}
li{padding:5px;}
liselected{color:red;font-weight:bold;}
span{color:#999;}
编写jquery代码
$(function(){
$("ul")click(function() {
alert($("liselected:last")text());
});
})
观察显示效果
jquery提供了三个获得内容的方法： text()、html() 以及 val()，其中前两个可用于解决本问题：
$("label#userid")text(); // 首选，获取label的文本
$("label#userid")html(); // 也可以实现，获取label标签内的所有html标记，一般情况改下label标签内就是文本，所以等效上面的方法
下面给出实例演示：分别使用以上两种方法获取label标签的内容，注意最终结果的区别
创建Html元素
<div class="box">
<span>点击按钮获取label中内容：</span><br>
<div class="content">
<label id="userid">输入用户名</label><input type="text">
</div>
<input type="button" value="获取label中的内容">
</div>
设置css样式
divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
divbox span{color:#999;font-style:italic;}
divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
h3{display:inline-block;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
编写jquery代码
$(function(){
$("input:buttonbtn1")click(function() {
alert($("label#userid")text());
});
$("input:buttonbtn2")click(function() {
alert($("label#userid")html());
});
})
观察效果
使用text()方法获取标签内的内容
以上就是关于jQuery怎么获取当前li元素顺序全部的内容，包括:jQuery怎么获取当前li元素顺序、JQUERY怎么获取一个类中的最后一个元素。、火狐浏览器，用jQuery如何获取到margin:0 auto的外边距值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）