python中称为模块；其它语言称为类库
是集合了 DOM/BOM/JavaScript的类库
jQuery有三个版本。一版本兼容性最强 1.XXX 2.XXX 3.XXX
转换： jQuery对象[0] = DOM对象
$(DOM对象) = jQuery对象
一。查找元素
DOM
10个左右
jQuery： 点我 《====
选择器，直接找到某个或者某类标签
1. id
$("#id")
2. class
<div class="c1">
$(".c1")
3. 标签
<div class="c1">
<a>123</a>
<a>123</a>
</div>
<div class="c1">
<a>123</a>
</div>
<div class="c1">123</div>
$("a") 查找所有a标签
4. 组合选择器
<div class="c1">
<a>123</a>
<a>123</a>
</div>
<div class="c1">
<a>123</a>
</div>
<div class="c1">123</div>
<div class="c2">123</div>
$("a") 查找所有a标签
$("a,.c2") 查找所有 a 标签和 id=c2 的标签
5. 层级选择器
<div class="c1">
<a>123</a>
<a>123</a>
</div>
<div class="c1">
<a>123</a>
</div>
<div class="c1">123</div>
<div class="c2">123</div>
$(".c1 a") 子子孙孙
$(".c1 > a") 只找儿子
6. 基本选择器
first 第一个 $(".c1:first")
last 最后一个
eq 等于 $(".c1:eq(索引值)") (从零开始) 有些方法不是从零开始的
7. 属性选择器
<a alex="123">aaaaaa</a>
<a alex="456">aaaaaa</a>
$("[alex]") 具有alex属性的所有标签
$("[alex="123"]") alex属性等于123的标签
8.表单对象属性
<input type="text"> <input type="text" diabled> 不可编辑
练习：多选，反选，取消
知识点：1.选择器
2.$('#tb :checkbox').prop('checked'); 获取值
$('#tb :checkbox').prop('checked',false); 设置值
prop专门对checked与selected做操作（循环）
3.jQuery方法内置循环 $('#tb:checkbox').xxxx
4.$('#tb:checkbox').each(function(k){
k当前索引
this，DOM，当前循环的元素 $(this)
})
5.三元运算： var v = 条件 ? 真值 : 假值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<input type="button" value="取消" onclick="cancleAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
// 全选
function checkAll() {
// 选中属性checkbox，（prop）循环，tb为标签（避免冲突）
$('#tb :checkbox').prop('checked',true);
}
// 取消
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
// 反选
function reverseAll() {
$(':checkbox').each(function(k){
// this,为Dom对象，代指当前循环的每一个元素；k 为 下标
// Dom方式实现
/*
if(this.checked){
this.checked = false;
}else{
this.checked = true;
}
*/
// jQuery方式实现
/*
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>
左功能框（可伸缩）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: black;
color: wheat;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height:400px; 200px;border: 1px solid #dddddd">
<div class="item">
<div class="header">标题一</div>
<div id="i1" class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题二</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题三</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
// 给所有标签绑定click事件
$('.header').click(function(){
// 当前点击的标签 $(this) 标题
// 获取某个标签的下一个标签 内容
// 获取某个标签的父标签 class="item"
// 获取所有的兄弟标签 所有item
// 添加样式和移除样式 找到content，添加和移除hide
// 选择器，麻烦，用筛选器
// $('.i1').addClass('hide') 添加hide
// $('#i1').removeClass('hide') 移除hide
// var v = $("this + div"); 当前标签的下一个div标签
// $("label + input") label的下一个input
// console.log(v);
//
// 筛选器
/*
$(this).next() 下一个
$(this).prev() 上一个
$(this).parent() 父
$(this).children() 孩子
$('#i1').siblings() 兄弟
$('#i1').find('#i1') 子子孙孙中查找
// . . .
//
$('#i1').addClass(..)
$('#i1').removeClass(..)
*/
// 链式编程
// $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.content').addClass('hide')
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
9.文本操作：
$(...).text() 获取文本内容
$(...).text("XXX") 设置文本内容；如果包含html，不解析，整条添加
$(...).html() 获取html内容
$(...).text("XXX") 设置html内容；如果包含html，不解析，整条添加
$(...).val() 获取值
$(...).val("XXX") 设置值
10.样式操作：
addClass removeClass toggleClass
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input type='checkbox' id='i2' />
<input id="i1" type="button" value="开关" />
<div class="c1 hide">啦啦啦啦啦啦</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('#i1').click(function(){
// if($('.c1').hasClass('hide')){
// $('.c1').removeClass('hide');
// }else{
// $('.c1').addClass('hide');
// }
$('.c1').toggleClass('hide');
})
</script>
</body>
</html>
11.属性操作
$(...).attr("name") 获取name所对应的属性值
$(...).attr("name","Alex") 设置/更改name属性的值为Alex
$(...).removeattr("name") 删除name
专门用于checkbox与radio
与attr使用方法一致（避免bug）
$(...).prop("XXX")
练习：编辑框，资产管理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: black;
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>
TAB切换菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px; 菜单上下居中
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer; 鼠标点击手
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body>
<div style=" 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>
<script> 属性操作：index
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
});
</script>
12.文档处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" />
<input id="a2" type="button" value="删除" />
<input id="a3" type="button" value="复制" />
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
// $('#u1').append(temp); 尾部追加
$('#u1').prepend(temp); 头部添加
// $('#u1').after(temp) 添加在ul之后，注意不是li
// $('#u1').before(temp) 添加在ul之前，注意不是li
});
$('#a2').click(function () {
var index = $('#t1').val();
//$('#u1 li').eq(index).remove(); 移除 从零开始，从上向下
//$('#u1 li').eq(index).empty(); 清空内容，标签保留
});
$('#a3').click(function () {
var index = $('#t1').val();
var v = $('#u1 li').eq(index).clone(); 克隆
$('#u1').append(v);
//$('#u1 li').eq(index).remove();
//$('#u1 li').eq(index).empty();
})
</script>
</body>
</html>
13. css处理
$("i1").css("color","red")
练习：点赞
知识点：css处理
setInterval
透明度
position
字体大小，位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this);
});
function AddFavor(self) {
// DOM对象
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1;
var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
$(self).append(tag);
var obj = setInterval(function () {
fontSize = fontSize + 10;
top = top - 10;
right = right - 10;
opacity = opacity - 0.1;
$(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
if(opacity < 0){
clearInterval(obj);
$(tag).remove();
}
}, 40);
}
</script>
</body>
</html>
14.位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1"></div>
<div style="height: 100px;100px;overflow: auto">
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
<div id="i2"></div>
<div style="height: 1000px;"></div>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
$(window).scrollTop() 获取（上下）
$(window).scrollTop(50) 设置
$(window).scrollLeft() 获取（左右）
$(window).scrollLeft(50) 设置
$("#i1").offset() 获取指定标签在HTML中的坐标
$("#i1").offset().top
$("#i1").offset().left
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd; 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');
});
$("#title").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;
$('#title').on('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');
})
});
$("#title").mouseup(function(){
$("#title").off('mousemove');
});
})
</script>
</body>
</html>
position 指定标签相对于父标签（relative）标签的坐标
<div style="relative">
<div>
<div id="i1" style="position:absolute;"></div>
</div>
</div>
15. 尺寸
$("i1").height() 获取 标签的高度 纯高度
$("i1").innerHeight() 获取 边框+纯高度
$("i1").outerHeight()
$("i1").innerHeight(true)
16. 绑定事件
DOM：三种
jQuery：常用的两种：
1. $().click()
2. $().bind("click",function(){ })
$().unbind("click",function(){ })
$().on("click",function(){ })
$().off("click",function(){ })
委托绑定（增加标签，具有兄弟标签的属性）
$().delegate("标签","click",function(){ })
$().undelegate("标签","click",function(){ })
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" />
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
});
// $('ul li').click(function () {
// var v = $(this).text();
// alert(v);
// })
// $('ul li').bind('click',function () {
// var v = $(this).text();
// alert(v);
// })
// $('ul li').on('click', function () {
// var v = $(this).text();
// alert(v);
// })
$('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
})
</script>
</body>
</html>
当页面框架加载完毕之后，自动执行
$(function(){ })
适用于绑定事件与默认执行的操作
17. 阻止事件的发生 ： return
两种方式：DOM 与 jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="return ClickOn()" href="http://www.oldboyedu.com">点击跳转1</a>
<a id="i1" href="http://www.oldboyedu.com">点击跳转2</a>
<script src="jquery-1.12.4.js"></script>
<script>
function ClickOn() {
alert(123);
return true;
}
$('#i1').click(function () {
alert(456);
return false;
})
</script>
</body>
</html>
用途： 表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<form id="f1" action="s5.html" method="POST">
<div><input name="n1" tex = "用户名" type="text" /></div>
<div><input name="n2" tex = "密码" type="password" /></div>
<div><input name="n3" tex = "邮箱" type="text" /></div>
<div><input name="n4" tex = "端口" type="text" /></div>
<div><input name="n5" tex = "IP" type="text" /></div>
<input type="submit" value="提交" />
<img src="...">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
// 当页面框架加载完毕后，自动执行
$(function(){
$.Login('#f1')
});
$(function(){
// 当页面所有元素完全加载完毕后，执行
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
if(v.length <= 0){
flag = false;
var tag = document.createElement('span');
tag.className = "error";
tag.innerHTML = n + "必填";
$(this).after(tag);
// return false;
}
});
return flag;
});
});
// $(':submit').click(function () {
// var v = $(this).prev().val();
// if(v.length > 0){
// return true;
// }else{
// alert('请输入内容');
// return false
// }
// })
</script>
</body>
</html>
18. jQuery扩展 自定义函数，调用执行
两种扩展方式，调用方式不同
$.extend
$.fn.extend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
// 引入js文件 将js文件内容设置为 自执行 函数，避免不同的js文件中的全局变量冲突
<script src="jquery-1.12.4.js"></script>
<script src="plugin1.js"></script>
<script>
var v = $.wangsen();
alert(v);
// $('#i1').css()
// $.ajax()
// jquery扩展
// $.fn.extend({
// "hanyang": function () {
// return 'db';
// }
// });
// var v = $('#i1').hanyang();
// alert(v);
// $.extend({
// 'wangsen': function () {
// return 'sb';
// }
// });
// var v = $.wangsen();
// alert(v);
</script>
</body>
</html>