jQuery
什么是jquery
其是对javascript封装的一个框架包
简化对javascript的操作
javascript代码：获得页面节点对象、ajax元素节点对象实现、事件操作、事件对象
jquery代码：无需考虑浏览器兼容问题、代码足够少
宗旨和特点
特点：
① 语法简练、语义易懂、学习快速、丰富文档。
② jQuery 是一个轻量级的脚本，其代码非常小巧
③ jQuery 支持 CSS1~CSS3 定义的属性和选择器
④ jQuery 是跨浏览器的，它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。
⑤ 能将 JavaScript 脚本与 HTML 源代码完全分离，便于后期编辑和维护。
⑥ 插件丰富，除了 jQuery 自身带有的一些特效外，可以通过插件实现更多功能
出现的年代
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 框架，由 John Resig 于 2006 年初创建， 目前最新版本为 1.11.2，官方地址为：http://jquery.com/，中文地址为 http://jquery.org.cn/。
其他相关的javascript框架包
Prototype、YUI、Extjs、bindows、JSVM(国内)、mootools、jQuery
- Prototype：与面向对象的原型继承关键字一致，该框架的特点是功能扩展比较容易。
YUI: yahoo user interface 雅虎用户接口，该框架可以实现各种页面布局效果。
例如效果之一：标签切换对应内容
Extjs: 是目前js框架包里边最为时尚、前沿的。通过该框架包可以实现许多非常绚丽的效果。
该框架可以实现效果之一：页面不同区域进行拖拽效果。
该框架由于实现的效果非常“绚丽”、导致其“实用”价值相对略低。- jQuery：javascript+query
使用前期，jquery侧重快速找到页面上各种节点。
后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。
jquery的版本：
1.0.0 1.0.1 1.0.2 1.1.x 1.2.1 1.2.x 1.3.x 1.4.x 1.5.x………1.11.2
简单使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//var nm = document.getElementById('username').value;
//jquery 获取
var nm = $('#username').val();
alert(nm);
}
function f2(){
$.get('./01.php',function(msg){
alert(msg);
});
}
</script>
</head>
<body>
<h2>jquery简单使用</h2>
<p><input type='text' id='username' name='username' value=''></p>
<p><input type='button' value='jquery获取' onclick='f1()'></p>
<p><input type='button' value='ajax示例' onclick='f2()'></a>
</body>
</html>选择器
在页面上获得各种元素节点对象而使用的条件就是选择器。
document.getElementById()
document.getElementsByTagName();
document.getElementsByName();
基本选择器
$(‘#id属性值’) ----------->document.getElementById()
$(‘tag标签名称’)----------->document.getElementsByTagName();
$(‘.class属性值’) class属性值选择器
$(‘*’) 通配符选择器
$(‘s1,s2,s3’)联合选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//$(‘#id属性值’)
$('#username').css('color','red');
//$(‘tag标签名称’)
$('input').css('background-color','blue');
//$(‘.class属性值’)
$('.apple').css('background-color','green');
//$(‘*’)
//$('*').css('background-color','gray');
//$(‘s1,s2,s3’)
$('p,#username,.apple').css('font-size','25px');
}
</script>
</head>
<body>
<h2>基本选择器(灵感来源于css样式选择器)</h2>
<input type="text" name="username" value="xiaoqiang" id="username" /><br />
<p>Today is Sunday</p>
<div class="apple">We are studying jquery</div>
<span>this is beijing</span><br />
<input type="button" value="触发" onclick="f1()" />
</body>
</html>层次选择器
$(s1 s2) [父子]
$(s1 > s2) [父子]
$(s1 + s2) [兄弟]
$(s1 ~ s2) [兄弟]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//$(s1 s2) [父子]
$('div span').css('background-color','blue');
//$(s1 > s2) [父子]
$('div > span').css('background-color','green');
//$(s1 + s2) [兄弟]
$('div + span').css('background-color','red');
//$(s1 ~ s2) [兄弟]
$('div ~ span').css('background-color','brown');
}
</script>
</head>
<body>
<h2>层次选择器</h2>
<div>
<span>张飞</span>
<p>
<span>赵云</span>
</p>
<span>关羽</span>
</div>
<p>lkls</p>
<span>曹操</span>
<p>吕布</p>
<span>孙权</span>
<div>小乔</div>
<span>大乔</span>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>并且(过滤)选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//$('li').css('background-color','blue'); 找到全部li
//:first 找到第一个
$('li:first').css('background-color','blue');
//:last 最后一个
$('li:last').css('background-color','green');
//:eq(下标)
$('li:eq(4)').css('background-color','pink');
//:gt(索引) 下标大于索引值
$('li:gt(4)').css('color','red');
//:lt(索引) 下标小于索引值
$('li:lt(3)').css('color','orange');
//:even 下标索引值等于偶数的
$('li:even').css('background-color','gray');
//:odd 下标索引值等于奇数的
$('li:odd').css('color','red');
//:not(选择器) 去除与“选择器”匹配的元素
$('li:not(#zhao,#zhang)').css('color','red');
}
function f2(){
//许多选择器都可以作为“并且”选择器使用
//$(s1s2s3s4s5)----->并且选择器(保证不会产生歧义)
//$(s1,s2,s3,s4,s5)----->联合选择器
$('li.hero').css('color','blue');
//$('.heroli').css('color','blue'); //产生歧义
$(':header.hero').css('background-color','green');
$('.hero:header').css('color','red');
}
</script>
</head>
<body>
<h1>并且选择器</h1>
<h2 class="hero">并且选择器</h2>
<h3 class="hero">并且选择器</h3>
<h4>并且选择器</h4>
<ul>
<li>刘备</li>
<li id="zhang">张飞</li>
<li class="hero">关羽</li>
<li id="zhao">赵云</li>
<li class="hero">孙权</li>
<li>周瑜</li>
<li class="hero">黄盖</li>
<li>吕蒙</li>
</ul>
<input type="button" value="触发1" onclick="f1()" />
<input type="button" value="触发2" onclick="f2()" />
</body>
</html>内容过滤选择器
:contains(内容)
包含内容选择器，获得节点内部必须通过标签包含指定的内容
$(“div:contains(beijing)”)
<div>linken love beijing</div> //<---获得此行
<div>jack love shanghai</div>
:empty
获得空元素(内部没有任何元素/文本(空) )节点对象
$(“div:empty”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div> //<---获得此行
<div><img /></div>
<div> </div>
:has(选择器)
内部包含指定元素的选择器
$(“div:has(#apple)”)
<div>hello</div>
<div><p></p></div>
<div><span id=”apple”></span></div> //<---获得此行
<div><span class=”apple”></span></div>
:parent
寻找的节点必须作为父元素节点存在
$(“div:parent”)
<div>linken love beijing</div> //<---
<div>jack love shanghai</div> //<---
<div></div>
<div><img /></div> //<---
<div> </div> //<---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//:contains(内容)
$('div:contains(beijing)').css('background-color','red');
//:empty
$('div:empty').css('width','200px');
$('div:empty').css('height','100px');
$('div:empty').css('background-color','pink');
//:has(选择器)
console.log($('div:has(.orange)'));
//:parent
console.log($('div:parent'));
}
</script>
</head>
<body>
<h1>内容过滤选择器</h1>
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div> </div>
<div><p class="orange"></p></div>
<div><span class="orange"></span></div>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>表单域选中选择器
复选框、单选按钮、下拉列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//获得复选框选中情况
//$(:checked) 过滤出被选中的复选框、单选按钮
console.log($('input:lt(4):checked'));
//每个过滤选择器使用之前，已经获得的元素节点的下标进行归位(从0开始重新计算)
//input:gt(3) 过滤掉‘男’之前的元素，:lt(3)从‘男’开始从0计算
//单选按钮
console.log($('input:gt(3):lt(3):checked'));//男 女 保密
//$(:selected) 获得下拉列表的选中情况
console.log($('option:selected'));
}
</script>
</head>
<body>
<h1>表单域选中选择器</h1>
爱好：
<input type="checkbox" name="hobby[]" value="篮球" />篮球
<input type="checkbox" name="hobby[]" value="排球" />排球
<input type="checkbox" name="hobby[]" value="足球" />足球
<input type="checkbox" name="hobby[]" value="乒乓球" />乒乓球
<br /><br />
性别:
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<input type="radio" name="sex" value="保密" />保密
学历:
<select>
<option value="0">请选择</option>
<option value="1">小学</option>
<option value="2">中学</option>
<option value="3">大学</option>
</select>
<br /><br />
<input type="button" value="触发" onclick="f1()" />
</body>
</html>属性操作
<input type=”text” class=”apple” id=”username” name=”username” value=”tom” address=”beijing”/>
itnode.属性名称
itnode.属性名称= 值;
itnode.getAttribute(属性名称);
itnode.setAttribute(属性名称，值);
jquery方式操作属性(attribute)：
$().attr(属性名称); //获得属性信息值
$().attr(属性名称，值); //设置属性的信息
$().removeAttr(属性名称); //删除属性
$().attr(json对象); //同时为多个属性设置信息值，json对象的键值对就是名称和值
$().attr(属性名称，fn); //通过fn函数执行的return返回值对属性进行赋值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//获得属性信息
console.log($('#username').attr('type'));
console.log($('#username').attr('class'));
console.log($('#username').attr('id'));
console.log($('#username').attr('name'));
console.log($('#username').attr('value'));
console.log($('#username').attr('address'));
}
function f2(){
//修改属性
$('#username').attr('class','orange');
$('#username').attr('name','email');
$('#username').attr('value','jim@sina.com');
$('#username').attr('address','shanghai');
$('#username').attr('weight','120'); //新属性
//$('#username').attr('type','radio'); //禁止修改，改了也生效
$('#username').attr('id','email123');
}
function f3(){
//批量修改属性
//$().attr(json对象);
var jn = {name:'tel','class':'pear',value:'122235546',address:'shenyang'};
$('#username').attr(jn);
}
function f4(){
//函数返回值设置属性
$('#username').attr('value',function(){
return 10+20;
});
}
function f5(){
//删除属性
$('#username').removeAttr('class');
$('#username').removeAttr('name');
$('#username').removeAttr('value');
$('#username').removeAttr('address');
$('#username').removeAttr('id');
//$('#username').removeAttr('type'); //禁止删除
}
</script>
</head>
<body>
<h1>属性操作</h1>
<input type="text" class="apple" id="username" name="username" value="tom" address="beijing" />
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
<input type="button" value="批量修改" onclick="f3()" />
<input type="button" value="函数修改" onclick="f4()" />
<input type="button" value="删除属性" onclick="f5()" />
</body>
</html>快捷操作
class属性值操作
$().attr(‘class’,值);
$().attr(‘class’);
$().removeAttr(‘class’); //删除class的属性
$().addClass(值); //给class属性追加信息值
$().removeClass(值); //删除class属性中的某个信息值
$().toggleClass(值); //开关效果，有就删除，没有就添加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//给class属性追加信息
$('div').addClass('apple');
$('div').addClass('orange');
$('div').addClass('pear');
}
function f2(){
//删除class属性信息
$('div').removeClass('pear');
$('div').removeClass('apple');
}
function f3(){
//开关class属性值操作
$('div').toggleClass('orange');
}
</script>
<style type="text/css">
.apple{width:300px; height:200px; border:2px solid blue;}
.orange{background-color:lightblue;}
.pear{font-size:30px;}
</style>
</head>
<body>
<h1>class属性快捷操作</h1>
<div>this is jquery subject</div>
<input type="button" value="设置" onclick="f1()" />
<input type="button" value="删除class的属性值" onclick="f2()" />
<input type="button" value="开关class属性值操作" onclick="f3()" />
</body>
</html>标签包含内容操作
<div>hello<span>world</span></div>
javascript操作：
dvnode.innerHTML 获得div包含的信息
dvnode.innerHTML = XXX； 设置div包含的内容
(innerHTML不是w3c标准技术，许多浏览器对其有支持而已)
jquery操作：
$().html(); //获得节点包含的信息
$().html(信息); //设置节点包含的内容
$().text(); //获得节点包含的“文本字符串信息”内容
$().text(信息); //设置节点包含的内容(有html标签就把“><”符号变为符号实体)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//获取 - （普通文本 和 html标签 都可以获得）
console.log($('div').html());//this is <p>jquery <span>subject</span></p>
//获取 - 只针对文本内容起作用（过滤html标签）
console.log($('div').text());//this is jquery subject
}
function f2(){
//设置 - （普通文本 和 html标签 都可以设置）
$('div').html('欢迎访问<a href="www.baidu.com">百度</a>');
//设置 - 只针对文本内容起作用，如果有html标签，<>符号将变为符号实体
$('div').text('欢迎访问<a href="www.baidu.com">百度</a>');
}
</script>
</head>
<body>
<h1><标签>包含内容快捷操作</h1>
<div>this is <p>jquery <span>subject</span></p></div>
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
</body>
</html>html() 和 text()方法的区别：
① 获取内容
前者可以获取html标签 和 普通字符串内容
后者只获取普通字符串内容
② 设置内容
前者可以设置html标签 和 普通字符串内容
后者只设置普通字符串内容，如果内容里边有tag标签内容，就把其中的”<”“>”符号转变为符号实体 <-----< >----> 空格------
以上两种操作(获取/设置)如果针对的操作内容是纯字符串内容，则使用效果一致。
css样式操作
$().css(name，value); //设置
$().css(name); //获取
$().css(json对象); //同时修改多个css样式
css()样式操作特点：
- 样式获取，jquery可以获取 行内、内部、外部的样式。
dom方式只能获得行内样式 - 复合属性样式需要拆分为”具体样式”才可以操作
例如： background 需要拆分为 background-color background-image 等进行操作
border： border-left-style border-left-width border-left-color 等
margin： margin-left margin-top 等
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//jquery可以获取 行内、内部、外部的样式
//dom方式只能获得行内样式
console.log($('div').css('width'));//行内样式
console.log($('div').css('height'));
console.log($('background-color'));
console.log($('div').css('color'));//内部样式
console.log($('div').css('font-size'));//外部样式
//当前jquery1.4.4版本不能直接操作"复合属性"样式，需要变为具体样式操作
//
//例如：border----->border-left(top/right/bottom)-style border-left-color border-left-width
// margin----->margin-left/top/right/bottom
// padding----->padding-left/top/right/bottom
// background----->background-color/image
//console.log($('div').css('border'));//空字符串
console.log($('div').css('border-top-color'));//rgb(0, 0, 255)
console.log($('div').css('border-top-width'));//4px
console.log($('div').css('border-top-style'));//solid
//document.getElementsByTagName('div')[0].style.width
}
function f2(){
//有就更改，没有就添加
$('div').css('width','300px');
$('div').css('background-color','lightgreen');
//把 复合样式 变为 具体样式 可以设置
$('div').css('border-right-color','red');
$('div').css('border-right-width','10px');
}
function f3(){
//批量设置css
var jn = {'width':'400px','height':'300px'}
$('div').css(jn);
}
</script>
<link href="./11.css" type="text/css" rel="stylesheet" />
<style type="text/css">
div{color:red; border:4px solid blue;}
</style>
</head>
<body>
<h1>css样式快捷操作</h1>
<div style="width:200px; height:150px; background-color:lightblue;">this is jquery subject</div>
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
<input type="button" value="批量设置" onclick="f3()" />
</body>
</html>value属性快捷操作
$().attr(‘value’);
$().attr(‘value’,信息值);
快捷操作：
$().val(); //获得value属性值
$().val(信息值); //设置value属性的值
该val方法在 复选框、单选按钮、下拉列表 的使用有凸出表现。
复选框操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//获得复选框选中情况
//判断复选框选中：$().attr('checked'); ---> true选中/false未选中
console.log($('.hby:checked'));//获得选中的复选框
//遍历选中的项目，获得其value属性值
var s ='';
for(var i=0; i<$('.hby:checked').length; i++){
s += $('.hby:checked').val() + ',';
}
//删除最后的逗号
//s = s.substr(位置,长度); 1,3,4
s = s.substr(0,s.length-1);
console.log(s);
}
function f2(){
//设置复选框选中情况
//value值等于2和4的项目选中
//设置单独复选框先中 $(复选框).attr('checked',true);
//设置多个复选框选中 $(全部复选框).val([value值元素，value值元素]);
//val([元素，元素])参数是一个数组，即时一个项目选中也是数组
$('.hby').val([1,2,4]);
}
</script>
</head>
<body>
<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" />乒乓球
<br /><br />
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
</body>
</html>下拉列表操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//获得选中情况
//$(:select)
//console.log($('option:select')); //单选情况
console.log($('select').val());//["2", "3"] 多选情况
}
function f2(){
//设置选中情况
//$(下拉列表).val([value值,value值])
//$('select').val([1]);
$('select').val([1,3]);
}
</script>
</head>
<body>
<h1>下拉列表操作</h1>
学历：
<select multiple="multiple">
<option value="0">请选择</option>
<option value="1">小学</option>
<option value="2">中学</option>
<option value="3">大学</option>
</select>
<br /><br />
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
</body>
</html>单选按钮操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function f1(){
//获得选中情况
console.log($('.sx:checked').val());
}
function f2(){
//设置选中情况
//$(全部单选按钮).val([value值元素])
$('.sx').val(['c']);
}
</script>
</head>
<body>
<h1>单选按钮操作</h1>
性别
<input type="radio" class="sx" name="sex" value="a" />男
<input type="radio" class="sx" name="sex" value="b" />女
<input type="radio" class="sx" name="sex" value="c" />保密
<br /><br />
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
</body>
</html>复选框操作
全选、反选、全不选
$().attr(‘checked’,true); //设置复选框选中
$().attr(‘checked’,false); //取消复选框选中
$().attr(‘checked’); //判断复选框选中情况，返回布尔值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery-3.1.0.js' ></script>
<script type="text/javascript">
function selAll(){
//全选
// $('li').css('color','red'); //css()方法内部有遍历机制，会为每个li设置样式
//$('.hby').attr('checked',true);//attr()方法内部有遍历机制，会为每个复选框设置选中
$(".hby").prop("checked", true);
}
function selNotAll(){
//全不选
//$('.hby').attr('checked',false);
$(".hby").prop("checked", false);
}
function selFan(){
//反选
//遍历全部复选框，选中就取消，未选中就设置选中
//$('.hby')
for(var i=0; i<$('.hby').length; i++){
//判断当前复选框选中情况
var flag = $('.hby:eq('+i+')').attr('checked');
$('.hby:eq('+i+')').attr('checked',!flag);
}
}
</script>
</head>
<body>
<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" />乒乓球
<br /><br />
<input type="button" value="全选" onclick="selAll()" />
<input type="button" value="全不选" onclick="selNotAll()" />
<input type="button" value="反选" onclick="selFan()" />
</body>
</html>
扫一扫
993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
