这几天准备恶补一下jQuery的基础，翻了几本书，自己动手写了一些代码。
我使用的jQuery版本为jquery-3.3.1.js，下载地址：https://code.jquery.com/jquery-3.3.1.js
我使用的Chrome版本为 Version 63.0.3239.132 (Official Build) (64-bit)
1、页面框架下载完毕后执行逻辑
<html>
<head>
<title>jQuery学习</title>
<!--页面框架下载完毕后执行逻辑-->
</head>
<body>
<script src="jquery-3.3.1.js"></script>
<script>
//功能类似window.onload=function(){...}
$(document).ready(function(){
alert("hello world!");
})
</script>
</body>
</html>效果图如下：
$(document).ready和window.onload功能相似，但也有区别，主要包括：（1）执行时间不同，$(document).ready在页面框架下载完毕后就执行，window.onload必须在页面全部加载完毕（包括图片下载）后才执行；（2）执行数量不同，$(document).ready可以重复写多个，并且每次执行结果不同，window.onload尽管可以执行多个，但仅输出一个执行结果。
2、功能同1
<html>
<head>
<title>jQuery学习</title>
<!--页面框架下载完毕后执行逻辑-->
</head>
<body>
<script src="jquery-3.3.1.js"></script>
<script>
//功能等价于$(document).ready(function(){...}
$(function(){
alert("hello world!");
})
</script>
</body>
</html>效果图如下：
3、使用jQuery获取、变更文本输入框中的文字和样式
<html>
<head>
<title>jQuery学习</title>
<!--操作文本框-->
</head>
<body>
<input type='text' id='txt'></input>
<button type="button" id='btn1'>赋值</button>
<button type="button" id='btn2'>取值</button>
<button type="button" id='btn3'>变更字体颜色</button>
<button type="button" id='btn4'>获取字体颜色</button>
<script src="jquery-3.3.1.js"></script>
<script>
//按钮1：向文本框赋值
$('#btn1').click(function(){
$('#txt').val("Tsybius2014");
})
//按钮2：获取文本框中的值
$('#btn2').click(function(){
alert($('#txt').val());
})
//按钮3：变更文本框的字体颜色
$('#btn3').click(function(){
var rand = Math.floor(Math.random()*5);
console.log(rand);
if (rand==0) {
$('#txt').css("color", "red");
} else if (rand==1) {
$('#txt').css("color", "green");
} else if (rand==2) {
$('#txt').css("color", "blue");
} else if (rand==3) {
$('#txt').css("color", "purple");
} else if (rand==4) {
$('#txt').css("color", "orange");
}
})
//按钮4：获取文本框的字体颜色
$('#btn4').click(function(){
var color = $('#txt').css("color");
alert(color);
})
</script>
</body>
</html>效果图如下：
4、使用jQuery变更单选框、复选框的勾选情况
<html>
<head>
<title>jQuery学习</title>
<!--操作单选框和复选框-->
</head>
<body>
<div id='divChkOper'>
<input type="checkbox" id='chk1'>1</input>
<input type="checkbox" id='chk2'>2</input>
<input type="checkbox" id='chk3'>3</input>
<button type="button" id='btnSelectAll'>全选</button>
<button type="button" id='btnClearChk'>清空</button>
<button type="button" id='btnGetChk1'>获取第一个复选框的选中状态</button>
</div>
<div id='divRadOper'>
<input type="radio" id='rad1' value="0" name="xxx">1</input> <!--name一样可实现互斥-->
<input type="radio" id='rad2' value="1" name="xxx">2</input>
<input type="radio" id='rad3' value="2" name="xxx">3</input>
<button type="button" id='btnSelectRad1'>选中第一个单选框</button>
<button type="button" id='btnClearRad'>清空</button>
<button type="button" id='btnGetRad1'>获取第一个单选框的选中状态</button>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
//按钮：全选复选框 prop和attr有区别
$('#btnSelectAll').click(function(){
$('#chk1').prop("checked",true);
$('#chk2').prop("checked",true);
$('#chk3').prop("checked",true);
})
//按钮：清空复选框
$('#btnClearChk').click(function(){
$('#chk1').prop("checked",false);
$('#chk2').prop("checked",false);
$('#chk3').prop("checked",false);
})
//按钮：获取第一个复选框的选中状态
$('#btnGetChk1').click(function(){
var chkValue = $('#chk1').is(":checked");
if (chkValue==true){
alert("已选中");
} else {
alert("未选中");
}
})
//按钮：选中第一个单选框
$('#btnSelectRad1').click(function(){
$('#rad1').prop("checked",true);
})
//按钮：清空单选框
$('#btnClearRad').click(function(){
$('#rad1').prop("checked",false);
$('#rad2').prop("checked",false);
$('#rad3').prop("checked",false);
})
//按钮：获取第一个单选框的选中状态
$('#btnGetRad1').click(function(){
var radValue = $('#rad1').is(":checked");
if (radValue==true){
alert("已选中");
} else {
alert("未选中");
}
})
</script>
</body>
</html>效果图如下：
互斥的单选框name应保持一致。修改属性时，应注意prop和attr的区别，在这里我使用了prop修改选中情况。
END