1.jQuery是什么？
jQuery是一个 JavaScript/Dom/Bom 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
2.jQuery对象与Dom对象的相互转换
jquery对象[0] => Dom对象 Dom对象 => $(Dom对象)
3.jQuery查找元素
3.1 选择器
基本选择器，直接找到某个或者某类标签：
1. id选择器 $('#id')
2. class选择器 $(".c1")
3. 标签选择器 $('a')
4. 组合选择器 $('a,.c2,#i10')
5. 层级选择器
$('#i10 a') 表示id为i10下面的所有a标签
$('#i10>a') i10 下面的所有孩子
3.2 基本筛选器：
$(n:first) n中的第一个标签 $(n:last) n中的最后一个标签 $(n:eq(i)) n中索引为i的标签
:first示例：
HTML 代码:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代码:
$('li:first');
结果:
[ <li>list item 1</li> ]
：eq()示例：
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:eq(1)")
结果:
[ <tr><td>Value 1</td></tr> ]
3.3 属性选择器：
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签
示例：
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input[type='text']") input下的type=‘text’的标签
$(':text') 表单专用的选择器，很快捷
3.4 补充的小知识：
prop方法：
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
jQuery方法内置循环：
$('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)
})
三元运算：var v = 条件 ? 真值 : 假值
示例一：全选、反选、取消（注意要在代码中引入jQuery）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input id="i1" type="button" value="全选" />
<input id="i2" type="button" value="取消" />
<input id="i3" type="button" value="反选" />
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</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.2</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.3</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('#i1').click(function () {
$('#tb input:checkbox').prop('checked',true);
});
$('#i2').click(function () {
$('#tb input:checkbox').prop('checked',false);
});
$('#i3').click(function () {
$('#tb input:checkbox').each(function () {
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>
</head>
<body>
<div>
<input type="button" value="全选" onclick="checkAll();" />
<input type="button" value="取消" onclick="cancleAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>1.1.1.1</td>
<td>190</td>
</tr>
<tr>
<td><input type="checkbox" id="test" /></td>
<td>1.1.1.2</td>
<td>192</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.3</td>
<td>193</td>
</tr>
</tbody>
</table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
$(':checkbox').each(function (k) {
//this指代当前循环的每一个元素，是Dom对象
//用Dom方法实现
// 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>
多种实现方法对比
3.5 进一步删选
$('#i1').next()
$('#i1').nextAll()
$('#i1').nextUntil('#ii1')
<div>
<a>asdf</a>
<a>asdf</a>
<a id='i1'>asdf</a>
<a>asdf</a>
<a id='ii1'>asdf</a>
<a>asdf</a>
</div>
$('#i1').prev()
$('#i1').prevAll()
$('#i1').prevUntil('#ii1')
$('#i1').parent()
$('#i1').parents()
$('#i1').parentsUntil()
$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li:eq(1)')
$('li').eq(1)
first()
last()
hasClass(class)
4.jQuery文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容
$(..).html() # 获取标签的HTML内容
$(..).html("<a>1</a>") # 设置标签的HTML内容（赋值）
$(..).val() # 获取input系列select系列的valve
$(..).val(..) # 设置input系列select系列的valve
5.jQuery样式操作
addClass removeClass toggleClass
6.jQuery属性操作
# 专门用于做自定义属性
$(..).attr('n')
$(..).attr('n','v')
$(..).removeAttr('n')
<input type='checkbox' id='i1' />
# 专门用于chekbox,radio
$(..).prop('checked')
$(..).prop('checked', true)
PS:
index 获取索引位置
7.jQuery文档处理
append prepend after before remove empty clone
8.jQuery的CSS操作
$('t1').css({'样式名称':'样式值',})
模仿抽提点赞功能示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 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',
'position':'absolute',
'fontSize':fontSize + "px",
'right':right + "px",
'top':top + 'px',
'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>
9.jQuery绑定事件的3种方式：
$('.c1').click()
$('.c1').....
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})
*******************
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
10.a标签阻止事件的发生
阻止事件发生
return false
# 当页面框架加载完成之后，自动执行
$(function(){
$(...)
})
11.jQuery扩展
$.extend $.方法
$.fn.extend $(..).方法
(function(){
var status = 1;
// 封装变量
})(jQuery)
示例之莫泰对话框：
<!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: 600px;
height: 150px;
margin-left: -300px;
margin-top: -150px;
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">
<tr>
<td>1.1.1.11</td>
<td>80</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td>1.1.1.12</td>
<td>80</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td>1.1.1.13</td>
<td>80</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td>1.1.1.14</td>
<td>80</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div>
主机名：<input name="hostname" type="text" />
端口：<input name="port" type="text" />
状态：<select>
<option value="online">在线</option>
<option value="inline">下线</option>
</select>
</div>
<div>
<input type="button" value="取消" onclick="cancelModal();" />
<input type="button" value="确定" onclick="determineModal();" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
function addElement() {
$('.modal,.shadow').removeClass('hide');
}
function cancelModal() {
$('.modal,.shadow').addClass('hide');
$('.modal input[type="text"] ').val('');
}
$('.edit').click(function () {
addElement();
var tds = $(this).parent().prevAll();
var port = $(tds[0]).text();
var host = $(tds[1]).text();
$('.modal input[name="hostname"] ').val(host);
$('.modal input[name="port"] ').val(port);
//[]属性选择器
})
</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;width: 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>
$('.header').click(function(){
// 当前点击的标签 $(this)
// 获取某个标签的下一个标签
// 获取某个标签的父标签
// 获取所有的兄弟标签
// 添加样式和移除样式
// $('.i1').addClass('hide')
// $('#i1').removeClass('hide')
// var v = $("this + div");
// $("label + input")
// console.log(v);
//
// $("afsldkfja;skjdf;aksdjf")
// 筛选器
/*
$(this).next() 下一个
$(this).prev() 上一个
$(this).parent() 父
$(this).children() 孩子
$('#i1').siblings() 兄弟
$('#i1').find('#i1') 子子孙孙中查找
// . . .
//
$('#i1').addClass(..)
$('#i1').removeClass(..)
*/
// 链式编程
// $(...).click(function(){
// this..
// })
// $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.content').addClass('hide')
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
示例之tab_menu:
<!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="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 value = $(this).attr('a');
$('.content').children('[b="'+value+'"]').removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
</html>
监控键盘值判断Ctrl是否被按下：
// 判断Ctrl是否被按下，被按下则为true,反之为false
key_stay = false;
$(document).keyup(function (event) {
if(event.keyCode == 17){
key_stay = false;
}
});
$(document).keydown(function (event) {
if(event.keyCode == 17){
key_stay = true;
}
});
select标签被操作事件：
```
// 这个全局变量是判断编辑模式下，是否对option进行了操作
CLICK_SELECT = 0;
// gradeChange这个函数是select标签上触发onclick事件所调用的函数
function gradeChange() {
if(key_stay){ // 这里就是如果鼠标被按下了
CLICK_SELECT += 1; // 第一次点击鼠标只对CLICK_SELECT加1，再次点击select标签时，CLICK_SELECT就等于2了，这就意味着按下Ctrl再对select标签操作并且选中了一个选项（在线/下线）~~
if(CLICK_SELECT == 2){
CLICK_SELECT = 0; // 这里注意要把CLICK_SELECT还原为0
// do something~~
}
}
}
获取当前触发事件的（这一个）标签（如果同类标签有多个）？
<select onclick="func(event);"></select> 这时在func()中获取当前触发事件的标签$(event.target).
标签高度获取：
$('#i1').height(); //获取当前标签的高度；
$('#i1').innerHeight() ; //获取自身高度+padding；
$('#i1').outerHeight(); //参数：false--> 获取自身高度 + padding + border(默认false)；
$('#i1').outerHeight(true); //参数：true---> 获取自身高度 + padding + border + margin。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
margin-top: 90px;
height: 300px;
width: 400px;
border: 2px solid red;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="i1"></div>
<script src="jquery-1.12.4.js"></script>
<script>
var v1 = $('#i1').height(); //获取当前标签的高度
var v2 = $('#i1').innerHeight() ; //获取自身高度+padding；
var v3 = $('#i1').outerHeight(); //参数：false--> 获取自身高度 + padding + border(默认false)；
var v4 = $('#i1').outerHeight(true); //参数：true---> 获取自身高度 + padding + border + margin；
console.log(v1); // 299.8
console.log(v2); // 319.8
console.log(v3); // 323
console.log(v4); // 413
</script>
</body>
</html>