04 . 前端之JQuery
JQuery简介
# 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
# 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，
# 能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
什么是JQuery?
# JQuery是一个JavaScript函数库
# JQuery是一个轻量级的"写的少，做的多"的JavaScript库.可以通过一行简单的标记被添加到网页中．
# JQuery库包含以下功能:
# 1. HTML元素选取
# 2. HTML元素操作
# 3. CSS操作
# 4. HTML事件函数
# 5. JavaScript特效和动画
# 6. HTML DOM遍历和修改
# 7. AJAX(不刷新页面同时修改页面内容)
# 8. Utilities
# 除此之外，JQuery还提供了大量的插件
为什么使用JQuery?
# 目前网络上有大量开源的JS框架，但是JQuery是目前最流行的JS框架，而且提供了大量的扩展.
# 很多大公司都在使用JQuery，例如:
# Google,Microsoft,IBM,Netflix
# JQuery是否适用于所有浏览器
# jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题,目前jQuery兼容于所有主流浏览器,包括Internet Explorer 6!
JQuery版本
1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持*
JQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$(“#i1”).html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。 相当于： document.getElementById(“i1”).innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象
拿上面那个例子举例，jQuery对象和DOM对象的使用：
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
Example DOM和JQuery对象的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="csswenjian"/>
<style>
</style>
<body>
<div id="i1">123</div>
<script src="jquery-1.12.4.js"></script>
<script>
$("#i1")
</script>
</body>
</html>
# 打开浏览器访问这个html的console
document.getElementById('i1')
<div id=•"i1">•123•</div>•
$('#i1')
jQuery.fn.init [div#i1, context: document, selector: "#i1"]
$('#i1')[0]
<div id=•"i1">•123•</div>•
# JQuery对象[0] => DOM对象
# Dom对象 => $(Dom对象)
JQuery安装
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：
从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
HTML标签引用JQuery
有两个版本的 jQuery 可供下载：
* Production version - 用于实际的网站中，已被精简和压缩。
* Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 [jquery.com](http://jquery.com/download/) 中下载。
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="csswenjian"/>
<style>
</style>
<body>
<div id="i1">123</div>
<script src="jquery-1.12.4.js"></script>
<script>
$("#i1")
</script>
</body>
</html>
# 将下载的文件放在网页的同一目录下，就可以使用JQuery
CDN引用JQuery
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。 如需从Staticfile CDN、又拍云、新浪、谷歌或微软引用 jQuery，请使用以下代码之一：
Staticfile CDN:
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
</head>
百度CDN
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
新浪CDN
<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script>
</head>
Google CDN
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
</head>
# Google产品在中国很不稳定
Microsoft CDN
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>
# 使用CDN的JQuery，有一个很大的优势:
# 许多用户访问其他站点时，已经从上面各种CDN加载过JQuery，所以结果是，他们访问你站点时，
# 会从缓存中加载JQuery，这样可以减少加载时间，同时，大多数CDN都可以确保当用户向其请求文件时，
# 会从离最近的服务器上返回响应，这样也可以提高加载速度.
# 在浏览器Console输入 $.fn.jquery可以查看使用的什么版本.
JQuery基础语法
# 通过JQuery，可以选取(查询,query)HTML元素，并对他们执行"操作"(actions).
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<script>
$(document).ready(function () {
// alert("文档加载完毕");
// 当前函数执行完执行alert弹出框
$("p").click(function () {
$(this).hide();
// 隐藏p元素
})
});
</script>
</body>
</html>
查找标签
1. 基本选择器 id选择器：
$("#id")
标签选择器
$("tagName")
Class选择器
$(".className")
配合使用
$("div.c1")
// 找到c1 class类的div标签
所有元素选择器
$("*")
组合选择器
$("#id,.className,tagName")
层级选择器 x和y可以为任何选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
Example1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p class="pclass">p1</p>
<p id="pid">p2</p>
<button>
click
</button>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").text("p元素被修改了");
$(".pclass").text("p元素通过class被修改了");
$("#pid").text("p元素通过pid被修改了");
});
});
</script>
</body>
</html>
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button>Click</button>
<script>
$(document).ready(function () {
// $("button").click(function () {
// $(this).hide();
// 单击事件
// });
// $("button").dblclick(function () {
// $(this).hide();
// 双击事件
// });
$("button").mouseenter(function () {
$(this).hide();
// 当鼠标放到按钮上触发此事件，
// mouseleave是鼠标移开按钮触发的事件
});
})
</script>
</body>
</html>
事件之绑定，解除绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button id="clickBind">ClickBind</button>
<script>
$(document).ready(function () {
// $("#clickBind").click(function () {
// alert("hello")
// 当我们的事件很多时，这样写非常消耗内存
// });
$("#clickBind").bind("click",clickHandler1);
$("#clickBind").bind("click",clickHandler2);
// $("#clickBind").unbind("click"); //这种解除绑定会解除所有
$("#clickBind").unbind("click",clickHandler1()); //解除单一绑定
$("#clickBind").on("click",clickHandler1); // bind底层都是使用on,off实现
$("#clickBind").off("click",clickHandler2);
});
function clickHandler1(e) {
console.log("clickHandler1")
}
function clickHandler2(e) {
console.log("clickHandler2")
}
</script>
</body>
</html>
自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button id="ClickMeBtn">Click</button>
<script>
var ClickMeBtn
$(document).ready(function () {
ClickMeBtn = $("#ClickMeBtn");
ClickMeBtn.click(function () {
var e = jQuery.Event("MyEvent");
ClickMeBtn.trigger(e);
});
ClickMeBtn.bind("MyEvent",function(event) {
console.log(event);
})
})
</script>
</body>
</html>
Example2
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
Example3 多选，全选，反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="ChackAll()" />
<input type="button" value="反选" onclick="ReverseAll()" />
<input type="button" value="取消" onclick="CancleAll()" />
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>Port</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.2</td>
<td>3306</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function ChackAll() {
$(':checkbox').prop('checked',true);
}
function CancleAll() {
$(':checkbox').prop('checked',false);
}
function ReverseAll() {
$(':checkbox').each(function (k) {
// this代表当前循环的每一个元素
// 反选，循环出来每个元素,
// console.log(k,this)
// if(this.checked){
// this.checked = false;
// }else{
// this.checked = true;
// }
// })
// if ($(this).prop('checked')) {
// $(this).prop('checked', false);
// } else {
// $(this).prop('checked', true);
// }
//三元运算 var v = 条件? 真值:假值
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>
/*
$(':checkbox').prop('checked'); 获取值
$('checkbox').prop('checked',true); 设置值
JQuery方法内置循环: $(':checkbox').xxxx
$(':checkbox').each(function(k)){
// k当前索引
// this,DOM,当前循环的元素 $(this)
}
*/
Example4 筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: aliceblue;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 400px; width: 200px; border: 1px solid green">
<div class="item">
<div class="header">标题1</div>
<div id="i1" class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题2</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题3</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
// jquery绑定事件
$('.header').click(function () {
// 当前点击标签 $(this)
// 获取某个标签的下一个标签
// 获取某个标签的父标签,然后获取所有兄弟标签.
// 找到后将content加上hide给关掉
// 添加样式和移除样式
// $('.i1'）.addClass('hide')
// $('#i1').removeClass('hide')
// var v = $('this + div');
// $('label + input')
// console.log(v);
// 筛选器
// $(this).next() 下一个
// $(this).prev() 上一个
// $(this).parent() 父
// $(this).children() 孩子
// $('#i1').sibling() 兄弟
// ('#i1').find('#i1') 子子孙孙查找
// $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.content').addClass('hide')
// 链式编程
var v = $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
})
</script>
</body>
</html>
Example模态编程框
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
$(":checkbox") //找到所有的checkbox
操作标签
jQuery隐藏/显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
<style>
div{
background: #ece023;
width: 50px;
height: 50px;
margin: 2px;
float: left;
}
</style>
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>
<script>
for(var i = 0;i<5;i++){
$("<div>").appendTo(document.body);
}
$("div").click(function () {
$(this).hide(2000,function () {
$(this).remove();
});
})
</script>
<script>
$(document).ready(function () {
$("#hide").click(function () {
$("p").hide(1000);
//1000毫秒隐藏
});
$("#show").click(function () {
$("p").show(1000);
//1000毫秒显示周期
});
$("#toggle").click(function () {
$("p").toggle(1000);
// 一个按钮实现显示/隐藏两个功能
});
});
</script>
</body>
</html>
jQuery淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#in").on("click",function () {
$("#div1").fadeIn(1000);
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
});
$("#out").on("click",function () {
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").on("click",function () {
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
});
$("#to").on("click",function () {
$("#div1").fadeTo(1000, 0.2);
$("#div2").fadeTo(1000, 0.4);
$("#div3").fadeTo(1000, 0.7);
});
});
</script>
</head>
<body>
<button id="in">fadein</button>
<button id="out">fadeOut</button>
<button id="toggle">toggle</button>
<button id="to">fadeto</button>
<div id="div1" style="width: 80px;height: 80px; display: none; color: rgb(17, 119, 0);">>1</div>
<div id="div2" style="width: 80px;height: 80px; display: none; color: rgb(17, 119, 0);">>2</div>
<div id="div3" style="width: 80px;height: 80px; display: none; color: rgb(17, 119, 0);">>3</div>
</body>
</html>
jQuery滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
<style>
#content, #flipshow, #flighide, #fliptoggle {
padding: 5px;
text-align: center;
background-color: aqua;
border: solid 1px antiquewhite;
}
#content {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flipshow">出现</div>
<div id="flighide">隐藏</div>
<div id="fliptoggle">隐藏/出现</div>
<div id="content">hello</div>
<script>
$(document).ready(function () {
$("#flipshow").click(function () {
$("#content").slideDown(1000);
});
$("#flighide").click(function () {
$("#content").slideUp(500);
});
$("#fliptoggle").click(function () {
$("#content").slideToggle(500);
});
});
</script>
</body>
</html>
回调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button>隐藏</button>
<p>hello world</p>
<script>
$(document).ready(function () {
$("button").click(function () {
// $("p").hide(1000,function () {
// alert("动画结束,这个方法称为回调")
$("p").css("color", "red").slideUp(1000).slideDown(1000);
});
});
</script>
</body>
</html>
JQuery的HTML操作
jQuery的HTML捕获
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p id="text">this is my webpage</p>
<button id="btn1">点击</button>
<p><input type="text" id="it" value="youmen"></p>
<p><a href="http://www.baidu.com" id="aid">百度一下</a></p>
<button id="btn2">百度</button>
<script>
$(document).ready(function () {
// $("#btn1").click(function () {
// alert("text:" + $("#text").text());
// });
$("#it").click(function () {
alert("text:"+$("#it").val());
});
$("#btn2").click(function () {
//获取属性
alert("text:"+$("#aid").attr("href"));
alert("text:"+$("#aid").attr("id"));
});
// $("#btn1").click(function () {
// alert("text:"+$("#text").html());
// });
});
</script>
</body>
</html>
处理HTML捕获内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p id="p1">Hello Web</p>
<p id="p2">Hello World</p>
<input type="text" id="i3" value="hello">
<button id="btn1">click1</button>
<button id="btn2">click2</button>
<button id="btn3">click3</button>
<a id="aid" href="http://www.baidu.com">最初是百度,然后换成39.108.140.0:520</a>
<button id="btn4">跳转</button>
<br/>
<p id="p5">hello</p>
<button id="btn5">按钮</button>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#p1").text("YouMen");
// 将捕获到的内容进行修改
});
$("#btn2").click(function () {
$("#p2").html("<a href='http://baidu.com'>百度一下</a>")
// 修改标签
});
$("#btn3").click(function () {
$("#i3").val("幽梦");
// 对输入框内容进行修改
});
$("#btn4").click(function () {
$("#aid").attr({
"href":"http://39.108.140.0:520",
"title":"hello"
},);
// 修改属性
});
$("#btn5").click(function () {
$("#p5").text(function (i,ot) {
return "old:" +ot+"new:这是新的内容"+(i);
});
});
});
</script>
</body>
</html>
JQury添加,删除元素
添加,插入元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p id="p1">幽梦</p>
<p id="p2"></p>
<button id="btn1">添加</button>
<button id="btn2">插入</button>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#p1").append("this is my webpage add content,");
// $("#p1").prepend("this is my webpage add content,");
});
$("#btn2").click(function () {
// $("#p2").before("hello");
$("#p2").after("world");
});
})
</script>
</body>
</html>
删除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="div" style="
height: 200px;
width: 200px;
border: 1px solid dimgray;
color: rgb(0, 0, 204);">;>
hello
<p>hello</p>
<p>world</p>
</div>
<button id="btn1">删除</button>
<script>
//remove empty
$(document).ready(function () {
$("#btn1").click(function () {
// $("p").remove();
// $("p").empty();
$("div").empty();
// $("div").remove();
// empty一般只会删除内容相关，remove删除元素
});
});
</script>
</body>
</html>
JQuery的CSS方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
<style>
.style1 {
width: 100px;
height: 100px;
background-color: #cccccc;
}
.style2 {
width: 100px;
height: 100px;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div>
sdaf
</div>
<script>
$(document).ready(function () {
// $("div").css("width","100px");
// $("div").css("hight","100px");
// $("div").css("background","#FF0000");
// $("div").css({
// width: "100px", height: "100px", backgroundColor: "#00FF00"
// });
$("div").addClass("style1");
$("div").click(function () {
$(this).toggleClass("style2");
});
});
</script>
</body>
</html>
jQuery的盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
<style>
#div{
width: 100px;
height: 100px;
margin: 50px;
padding: 50px;
border: 2px solid darkseagreen;
background-color: aqua;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
$(document).ready(function () {
//innerHeight 指内边距+外边距+Height
alert($("#div").innerHeight());
})
</script>
</body>
</html>
JQuery的元素遍历与过滤
JQuery向下遍历元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 500px;
height: 200px;
background-color: #cccccc;
border: 3px solid darkseagreen;
}
#div2{
width: 400px;
height: 150px;
margin-top: 10px;
margin-left: 10px;
border: 30px solid chocolate;
}
p{
margin-left: 10px;
margin-top: 10px;
width: 150px;
height: 80px;
border: 3px solid green;
}
</style>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="div1">div1
<div id="div2"> div2
<p>
<a>
Hello
</a>
</p>
</div>
</div>
<script>
// children
// find
$(document).ready(function () {
// $("#div1").children().css({border:"3px solid red"})
$("#div1").find("p").css({border: "3px solid gold"})
})
</script>
</body>
</html>
向上遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 500px;
height: 200px;
background-color: #cccccc;
border: 3px solid darkseagreen;
}
#div2{
width: 400px;
height: 150px;
margin-top: 10px;
margin-left: 10px;
border: 30px solid chocolate;
}
p{
margin-left: 10px;
margin-top: 10px;
width: 150px;
height: 80px;
border: 3px solid green;
}
</style>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="div1">div1
<div id="div2"> div2
<p>
<a>
Hello
</a>
</p>
</div>
</div>
<script>
// parent() 只能寻找到他的直接父类
// parents()
// parentUntil()
$(document).ready(function () {
$("a").parent().css({border:"3px solid #FF0000"})
// $("p").parents("#div1").css({border:"3px solid #FF0000"})
$("p").parentsUntil("#div1").css({border:"3px solid #FF0000"})
})
</script>
</body>
</html>
同级遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
<style>
.bd * {
display: block;
border: 3px solid gray;
color: gray;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div class="bd">
<p>P</p>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
</div>
<script>
// sibings()
// next()
// nextAll()
// nextUntil()
// prev() 跟上面区别在于一个向上一个向下
// preUntil()
$(document).ready(function () {
// $("h4").siblings().css({border: "3px solid #FF0000"});
// 修改同级所有元素
// $("h4").next().css({border: "3px solid #FF0000"});
// $("h4").nextAll().css({border: "3px solid #FF0000"});
// $("h4").nextUntil("h6").css({border: "3px solid #FF0000"});
// 从你寻找的元素到指定元素期间的遍历
});
</script>
</body>
</html>
jQuery之过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<div>
<p>div1</p>
</div>
<div>
<p id="pid">div2</p>
</div>
<div>
<p id="pid2">div3</p>
</div>
<div>div4</div>
<script>
/*
* fisrt() 只对第一个生效
* last() 最后一个生效
* eq() 从0开始指定,0指定1,1指定2
* filter() 规定一个同样的标准
* not() 过滤,相反的效果
*/
$(document).ready(function () {
// $("div p").first().css("background-color","red");
// $("div p").eq(1).css("background-color","red");
// $("div p").filter("p").css("background-color","red");
$("div p").not(".pid").css("background-color","red");
});
</script>
</body>
</html>
小案例
用户输入为空提示报错信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../static/jquery.js"></script>
<style>
.c1 {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<div>
用户名: <input type="text" id="username">
<span class="c1"></span>
</div>
<div>
密码: <input type="password" id="password">
<span class="c1"></span>
</div>
<button id="btn">提交</button>
<script>
$('#btn').click(function () {
var user = $('#username').val();
var pwd = $('#password').val();
if (user.length == 0) {
$('#username').siblings('.c1').text("用户名不能为空");
} else {
$('#username').siblings('.c1').text('');
}
if (pwd.length == 0) {
$("#password").siblings('.c1').text("密码不能为空");
} else {
$("#password").siblings('.c1').text('');
}
})
</script>
</body>
</html>
全选,反选,新增,编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
}
.c2 {
height: 200px;
width: 300px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;;
margin-left: -150px;
z-index: 100;
}
.hide {
display: none;
}
</style>
<script src="../static/jquery.js"></script>
</head>
<body>
<button id="add">新增</button>
<button id="chose_all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>主机</th>
<th>IP</th>
<th>端口</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td>nginx</td>
<td>1.1.1.1</td>
<td>80</td>
<td>
<button class="fire">开除</button>
<button class="edit">编辑</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>mysql</td>
<td>1.1.1.2</td>
<td>3306</td>
<td>
<button class="fire">开除</button>
<button class="edit">编辑</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>php</td>
<td>1.1.1.3</td>
<td>9000</td>
<td>
<button class="fire">开除</button>
<button class="edit">编辑</button>
</td>
</tr>
</tbody>
</table>
<div class="cc hide">
<div class="c1"></div>
<div class="c2">
<div>
主机: <input type="text" id="username">
</div>
<div>
IP: <input type="text" id="ip">
</div>
<div>
端口: <input type="text" id="port">
</div>
<div>
<button id="sub">提交</button>
<button id="cannel">取消</button>
</div>
</div>
</div>
<script>
// 全选
$('#chose_all').click(function () {
$(":checkbox").prop("checked", true);
});
// 取消
$('#cancel').click(function () {
$(":checkbox").prop("checked", false);
});
// 反选
$('#reverse').click(function () {
var a = $(':checkbox');
for (var i = 0; i < a.length; i++) {
var status = a.eq(i).prop('checked');
// if (status == true){
// a.eq(i).prop('checked',false);
// }else {
// a.eq(i).prop('checked',true);
a.eq(i).prop('checked', !status);
}
});
var editBtn;
var flag;
// 新增
// 1. 点击新增按钮,弹出模态对话框
$('#add').click(function () {
$('.cc').removeClass('hide');
$('#username').val('');
$('#ip').val('');
$('#port').val('');
flag = 1;
});
// 2. 用户输入内容,点击确定按钮,生成一条记录添加到table标签的最后面,并且关闭模态对话框
$('#sub').click(function () {
if (flag == 1) {
// 2.1 获取用户输入内容
var username = $('#username').val();
var ip = $('#ip').val();
var port = $('#port').val();
// 2.2 创建tr标签,然后将用户输入的数据放到tr对应的td标签里面去
var newTr = '<tr><td><input type="checkbox"></td><td>' + username + '</td><td>' + ip + '</td><td>' + port + '</td><td><button class="fire">开除</button> <button class="edit">编辑</button></td></tr>';
// 2.3 将新创建的tr标签添加到table标签的tbody的最后
$('tbody').append(newTr);
} else {
var username = $('#username').val();
var ip = $('#ip').val();
var port = $('#port').val();
// 获取该行的数据
editBtn.parent().prev().text(username);
editBtn.parent().prev().prev().text(ip);
editBtn.parent().prev().prev().text(port);
}
$('.cc').addClass('hide');
});
// 点击取消,关闭模态对话框
$("#cannel").click(function () {
$('.cc').addClass('hide');
});
// 删除
$('tbody').on('click', '.fire', function () {
$(this).parent().parent().remove();
});
// 编辑
// 1. 弹出模态对话框,并且将之前的数据获取到,然后赋值给输入框
$('tbody').on('click', '.edit', function () {
flag = 2;
editBtn = $(this);
$('.cc').removeClass('hide');
// 获取该行数据
var username = $(this).parent().prev().text();
var ip = $(this).parent().prev().prev().text();
var port = $(this).parent().prev().prev().text();
// 赋值给模态对话框的input标签
$('#username').val(username);
$('#ip').val(ip);
$('#port').val(port);
});
</script>
</body>
</html>
JQuery Ajax
JQuery UI
JQueryUI简介
JQuery UI 是以JQuery为基础的JavaScript网页用户界面的开源库,包含底层用户交互，动画和特效和可更换主题的可视控件，我们可以直接用它来构建具有很好交互性的web应用程序.
包含了许多维持状态的小部件(Widget),因此，他与典型的JQuery插件使用模式略有不同，所有的JQuery UI小部件(Widget)使用相同的模式，所有，只要你学会其中一个,你就知道如何使用其他的小部件(Widget)
支持版本 IE6.0+Firefox 3 + Safari 3.1 + Opera9.6和GoogleChrome
JQuery UI主要分为3个部分: 交互,小部件和效果库 a: 交互 交互部件是一些与鼠标交互相关的内容,包括Draggable,Droppable,Resizable,Selectable和Sortabie等
b: 小部件 主要是一些界面的扩展,包括AutoComplete,ColorPicker,Dialog,Slider,Tabs,ProgressBar,Spinner等
c: 效果 用于提供丰富的动画效果,包括: Add Class,Color Animation,Togller等.
JQuery UI的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.css"></script>
<script src="jquery-ui.min.js"></script>
<link type="text/css" href="jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<button>百度一下</button>
<a href="http://www.baidu.com" id="a_btn">百度一下</a>
<script>
$(document).ready(function () {
$("#a_btn").button();
});
</script>
</body>
</html>
JQuery Draggable
拖动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery-ui.min.css"></link>
</head>
<body>
<div style="width: 100px; height: 100px;border: 20px solid #FF0000;" id="div">
</div>
<script>
$(document).ready(function () {
$("#div").draggable();
})
</script>
</body>
</html>
放置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
</head>
<body>
<div style="width: 100px;height: 100px; border: 2px solid #7e55ff;" id="div1"></div>
<div style="width: 200px;height: 200px; border: 2px solid #7e55ff;" id="div2"></div>
<script>
$(document).ready(function () {
$("#div1").draggable();
$("#div2").droppable();
$("#div2").on("drop",function (event,ui) {
$("#div2").text("drop事件");
});
});
</script>
</body>
</html>
可拖动大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
</head>
<body>
<div style="width: 100px; height: 100px; color: rgb(0, 0, 204);">id="div1"></div>
<script>
$(document).ready(function () {
$("#div1").resizable();
})
</script>
</body>
</html>
可选列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
<style>
.ui-selected{
background: #31b0d5;
}
</style>
</head>
<body>
<strong>世界上最美丽的人是?</strong>
<ul id="select">
<li id="right">A.me</li>
<li>B.我</li>
<li>C.I</li>
</ul>
<a href="#" id="btn">提交</a>
<script>
$(document).ready(function () {
$("#btn").button();
$("#select").selectable();
$("#btn").on("click",function () {
if($("#right").hasClass("ui-selected")){
alert("恭喜您答对了!");
}
});
});
</script>
</body>
</html>
sortable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
</head>
<body>
<ul id="sortable">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
<li>桃子</li>
</ul>
<script>
$(document).ready(function () {
$("#sortable").sortable();
});
</script>
</body>
</html>
JQuery UI小部件
多个下拉框菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div1">
<h3>选项一</h3>
<div>
<p>
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
</p>
</div>
<h3>选项二</h3>
<div>
<p>
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
</p>
</div>
<h3>选项三</h3>
<div>
<p>
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
</p>
</div>
</div>
<script>
$(document).ready(function () {
$("#div1").accordion();
});
</script>
</body>
</html>
自动补全
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div1">
<h3>选项一</h3>
<div>
<p>
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
</p>
</div>
<h3>选项二</h3>
<div>
<p>
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
</p>
</div>
<h3>选项三</h3>
<div>
<p>
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohello
</p>
</div>
</div>
<script>
$(document).ready(function () {
$("#div1").accordion();
});
</script>
</body>
</html>
日期控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>Date:<input type="text" id="datepicker"></p>
<a href="#" id="btn">按钮</a>
<script>
$(function () {
$("#datepicker").datepicker();
$("#btn").button();
})
</script>
</body>
</html>
对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div">
<p>这是一个对话框Dialog</p>
</div>
<a id="btn">按钮</a>
<script>
$(function () {
$("#btn").button().on("click",function () {
$("#div").dialog();
});
});
</script>
</body>
</html>
进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="pb"></div>
<script>
var pb;
var max=100;
var current=0;
$(document).ready(function () {
pb=$("#pb");
pb.progressbar({max:100});
setInterval(changepd,100);
});
function changepd() {
current++;
if(current>=100){
current = 0;
}
pb.progressbar("option","value",current);
}
</script>
</body>
</html>
menu菜单 垂直菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
<style>
#menu{
width: 150px;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<a href="#">Java</a>
<ul>
<li><a href="#">JAVAEE</a>JAVA</li>
<li><a href="#">JAVASE</a></li>
<li><a href="#">JAVAME</a></li>
</ul>
</li>
<li>C</li>
<li>C++</li>
<li>Go</li>
</ul>
<script>
$(document).ready(function () {
$("#menu").menu({position:{at:"right bottom"}});
});
</script>
</body>
</html>
水平菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
<style>
.ui-menu:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.ui-menu .ui-menu-item{
display: inline-block;
float: left;
margin: 0;
padding: 10px;
width: auto;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<a href="#">Java</a>
<ul>
<li><a href="#">JAVAEE</a></li>
<li><a href="#">JAVASE</a></li>
<li><a href="#">JAVAME</a></li>
</ul>
</li>
<li>C</li>
<li>C++</li>
<li>Go</li>
</ul>
<script>
$(document).ready(function () {
$("#menu").menu({position:{at:"left bottom"}});
});
</script>
</body>
</html>
样式操作
样式类
addClass(); //添加指定的CSS类名
removeClass(); //移除指定的CSS类名
hasClass(); //判断样式存不存在
toggleClass(); //切换CSS类名，如果有就移除，如果没有就添加.
slider(拖动条)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<span id="span">0</span>
<div id="slider"></div>
<script>
var valueSpan,slider;
$(document).ready(function () {
slider=$("#slider");
valueSpan=$("#span");
// slider.slider({
// change:function (event,ui) {
// valueSpan.text(slider.slider("option","value"));
// }
// });
slider.slider({
slide:function (event,ui) {
valueSpan.text(slider.slider("option","value"));
}
})
});
</script>
</body>
</html>
Example 开关灯和模态框 CSS
css("color","red") //DOM操作: tag.style.color="red"
$("p").css("color","red"); //将所有p标签的字体设置为红色.
输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<input id="input">
<button id="btn">getValue</button>
<script>
$(function () {
$("#input").spinner();
$("#input").spinner("value","18");
$("#btn").on("click",function () {
alert($("#input").spinner("value"));
});
});
</script>
</body>
</html>
spinner(下拉菜单/列表)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
<script>
$(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#hello1">hello</a></li>
<li><a href="#hello2">hello</a></li>
<li><a href="#hello3">hello</a></li>
</ul>
<div id="hello1">
hello1
hello1
hello1
hello1
</div>
<div id="hello2">
hello2
hello2
hello2
hello2
</div>
<div id="hello3">
hello3
hello3
hello3
hello3
</div>
</div>
</body>
</html>
位置操作
offset() //获取匹配元素在当前窗口的相对偏移或设置元素位置
position() //获取匹配元素相对父元素的偏移
scrollTop() //获取匹配元素相对滚动条顶部的偏移
scrollLeft() //获取匹配元素相对滚动条左侧的偏移
# offset()方法允许我们检索一个元素相对于文档(document)的当前位置
# 和.position()的差别在于: .position()是相对于父级元素的位移.
Example1
文本操作
HTML代码
# html() //取得第一个匹配元素的html内容
# html(val) //设置所有匹配元素的html内容
文本值
# $('this').text() //取得所有匹配元素的内容
# $('this').text(val) //设置所有匹配元素的内容
# $('this').val("YouMen") //val能修改input里面输入的内容
值
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
Example1 模态编程框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
z-index: 9;
}
</style>
</head>
<body>
<a onclick="addElement();">添加</a>
<table border="1" id="tb">
<tr>
<td target="hostname">1.1.1.11</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.12</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.13</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.14</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text" />
<input name="port" type="text" />
<input name="ip" type="text" />
</div>
<div>
<input type="button" value="取消" onclick="cancelModal();" />
<input type="button" value="确定" onclick="confirmModal();" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.del').click(function () {
$(this).parent().parent().remove();
});
function confirmModal() {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = "11.11.11.11";
var td2 = document.createElement('td');
td2.innerHTML = "8001";
$(tr).append(td1);
$(tr).append(td2);
$('#tb').append(tr);
$(".modal,.shadow").addClass('hide');
// $('.modal input[type="text"]').each(function () {
// // var temp = "<td>..."
//
//
//
// })
}
function addElement() {
$(".modal,.shadow").removeClass('hide');
}
function cancelModal() {
$(".modal,.shadow").addClass('hide');
$('.modal input[type="text"]').val("");
}
$('.edit').click(function(){
$(".modal,.shadow").removeClass('hide');
// this
var tds = $(this).parent().prevAll();
tds.each(function () {
// 获取td的target属性值
var n = $(this).attr('target');
// 获取td中的内容
var text = $(this).text();
var a1 = '.modal input[name="';
var a2 = '"]';
var temp = a1 + n + a2;
$(temp).val(text);
});
// var port = $(tds[0]).text();
// var host = $(tds[1]).text();
//
// $('.modal input[name="hostname"]').val(host);
// $('.modal input[name="port"]').val(port);
// 循环获取tds中内容
// 获取 <td>内容</td> 获取中间的内容
// 赋值给input标签中的value
});
</script>
</body>
</html>
Example2 开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input id="i1" type="button" value="开关" />
<div class="c1">YouMen</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('#i1').click(function () {
if($('.c1').hasClass('hide')){
$('.c1').removeClass('hide');
}else{
$('.c1').addClass('hide');
}
})
</script>
</body>
</html>
属性操作
用于ID等或自定义属性
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
注意： 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>
prop和attr的区别
# attr全称attribute(属性)
# prop全称property(属性)
# 虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，
# 而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
文档处理
Example 多个菜单多个内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
line-height: 38px;
}
.active{
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px ;
// 小手
cursor: pointer;
}
.content{
min-height: 500px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body>
<div style="width: 700px; margin: 0 auto;">
<div class="menu">
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function () {
$(this).addClass('active').siblings().removeClass('active');
var target = $(this).attr('a');
$('.content').children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
</html>
04 . 前端之JQuery的更多相关文章
- 前端之jquery
前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...
- 第四篇：web之前端之jquery
前端之jquery 前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...
- 【前端】:jQuery下
前言: 接上一篇博客: [前端]:jQuery上 一.jQuery属性操作 ① attr(设置或返回自定义属性值) input.select.textarea框中的内容, 可以通过attr来获取,但是 ...
- 【转】jQuery之前端国际化jQuery.i18n.properties
jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties
- 前端：jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- 前端技术Jquery与Ajax使用总结
前端技术Jquery与Ajax使用总结 虽然主要是做的后端,但是由于有些时候也要写写前台的界面,因此也就学习了下Jquery和Ajax的一些知识,虽说此次写的这些对于前端大神来说有些班门弄斧的感觉,但 ...
- Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery)
Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery) 体验 冒号搜索 1. 获取谷歌搜索api 谷歌搜索api教程 2. 后台调用 程序入口 main.go // ...
- 第五章、前端之JQuery
目录 第五章.前端之JQuery 一.选择器 二.基本筛选器 三.样式操作 四.位置操作 五.文本操作 六.属性操作 七.文档处理 八.事件 九.动画效果 十.补充 第五章.前端之JQuery 一.选 ...
随机推荐
- Dubbo（七）：redis注册中心的应用
上篇我们讲了Dubbo中有一个非常本质和重要的功能,那就是服务的自动注册与发现,而这个功能是通过注册中心来实现的.上篇中使用zookeeper实现了注册中心的功能,同时了提了dubbo中有其他许多的注 ...
- 【跟我一起读 linux 源码】总述
经过之前的一个系列学习,自己照着书本 <操作系统真相还原>学着做了一个 demo 级别的操作系统,总算对操作系统的整体和细节有了一个粗浅的了解.但写操作系统不是目的(我目前也没这能力),主 ...
- gulp基本使用
一.gulp是什么 gulp强调的是前端开发的工作流程,我们可以通过定义task事件定义事件的执行顺序,gulp去执行这些事件,构建整个前端开发的工作流程 gulp常见定义事件,例如: 变更静态资源 ...
- 把99%的程序员烤得外焦里嫩的JavaScript面试题
最近有学员给出一段令人匪夷所思的JavaScript代码(据说是某某大厂面试题),废话少说,上代码: var a = 10; { a = 99; function a() { } a = 30; ...
- js--bom对象
bom:browser object model **navigator:获取浏览器的信息 **screen:获取屏幕的相关信息 **location:请求的url地址 **获取请求的url地址:lo ...
- [hdu2594]kmp水题
题意:求最长的a的前缀同时满足是b的后缀,把a,b连在一起,kmp跑一下,迭代next直到长度小于等于a,b长度的最小值为止,即为答案. #pragma comment(linker, "/ ...
- JS的数据类型判断函数、数组对象结构处理、日期转换函数，浏览器类型判断函数合集
工具地址:https://github.com/BothEyes1993/bes-jstools bes-jstools 100多个基础常用JS函数和各种数据转换处理集合大全,此工具包是在 outil ...
- ereg正则%00截断
0x01 <?php $flag = "xxx"; if (isset ($_GET['password'])) { if (ereg ("^[a-zA-Z0-9] ...
- 24个经典的MySQL索引问题，你都遇到过哪些？
索引 1.什么是索引? 2.索引有哪些优缺点? 3.索引使用场景(重点) 4.索引有哪几种类型? 5.索引的数据结构(b树,hash) 6.索引的基本原理 7.索引算法有哪些? 8.索引设计的原则? ...
- Tensorflow从0到1（一）之如何安装Tensorflow（Windows和Linux两种版本）
现在越来越多的人工智能和机器学习以及深度学习,强化学习出现了,然后自己也对这个产生了点兴趣,特别的进行了一点点学习,就通过这篇文章来简单介绍一下,关于如何搭建Tensorflow以及如何进行使用.建议 ...