jQuery之css样式操作、value属性值操作和复选框操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//1.css样式操作
function f1 () {
//设置样式（会被修改为行内样式）--有则修改，无则添加
//$('div').css('font-size','40px');//添加
//$('div').css('color','green');//修改
//$('div').css('border','5px solid yellow');//符合样式可以直接设置
$('div').css({'font-size':'50px',color:'green'});
}
//2.value属性值快捷操作
function f2 () {
//$().val()--获得value属性值
//$().val(信息值)--设置value属性值
/**
* 获取复选框元素节点对象，遍历全部的复选框，
* 判断当前被遍历出来的复选框是否有选中，
* 如果选中就获得其value值
*/
var obj=$('.hby:checked');
var s="";
for (var i=0;i<obj.length;i++) {
s+=$('.hby:checked:eq('+i+')').val()+",";
}
s=s.substr(0,s.length-1);//去除最后的逗号
alert(s);//输出1,2,4
}
function f3 () {
//设置复选框被选中
/**
* 获得全部复选框，然后遍历，判断当前项目的value值是否等于一个值，等于就选中
*/
$('.hby').val([1,2,4]);//简单做法
}
function f4 () {
//获取下拉列表value值
//alert($('option:selected').val());//适合单项的下拉列表
//alert($('select').val());//适合多项下拉列表
//设置下拉列表value值
$('#city').val(['bj','sh']);
}
//3.复选框操作--全选、反选、全不选
function f5 () {
//全选操作
$('.hby').attr('checked',true);
/**总结：
* .css()和.attr()都有批量处理效果
* 在jQuery框架里，大部分方法本身有遍历机制，
* 遍历的同时会为每一个dom对象都设置对应的css属性
*/
}
function f6 () {
//全不选操作
$('.hby').attr('checked',false);
}
function f7 () {
//反选操作--遍历全部的复选框，查看选中状态
var obj=$('.hby');
for (var i=0;i<obj.length;i++) {
var flag=$('.hby:eq('+i+')').attr('checked');//判断选中状态
$('.hby:eq('+i+')').attr('checked',!flag);
}

}
</script>
<style type="text/css"></style>
</head>
<body>
<h1>css样式操作</h1>

<div style="color: red;"><span>we are studying jquery</span></div>
<input type="button" value="设置" onclick="f1()" />
<h1>复选框操作</h1>
<input type="checkbox" class="hby" name="hobby[]" value="1" />足球
<input type="checkbox" class="hby" name="hobby[]" value="2" />篮球
<input type="checkbox" class="hby" name="hobby[]" value="3" />排球
<input type="checkbox" class="hby" name="hobby[]" value="4" />棒球
<input type="button" value="触发" onclick="f2()" />
<input type="button" value="设置" onclick="f3()" />
<input type="button" value="全选" onclick="f5()" />
<input type="button" value="全不选" onclick="f6()" />
<input type="button" value="反选" onclick="f7()" />
<h1>下拉列表</h1>
城市：
<select id="city" multiple="multiple">
<option value="0">-请选择-</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="tj">天津</option>
<option value="wh">武汉</option>
</select>
<input type="button" value="获取" onclick="f4()" />
<input type="button" value="设置" onclick="f4()" />
</body>
</html>

jQuery之css样式操作、value属性值操作和复选框操作

猜你喜欢