JQuery
学习参考网址http://jquery.cuishifeng.cn/
python中叫模块，在DOM/BOM/Javascript中叫类库
现在的JQ版本有：1.x 2.x 3.x
建议使用1.X的版本 （向下兼容）
JQ与DOM的转换：
JQ对象【0】 ==》 DOM对象
$(DOM对象) ==》JQ对象
一、查找元素
相对DOM查找个元素需要10多行代码，JQ就简单很多
选择器，直接找到某个或者某类标签
1、id
写法 $('#id')
2、class
写法 $('.c1')
3、标签
写法 $('a') $('div')
4、组合
写法 $('a,div,.c1') 同时查找，检索这三个标签的任意一个满足即可，获取
5、层级
写法 $('a div .c1') 空格分开，表示这几个标签下必须同时满足，才获取，并且是下面的子子孙孙
另一种写法 $('a>dev') 表示只找a标签下的div
6、基本筛选器
：first ：last ：eq(index索引值从0开始)
7、属性
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签
8、实例：多选，反选，全选
知识点：(1) $('#tb :checkbox').prop('checked'); 获取值
$('#tb :checkbox').prop('checked', true); 设置值
(2) jQuery方法内置循环： $('#tb :checkbox').xxxx
(3) $('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)
})
(4) var v = 条件？条件为真赋予v的值：条件为假赋予v的值
9、筛选
$('#i1').next() #标签id为#i1的下一个标签
$('#i1').nextAll() #标签id为#i1下的所有标签
$('#i1').nextUntil('#ii1') #标签id为#i1和标签id=#ii1之间的所有标签，不包括i1和ii1
$('#i1').prev() #标签id为#i1的上一个标签
$('#i1').prevAll() 与next类似
$('#i1').prevUntil('#ii1')
$('#i1').parent() #标签id为#i1的父标签
$('#i1').parents()
$('#i1').parentsUntil()
$('#i1').children() #标签id为#i1的子孙标签
$('#i1').siblings() #标签id为#i1的兄弟标签
$('p').find(‘span’) #标签p内的span标签
$('li:eq(1)') #一个整数，指示元素基于0的位置,这个元素的位置是从0算起。
$('li').eq(1) #同上，获取匹配的第二个元素
first() #获取匹配的第一个元素
last() #获取匹配的最后个元素
hasClass(class) #检查当前的元素是否含有某个特定的类，如果有，则返回true
二、操作元素
1、文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容
$(..).html() #获取文本内容包括标签
$(..).html("<a>1</a>") #设置文本内容，解析对应的标签
$(..).val() #获取文本框中的值
$(..).val(..) #设定文本框的值
2、样式操作：
addClass 为每个匹配的元素添加指定的类名。
removeClass 从所有匹配的元素中删除全部或者指定的类
toggleClass 如果存在（不存在）就删除（添加）一个类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input id="i1" type="button" value="开关"/>
<a class="c1 hide">fdasfdasdfasfsafasdfasfdasfas</a>
<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>
3、属性操作：
# 专门用于做自定义属性
$(..).attr('n') 返回被选元素的属性值。
$(..).attr('n','v') 设置被选元素的属性值。
$(..).removeAttr('n') 删除被选元素的属性值。
# 专门用于checkbox,radio（1,2版本一定要用这个prop，用attr不行）
<input type='checkbox' id='i1' />
$(..).prop('checked') 获取在匹配的元素集中的属性值。
$(..).prop('checked', true) 设置在匹配的元素的属性值
PS:
index 获取索引位置
<!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 target = $(this).attr('a');
//属性方法
//$(".content").children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide')
//索引方法
$(".content").children().eq($(this).index()).removeClass('hide').siblings().addClass('hide')
})
</script>
</body>
</html>
4、文档处理：
append
prepend
after 在每个匹配的元素之后插入内容
before 在每个匹配的元素之前插入内容
remove 从DOM中删除所有匹配的元素
empty 删除匹配的元素集合中所有的子节点
clone 克隆匹配的DOM元素并且选中这些克隆的副本
5、css处理：
$('t1').css('样式名称', '样式值')
点赞实例应用：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 > 0
- 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;
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','red');
$(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 = top - 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()
}
},50) }
</script>
</body>
</html>
6、位置：
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
position() 指定标签相对父标签(relative)标签的坐标
<div style='position:relative'>
<div>
<div id='i1' style='position:absolute;height:80px;border:1px'></div>
</div>
</div>
$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？
# 纯高度，边框，外边距，内边距
请看下三个图：
图1：
图2：
图3：
7、事件
DOM： 三种绑定方式
jQuery：
$('.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(){
})
阻止事件发生
return false
# 当页面框架加载完成之后，自动执行
$(function(){
$(...)
})
8、jQuery扩展：
- $.extend $.方法
- $.fn.extend $(..).方法
(function(){
var status = 1;
// 封装变量
})(jQuery)