一、 寻找元素(重要的选择器和筛选器)
基本语法：$(selector).action()
2.1 选择器
2.1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")
2.1.2层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
2.1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
2.1.4 属性选择器 $(‘[id="div1"]‘) $(‘["alex="sb"][id]‘)
2.1.5 表单选择器 $("[type=‘text‘]")----->$(":text") 注意只适用于input标签
$("input:checked")
2.2 筛选器
2.2.1 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
2.2.2 查找筛选器
$("div").children(".test") $("div").find(".test")
$(".test").next() $(".test").nextAll() $(".test").nextUntil()
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents() $(".test").parentUntil()
$("div").siblings()
实例 左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.title{
background-color: #1a386a;
color: white;;
cursor: pointer;
}
.menu {
background-color: grey;
width: 20%;
float: left;
height: 500px;
line-height: 40px;
}
.content {
width: 80%;
float: left;
background-color: #6cd9c9;
height: 500px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单四</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script>
$(document).ready(function () {
$(".title").click(function () {
$(".title").next().addClass("hide")
$(this).next().removeClass("hide")
})
})
</script>
</body>
</html>
实例 tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<script src="jquery-1.12.4.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
.outer {
width: 500px;
margin: 0 auto;
background-color: #333333;
color: white;
}
.outer li {
display: inline-block;
list-style: none;
line-height: 50px;
width: 80px;
text-align: center;
}
.inner{
height: 300px;
background-color: #139412;
border: 1px solid transparent;
}
.hide {
display: none;
}
.current{
background-color: #f42760;
color: black;
border: solid 2px transparent;
}
</style>
</head>
<body>
<div class="outer">
<ul>
<li class="current" conctent="c1">菜单一</li>
<li conctent="c2">菜单二</li>
<li conctent="c3">菜单三</li>
</ul>
<div class="inner">
<div text_con="c1">我是内容一</div>
<div text_con="c2" class="hide">我是内容二</div>
<div text_con="c3" class="hide">我是内容三</div>
</div>
</div>
<script>
$("li").click(function () {
$(this).addClass("current").siblings().removeClass("current");
$("[text_con="+$(this).attr(‘conctent‘)+"]").removeClass("hide").siblings().addClass("hide");
})
</script>
</body>
</html>
二、 操作元素(属性 CSS 和 文档处理)
2.1 属性操作
$("p").text() $("p").html() $(":checkbox").val()
$(".test").attr("alex") $(".test").attr("al","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide")
实例 编辑框正反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<div>
<input class="selA" type="button" value="全选"/>
<input class="selB" type="button" value="取消"/>
<input class="selC" type="button" value="反选"/>
</div>
<table>
<thead>
<th>序号</th>
<th> 姓名</th>
<th> 年龄</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>a</td>
<td>18</td>
</tr><tr>
<td><input type="checkbox"/></td>
<td>b</td>
<td>19</td>
</tr><tr>
<td><input type="checkbox"/></td>
<td>c</td>
<td>20</td>
</tr><tr>
<td><input type="checkbox"/></td>
<td>d</td>
<td>21</td>
</tr>
</tbody>
<script>
$(".selA").click(function () {
$(":input").prop("checked",true);
})
$(".selB").click(function () {
$(":input").prop("checked",false);
})
$(".selC").click(function () {
$("table :input").each(function () {
if ($(this).prop("checked")){
$(this).prop("checked",false);
}else{
$(this).prop("checked",true);
}
})
})
</script>
</table>
</body>
</html>
jQuery里each循环原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<script>
function myeach(obj,func) {
for(var i = 0;i<obj.length;i++){
var current = obj[i];
var ret = func(i,current);
if(ret == "false"){
break
}
}
}
var li = [11,22,33];
myeach(li,function (k,v) {
console.log(k,v);
return false;
})
$.each()
</script>
</body>
</html>
2.2 CSS操作
3.2.1(样式) css("{color:‘red‘,backgroud:‘blue‘}")
3.2.2(位置) offset() position() scrollTop() scrollLeft()
3.2.3(尺寸) height() width()
实例 返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.menu{
height: 5000px;
background-color: #99aecb;
}
h1{
text-align: center;
line-height: 90px;
}
.returnTop{
position: fixed;
right: 20px;
bottom: 20px;
width: 38px;
height: 38px;
background-color: #f42760;
font-size: 14px;
text-align: center;
font-family: "微软雅黑";
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="menu">
<h1>我是第一行</h1>
</div>
<div class="returnTop hide">返回顶部</div>
<script>
window.onscroll=function () {
var current = $(window).scrollTop();
if (current>100){
$(".returnTop").removeClass("hide");
}else{
$(".returnTop").addClass("hide");
}
}
$(".returnTop").click(function () {
$(window).scrollTop(0)
}
)
</script>
</body>
</html>
实例 滚动菜单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.12.4.js"></script>
<style>
body,img,ul {
margin: 0;
padding:0;
list-style: none;
border: 0;
}
.pg-header {
background-color: #35536D;
}
.warp {
width: 980px;
margin: 0 auto;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0 ;
visibility: hidden;
}
.pg-header .logo {
float: left;
padding: 5px 10px 5px 0px;
}
.pg-header .logo img {
width: 110px;
height: 40px;
}
.pg-header .nav ul li {
float: left;
}
.pg-header .nav ul li a {
display: block;
text-decoration: none;
color: #ccc;
font-size: 16px;
line-height: 50px ;
font-family: "微软雅黑";
padding: 0 20px ;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #1864aa;
}
.pg-body .catalog {
position: absolute;
top: 60px;
width: 200px;
background-color: #fafafa;
border: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
}
.pg-body .catalog .catalog-item{
background-color: #fafafa;
}
.pg-body .content {
position: absolute;
top: 60px;
width:700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
<html>
<body>
<div class="pg-header">
<div class="warp clearfix">
<div class="logo">
<a href="javascript:void (0)"><img src="3.png"/></a>
</div>
<div class="nav">
<ul>
<li><a href="javascript:void(0)">首页</a></li>
<li><a href="javascript:void(0)">菜单一</a></li>
<li><a href="javascript:void(0)">菜单二</a></li>
</ul>
</div>
</div>
</div>
<div class="pg-body">
<div class="warp">
<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 >60){
$(".catalog").addClass("fixed");
}else{
$(".catalog").removeClass("fixed");
}
if ($(document).height()==$(window).height()+ws){
$(".catalog").children(":last").css("fontSize","40px").siblings().css("fontSize","16px");
return;
}
$(".content").children().each(function () {
var offset=$(this).offset().top;
var total = $(this).height()+ offset;
if (ws >offset && ws < total){
var index=$(this).attr("menu");
var new_inde="[auto-to="+index+"]";
$(new_inde).css("fontSize","40px").siblings().css("fontSize","15px");
}
})
}
</script>
</body>
</html>
2.3 文档处理
内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")
prepend() prependTo()
外部插入 before() insertBefore() after insertAfter()
replaceWith() remove() empty() clone()
2.4 事件
2.4.1
$(document).ready(function(){}) -----------> $(function(){})
2.4.2
$("p").click(function(){})
$("p").bind("click",function(){})
$("ul").delegate("li","click",function(){})
实例 拖动面板
<!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-2.2.3.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>
实现鼠标拖动内容框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<style>
a {
color: #428bca;
text-decoration: none;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
background-color: #white;
opacity: 0.8;
}
.modal {
position: fixed;
top: 30%;
left: 50%;
z-index: 1030;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div>
<input type="button" onclick="fadeIn();" value="加载条"/>
</div>
<div id="shade" class="modal-backdrop hide">
<div class="modal">
<img src="./images/loading_32.gif"/>
</div>
</div>
<script >
function fadeIn() {
document.getElementById(‘shade‘).className = ‘modal-backdrop‘;
}
function fadeOut() {
document.getElementById(‘shade‘).className = ‘modal-backdrop hide‘;
}
</script>
</body>
</html>
实例：加载
加载条
/*公共开始*/
body {
margin: 0 auto;
font-family: Arial;
_font-family: 宋体,Arial;
font-size: 12px;
}
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure, div {
margin: 0;
padding: 0;
}
ol, ul, li {
list-style: none;
}
a{
cursor:pointer;
text-decoration:none;
}
/*a:hover{
color: #F60 !important;
text-decoration: underline;
}*/
img{
border:none;
border-width:0px;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
.red{
color: #c00!important;
}
.m8{
margin:8px;
}
.mt10{
margin-top:10px;
}
.mt20{
margin-top:20px;
}
.mr5{
margin-right:5px;
}
.ml5{
margin-left:5px;
}
.ml10{
margin-left:10px;
}
.mb10{
margin-bottom:10px;
}
.pt18{
padding-top:18px;
}
.pt20{
padding-top:20px;
}
.pb20{
padding-bottom:20px;
}
.nbr{
border-right:0px;
}
.font12{
font-size:12px;
}
.font14{
font-size:14px;
}
.font16{
font-size:16px;
}
.bold{
font-weight:bold;
}
.left{
float:left;
}
.right{
float:right;
}
.hide{
display:none;
}
.show{
display:table;
}
.clearfix{
clear:both;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {zoom: 1;}
.container{
width:1190px;
margin-left:auto;
margin-right:auto;
}
.group-box-1 .title{
height: 33px;
line-height: 33px;
border: 1px solid #DDD;
background: #f5f5f5;
padding-top: 0;
padding-left: 0;
}
.group-box-1 .title .title-font{
display: inline-block;
font-size: 14px;
font-family: ‘Microsoft Yahei‘,‘SimHei‘;
font-weight: bold;
color: #333;
padding-left: 10px;
}
.group-box-1 .body {
border: 1px solid #e4e4e4;
border-top: none;
}
.tab-menu-box1 {
border: 1px solid #ddd;
margin-bottom: 20px;
}
.tab-menu-box1 .menu {
line-height: 33px;
height: 33px;
background-color: #f5f5f5;
}
.tab-menu-box1 .content {
min-height: 100px;
border-top: 1px solid #ddd;
background-color: white;
}
.tab-menu-box1 .menu ul {
padding: 0;
margin: 0;
list-style: none;
/*position: absolute;*/
}
.tab-menu-box1 .menu ul li {
position: relative;
float: left;
font-size: 14px;
font-family: ‘Microsoft Yahei‘,‘SimHei‘;
text-align: center;
font-size: 14px;
font-weight: bold;
border-right: 1px solid #ddd;
padding: 0 18px;
cursor: pointer;
}
.tab-menu-box1 .menu ul li:hover {
color: #c9033b;
}
.tab-menu-box1 .menu .more {
float: right;
font-size: 12px;
padding-right: 10px;
font-family: "宋体";
color: #666;
text-decoration: none;
}
.tab-menu-box1 .menu a:hover {
color: #f60 !important;
text-decoration: underline;
}
.tab-menu-box1 .menu .current {
margin-top: -1px;
color: #c9033b;
background: #fff;
height: 33px;
border-top: 2px solid #c9033b;
z-index: 10;
}
.tab-menu-box-2 .float-title {
display: none;
top: 0px;
position: fixed;
z-index: 50;
}
.tab-menu-box-2 .title {
width: 890px;
border-bottom: 2px solid #b20101;
border-left: 1px solid #e1e1e1;
clear: both;
height: 32px;
}
.tab-menu-box-2 .title a {
float: left;
width: 107px;
height: 31px;
line-height: 31px;
font-size: 14px;
font-weight: bold;
text-align: center;
border-top: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
background: url(/Content/images/bg4.png?3) 0 -308px repeat-x;
text-decoration: none;
color: #333;
cursor: pointer;
}
.tab-menu-box-2 .title a:hover {
background-position: -26px -271px;
text-decoration: none;
color: #fff;
}
.tab-menu-box-2 .content {
min-height: 100px;
background-color: white;
}
.tab-menu-box3 {
border: 1px solid #ddd;
}
.tab-menu-box3 .menu {
line-height: 33px;
height: 33px;
background-color: #f5f5f5;
}
.tab-menu-box3 .content {
height: 214px;
border-top: 1px solid #ddd;
background-color: white;
}
.tab-menu-box3 .menu ul {
padding: 0;
margin: 0;
list-style: none;
/*position: absolute;*/
}
.tab-menu-box3 .menu ul li {
position: relative;
float: left;
font-size: 14px;
font-family: ‘Microsoft Yahei‘,‘SimHei‘;
text-align: center;
font-size: 14px;
width:50%;
cursor: pointer;
}
.tab-menu-box3 .menu ul li:hover {
color: #c9033b;
}
.tab-menu-box3 .menu .more {
float: right;
font-size: 12px;
padding-right: 10px;
font-family: "宋体";
color: #666;
text-decoration: none;
}
.tab-menu-box3 .menu a:hover {
color: #f60 !important;
text-decoration: underline;
font-weight: bold;
}
.tab-menu-box3 .menu .current {
margin-top: -1px;
color: #c9033b;
background: #fff;
height: 33px;
border-top: 2px solid #c9033b;
z-index: 10;
font-weight: bold;
}
/*公共结束*/
实例：Tab菜单-css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<div>
<input class="selA" type="button" value="全选"/>
<input class="selB" type="button" value="取消"/>
<input class="selC" type="button" value="反选"/>
</div>
<table>
<thead>
<th>序号</th>
<th> 姓名</th>
<th> 年龄</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>a</td>
<td>18</td>
</tr><tr>
<td><input type="checkbox"/></td>
<td>b</td>
<td>19</td>
</tr><tr>
<td><input type="checkbox"/></td>
<td>c</td>
<td>20</td>
</tr><tr>
<td><input type="checkbox"/></td>
<td>d</td>
<td>21</td>
</tr>
</tbody>
<script>
$(".selA").click(function () {
$(":input").prop("checked",true);
})
$(".selB").click(function () {
$(":input").prop("checked",false);
})
$(".selC").click(function () {
$("table :input").each(function () {
if ($(this).prop("checked")){
$(this).prop("checked",false);
}else{
$(this).prop("checked",true);
}
})
})
</script>
</table>
</body>
</html>
实例：多选、反选和取消
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.12.4.js"></script>
<style>
body,img,ul {
margin: 0;
padding:0;
list-style: none;
border: 0;
}
.pg-header {
background-color: #35536D;
}
.warp {
width: 980px;
margin: 0 auto;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0 ;
visibility: hidden;
}
.pg-header .logo {
float: left;
padding: 5px 10px 5px 0px;
}
.pg-header .logo img {
width: 110px;
height: 40px;
}
.pg-header .nav ul li {
float: left;
}
.pg-header .nav ul li a {
display: block;
text-decoration: none;
color: #ccc;
font-size: 16px;
line-height: 50px ;
font-family: "微软雅黑";
padding: 0 20px ;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #1864aa;
}
.pg-body .catalog {
position: absolute;
top: 60px;
width: 200px;
background-color: #fafafa;
border: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
}
.pg-body .catalog .catalog-item{
background-color: #fafafa;
}
.pg-body .content {
position: absolute;
top: 60px;
width:700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
<html>
<body>
<div class="pg-header">
<div class="warp clearfix">
<div class="logo">
<a href="javascript:void (0)"><img src="3.png"/></a>
</div>
<div class="nav">
<ul>
<li><a href="javascript:void(0)">首页</a></li>
<li><a href="javascript:void(0)">菜单一</a></li>
<li><a href="javascript:void(0)">菜单二</a></li>
</ul>
</div>
</div>
</div>
<div class="pg-body">
<div class="warp">
<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 >60){
$(".catalog").addClass("fixed");
}else{
$(".catalog").removeClass("fixed");
}
if ($(document).height()==$(window).height()+ws){
$(".catalog").children(":last").css("fontSize","40px").siblings().css("fontSize","16px");
return;
}
$(".content").children().each(function () {
var offset=$(this).offset().top;
var total = $(this).height()+ offset;
if (ws >offset && ws < total){
var index=$(this).attr("menu");
var new_inde="[auto-to="+index+"]";
$(new_inde).css("fontSize","40px").siblings().css("fontSize","15px");
}
})
}
</script>
</body>
</html>
实例：滚动菜单
3、文档处理
<!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;"></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>
实例：移动面板
时间： 2024-10-06 06:53:15