WEB前端学习笔记-jQuery
程序员文章站
2022-05-10 15:49:48
...
jQuery-001-全选和取消.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选和取消</title>
</head>
<body>
<script type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript">
function selectAll(){
//1、获得第一个CheckBox的选中状态
var flag = $("#selectAllBut").prop("checked");
//2、为所有数据行CheckBox的选中状态设置
var $obj = $(".ah");//jQuery对象名称一般是$开头的
$obj.prop("checked",flag);
}
</script>
<!--this表示触发当前事件的HTML元素对象-->
<input type="checkbox" onclick="selectAll()" id="selectAllBut"/>全选<br>
<input type="checkbox" class="ah" />吃<br>
<input type="checkbox" class="ah" />喝<br>
<input type="checkbox" class="ah" />玩<br>
</body>
</html>
jQuery-002-基本选择器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery基本选择器</title>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
</style>
<script type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript">
function fun1(){
var $obj = $("#one");
$obj.css("background-color","aqua");
}
function fun2(){
var $obj = $(".two");
$obj.css("background-color","greenyellow");
}
function fun3(){
var $obj = $("div");
$obj.css("background-color","bisque");
}
function fun4(){
var $obj = $("*");
$obj.css("background-color","cornflowerblue");
}
function fun5(){
var $obj = $("#one,span");
$obj.css("background-color","darkorchid");
}
</script>
</head>
<body>
<!--定义被选择对象-->
<div id="one" class="two"></div><br>
<div class="two"></div><br>
<div></div><br>
<span>我是span标签</span>
<br>
<!--定义按钮-->
<input type="button" id="btn01" value="选择id为one的元素" onclick="fun1()"/>
<input type="button" id="btn02" value="选择class为two的元素" onclick="fun2()"/>
<input type="button" id="btn03" value="选择所有div元素" onclick="fun3()"/>
<input type="button" id="btn04" value="选择所有元素" onclick="fun4()"/>
<input type="button" id="btn05" value="选择id为one和所有span元素" onclick="fun5()"/>
</body>
</html>
jQuery-003-层级选择器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery层级选择器</title>
<style type="text/css">
div{
background:gray;
}
</style>
<script type="text/javascript"src="JQuery.js"></script>
</head>
<body>
<script>
function fun1(){
$("body div").css("background-color","dodgerblue");
}
function fun2(){
$("body>div").css("background-color","pink");
}
function fun3(){
$("#one+div").css("background-color","mediumspringgreen");
}
function fun4(){
$("#two~div").css("background-color","fuchsia");
}
function fun5(){
$("#two").siblings("div").css("background-color","firebrick");
}
</script>
<!--定义被选择对象-->
<div id="one">我是div01</div>
<div id="two">我是div02</div>
<div>
我是div03
<div class="son">我是div03的子div</div>
<div class="son">我是div03的子div</div>
</div>
<div>我是div04</div>
<span>我是span标签</span>
<br>
<!--定义按钮-->
<input type="button"id="btn01" value="选择body中的所有div" onclick="fun1()"/>
<input type="button"id="btn02" value="选择body下的直接div子标签" onclick="fun2()"/>
<input type="button"id="btn03" value="选择id为one的下一个兄弟div" onclick="fun3()"/>
<input type="button"id="btn04" value="选择id为two的所有后面的兄弟div" onclick="fun4()"/>
<input type="button"id="btn05" value="选择id为two的所有兄弟div" onclick="fun5()"/>
</body>
</html>
jQuery-004-表单input框选择器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单input框选择器</title>
<script type="text/javascript"src="JQuery.js"></script>
<script>
//val()函数 jQuery对象中的一个功能函数 读取jQuery中第一个dom对象
function fun1(){
var $obj = $(":text");
var value = $obj.val();
alert(value);
}
function fun2(){
var $obj = $(":password");
var value = $obj.val();
alert(value);
}
function fun3(){
var $obj = $(":radio");
//jQuery对象转化为dom对象
/*
for(var i = 0;i<$obj.length;i++){
var domObj = $obj[i];
myFun(i,domObj);
}
*/
$obj.each(myFun);
}
function myFun(index,domObj){
alert("第"+(index+1)+"个radio标签的value是"+domObj.value)
}
function fun4(){
alert($(":file").val());
}
</script>
</head>
<body>
<!--定义表单-->
<form id="myForm" action="">
用户名:
<input type="text" name="username" /><br><br>
密 码:
<input type="password" name="password" /><br><br>
性 别:
<input type="radio" name="gender"value="1"checked />男
<input type="radio" name="gender"value="0" />女
照 片:
<input type="file" name="photo" /><br><br>
兴 趣:
<input type="checkbox" name="interest" value="music" checked />音乐
<input type="checkbox" name="interest" value="food" />美食
<input type="checkbox" name="interest" value="trip" />旅行
<input type="checkbox" name="interest" value="shopping" />购物
<br><br>
<input type="submit"value="提交" />
</form>
<br><br>
<!--定义按钮-->
<button id="btn01"onclick="fun1()">选择文本输入框并输出用户输入的值</button>
<button id="btn02"onclick="fun2()">选择密码输入框输出用户输入的密码</button>
<button id="btn03"onclick="fun3()">选择单选框的value属性值</button>
<button id="btn04"onclick="fun4()">选择文件上传框并输出用户选择的文件</button>
<button id="btn05">选择复选框并输出用户选择的值</button>
</body>
</html>
jQuery-005-基本过滤选择器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery基本过滤选择器</title>
<style type="text/css">
div{
background: gray;
}
</style>
<script type="text/javascript"src="JQuery.js"></script>
<script>
function fun1(){
$("div:first").css("background-color","pink");
}
function fun2(){
$("div:last").css("background-color","burlywood");
}
function fun7(){
$("div:eq(3)").css("background-color","indianred");
}
function fun8(){
$("div:lt(3)").css("background-color","lightblue");
}
function fun9(){
$("div:gt(3)").css("background-color","black");
}
</script>
</head>
<body>
<!--定义被选择对象-->
<h2>以下是div</h2>
<div id="one">我的序号是0</div>
<div id="two"class="c02">我的序号是1</div>
<div>
我的序号是2
<div class="son">我的序号是3</div>
<div class="son">我的序号是4</div>
</div>
<div>我的序号是5</div>
<h3>以下是span</h3>
<span>我是span标签</span>
<br><br>
<!--定义按钮-->
<input type="button" id="btn01" value="选择第一个div" onclick="fun1()"/>
<input type="button" id="btn02" value="选择最后一个div" onclick="fun2()"/>
<input type="button" id="btn03" value="选择id值不是one的div" />
<input type="button" id="btn04" value="选择class不包含c02的div" />
<input type="button" id="btn05" value="选择索引号为奇数的div元素" />
<input type="button" id="btn06" value="选择索引号为偶数的div元素" />
<input type="button" id="btn07" value="选择索引号等于3的div元素"onclick="fun7()" />
<input type="button" id="btn08" value="选择索引号小于3的div元素"onclick="fun8()" />
<input type="button" id="btn09" value="选择索引号大于3的div元素"onclick="fun9()" />
<input type="button" id="btn10" value="选择所有标题元素" />
</body>
</html>
jQuery-006-过滤选择器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<script type="text/javascript"src="JQuery.js"></script>
<script>
function fun1(){
$("div[title]").css("background-color","gold");
}
function fun2(){
$("div[title = 'test']").css("background-color","greenyellow");
}
function fun3(){
$("div[title != 'test']").css("background-color","burlywood");
}
function fun4(){
$("div[title ^= 'te']").css("background-color","fuchsia");
}
function fun5(){
$("div[title $= 'st']").css("background-color","blueviolet");
}
function fun6(){
$("div[title *= 'es']").css("background-color","navy");
}
function fun7(){
$("div[title *= 'es'][id]").css("background-color","salmon");
}
</script>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
.son{
background: cyan;
width: 180px;
height: 20px;
}
</style>
</head>
<body>
<!--定义被选择对象-->
<div id="one" title="test">zero</div>
<div class="c02" title="myTest">one</div>
<div>
two
<div id="three" class="son">three</div>
<div title="test" class="son">four</div>
</div>
<div title="testCase" id="">five</div>
<div></div>
<span>我是span标签</span>
<br><br>
<!--定义按钮-->
<input type="button" id="btn01" value="选择包含title属性的div元素" onclick="fun1()"/>
<input type="button" id="btn02" value="选择title属性值为test的div元素"onclick="fun2()" />
<input type="button" id="btn03" value="选择title属性值不为testdiv元素" onclick="fun3()"/>
<input type="button" id="btn04" value="选择title属性以'te'开头的div元素"onclick="fun4()"/>
<input type="button" id="btn05" value="选择title属性以'st'结尾的div元素" onclick="fun5()"/>
<input type="button" id="btn06" value="选择title属性包含'es'的div元素" onclick="fun6()"/>
<input type="button" id="btn07" value="选择title属性包含'es'的并且含有id属性的div元素"onclick="fun7()" />
</body>
</html>
jQuery-007-工作状态属性过滤器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>工作状态属性过滤器</title>
<script type="text/javascript"src="JQuery.js"></script>
<script>
/*
val()
$obj.val():读取jQuery对象中第一个DOM对象的value属性值
$obj.val("值")：为jQuery对象中所有DOM对象的value属性值进行统一赋值
*/
function fun1(){
$(":text:enabled").val("可用文本框");
}
function fun2(){
$(":text:disabled").val("不可用文本框");
}
function fun3(){
$(":checkbox:checked").each(loop);
}
function loop(index,domObj){
alert("第"+(index+1)+"个被选中的checkbox的value"+$(domObj).val());
}
function fun4(){
alert($("#city>option:selected").val())
}
</script>
</head>
<body>
<!--定义文本框-->
文本01：<input type="text" id="text01" value="value01" /><br>
文本02：<input type="text" id="text02" value="value02" disabled/><br>
文本03：<input type="text" id="text03" value="value03" /><br>
文本04：<input type="text" id="text04" value="value04" disabled/><br>
<br>
<!--定义复选框-->
<input type="checkbox" name="interest" value="reading" checked />读书
<input type="checkbox" name="interest" value="food" />美食
<input type="checkbox" name="interest" value="travel" />旅游
<input type="checkbox" name="interest" value="music" checked />音乐
<input type="checkbox" name="interest" value="shopping" checked />购物
<br><br>
<!--定义下拉列表-->
<select id="city">
<option value="bj" title="beijing" title="" selected>北京</option>
<option value="sh" title="shanghai" title="" selected>上海</option>
<option value="gz" title="guangzhou" title="" selected>广州</option>
<option value="sz" title="shenzhen" title="" selected>深圳</option>
<option value="hz" title="hangzhou" title="" selected>杭州</option>
</select>
<br><br>
<!--定义测试按钮-->
<button id="btn01" onclick="fun1()">选择可用文本框并修改其值</button>
<button id="btn02" onclick="fun2()">选择不可用文本框并修改其值</button>
<button id="btn03"onclick="fun3()">选择复选框被选中的元素</button>
<button id="btn04"onclick="fun4()">选择下拉列表中被选中的元素</button>
</body>
</html>
jQuery-008-show&hide.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>show与hide</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: bisque;
font-size: 30px;
color: black;
}
</style>
</head>
<body>
<script type="text/javascript" src="JQuery.js" ></script>
<script>
function fun1(){
$("div").hide(3000);
}
function fun2(){
$("div").show(3000);
}
</script>
<div>
我是一个div
</div>
<input type="button" value="隐藏div" onclick="fun1()" />
<input type="button" value="显示div" onclick="fun2()"/>
</body>
</html>
jQuery-009-remove&empty.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>show与hide</title>
</head>
<body>
<script type="text/javascript" src="JQuery.js" ></script>
<script>
function fun1(){
$("#one").remove();
}
function fun2(){
$("#two").empty();
}
</script>
大臣1：<select id="one">
<option value="">大儿子</option>
<option value="">二儿子</option>
</select>
大臣1：<select id="two">
<option value="">大儿子</option>
<option value="">二儿子</option>
</select>
<br>
<input type="button" value="大臣1满门抄斩" onclick="fun1()" />
<input type="button" value="大臣2断子绝孙" onclick="fun2()"/>
</body>
</html>
jQuery-010-append&appendTo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>append与appendTo</title>
<style type="text/css">
#father{
width: 200px;
height: 200px;
background-color: orange;
font-size: 30px;
color: pink;
margin-bottom: 10px;
}
#son{
width: 100px;
height: 100px;
background-color: orange;
font-size: 20px;
color: pink;
margin-bottom: 10px;
}
</style>
</head>
<body>
<script type="text/javascript" src="JQuery.js" ></script>
<script>
function fun1(){
$("#father").append($("#son"));
}
function fun2(){
$("#son").appendTo($("#father"));
}
</script>
<div id="father">
我是爸爸
</div>
<div id="son">
我是儿子
</div>
<input type="button" value="爸爸给自己找儿子" onclick="fun1()" />
<input type="button" value="儿子给自己找个爹" onclick="fun2()"/>
</body>
</html>
jQuery-011-属性操作函数.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作函数</title>
<script type="text/javascript" src="JQuery.js" ></script>
<script>
function fun1(){
var $option = $("#city>option:selected");
alert("value="+$option.val());
alert("title="+$option.attr('title'));
alert("文字显示内容="+$option.text());
alert("selected="+$option.prop("selected"));
}
</script>
</head>
<body>
<center>
<!--定义下拉列表-->
<select id="city" onchange="fun1()">
<option value="bj" title="beijing" title="" selected>北京</option>
<option value="sh" title="shanghai" title="" selected>上海</option>
<option value="gz" title="guangzhou" title="" selected>广州</option>
<option value="sz" title="shenzhen" title="" selected>深圳</option>
<option value="hz" title="hangzhou" title="" selected>杭州</option>
</select>
</center>
</body>
</html>
jQuery-012-事件绑定方式一.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定方式</title>
<script type="text/javascript" src="JQuery.js" ></script>
<script>
window.onload = main;
function main(){
$(":button").click(fun1);
}
function fun1(){
//this 被单机的button的DOM对象
alert($(this).val());
}
</script>
</head>
<body>
<input type="button" value="我是大哥" />
<input type="button" value="我是二哥" />
<input type="button" value="我是三哥" />
</body>
</html>
jQuery-013-事件绑定方式二.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定方式</title>
<script type="text/javascript" src="JQuery.js" ></script>
<script>
function fun1(){
$(":button:lt(3)").bind("click",dealFun);
}
function fun2(){
$(":button:lt(2)").unbind("click");
}
function dealFun(){
alert($(this).val());
}
</script>
</head>
<body>
<input type="button" value="我是大哥" />
<input type="button" value="我是二哥" />
<input type="button" value="我是三哥" />
<br>
<input type="button" value="为前三个button绑定onclick" onclick="fun1()"/>
<input type="button" value="为前两个button接触绑定" onclick="fun2()"/>
</body>
</html>