1 使用方法，使用JQuery前需要导入包,src写入jquery包的路径
<script type="text/javascript" src=""></script>
//使用jq方法,最简写的方法
//先用这个东西包住
$(function(){
//里面选择不同的id或者标签等设定事件，例如这个为id绑定点击事件
$("#gg").click(fcuntion(){
});
});2 jq查找元素的方法，最终显示的会是李四
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$("#div1").html("李四");
});
</script>
</head>
<body>
<div id="div1">张三</div>
</body>
</html>
3 图片显示隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
// 为id为hide按钮绑定点击事件，可以显示不同的显示或隐藏效果
$("#hide").click(function(){
//$("#imgg").hide();
//$("#imgg").slideUp();
$("#imgg").fadeOut(2000);
});
$("#show").click(function(){
//$("#imgg").show();
//$("#imgg").slideDown();
$("#imgg").fadeIn(2000);
});
});
</script>
</head>
<body>
<input type="button" value="显示" id="show">
<input type="button" value="隐藏" id="hide"><br>
<img src="img/1.jpg" id="imgg">
</body>
</html>
4 各种选择器
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//找到 a标签，并且带有href属性的项，设置color为red
$("a[href]").css("color","red");
//找到 a标签，并且带有href和title属性的，设置color为red
$("a[href][title]").css("color","red"); // 多个属性
//找到 a标签，并且带有href和title属性的，并且title的值为testTitle的，
//设置color为red
$("a[href][title='testTitle']").css("color","deeppink");
});
</script>
</head>
<body>
<a href="#">herf 111</a>
<br />
<a href="#" title="testTitle">herf 222</a>
</body>
</html>
基本选择器
- id #+id的名字
$("#gg") - 类选择器 .+类的名字
$(".gg") - 元素选择器 标签的名字
$("div") - 通配符选择器 只是一个 * 选择所有元素
$("*") - 选择器，选择器 选择器1，选择器2
$("#gg,span")
基本过滤器
- 过滤出的第一个div元素
$("div:first") - 过滤出div中偶数div
$("div:even") - 过滤出div中奇数div
$("div:odd") - 过滤出div中索引等于2的
$("div:gt(2)")
层级选择器
- body下的子div
$("body > div")
5 表格隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
// 表格内容框在了tbody里面，选中tbody下的子tr行，奇数和偶数的，换色
$("tbody>tr:even").css("background-color","hotpink");
$("tbody>tr:odd").css("background-color","darkslateblue");
});
</script>
</head>
<body>
<table border="1px" width="600px" id="tab">
<thead>
<tr >
<td>
<input type="checkbox" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2</td>
<td>成人用品</td>
<td>充气的</td>
<td>这里面的充气电动硅胶的</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>6 全选与全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<!--
1. 导入JQ的包
2. 文档加载完成函数: 页面初始化
3. 获得所有的行 : 元素选择器
4. 根据行号奇数/偶数去修改颜色
-->
<script>
$(function(){
//获得所有的行 : 元素选择器
$("tbody > tr:even").css("background-color","#CCCCCC");
//修改基数行
$("tbody > tr:odd").css("background-color","#FFF38F");
// $("tbody > tr").css("background-color","#FFF38F");
});
/*
表格全选和全不选
进一步确定事件: 点击事件
*/
$(function(){
//绑定点击事件
//this 代表的是当前函数的所有者
$("#checkAll").click(function(){
//获取当前选中状态
// alert(this.checked);
//获取所有分类项的checkbox
// 选择器[属性名称='属性值']
// $("input[type='checkbox']:gt(0)").prop("checked",this.checked);
//使用层级选择器来实现 tbody > tr > td > input
// $("tbody > tr > td > input").prop("checked",this.checked); //这个可行
// #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]
$("input").prop("checked",this.checked);
});
});
</script>
</head>
<body>
<table border="1px" width="600px" id="tab">
<thead>
<tr >
<td>
<input type="checkbox" id="checkAll" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2</td>
<td>成人用品</td>
<td>充气的</td>
<td>这里面的充气电动硅胶的</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
7 省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
//先把城市数据放进来
var provinces = [
["深圳市","东莞市","惠州市","广州市"],
["长沙市","岳阳市","株洲市","湘潭市"],
["厦门市","福州市","漳州市","泉州市"]
];
$(function(){
//找到id为province的，添加改变方法
$("#province").change(function(){
//alert(this.value);获取当前值
//alert(provinces[1]);
var cities=provinces[this.value];//这个this.value就是你选的省的值，对应数组角标
$("#city").empty();//开始前清空
$(cities).each(function(i,n){//这里的i是角标
$("#city").append("<option>"+n+"</option>")
//alert(n);
});
});
});
</script>
</head>
<body>
<select id="province">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<select id="city">
</select>
</body>
</html>
8 商品左右选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步骤:
1. 导入JQ的文件
2. 文档加载函数 :页面初始化
3.确定事件 : 点击事件 onclick
4. 事件触发函数
1. 移动被选中的那一项到右边
-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$("#a1").click(function(){
//找到被选中的那一项
//将被选中项添加到右边
$("#rightSelect").append($("#leftSelect option:selected"));
});
//将左边所有商品移动到右边
$("#a2").click(function(){
$("#rightSelect").append($("#leftSelect option"));
});
});
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" id="a1" > >> </a> <br />
<a href="#" id="a2"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果6</option>
<option>肾7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
9 jq方式完成表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//$(".bitian").append("<font color='#FF0000'>*</font>");\n
/*$(".bitian").onFocus(function(){
$("#username").after("<font color='#FF0000'>*</font>");
$("#upassword").after("<font color='#FF0000'>*</font>");
});*/
//添加小红点
$(".bitian").after("<font class='high'>*</font>")
//必填绑定焦点事件
$(".bitian").blur(function(){
var value=this.value;
$(this).parent().find(".formtips").remove();
if($(this).is("#username"))
{
if(value.length<6)
{
$(this).parent().append("<span class='formtips onError'>用户名太短</span>");
}else{
$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
}
}
if($(this).is("#upassword"))
{
if(value.length<6)
{
$(this).parent().append("<span class='formtips onError'>密码太短</span>");
}else{
$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
}
}
}).focus(function(){
$(this).triggerHandler("blur");
}).keyup(function(){
$(this).triggerHandler("blur");
});
//以上这个是这样的格式
/*$("#bitian").blur(function(){
}).focus(function(){
}).keyup(function(){
});*/
//提交绑定事件
$("form").submit(function(){
$(".bitian").trigger("focus");
var length1=$(".onError").length;
if(length1>0)
{
return false;
}else
{
return true;
}
});
});
</script>
</head>
<body>
<form action="动画效果.html">
<div>
用户名:<input type="text" class="bitian" id="username">
</div>
<br>
<div>
密码:<input type="password" class="bitian" id="upassword">
</div>
<br>
<div>
手机号:<input type="tel">
</div>
<br>
<div>
<input type="submit" value="提交">
</div>
</form>
</body>
</html>
扫一扫
3977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
