http://jquery.cuishifeng.cn/
模块 == 类库
DOM/BOM/JavaScript的类库
JQuery版本:
1.x
1.12系列兼容性最好
2.x
3.x
版本最新
转换:
jQuery对象[0] ==>
Dom对象
Dom对象
==> $(Dom对象)
一,查找元素
jQuery:
选择器：直接找到某个或某类标签
1.id
$('#id')
2.class
<div
class='c1'></div>
$('.c1')
3.标签
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'></div>
</div>
$('a') 所有的a标签找到
4.组合
$('a, .c2,#i10') 所有的a标签 所有的class=c2的 都找到
5.层级
$('#i10 a') 所有的class=i10下的a标签 包括孙标签下的a标签都找到
$('#i10>a') 只找子标签下的a标签
6.基本筛选器
$('#i10>a:first') 找第一个标签
$('#i10>a:last') 找最后一个标签
$('#i10 a:eq(0)') 索引第0个标签
7.属性选择器
$('[ale]') 具有ale属性的标签
$('[ale="123"]') ale属性等于123的标签
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input [type='text']") 找到input type=text的标签
表单选择器 $(":text") $(':disabled')
实例:
多选，反选，全选
- 选择器
$('#tb:checkbox').prop('checked');
获取值
$('#tb:checkbox').prop('checked',false); 设置值
- jQuery方法内置循环:$('#tb:checkbox').xxx
-$('#tb:checkbox').each(function(k){
//k 当前索引
//this ,Dom,当前循环的元素 $(this)变成jQuery对象
})
- 三元运算 var v=条件? 真值:假值
筛选
$('li:eq(1)')
$('li').eq(1)
$('#li').next() 找出id=i1标签的下一个标签
$('#li').nextAll() 找出id=i1标签下面所有的
$('#li').nextUntil('#i11') 直到找到哪 直到找到id=i11标签为止
<div>
<a id='i01'>asdfgrf</a>
<a>asdfgrf</a>
<a id='i1'>asdfgrf</a>
<a>asdfgrf</a>
<a id='i11'>asdfgrf</a>
<a>asdfgrf</a>
</div>
$('#i1').prev() 找出id=i1同一级上一个标签
$('#i1').prevAll() 找出id=i1同一级以上面所有的标签
$('#i1').prevUntil('#i01') 找出id=i1上面的标签直到id=i01标签为止
$('#i1').parent() 找出id=i1标签的上一级标签
$('#i1').parents() 找出id=i1标签的上一级的所有标签
$('#i1').children() 找出id=i1所有子标签
$('#i1').siblings() 找出id=i1所有兄弟标签
$('#i1').find() 在id=i1找出匹配的
find()
last()
hasClass(class)
文本操作:
$(..).text() #获取文本内容
$(..).text("aacd") #设置文本内容
$(..).html() #获取标签文本
$(..).html('<a>1</a>') #设置标签文本
$(..).val() #获取包括标签的值
$(..).val('.....') #设置包括标签的值
样式操作:
addClass
removeClass
toggleClass
属性操作:
#专门用于做自定义属性
$(..).attr('n') 获取属性
$(..).attr('n','v') 添加属性
$(..).removeAttr('n') 删除属性
#prop专门用于checkbox,radio做操作
<input type='checkbox' id='i1' checked='checked'/>
$(..).prop('checked') #获取checked值
$(..).prop('checked',true) #选中
$(..).prop('checked',false) #取消
s(..).index 获取索引位置
文档处理:
append
prepend
after
before
remove
empty
clone
css处理
$('t1').css('样式名称','样式值')
点赞:
$('t1').append()
$('t1').remove()
setInterval
clearInterval
透明度 1--》0
position
字体大小，位置
位置:
$(window).scrollTop() 获取滚轮位置
$(windos).scrollTop(100) 设置滚轮位置
scrollLeft([val])
offset() 获取指定标签在html中的坐标
offset().left 到左边坐标大小
offset().top 到顶部坐标大小
position() 通过offset获取指定标签相对父标签(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) 获取边框+纯高度
#纯高度，边框，外边距，内边距
绑定事件
DOM：三种绑定方式
jQuery：四种方式
$('.c1').click()
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
}) 去掉事件
$('.c1').delegate('a','click',function(){
}) class="c1"标签下的所有a标签 绑定事件
$('.c1').undelegate('a','click',function(){
}) 解绑事件
$('.c1').on('click',function(){
})
$('.c1').off('click',function(){
})
delegate 委托 点的时候绑定上 而不是先绑定 用于新增加的标签具有原先已经存在标签的功能
阻止事件发生
return false
当页面自动加载完成之后，自动执行
$(function(){
$(...)
})
jQuery扩展
$.extend $.方法
$.fn.extend $(..).方法
自己写扩展的时候 写一个自执行函数 避免全局变量冲突
(function(){
var status=1;
//封装全局变量
$.extend({})
$.fn.extend({})
})(jQuery)