简介
http://jquery.cuishifeng.cn/
模块《==》类库
DOM/BOM/JavaScript 类库
PS：
1.x 1.12 较稳定
2.x
3.x
转换：
jquery对象[0] ==> DOM对象
$(DOM对象) ==> jquery对象
-
查找元素
DOM 10个左右选择器 JQuery 选择器 直接找到某个或者某类标签 1. id $("#i1"); 2. class <div class="c1">123</div> $(".c1") 3. 标签 $("a") 找到所有的a标签 4. 组合查找 $("a,#i1,.c1") 能够找到所有的a标签，id为i1的标签，class为c1的标签 5. 层级 $("#i1 a") 找到所有的id为i1标签的多有a子标签，a孙子标签。。。 $("#i1>a") 找到所有的id为i1标签的多有a子标签 $("a:first") 找到所有的a标签中的第一个 $("a:eq(1)") 用索引找到所有的a标签中的第二个，索引从0开始 基本的： :first() :last() :eq() 6. 属性 $("[hhh]") 找到所有具有hhh属性的标签 $("[hhh='123']") 找到所有具有hhh='123'属性的标签 $("input[type='text']") 找到具有type=‘text’属性的input标签 $(":disabled") 找到具有disabled属性的标签 筛选器 由于筛选器筛选后还是jQuery对象，所以能够不断地应用筛选器，即可以进行链式编程 1. 下一个标签 .next() 2. 下面所有的标签 .nextALL() 3. 下面的标签到class有c1的标签截止 .nextUntil(".c1") 4. 上一个标签 .prev() 5. 上面所有的标签 .prevALL() 6. 上面的标签到class有c1的标签截止 .prevUntil(".c1") 7. 父标签 .parent() 8. 所有的父亲祖宗标签 .parents() 9. 寻找祖宗标签到class有c1的标签截止 .parentsUntil(".c1") 10. 子标签 .children() 11. 兄弟标签 .siblings() 12. 找到下面所有的类名有c1的标签 .find(".c1")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">123</div>
<script src="jquery-1.12.4.js"></script>
<script>
$("#i1");
</script>
</body>
</html>
-
绑定事件（当页面所有元素加载完毕后执行）
1. 由jQuery选择出来的多个标签通常可以直接进行事件的绑定 选择所有的类名中有c1的标签绑定click事件，鼠标点击该标签会触发相对应函数 $(".c1").click(function(){ pass; }) 2. 传统绑定事件 bind("click",function); on("click",function); 3. 委托绑定事件，没点一个绑定一个 $("ul").delegate("li","click",function); 4. 绑定事件并执行绑定事件，但是不执行本身事件 方式一： <a href="http://www.baidu.com" onclick="return clickOn();">跳转</a> <script> function clickOn(){ alert(123); return false; } </script> 方式二： <a href="http://www.baidu.com" onclick="return clickOn();">跳转</a> <script> $("a").click(function(){ alert(456); return false; }); </script> PS： 当页面框架加载完毕后,自动执行 $(function(){ pass; })
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.head{
background-color: #382eff;
}
.content{
background-color: red;
height: 100px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 500px;width: 300px">
<div class="item">
<div class="head">标题一</div>
<div class="content">内容一</div>
</div>
<div class="item">
<div class="head">标题二</div>
<div class="content">内容二</div>
</div>
<div class="item">
<div class="head">标题三</div>
<div class="content">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(".head").click(function () {
$(this).next().removeClass("hide");
$(this).parent().siblings().find(".content").addClass("hide");
})
</script>
</body>
</html>
-
样式操作
1. 判断样式 .hasclass("n") 2. 添加class 为选择出来的具有c1类名的标签添加hide类 $(".c1").addClass("hide"); 3. 删除class 为选择出来的具有c1类名的标签删除hide类 $(".c1").removeClass("hide");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.head{
background-color: #382eff;
}
.content{
background-color: red;
height: 100px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 500px;width: 300px">
<div class="item">
<div class="head">标题一</div>
<div class="content">内容一</div>
</div>
<div class="item">
<div class="head">标题二</div>
<div class="content">内容二</div>
</div>
<div class="item">
<div class="head">标题三</div>
<div class="content">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(".head").click(function () {
$(this).next().removeClass("hide");
$(this).parent().siblings().find(".content").addClass("hide");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input type="button" value="切换"/>
<div id="i1" class="c1">dhasuhfaibdsuhaklndjs</div>
<script src="jquery-1.12.4.js"></script>
<script>
$("input").click(function () {
// if ($(this).next().hasClass("hide")){
// $(this).next().removeClass("hide")
// }else {
// $("#i1").addClass("hide");
// };
$(this).next().toggleClass("hide");
});
</script>
</body>
</html>
-
属性操作
1. 创建自定义属性 .attr("type") 获取属性值 .attr("type","text") 给属性赋值 2. 专用于CheckBox和ratio .prop("checked") 获取checked状态 .prop("checked",false) 对checked进行赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" οnclick="chooseAll()" />
<input type="button" value="反选" οnclick="reverseAll()" />
<input type="button" value="取消" οnclick="cancelAll()" />
<table border="1px">
<thead>
<tr>
<th>选择</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>192.0.0.1</td>
<td>3003</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>192.0.0.2</td>
<td>3001</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>192.0.0.12</td>
<td>3005</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function chooseAll() {
$(":checkbox").prop("checked",true);
}
function cancelAll() {
$(":checkbox").prop("checked",false);
}
function reverseAll() {
// 第一种方式
// $(":checkbox").each(function () {
// if ($(this).prop("checked")){
// $(this).prop("checked",false);
// }else {
// $(this).prop("checked",true);
// }
// }
// )
// 第二种方式
// $(":checkbox").each(function (k) {
// if(this.checked){
// this.checked=false;
// }else {
// this.checked=true;
// }
// })
// 第三种方式:三元运算 条件？真值：假值
$(":checkbox").each(function (k) {
// var v = $(this).prop("checked")?false:true;
// $(this).prop("checked",v);
var v = !$(this).prop("checked");
$(this).prop("checked",v);
})
}
</script>
</body>
</html>
-
文本操作
1. 对标签的值进行操作 .text() 获取标签的值 .text("n") 对标签内容进行赋值 2. 对HTML进行操作 .html() 获取标签内的HTML .html("") 对标签内的HTML进行赋值 3. 专用于操作value值 .val() 获取value值 .val("n") 给value赋值n PS： index() 获取索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.active{
background-color: red;
}
.head{
height: 38px;
background-color: #dddddd;
border: 1px solid blanchedalmond;
line-height: 38px;
}
.headItem{
padding-left: 100px;
padding-right: 100px;
border-right: 2px solid black;
float: left;
}
.content{
border: 1px solid blue;
background-color: green;
height: 500px;
}
</style>
</head>
<body>
<div class="head">
<div class="headItem active" a="1">目录一</div>
<div class="headItem" a="2">目录二</div>
<div class="headItem" a="3">目录三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(".headItem").click(function () {
$(this).addClass("active").siblings().removeClass("active");
// var target = $(this).attr("a");
// $(".content").children("[b="+ target +"]").removeClass("hide").siblings().addClass("hide");
$(".content").children().eq($(this).index()).removeClass("hide").siblings().addClass("hide");
});
</script>
</body>
</html>
-
文件处理
append prepend before after remove empty clone
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text"/>
<input type="button" value="添加"/>
<input type="button" value="删除"/>
<input type="button" value="复制"/>
<ul id="i1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('input[value="添加"]').click(function () {
var v = $('input[type="text"]').val();
var tmp = "<li>"+v+"</li>";
// $("#i1").append(tmp); // 在列表后面添加
$("#i1").prepend(tmp); // 在列表前面添加
// $("#i1").before(tmp); // 在标签前面添加
// $("#i1").after(tmp); // 在标签后面添加
});
$('input[value="删除"]').click(function () {
var v = $('input[type="text"]').val();
// $("#i1").children().eq(v).remove(); // 直接删除对应索引的元素
$("#i1").children().eq(v).empty(); // 删除对应索引的元素的值
});
$('input[value="复制"]').click(function () {
var v = $('input[type="text"]').val();
$("#i1").append($("#i1").children().eq(v).clone()); // 复制对应索引元素添加到列表的后面
});
</script>
</body>
</html>
-
CSS处理
$("..").css("n","s"); 添加样式 点赞： - $("..").append() - setInterval() - 透明度 0》1 - position - 字体大小，位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
height: 60px;
border: 1px solid black;
padding: 30px;
line-height: 60px;
}
.item{
position: relative;
width: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(".container span").click(function () {
var fontsize = 15;
var right = 0;
var top = 0;
var opacity = 1;
var tmp = $(document.createElement("span")).text("+1");
$(".item").append(tmp);
$(tmp).css("color","green");
$(tmp).css("position","absolute");
$(tmp).css("fontSize",fontsize+"px");
$(tmp).css("right",right+"px");
$(tmp).css("top",top+"px");
$(tmp).css("opacity",opacity);
var tag = setInterval(function () {
fontsize = fontsize+5;
right = right-5;
top = top-5;
opacity = opacity-0.1;
$(tmp).css("fontSize",fontsize+"px");
$(tmp).css("right",right+"px");
$(tmp).css("top",top+"px");
$(tmp).css("opacity",opacity);
if (opacity<0){
clearInterval(tag);
$(tmp).remove();
}
},200)
}
);
</script>
</body>
</html>
-
位置
$(window).scrollTop() 查找 $(window).scrollTop(0) 设置 scrollLeft([val]) offset().left 指定标签在HTML中的坐标 offset().top position() 指定标签相对于父标签的坐标 <div style="position:relative"> <div> <div id="i1" style="position:absolute;"></div> </div> </div> $("..").height() 获取标签的高度 纯高度 $("..").innerHeight() 获取边框+纯高度+？ $("..").outerHeight() 获取边框+纯高度+？ $("..").outerHeight(true) 获取边框+纯高度+？ 纯高度，边框，外边距，内边距 -
jQuery扩展
PS(为避免扩展模块之间产生全局变量或函数的冲突，扩展时在最外层加上一个自执行函数): (function(arg){ pass; })(jQuery); 方式一： $.fn.extend({ "name":function(){ return "123"; }; }); $("#i1").name(); 方式二： $.extend({ "name":function(){ return "456"; }; } $.name();
725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
