jQuery之css样式操作、value属性值操作和复选框操作
来源:互联网 发布:中国网络诗歌网高研班 编辑:程序博客网 时间:2024/05/18 15:24
<!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>
<!--
作者:2235928846@qq.com
时间:2017-08-02
描述:
样式分类:行内样式、内部样式、外部样式
注意:JavaScript的dom方法只能获得行内样式
-->
<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>
<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>
<!--
作者:2235928846@qq.com
时间:2017-08-02
描述:
样式分类:行内样式、内部样式、外部样式
注意:JavaScript的dom方法只能获得行内样式
-->
<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>
阅读全文
1 0
- jQuery之css样式操作、value属性值操作和复选框操作
- jQuery的属性与样式之样式操作.css()
- jQuery之dom操作(属性、样式操作)
- jquery操作CSS样式
- jQuery操作css样式
- JQuery 操作css样式
- jQuery操作css样式
- Jquery操作CSS样式
- jquery操作复选框
- Jquery操作复选框
- jQuery操作复选框
- jQuery操作复选框
- jQuery 属性操作和样式函数
- jQuery操作input改变value属性值
- JQuery之复选框checkbox基本操作
- jQuery学习之旅 Item3 属性操作与样式操作
- jQuery学习之旅 3 属性操作与样式操作
- JQuery中操作Css样式
- 1940-计算小费
- ListView联动
- 管理学十大经典定理
- Spatial Structures UVA
- 有名管道(命名管道)
- jQuery之css样式操作、value属性值操作和复选框操作
- 小白入门---HTML基础
- [LeetCode日常] 水塘抽样
- 暑假训练第3天总结
- POJ 1681 Painter's Problem (高斯消元)
- Android开发实践:屏幕旋转的处理
- CDH:hdfs劵故障
- CFNetwork internal error (0xc01a:/BuildRoot/Library/Caches/com.apple.xbs/Sources/CFNetwork_Sim/CFNet
- Android Activty的加载过程 启动流程 源码分析