什么是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; 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>