Jquery练习
基本选择器练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery基本选择器</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function fun1() {
/*
css函数：
1、是jquery对象中功能函数
2、负责将jquery对象中所有的DOM对象的样式属性进行统一赋值
*/
var $obj = $("#one");
$obj.css("background-color","red");
}
function fun2() {
var $obj = $(".two");
$obj.css("background-color","aquamarine")
}
function fun3 () {
var $obj = $("div");
$obj.css("background-color","green")
}
function fun4 () {
var $obj = $("*");
$obj.css("background-color","yellow")
}
function fun5 () {
var $obj = $("#one,span");
$obj.css("background-color","blue")
}
</script>
<style type="text/css">
div {
background: gray;
width: 200px;
height: 100px;
}
</style>
</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="btn01" value="选择class为two的元素" onclick="fun2()"/>
<input type="button" id="btn01" value="选择所有div" onclick="fun3()"/>
<input type="button" id="btn01" value="选择所有元素" onclick="fun4()"/>
<input type="button" id="btn01" value="选择id为one与所有span元素" οnclick="fun5()/>
</body>
</html>
层级选择器练习
<!DOCTYPE html>
<html>
<head>
<title>jQuery层级选择器</title>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function fun1() {
$("body div").css("background-color","pink");
}
function fun2() {
$("body>div").css("background-color","blue");
}
function fun3() {
$("#one+div").css("background-color","yellow");
}
function fun4() {
$("#two~div").css("background-color","green");
}
function fun5() {
$("#two").siblings("div").css("background-color","red");
}
</script>
<style type="text/css">
div{
background: gray;
}
</style>
</head>
<body>
<!--定义被选择对象-->
<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>
input框选择器
<!DOCTYPE html>
<html>
<head>
<title>jQuery表单input框选择器</title>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function fun1(){
/*val()函数
1。jquery对象中的一个功能函数
2.读取jquery对象中 第一个DOM对象的value属性内容
*/
var value = $(":text").val();
alert("文本框中的内容是"+value)
}
function fun2(){
var value = $(":password").val();
alert("密码框中的内容是"+value)
}
function fun3(){
var $obj = $(":radio");
$obj.each(myFun);
/*
each函数遍历jquery对象中DOM对象。
每次读取一个【下标值】和对应【DOM对象】
交给处理函数
*/
//jquery转DOM对象
/*for (var i = 0; i < var domObj = $obj.length; i++) {
var domObj = $obj[i];
myFun(i,domObj);
}*/
}
function myFun(index, domObj){
alert("第"+(index)+"个redio的标签是"+domObj.value);
}
function fun4(){
var value = $(":file").val();
alert("文件框中的内容是"+value)
}
function fun5(){
var $obj = $(":checkbox");
$obj.each(myFun)
}
</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"/>女<br><br>
照 片：
<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="travel"/>旅游
<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" onclick="fun5()">选择复选框并输出用户选择的值</button>
</body>
</html>
基本过滤器
<!DOCTYPE html>
<html>
<head>
<title>jQuery基本过滤选择器</title>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function fun1(){
$("div:first").css("background-color","yellow")
}
function fun2(){
$("div:last").css("background-color","yellow")
}
function fun3(){
$("div:last").css("background-color","yellow")
}
function fun7(){
$("div:eq(3)").css("background-color","pink")
}
function fun8(){
$("div:lt(3)").css("background-color","blue")
}
function fun9(){
$("div:gt(3)").css("background-color","deepskyblue")
}
</script>
<style type="text/css">
div{
background: gray;
}
</style>
</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>
属性过滤选择器
<!DOCTYPE html>
<html>
<head>
<title>jQuery属性过滤选择器</title>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function fun1(){
$("div[title]").css("background-color","red");
}
function fun2(){
$("div[title='test']").css("background-color","yellow");
}
function fun3(){
$("div[title !='test']").css("background-color","blue");
}
function fun4(){
$("div[title ^='te']").css("background-color","blanchedalmond");
}
function fun5(){
$("div[title $='st']").css("background-color","pink");
}
function fun6(){
$("div[title *='es']").css("background-color","greenyellow");
}
function fun7(){
$("div[title *='es'][id]").css("background-color","yellowgreen");
}
</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">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属性值不为test的div元素" onclick="fun3()"/>
<input type="button" id="btn04" value="选择title属性以'te'开头的div元素"οnclick="fun4()"/>
<input type="button" id="btn05" value="选择title属性以'st'结尾的div元素"οnclick="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>
工作状态属性过滤器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery表单相关元素选择器</title>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
$obj.val("值"):为jQuery对象中所有的DOM对象的value属性值进行统一赋值
*/
function fun1(){
$(":text:enabled").val("可用");
}
function fun2(){
$(":text:disabled").val("不可用");
}
function fun3(){
$(":checkbox:checkbox").each(myFun);
}
function myFun(index,domObj){
if(domObj.checked){
alert("选中的值有："+domObj.value);
}
}
function fun4(){
//alert($("#city>option:selected").val());
alert($("#city").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" checked/>旅游
<input type="checkbox" name="interest" value="music"/>音乐
<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">上海</option>
<option value="gz" title="guangzhou">广州</option>
<option value="sz" title="shenzhen">深圳</option>
<option value="hz" title="hangzhou">杭州</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>
show和hide
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>show和hide</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function fun1(){
$("div").hide(3000);
}
function fun2(){
$("div").show(3000);
}
</script>
<style type="text/css">
div{
width: 300px;
height: 200px;
background-color: greenyellow;
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div>
我是一个DIV
</div>
<input type="button" value="隐藏DIV" onclick="fun1()" />
<input type="button" value="显示DIV" onclick="fun2()" />
</body>
</html>
remove和empty
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>remove和empty</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function fun1(){
$("#one").remove();
}
function fun2(){
$("#two").empty();
}
</script>
</head>
<body>
大臣1：<select id="one">
<option>大儿子</option>
<option>二儿子</option>
<option>三儿子</option>
</select>
大臣2：<select id="two">
<option>大儿子</option>
<option>二儿子</option>
<option>三儿子</option>
</select><br />
<input type="button" value="大臣1满门抄斩" onclick="fun1()" />
<input type="button" value="大臣2断子绝孙" onclick="fun2()" />
</body>
</html>
append和appendTo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>append和appendTo</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function fun1(){
$("#father").append($("#son"));
}
function fun2(){
$("#son").appendTo($("#father"));
}
</script>
<style type="text/css">
#father{
width: 300px;
height: 200px;
background-color: greenyellow;
font-size: 30px;
color: red;
margin-bottom: 10px;
}
#son{
width: 80px;
height: 80px;
background-color: yellow;
font-size: 20px;
color: red;
margin-bottom: 10px;
}
#two{
width: 200px;
height: 100px;
background-color: pink;
font-size: 20px;
color: red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="father">
我是爸爸
</div>
<div id="two">
<div id="son">
我是儿子
</div>
</div>
<input type="button" value="爸爸给自己找了个儿子" onclick="fun1()" />
<input type="button" value="儿子给自己找了个爹" onclick="fun2()" />
</body>
</html>
属性操作函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作函数</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
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">上海</option>
<option value="gz" title="guangzhou">广州</option>
<option value="sz" title="shenzhen">深圳</option>
<option value="hz" title="hangzhou">杭州</option>
</select>
</center>
</body>
</html>
事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
$(":button").click(fun);
});
function fun() {
//this 被单击的button的DOM
alert($(this).val())
}
</script>
</head>
<body>
<input type="button" value="我是大哥" />
<input type="button" value="我是二哥" />
<input type="button" value="我是三哥" />
</body>
</html>
(二)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
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 /><br />
<input type="button" value="为这三个绑定onclick" onclick="fun1()" />
<input type="button" value="为前两个解除onclick绑定" onclick="fun2()" />
</body>
</html>
细心的就会发现每次都会导入这个js/jquery-3.4.1.js包，没错不导入你的jQuery代码就会报错
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
