jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程,很容易学习。
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
一 ,寻找元素(重要的选择器和筛选器)
基本语法:$(selector).action()
(一),选择器:
1.1基本选择器: $("*") $("#id") $(".class") $("element") $(".class,p,div")
$("#id") 根据id寻找元素:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div id="xxx">sasd <p>sss</p> <a class="ca">拜拜</a> </div> <div class="c1">qqqq <span id="c3">牛逼1</span> <span id="c4">牛逼1</span> <span id="c5">牛逼1</span> </div> <script src="jquery-1.12.4.js"></script> <script> $("#xxx").css("color","red").text('123434'); $("#c3").css("color","red").text('怂逼1'); </script>
$("element") 根据标签寻找元素
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div id="xxx">sasd <p>sss</p> <a class="ca">拜拜</a> </div> <script src="jquery-1.12.4.js"></script> <script> $("p").css("color","#666").text("ddd"); </script> 结果: <p>ddd</p>
$(".class") 根据类名寻找元素
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div id="xxx">sasd <p>sss</p> <a class="ca">拜拜</a> </div> <div class="c1">qqqq <span id="c3">牛逼1</span> <span id="c4">牛逼1</span> <span id="c5">牛逼1</span> </div> <script> $(".ca").text('123'); $(".c1").text('88888'); </script> 结果: <a class="ca">123</a> <div class="c1">88888</div>
$("*") 寻找所有的元素
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div id="xxx">sasd <p>sss</p> <a class="ca">拜拜</a> </div> <div class="c1">qqqq <span id="c3">牛逼1</span> <span id="c4">牛逼1</span> <span id="c5">牛逼1</span> </div> <script> $("*") </script> 结果: <div id="xxx">sasd </div> <p>sss</p> <a class="ca">拜拜</a> <div class="c1">qqqq </div> <span id="c3">牛逼1</span> <span id="c4">牛逼1</span> <span id="c5">牛逼1</span>
$(".class,p,div") 将每一个选择器匹配到的元素合并后一起返回。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div id="xxx">sasd <p>sss</p> <a class="ca">拜拜</a> </div> <div class="c1">qqqq <span id="c3">牛逼1</span> <span id="c4">牛逼1</span> <span id="c5">牛逼1</span> </div> $("#xxx,.c1 ").text('88888'); 结果: 88888 88888
2 , 层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<form> <label> <input type="button" value="xin"/> Name </label> <input type="date" value="cc"/> </form> <input type="zzzzz" value="dd"/> $("form input") 寻找所有的input元素 $("form>input"); 寻找所有子类元素 $("label + input"); 寻找子类下的子类元素 $("form ~ input"); 寻找父类同辈的元素
3,基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
$("li:first") 获取第一个元素
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> <li>list item4</li> <li>list item5</li> </ul> $("li:first"); 结果: [<li>list item1</li>]
$("li:eq(2)") 获取一个给定索引值的元素
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> <li>list item4</li> <li>list item5</li> </ul> $("li:eq(2)"); 结果; [<li>list item3</li>]
$("li:even") 获取所有索引值为偶数的元素,从 0 开始计数
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> <li>list item4</li> <li>list item5</li> </ul> $("li:even"); 结果: [<li>list item1</li>, <li>list item3</li>, <li>list item5</li>]
$("li:gt(1)") 所有大于给定索引值的元素
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> <li>list item4</li> <li>list item5</li> </ul> $("li:gt(1)"); 结果: [<li>list item3</li>, <li>list item4</li>, <li>list item5</li>]
4,属性选择器
$('[id="div1"]')
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<input id="ff" type="checkbox" name="123" value="请求"/> <input type="checkbox" name="123" value="执行"/> <input type="checkbox" name="345" value="停止"/> $("input[name='123']").attr("checked",true); 结果: [<input id="ff" type="checkbox" name="123" value="请求" checked="checked">, <input type="checkbox" name="123" value="执行" checked="checked">]
$('["alex="sb"][id]')
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<input id="news" name="man" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" /> $("input[id][name$='man']") 结果: [ <input id="letterman" name="new-letterman" /> ]
6,表单选择器 $("[type='text']")----->$(":text") 注意只适用于input标签 $("input:checked")
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option</option></select> <textarea></textarea> <button>Button</button> </form> $(":input"); 寻找所有的input元素 $(":text"); 查找所有文本框 $(":password"); 查找所有密码框 $(":radio"); 查找所有单选按钮 $(":checkbox"); 查找所有复选框 $(":submit") 查找所有的提交按钮 $(":image"); 匹配所有图像域 $(":reset"); 查找所有重置按钮 $(":button"); 查找所有按钮. $(":file"); 查找所有文件域
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<form> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> </form> $("input:checked") [ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]
(二),筛选器
1,过滤筛选器 $("li").eq(2) $("li").first() $("ul li").hasclass("test")
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> <li>list item4</li> <li>list item5</li> </ul> $("li").eq(2).css("color",'red'); 获 取匹配的第二个元素 [<li style="color: red;">list item3</li>] $('li').first() 获取匹配的第一个元素 [<li>list item1</li>]
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div class="protected"></div><div></div> $("div").click(function(){ if ( $(this).hasClass("protected") ) $(this) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: 0 }); });
2,查找筛选器
$("div").children(".test") 子元素 $("div").find(".test") 子子孙孙元素
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div class="c11"> <div id="aa"> <h1>hello</h1> <p>哈喽</p> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $("#aa").children().css("color","red"); 结果: <h1>hello</h1> <p>哈喽</p>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div class="c11"> <div id="aa"> <h1>hello</h1> <p>哈喽</p> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $("#aa").find("h1"); 结果: <h1>hello</h1>
$(".test").next() 找到每个段落的后面紧邻的同辈元素。
$(".test").nextAll() 查找当前元素之后所有的同辈元素。
$(".test").nextUntil() 查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div class="c1">11111111 <div class="c11">0111111 <div class="c111">001111111</div> </div> <p>555555</p> <div class="c22">02222222</div> </div> <div class="c2">22222222 <p>ssssssssss</p> </div> <div class="c3">33333333</div> <p>ssssssssss</p> $('.c1').next().css("color",'#bbff00'); $(".c1").nextAll().css("color",'#0d0'); $(".c1").nextUntil(".c11").css("color",'#7fe'); 结果: <div class="c2">22222222 <p>ssssssssss</p> </div> <div class="c3">33333333</div> <p>ssssssssss</p>
$("div").prev() 取得一个元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
$("div").prevAll() 查找当前元素之前所有的同辈元素
$("div").prevUntil() 查找当前元素之前所有的同辈元素,直到遇到匹配的那个元素为止。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div class="c1">11111111 <div class="c11">0111111 <div class="c111">001111111</div> </div> <p>555555</p> <div class="c22">02222222</div> </div> <div class="c2">22222222 <p>ssssssssss</p> </div> <div class="c3">33333333</div> <p>ssssssssss</p> $(".c2").prev().css("background-color",'red'); $(".c3").prevAll().css("background-color","#df7"); $(".c22").prevUntil(".c1").css("background-color","#860");
$(".test").parent() 查找每个段落的父元素
$(".test").parents() 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。
$(".test").parentUntil() 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div class="c1">11111111 <div class="c11">0111111 <div class="c111">001111111</div> </div> <p>555555</p> <div class="c22">02222222</div> </div> <div class="c2">22222222 <p>ssssssssss</p> </div> <div class="c3">33333333</div> <p>ssssssssss</p> $(".c111").parent().css("background-color","#333"); $(".c11").parents().css("background-color","#666"); $("div.c111").parentsUntil(".c1").css("background-color","#0f0");
$("div").siblings() 获取所有同辈元素的元素集合。可以用可选的表达式进行筛选。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div class="c1">11111111
<div class="c11">0111111
<div class="c111">001111111</div>
</div>
<p>555555</p>
<div class="c22">02222222</div>
</div>
<div class="c2">22222222
<p>ssssssssss</p>
</div>
<div class="c3">33333333</div>
<p>ssssssssss</p>
$(".c1").siblings().css("background-color","#860");
验证实例:
var reMethod = "GET",
pwdmin = 6;
$(document).ready(function() {
$('#reg').click(function() {
if ($('#user').val() == "") {
$('#user').focus().css({
border: "1px solid red",
boxShadow: "0 0 2px red"
});
$('#userCue').html("<font color='red'><b>×用户名不能为空</b></font>");
return false;
}
if ($('#user').val().length < 4 || $('#user').val().length > 16) {
$('#user').focus().css({
border: "1px solid red",
boxShadow: "0 0 2px red"
});
$('#userCue').html("<font color='red'><b>×用户名位4-16字符</b></font>");
return false;
}
$.ajax({
type: reMethod,
url: "/member/ajaxyz.php",
data: "uid=" + $("#user").val() + '&temp=' + new Date(),
dataType: 'html',
success: function(result) {
if (result.length > 2) {
$('#user').focus().css({
border: "1px solid red",
boxShadow: "0 0 2px red"
});$("#userCue").html(result);
return false;
} else {
$('#user').css({
border: "1px solid #D7D7D7",
boxShadow: "none"
});
}
}
});
if ($('#passwd').val().length < pwdmin) {
$('#passwd').focus();
$('#userCue').html("<font color='red'><b>×密码不能小于" + pwdmin + "位</b></font>");
return false;
}
if ($('#passwd2').val() != $('#passwd').val()) {
$('#passwd2').focus();
$('#userCue').html("<font color='red'><b>×两次密码不一致!</b></font>");
return false;
}
var sqq = /^[1-9]{1}[0-9]{4,9}$/;
if (!sqq.test($('#qq').val()) || $('#qq').val().length < 5 || $('#qq').val().length > 12) {
$('#qq').focus().css({
border: "1px solid red",
boxShadow: "0 0 2px red"
});
$('#userCue').html("<font color='red'><b>×QQ号码格式不正确</b></font>");return false;
} else {
$('#qq').css({
border: "1px solid #D7D7D7",
boxShadow: "none"
});
}
$('#regUser').submit();
});
});
实例:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <style> *{ margin: 0px; padding: 0px; } .outer{ margin: 0 auto; width: 60%; } .menu{ background-color:#aaaaaa; line-height: 40px; } .menu li{ display: inline-block; } .menu a{ border-right:1px solid red; padding: 11px; } .content{ background-color: tan; border: 1px solid brown; height: 100px; } .hide{ display: none; } .current{ background-color: darkcyan; color: black; border-top:solid 1px darkslategrey; } </style> </head> <body> <div class="outer"> <ul class="menu"> <li xxx="c1" class="current" onclick="show(this)">菜单一</li> <li xxx="c2" onclick="show(this)">菜单二</li> <li xxx="c3" onclick="show(this)">菜单三</li> </ul> <div class="content"> <div id="c1">内容一</div> <div id="c2" class="hide">内容二</div> <div id="c3" class="hide">内容三</div> </div> </div> <script> function show(arg){ $(arg).addClass("current").siblings().removeClass("current"); var index =$(arg).attr("xxx"); $("#"+index).removeClass("hide").siblings().addClass("hide"); } </script> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <style> .menu{ height: 220px; width: 30%; background-color: #030911; color: white; float: left; } .content{ height: 220px; width: 70%; background-color: #425a66; float: left; } .tite{ line-height: 50px; background-color: #7cbe56; color: white; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="tite" onclick="show(this);">菜单一</div> <div class="con"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> <div class="item"> <div class="tite" onclick="show(this);">菜单二</div> <div class="con hide"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> <div class="item"> <div class="tite" onclick="show(this);">菜单三</div> <div class="con hide"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> </div> <div class="content"></div> </div> <script> function show(arg){ $(arg).next().removeClass("hide"); $(arg).parent().siblings().children(".con").addClass("hide") } </script> </body> </html>
二 操作元素 ( 属性 css 文档处理)
属性:
$("p").text() 设置或返回所选元素的文本内容
$("p").html() 设置或返回所选元素的内容(包括 HTML 标记)
$(":checkbox").val() 设置或返回表单字段的值
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> </head> <body> <p class="c2">请单击</p> <div class="a1">hello 美女 有时间聊会吗</div> <input type="text" id="s1" value="拜拜"/> <button class="cc">修改1</button> <button class="aa">修改2</button> <button class="ss">修改3</button> <script> $(document).ready(function(){ $(".cc").click(function(){ $(".c2").text("挥挥手再见") }); $(".aa").click(function(){ $(".a1").html("<p>请别跟我说话</p>") }); $(".ss").click(function(){ $("#s1").val("再见") }); }) </script> </body> </html>
$(".test").attr("alex") 设置或返回被选元素的属性值。
$(".test").attr("alex","sb")
$(".test").attr("checked","checked")
$(":checkbox").removeAttr("checked") 从每一个匹配的元素中删除一个属性
$(".test").prop("checked",true) 获取在匹配的元素集中的第一个元素的属性值。
$(".test").addClass("hide") 为每个匹配的元素添加指定的类名。
实例:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正反选</title> <script src="jquery-1.12.4.js"></script> </head> <body> <table> <tr> <td><input type="button" value="正选" onclick="All()"></td> <td><input type="button" value="取消" onclick="che()"></td> <td><input type="button" value="反选" onclick="reverse()"></td> </tr> <tr><td><input type="checkbox"></td><td>111</td></tr> <tr><td><input type="checkbox"></td><td>222</td></tr> <tr><td><input type="checkbox"></td><td>333</td></tr> </table> <script> function All(){ $("table :checkbox").prop("checked",true); } function che(){ $("table :checkbox").prop("checked",false); } function reverse(){ $("table :checkbox").each(function(){ if($(this).prop("checked")){ $(this).prop("checked",false) } else { $(this).prop("checked",true) } }); } </script> </body> </html>
css 操作:三种方式
(样式) css("{color:'red',backgroud:'blue'}")
(位置) offset() position() scrollTop() scrollLeft()
(尺寸) height() width()
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <style> body{ margin:0 auto } .returnTop{ height: 60px; width: 100px; background-color: #425a66; position: fixed; right: 0; bottom: 0; color: white; line-height: 60px; text-align: center; } .div1{ background-color: coral; font-size: 5px; overflow: auto; width: 500px; } .div2{ background-color: darkgray; } .div3{ background-color: aqua; } .div{ height: 300px; } .hide{ display: none; } </style> </head> <body> <div class="div1 div"> <p>11</p> <p>11</p> <p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p> </div> <div class="div2 div"></div> <div class="div3 div"></div> <div class="returnTop hide" onclick="returnTop();">返回顶部</div> <script> window.onscroll=function(){ var current=$(window).scrollTop(); console.log(current); if (current>100){ $(".returnTop").removeClass("hide"); } else { $(".returnTop").addClass("hide") } }; function returnTop(){ $(window).scrollTop(0); } </script> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动菜单</title> <script src="jquery-1.12.4.js"></script> <style> body{ margin: 0; } img{ border: 0; } ul{ padding: 0; margin: 0; list-style:none; } .clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow:0 2px 5px rgba(0,0,0,.2); -moz-box-shadow:0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2);; } .pg-header .logo{ float:left; padding: 5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width:110px; height: 40px; } .pg-header .nev{ line-height:50px; } .pg-header .nev ul li{ float:left; } .pg-header .nev ul li a{ display:block; color:#ccc; padding:0 20px; text-decoration: none; font-size: 14px; } .pg-header .nev ul li a:hover{ color:#fff; background-color: #425a66; } .pg-boby .catalog{ position: absolute; top:60px; width:200px; background-color: #fafafa; bottom: 0px; } .pg-boby .catalog.fixed{ position: fixed; top:10px; } .pg-boby .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-boby .content{ position: absolute; top:60px; width: 700px; margin-left:210px; background-color: #fafafa; overflow: auto; } .pg-boby .content .section{ height: 500px; } </style> </head> <body> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="16.png"> </a> </div> <div class="nev"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能壹</a> </li> <li> <a href="#">功能贰</a> </li> </ul> </div> </div> </div> <div class="pg-boby"> <div class="wrap"> <div class="catalog"> <div class="catalog-item" auto-to="function1"><a>第一张</a></div> <div class="catalog-item" auto-to="function2"><a>第二张</a></div> <div class="catalog-item" auto-to="function3"><a>第仨张</a></div> </div> <div class="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section"> <h1>第三章</h1> </div> </div> </div> </div> <script> window.onscroll=function(){ var ws=$(window).scrollTop(); if(ws>50){ $(".catalog").addClass("fixed"); } else { $(".catalog").removeClass("fixed"); } if($(document).height()==$(window).height()+ws){ $(".catalog").children(":last").css("fontSize","40px").siblings().css("fontSize","12px"); return; } $(".content").children().each(function (){ var offsett =$(this).offset().top; var total =$(this).height()+offsett; if (ws>offsett && ws<total){ var index=$(this).attr("menu"); var new_index="[auto-to ="+index+"]"; console.log(new_index); $(new_index).css("fontSize",'40px').siblings().css("fontSize","15px"); } }) } </script> </body> </html>
文档处理
内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")
prepend() prependTo()
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div style="height: 200px;background-color: yellow" id="c1"> <p>hello</p> </div> <b>uuu</b> $("#c1").append("<p>xxxx</p>") $("p").appendTo("div") $("p").prepend("div") $("p").prependTo("div")
外部插入:
after() 在元素后插入 before() 在元素前插入 insertBefore() 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。 insertAfter() 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。 remove(); 将元素删除 replaceWith() 替换 empty() 删除 clone() 克隆
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<style> .c1{ height: 200px; background-color: yellow; } </style> <body> <div id="c1"> <p>hello</p> </div> <b>uuu</b> <script> $("#c1").after("<p>拜拜</p>"); 在该元素后插入 $("#c1").before("<p>xxxx</p>"); 在该元素前插入 $("b").insertBefore("#c1"); 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。 $("b").insertAfter("#c1"); 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。 $("b").remove(); 将该元素删除 $("b").replaceWith("<p>sssssss</p>"); 替换 $("p").empty(); 将所有p标签删除 $("p").clone().add("#c1") 克隆 </script> </body>
事件:
$(document).ready(function(){}) -----------> $(function(){}) 当页面加载完成后,自动执行的函数
$("p").click(function(){}) 触发每一个查找元素的click事件。
$("p").bind("click",function(){}) 为每个元素的特定事件绑定事件处理函数
$("ul").delegate("li","click",function(){}) 给子元素添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>移动</title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;color: white;"> 标题 </div> <div style="height: 300px;"> 内容 </div> </div> <script type="text/javascript" src="../jquery-1.12.4.js"></script> <script> $(function(){ // 页面加载完成之后自动执行 $('#title').mouseover(function(){ $(this).css('cursor','move'); }).mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; // 原始鼠标横纵坐标位置 var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $(this).bind('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }).mouseup(function(){ $(this).unbind('mousemove'); }); }) </script> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script> $(document).ready(function(){ $("#flipshow").click(function(){ $("#content").slideDown(1000); }); $("#fliphide").click(function(){ $("#content").slideUp(1000); }); $("#toggle").click(function(){ $("#content").slideToggle(1000); }) }); </script> <style> #flipshow,#content,#fliphide,#toggle{ padding: 5px; text-align: center; background-color: blueviolet; border:solid 1px red; } #content{ padding: 50px; display: none; } </style> </head> <body> <div id="flipshow">出现</div> <div id="fliphide">隐藏</div> <div id="toggle">toggle</div> <div id="content">helloworld</div> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加</title> <script src="jquery-1.12.4.js"></script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> <button>添加</button> <script> $(function(){ $("ul").delegate("li","click",function(){ alert("123") }); $("button").click(function(){ $("ul").append("<li>666</li>"); }) }) </script> </body> </html>
扩展:(插件机制)
- jquery.extend({}) 扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。
- jquery.fn.extend({}) 扩展jQuery对象本身。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<body> <div class="c1">111111</div> <div class="c1">222222</div> <script> jQuery.extend({ show1:function(arg){ var val = $(arg).text(); val = val + "ppppppp"; return val; } }); var ret = $.show1(".c1"); console.log(ret); </script> </body> 结果: 111111222222ppppppp
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<body> <div class="c1">hello word</div> <div class="c1">good Bai</div> <script> jQuery.fn.extend({ show1:function(){ var val = this.text(); val = val + "扩展 is my kaixin"; return val; } }); var ret = $(".c1").show1(); console.log(ret); </script> </body> 结果: hello wordgood Bai扩展 is my kaixin