27.jQuery操作属性
attr(‘属性名’,属性值) 可以设置属性，修改属性
attr(‘属性名’) 获取属性值
removeAttr（）移除属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<input type="button" value="获取属性" id="btn1"/>
<input type="button" value="设置属性" id="btn2"/>
<input type="button" value="移除属性" id="btn3"/> <br/><br/>
<img src="991.gif" alt="周五晚睡1" title="周五晚睡" aaa='aaa'/>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//jQuery中操作属性:attr() removeAttr();
//1.设置属性
$('#btn2').click(function () {
//设置单属性.
// $('img').attr('src','992.gif');//以前有src属性,更改这个属性.
// $('img').attr('aaa','哈哈哈');//修改自定义属性.
// $('img').attr('bbb','bbb');//如果元素原来没有这个属性,那就是添加属性.
//设置多属性.
$('img').attr({
src:'992.gif',
aaa:"hahaha",
bbb:'bbb'
});
});
//2.获取属性.
$('#btn1').click(function () {
//console.log($('img').attr('src'));//自带的属性可以获取
//console.log($('img').attr('aaa'));//自定义的属性也可以获取
console.log($('img').attr('bbb'));//如果没有这个属性,获取到的值就是undefined; attr()设置的属性也是可以获取的.
});
//3.移除属性.
$('#btn3').click(function () {
//移除单属性.
// $('img').removeAttr('alt');
// $('img').removeAttr('aaa');
// $('img').removeAttr('bbb');
$('img').removeAttr('alt aaa bbb'); //移除多属性.
});
});
</script>28.prop()操作布尔类型的属性
回忆一下，有一类属性比如：checked，写在元素的身上就表示选中，没有写在元素的身上就表示没有选中。
这一类属性，用原生js是如何操作的呢？
给他设置true或者false, 取值也是得到true或者false.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn1"/> <br/> <br/>
<input type="checkbox" id="ckb1" /><br/>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// document.getElementById("btn1").onclick = function () {
// //设置操作。
// //document.getElementById("ckb1").checked = false;
// //获取操作。
// console.log(document.getElementById("ckb1").checked);
// };
//jQuery.
// $('#btn1').click(function () {
// console.log($('#ckb1').attr('checked')); //无论是选中还是没有选中，都返回一个undefined。
// });
//原因是：
//在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。
$('#btn1').click(function () {
console.log($('#ckb1').prop('checked'));
//如果多选框是选中状态返回一个true； 如果多选框是取消选中状态那返回就是一个false.
});
});
</script>
</body>
</html>表格全选反选示例：
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//需求1:上面的多选框选中,下面的多选框们跟着选中,上面的多选框没有选中,下面的多选框们跟着不选中.
//需求2:下面的多选框们,都有单击事件:
//如果下面的多选框们都选中了,那么上面的那个多选框跟着选中,如果下面多选框有一个没有选中,那么上面的多选框就不选中.
//需求1：
$('#j_cbAll').click(function () {
//获取这多选框的checked值。
var checkedValue = $(this).prop('checked');
//console.log(checkedValue);
//让下面的多选框们的checked跟随这个checkedValue
$('#j_tb input').prop('checked',checkedValue);
});
//需求2：
$('#j_tb input').click(function () {
//判断下面的那四个多选框是否都被选中了。
var numOfAll = $('#j_tb input').length; //获取到下面所有多选框的个数。
var numOfSelect = $('#j_tb input:checked').length; //获取到下面被选中的多选框的个数。
console.log(numOfAll + ":" + numOfSelect);
//判断
// if(numOfAll == numOfSelect){
// //全部被选中。
// $('#j_cbAll').prop('checked',true);
// }else {
// //有的有没选中。
// $('#j_cbAll').prop('checked',false);
// }
//上面这个判断其实可以优化。
$('#j_cbAll').prop('checked',numOfAll == numOfSelect);
});
});
</script>29.height()高weight()宽
设置或者获取高/宽，不包括内边距、边框和外边距
带参数表示设置高/宽度，不带参数表示获取高/宽度
1.1 获取id为one的这个div的宽和高.
console.log($('#one').css('height'));//'200px'
console.log($('#one').css('width'));//'200px'
1.2 width() height()
获取或者设置元素的宽高的,这个宽高不包括padding/border/margin.
获取
console.log($('#one').width());
console.log($('#one').height());
设置
$('#one').width(300);
$('#one').height(300);
1.3 innerWidth()/innerHeight()
方法返回元素的宽度/高度（包括内边距)。
console.log($('#one').innerWidth());
console.log($('#one').innerHeight());
1.4 outerWidth()/outerHeight()
方法返回元素的宽度/高度（包括内边距和边框）。
console.log($('#one').outerWidth());
console.log($('#one').outerHeight());
1.5 outerWidth(true)/outerHeight(true)
方法返回元素的宽度/高度（包括内边距、边框和外边距）。
console.log($('#one').outerWidth(true));
console.log($('#one').outerHeight(true));
1.5 获取页面可视区的宽高.
获取可视区宽度
console.log($(window).width());
// 获取可视区高度
console.log($(window).height());
29.offset()和position()
offset()获取元素距离document的位置
position()获取的是元素距离有定位的父元素（offsetParent）的位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 400px;
height: 400px;
border: 10px solid red;
position: relative;
top: 10px;
left: 10px;
}
.son {
width: 100px;
height: 100px;
border: 10px solid green;
position: absolute;
top: 110px;
left: 110px;
}
</style>
</head>
<body>
<input type="button" value="offset()" id="btn1"/>
<input type="button" value="position()" id="btn2"/>
<div id="father" class="father">
<div id="son" class="son"></div>
</div>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//1.offset()
//获取会得到一个对象,对象里面包含了top和left的值.
//offset方法获取元素距离document的位置
$('#btn1').click(function () {
console.log($('#son').offset());
});
//2.position();
//获取会得到一个对象,对象里面包含了top和left的值.
//position方法获取的是元素距离有定位的父元素(offsetParent)的位置。
$('#btn2').click(function () {
console.log($('#son').position());
});
});
</script>30.scrollTop()和scrollLeft()
scrollLeft() 表示元素内容被卷曲出去的宽度.
scrollTop() 表示元素内容被卷曲出去的高度
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//给按钮设置一个点击事件.
$('#btn').click(function () {
获取
scrollLeft() 表示元素内容被卷曲出去的宽度.
scrollTop() 表示元素内容被卷曲出去的高度
console.log($('div').scrollLeft() + ":" + $('div').scrollTop());
设置
设置元素内容被卷曲出去的高度或者宽度.
$('div').scrollLeft(217);
$('div').scrollTop(217);
获取页面被卷曲的高度
console.log($(window).scrollTop());
获取页面被卷曲的宽度
console.log($(window).scrollLeft());
设置页面被卷曲出去的距离.
$(window).scrollTop(1000);
$(window).scrollLeft(1000);
});
});
</script>31.固定导航栏
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//思路:给页面设置一个滚动事件,时刻监视页面的scrollTop的值,
// 如果这个值大于第一部分的高度,就设置第二部分为固定定位.
// 如果这个值小于第一部分的高度,就设置第二部分的定位还原.
//计算第一部分的高度.
var topHeight = $('.top').height();
//计算第二部分的高度.
var navHeight = $('.nav').height();
//给页面设置一个滚动事件.
$(window).scroll(function () {
//1.获取页面滚出去的距离(被卷曲出去的距离);
var scrollTopValue = $(window).scrollTop();
//2.判断,看scrollTopValue的值是不是大于第一部分的高度.
if(scrollTopValue >= topHeight){
//让第二部分固定定位.
$('.nav').css({
position:'fixed',
top:0,
left:0
});
//设置第三部分的margin-top的值为第二部分的高度.
$('.main').css({
marginTop:navHeight+10
});
}else {
//让第二部分定位还原.
$('.nav').css({
position:'static',
top:0,
left:0
});
//设置第三部分的margin-top的值为原来的值.
$('.main').css({
marginTop:10
});
}
});
});
</script>32.jQuery颜色插件
引入jquery.color.js
<script src="jquery-1.12.4.js"></script>
<!--<script src="plugin/jquery.color.js"></script>-->
<script src="https://cdn.bootcss.com/jquery-color/2.1.2/jquery.color.js"></script>
<script>
$(function () {
//需求: 点击按钮,让div做动画, left改变到800 , 改变背景色
//animate动画不会改变背景色, 如果非要改,就要使用插件.
$('#btn').on('click', function () {
//让div做动画
$('div').animate({
left:800,
width:100,
height:100,
backgroundColor:'green'
},2000);
});
//什么是插件?
//其实就是用来做扩展功能的.
//jQuery插件库: jq22.com
//下js的网站https://cdn.bootcss.com/jquery-color/2.1.2/jquery.color.js
});
</script>33.省市联动插件
引入distpicker.data.js和distpicker.js
<script src="jquery-1.12.4.js"></script>
<script src="plugin/distpicker.data.js"></script>
<script src="plugin/distpicker.js"></script>
<script>
$(function () {
//使用插件
//1.引入jQuery文件.
//2.引入插件文件.
//3.调用插件方法.
$('#one').distpicker({
//显示默认值
province: "广东省",
city: "深圳市",
district: "宝安区"
});
});
</script>
260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
