一、动画效果：显示/隐藏/切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/js/jquery-3.3.1.min.js"></script>
<script>
//隐藏方法
function hideFn() {
$("#showDiv").hide();
}
//显示方法
function showFn() {
$("#showDiv").show();
}
//切换方法
function toggleFn() {
$("#showDiv").toggle();
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:pink">
div显示和隐藏
</div>
</body>
</html>
二、Jq对象遍历：js方式/each方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="/js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript">
//1.第一种：js方式
/* $(function () {
var citys = $("#city li");
for(var i = 0;citys.length;i++){
alert(i+":"+citys[i].innerHTML);
}
})
*/
//2.第二种：jq对象.each(callback)
$(function () {
var citys = $("#city li");
citys.each(function (index,element) {
//四个能达到相同的效果
alert(index+":"+this.innerHTML);
alert(index+":"+$(this).html());
alert(index+":"+element.innerHTML);
alert(index+":"+$(element).html());
})
})
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
三、事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
alert("I am coming in ...")
/*
//1.绑定click事件
$("#bname").click(function () {
alert("我被点击了...")
});
//2.绑定鼠标移动到元素之上事件
$("#name").mouseover(function () {
alert("鼠标来了...")
});
//3.绑定鼠标移出事件
$("#name").mouseout(function () {
alert("鼠标走了...")
});
//4.鼠标获取焦点/失去焦点简化操作，链式编程
$("#name").mouseover(
function () {
alert("鼠标来了...")
}).mouseout(
function () {
alert("鼠标走了...")
});
//5.文本框获取焦点
$("#name").focus(function () {
alert("我获取了输入框焦点...");
});
/*
});
</script>
</head>
<body>
<button id="bname">点我</button>
<input id="name" type="text" value="绑定点击事件">
</body>
</html>
四、案例代码
1、隔行换色/全选/全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例</title>
<script src="/js/jquery-3.3.1.min.js"></script>
<style>
td{
text-align: center;
}
</style>
<script>
//需求：将数据行的奇数行背景色设置为 yellow，偶数行背景色设置为 red
$(function () {
//奇数行
$("tr:gt(0):odd").css("backgroundColor","yellow");
//偶数行
$("tr:gt(0):even").css("background","red");
});
//全选全不选
function selectAll(obj) {
$(".itemSelect").prop("checked",obj.checked);
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr style="background-color: #999999;">
<th><input type="checkbox" class="itemSelect" onclick="selectAll(this)"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
- 效果显示
2、qq表情选取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>QQ表情选择</title>
<script src="/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.emoji {
margin: 50px;
}
ul {
overflow: hidden;
}
li {
float: left;
width: 48px;
height: 48px;
cursor: pointer;
}
.emoji img {
cursor: pointer;
}
</style>
<script>
//需求：点击qq表情，将其追加到发言框中
$(function () {
$("ul img").click(function () {
$(".word").append($(this).clone());
})
});
</script>
</head>
<body>
<div class="emoji">
<ul>
<li><img src="img/01.gif" height="22" width="22" alt=""/></li>
<li><img src="img/02.gif" height="22" width="22" alt=""/></li>
<li><img src="img/03.gif" height="22" width="22" alt=""/></li>
<li><img src="img/04.gif" height="22" width="22" alt=""/></li>
<li><img src="img/05.gif" height="22" width="22" alt=""/></li>
<li><img src="img/06.gif" height="22" width="22" alt=""/></li>
<li><img src="img/07.gif" height="22" width="22" alt=""/></li>
<li><img src="img/08.gif" height="22" width="22" alt=""/></li>
<li><img src="img/09.gif" height="22" width="22" alt=""/></li>
<li><img src="img/10.gif" height="22" width="22" alt=""/></li>
<li><img src="img/11.gif" height="22" width="22" alt=""/></li>
<li><img src="img/12.gif" height="22" width="22" alt=""/></li>
</ul>
<p class="word">
<strong>请发言：</strong>
<img src="img/12.gif" height="22" width="22" alt=""/>
</p>
</div>
</body>
</html>
- 效果显示
3、下拉数据左右移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="/js/jquery-3.3.1.min.js"></script>
<style>
#leftName , #btn,#rightName{
float: left;
width: 100px;
height: 300px;
}
#toRight,#toLeft{
margin-top:100px ;
margin-left:30px;
width: 50px;
}
.border{
height: 500px;
padding: 100px;
}
</style>
<script>
//需求：实现下拉列表选择条目左右选择功能
//右移
$(function () {
$("#toRight").click(function () {
$("#rightName").append($("#leftName > option:selected"));
});
//左移
$("#toLeft").click(function () {
$("#rightName > option:selected").appendTo($("#leftName"));
});
});
</script>
</head>
<body>
<div class="border">
<select id="leftName" multiple="multiple">
<option>张三</option>
<option>李四</option>
<option>王五</option>
<option>赵六</option>
</select>
<div id="btn">
<input type="button" id="toRight" value="-->"><br>
<input type="button" id="toLeft" value="<--">
</div>
<select id="rightName" multiple="multiple">
<option>钱七</option>
</select>
</div>
</body>
</html>
- 效果显示：
