什么是JQuery?
jQuery其实就是一个轻量级的javascript函数库,通过它我们可以"写的少做的多";
jQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
JQuery使用:
一 JQuery使用文档:
二 准备工作:
首先要将JQuery文件导入
<script src="jquery-1.12.4.js"></script>
三 查找元素
操作元素:
一 选择器:
直接找到某个或者某类标签
1. id $("#id")
2.class $(".class")
3 查找标签:$("a")
4.* 代表所有
5.两个一起找 $("a,c2")
6.层级 子子孙孙
找到id=i10所有的a标签
$("#i10 a")
$("#i10>a")只找儿子
找到所有孩子中的第一个 first
last最后一个
$("#i10 a:first")
索引
$("#i10 a:eq(0)")默认从0开始
7.根据属性查找
$('[alex]') 找具有alex属性的标签
$('[alex="a"]') 找到alex属性等于a的标签
text disabled不可编辑
文本操作
$(..).text()获取文本内容
$(..).text("a")#设置文本内容
$(..).html()获取html内容
$(..).html(<a>asd<a>)设置html内容
$(..).val()获取他的值
$(..).val(。。)设置他的值
状态操作
toggleClass("")如果有去掉,如果没有加上
addClass
removeClass
属性操作:
用于做自定义属性
$(..).attr
对标签上的属性进行操作
$("#i1").attr("name","alex")传一个参数获取属性对应的值,传两个替换
removeAttr删除属性
$(..).prop
#专门为checkbox radio进行操作
$(..).prop("checked")
$(..).prop("checked",true)
文档处理
添加 删除 修改
append追加到最后
prepend 添加到最前面
after在查找标签下面
brfore在查找标签上面
empty清空内容
remove删除标签
筛选器
在选择器选好的基础上在选一次
$("li").eq(1)索引
next获取下一个
prev获取上一个
parent获取父标签
children获取孩子标签
siblings获取兄弟标签
find 找出标签 子子孙孙中寻找
nextAll找到下面所有的
nextUntil 找到哪里截止
prevAll
prevUntil
Jquery css处理
$("t1").css("样式","样式值")
位置:
scrollTop([val])返回顶部 没有参数标示获取,有参数表示设置
scrollLeft([val])
offset().left 指定标签在html的坐标
offset().top
$(i1).height()
innerHeight()
outerHeight()
outerHeight(true)
Jquery组织事件发生
$("c1").bind()
$("c1").unbind()
$("c1").delegate()
$("c1").undelegate()
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="Checkall();"/>
<input type="button" value="反选" onclick="resave()"/>
<input type="button" value="取消" onclick="canall()"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>post</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
function Checkall() {
$(":checkbox").prop("checked",true)
}
function canall() {
$(":checkbox").prop("checked",false)
}
function resave() {
$(":checkbox").each(function () {
var v=$(this).prop("checked")?false:true
$(this).prop("checked",v)
})
}
</script>
</html>
全选多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item {
height: 20px;
width: 200px;
background-color: black;
color: white;
}
.item1{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 400px;width: 200px;border: red solid 1px">
<div class="header">
<div class="item">标题1</div>
<div class="item1">内容</div>
</div>
<div class="header">
<div class="item">标题2</div>
<div class="item1 hide">内容</div>
</div>
<div class="header">
<div class="item">标题3</div>
<div class="item1 hide">内容</div>
</div>
</div>a
<script src="jquery-1.12.4.js"></script>
<script>
//对所有item标签绑定函数
$(".item").click(function () {
$(this).next().removeClass("hide")
$(this).parent().siblings().find(".item1").addClass("hide")//find 查找标签
})
</script>
</body>
</html>
下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item {
position: fixed;
height: 400px;
width: 400px;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
background-color: #dddddd;
z-index: 10;
}
.item1 {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: black;
opacity: 0.5;
position: fixed;
z-index: 5;
}
.hide {
display: none;
}
</style>
</head>
<body>
<a onclick="add()">添加</a>
<table border="1px">
<tr>
<td>8.8.8.8</td>
<td>20</td>
<td>
<a class="i1">编辑</a>|<a class="del">删除</a>
</td>
</tr>
<tr>
<td>8.8.8.8</td>
<td>20</td>
<td>
<a class="i1">编辑</a>|<a class="del">删除</a>
</td>
</tr>
<tr>
<td>8.8.8.8</td>
<td>20</td>
<td>
<a class="i1">编辑</a>|<a class="del">删除</a>
</td>
</tr>
</table>
<div class="item hide">
<input name="port" type="text"/>
<input name="ip" type="text"/>
<input type="button" value="取消" onclick="reall()">
</div>
<div class="item1 hide"></div>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
function add() {
$(".item,.item1").removeClass("hide")
}
function reall() {
$(".item,.item1").addClass("hide")
$(".item input[name]").val("")
}
$(".i1").click(function () {
$(".item,.item1").removeClass("hide")
var tds=$(".i1").parent().prevAll()
var port=$(tds[0]).text()
var ip=$(tds[1]).text()
$('.item input[name="port"]').val(port)
$('.item input[name="ip"]').val(ip)
})
$(".del").click(function () {
$(this).parent().parent().remove()
})
</script>
</html>
模拟对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
background-color: #dddddd;
height: 20px;
margin: 0 auto;
width: 500px;
margin: 0 auto;
}
.menu .item{
float: left;
padding: 0 10px;
border-right: red solid 1px;
cursor: pointer;
}
.dide{
background-color: brown;
}
.hide{
display: none;
}
.meng{
width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="menu">
<div class="item dide" a="1">菜单一</div>
<div class="item" a="2">菜单二</div>
<div class="item" a="3">菜单三</div>
</div>
<div class="meng">
<div class="item1" b="1">内容一</div>
<div class="item1" b="2">内容二</div>
<div class="item1" b="3">内容三</div>
</div>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
$(".item").click(function () {
$(this).addClass("dide")
$(this).siblings().removeClass("dide")
B=$(this).attr("a")//获取值
$(".meng").children("[b='"+B+"']").removeClass("hide").siblings().addClass("hide")//拼接字符串
})
</script>
</html>
淘宝菜单