<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>荒天帝</title>
<!--导入jQuery-->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
//简单的jQuery调用
//#代表id,.代表类,什么都不加是标签,*代表所有
//$是jQuery的简写,ready是文档就绪事件
// $(document).ready(function(){
// alert("正常")
// });
// //最简单的写法,document是可以隐藏的,ready也被隐藏了
// $(function(){ //只要简写成这样就可以代表是文档就绪的事件
// alert("简写")
// });
//jq和js之间的转换
//js转jq,只需要加上$()即可
// var xxx=document.getElementById("xxx")
// $(xxx).html()
//jq转js,把jq当成数组来获取js,0是因为就只有一个对象,所以是0,0是下标
//id是唯一的,只能是0,如果是用的2个div一个name,或者2个div一个class,那么get就能填写1,修改第二个
// var div=$("#div1").get(0)
// var div=$("#div1")[0] //这样也可以
// div.innerHTML="xxx"
//jq对象只能调用jq的属性和方法
//js对象只能调用js的属性和方法
//文档就绪的时候就绑定事件
// $(function(){
//
// $("#bt1").click(function(){
// //jquery的修改html内容是用自己封装的函数使用,文本对应的是text()
// $("#div1").html("jq修改了内容")
// });
// });
//jquery图片显示和隐藏动画
// $(function(){
// $("#bt1").click(function(){
// //$("#img1").show()
// //$("#img1").slideDown() //下面抛出来,比较好看
// $("#img1").fadeIn() //渐渐出现
// });
//
// $("#bt2").click(function(){
// //$("#img1").hide()
// //如果里面填了1000,就是图片1秒内消失,这个消失是有过程的
// //$("#img1").hide(1000)
// //$("#img1").slideUp(1000) //抛上去隐藏,比较好看,需要指定宽度
// $("#img1").fadeOut(1000) //渐渐消失,具体其他效果看jquery效果手册
// });
// });
//jquery修改css
// $(function(){
// $("#bt1").click(function(){
// //修改单个元素
// //$("#one").css("background-color","green")
// //修改多个元素
// $("#one").css({"background-color":"green","width":"500px","height":"500px"})
// //这个$(".love,span") 意思是找出love类和span标签
// //这个$("body>div") 意思是body下面的子标签div,没有孙标签,如果是 body div就是孙标签
// //这个$("#one+div") 找到id为one的相邻的div,就是id为two的div
// //这个$("#one~div") 找到id为one的所有弟弟的div,就是two,three的div都会被找到
//
// // $("div:first") 找出第一个div
// // $("div:even") 找出div数是偶数的,每个div都有一个编号
// // $("div:gt(2)") 索引大于2的div
//
// //属性选择器
// $("a[href][title='test']") 找出包含href的,并且title='test'的a标签
//
// //表单选择器
// $(":input") 这其实是代表找到所有能输入的,这个比较特殊
// $(":text") 代表表单类型为text的 $(":button") 表单类型为button的,上面的比较特殊
//
// //其他选择器
// $("option:selected") 找出下拉框被选中的那个对象
// });
// });
//
//jquery修改属性,prop(参数1,参数2),只有一个参数是获取属性,2个参数是设置属性
// $("input[type='checkbox']:gt(0)").prop("checked",this.checked)
//jquery的dom操作
// $("#divID").append("<font size='30px'>123</a>") 添加子元素到末尾
// $(xx).appendTo 给自己找一个父节点,添加到这个父节点里面去
// $(xx).prepend 在子元素前面添加
// $(xx). after 在自己的后面添加一个兄弟
//jquery的遍历
// var cities=["aa","bb","cc"]
// $(cities).each(function(i,n){
// alert(i+"==="+n) //i是索引,n是索引里的内容
// });
//和上面同效果
// $.each(cities,function(i,n){
//
// });
//手动触发事件
// $("#username").focus(function(){
// alert("被触发了")
// });
//
// //利用trigger手动触发focus事件
// $("#bt1").click(function(){
// $("#username").trigger("focus") 触发事件,并且会执行浏览器的默认行为,比如光标移到输入框
// $("#username").triggerHandler("focus") 仅仅触发函数,不会执行浏览器默认行为
// });
</script>
</head>
<body>
<!--简单的jquery调用-->
<!-- <input type="button" value="修改" id="bt1"/>
<div id="div1">
这里的内容会被改变
</div>-->
<!--jquery图片显示和隐藏动画-->
<!-- <input type="button" value="显示" id="bt1"/><br />
<input type="button" value="隐藏" id="bt2"/><br />
<img src="img/header.jpg" id="img1" width="300px"/>-->
<!--jquery修改css-->
<input type="button" value="改变id为one背景颜色" id="bt1"/><br />
<div id="one">
1
</div>
</body>
</html>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>荒天帝</title>
<!--导入jQuery-->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
//表格的全选和反选
// $(function(){
// $("#checkAll").click(function(){
//
// //jquery修改属性,prop(参数1,参数2),只有一个参数是获取属性,2个参数是设置属性
// //input[type='checkbox']:gt(0) 过滤了第一个,从第二个checkbox开始
// //this是我们操作的对象,我们操作的对象是checkbox,它的checked是多少,我们就设置多少
// $("input[type='checkbox']:gt(0)").prop("checked",this.checked)
// });
// });
//表单校验
$(function(){
//在必选项后面添加一个红点
$(".bixuan").after("<font color='red'>*</font>")
$(".bixuan").blur(function(){
//获取当前事件是谁
var value=$(this).val()
//先清空之前的提示,但是只能移除当前的,所以要用$(this).parent(),find是查找
$(this).parent().find(".formTips").remove();
if($(this).is("#userName")) //判断是哪个id
{
if(value.length<6)
{
// $(this).after("输入的用户名太短了") 在后面加入,加入弟弟元素
$(this).parent().append("<span class='formTips onError'>用户名太短</span>")
//append是加入子节点,所以要先转换到父元素
}else
{
$(this).parent().append("<span class='formTips onSuccess'>正确</span>")
}
}else
{
//校验密码
if(value.length<3)
{
}else
{
}
}
//再绑定一个事件
}).keyup(function(){
$(this).triggerHandler("blur")//如果用trigger那么输入一下键盘就会抬起,失去了焦点
});
//给表单绑定提交事件
$("form").submit(function(){
//触发校验逻辑
$(".bixuan").trigger("keyup");
var length=$(".onError").length //包含错误信息>0
if(length>0)
{
return false //不提交表单
}
return true //提交表单
});
});
</script>
</head>
<body>
<!--隔行换色-->
<table border="2" cellspacing="0" width="50%" id="tab">
<tr>
<td colspan="5">
<input type="button" id="reserve" value="反选" />
</td>
</tr >
<tr bgcolor="antiquewhite">
<td>
<!--选中就换色,this是隐藏的本类对象-->
<input type="checkbox" id="checkAll"/>
</td>
<td align="center">分类</td>
<td align="center">名称</td>
<td align="center">描述</td>
<td align="center">操作</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td >1</td>
<td>名称</td>
<td >描述</td>
<td >删除</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td >2</td>
<td>名称2</td>
<td >描述2</td>
<td >删除</td>
</tr>
</table>
<!--表单校验-->
<form action="./_001_html.html">
<div>
用户名 :<input type="text" class="bixuan" id="userName"/>
</div>
<div>
密码 :<input type="password" class="bixuan" id="passWord"/>
</div>
<div>
<input type="submit" value="提交"/>
</div>
</form>
</body>
</html>