绪论
jQuery是一套跨浏览器的类库, 集成了JavaScript/DOM/BOM的类库,支持链市编程,大大地简化了JavaScript与HTML之间的操作.完整详细的API文档可以看这里jQuery中文文档.下面我就主要归纳一下自己学到的且常用的知识点.
其他知识
jQuery目前有1,2,3版本系列:
1.x (兼容性最好)
2.x
3.x (功能最齐全)
1.x和2.x版本系列在有些的jQuery的API处理上并不彻底.例如给HTML的勾选框(checkbox)添加属性(attr)"checked='checked'"时,有的时候便会勾选不上.
一.查看元素
在使用DOM来查找HTMl的标签元素时,使用的常用属性大概在10个左右,而且不能直接找到标签中的自定义属性.总的来说,相比于jQuery,DOM找到标签元素的效率更低.
选择器(直接找到某个或者某类标签)
1.id:
例:
$('#id') //根据id属性寻找标签.
2.class:
例:$('.class') //根据class属性寻找标签
3.标签
例子1:
<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.组合
<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, .c2, #i10') //组合查找多个标签
5.层级
$('#i10 a') //查找id为i10的标签中所有孩子标签中的a标签
$('#i0>a') //查找id为i10的标签的儿子标签中的a标签
6.基本
:first //标签中的第一个标签元素。
:last //标签中的最后一个标签元素。
:eq() //根据索引值找到标签元素。例：$('#i1 a:eq(0)') //找到id为'i1'的标签下的孩子a标签中的第一个
7.属性
$('[alex]') //寻找具有alex属性的所有标签
$('[alex="123"]') //寻找alex属性等于123的标签
$(':text') //寻找属性tpye为text的input标签
8.筛选
例：<div>
<a>asdf</a>
<a>asdf</a>
<a id='i1'>asdf</a>
<a>asdf</a>
<a id='i2'>asdf</a>
<a>asdf</a>
</div>
$('#i1').next() //下一个标签
$('#i1').nextAll() //当前标签以后的所有兄弟标签
$('#i1').nextUntil('#i2') //从当前标签到属性id为‘i2’的标签之间的标签（往后寻找）
$('#i1').prev() //上一个标签
$('#i1').prevAll() //当前标签以前的所有兄弟标签
$('#i1').prevUntil('#i2') //从当前标签到属性id为‘i2’的标签之间的标签（往前寻找）
$('#i1').parent() //父标签
$('#i1').parents() //所有的父亲和祖父标签
$('#i1').parentsUntil()
$('#i1').children() //子标签
$('#i1').siblings() //所有的兄弟标签
$('#i1').find() //在所有还在标签中寻找
二.操作元素
1.文本操作:
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容
$(..).html() //获取文本内容(连标签一起)
$(..).html("<a>1</a>") //设置文本内容(连标签一起)
$(..).val() //具有value属性标签的才能使用
$(..).val(..)
2.样式操作
addClass //添加指定class属性值
removeClass //移除指定class属性值
toggleClass //当指定class属性值存在时,该方法将其移除;当指定class属性值不存在时,该方法将其添加.
3.属性操作
# 专门用于做自定义属性
$(..).attr('n') //获取属性值
$(..).attr('n','v') //新增或重新设置属性值
4.css处理
$('t1').css('样式名称', '样式值')
5.文档处理
append //向每个匹配的元素内部（孩子）追加内容。
prepend //向每个匹配的元素内部（孩子）前置内容
after //在每个匹配的元素之后（兄弟）插入内容。
before //在每个匹配的元素之前（兄弟）插入内容。
remove //从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
empty //删除匹配的元素集合中所有的子节点。（包括自身的文本内容）
clone //克隆匹配的DOM元素并且选中这些克隆的副本
其他
1.prop
# 专门用于chekbox,radio
$(..).prop('checked')
$(..).prop('checked', true)
2.索引
#index 获取索引位置
$(..).index()
3.位置
$(window).scrollTop() //获取最外层页面的滚动条位置
$(window).scrollTop(0) //设置最外层页面的滚动条位置
scrollLeft([val]) //获取匹配元素相对滚动条左侧的偏移。
offset().left //获取指定标签在html中的坐标
offset().top //获取指定标签在html中的坐标
offset({ top: 10, left: 30 }) //设置指定标签的位置.
position() //获取指定标签相对父标签(relative)标签的坐标
5.高度
$('i1').height() # 获取标签的高度(纯高度)
$('i1').innerHeight() # 纯高度
$('i1').outerHeight() # 获取上下边框宽度 + 纯高度
$('i1').outerHeight(true) # 获取上下边框边框 + 纯高度
# 纯高度，边框，外边距，内边距
6.事件的绑定方式
$('.c1').click()
$('.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(){})
7.扩展
$.extend $.方法
$.fn.extend $(..).方法
小技巧
1.当一个标签绑定多个事件，阻止后面默认事件发生（可以用于表单验证）
例.DOM:<a onclick="return a()"></a>
function a(){
return false
}
jQuery:$("a").click(function(){
return false
})
2.当页面框架加载完成之后（不需要等页面所有元素完全加载完毕后），自动执行JavaScript
$(function(){
$(...)
})
3.解决多个js文件引入时造成的全局变量重名冲突.
(function(){
var status = 1;
// 封装变量
})(jQuery)
如有错误知识点, 希望大家能给我指出, 我会认真改过来(如果真错了)