jQuery
http://jquery.cuishifeng.cn/
相当于js的模块，类库
DOM/BOM/java script的类库
一、查找元素
jQuery 选择器 直接找到某个或者某个标签
1 1.id
2 $('#id')
3 2.class
4 $('.p')
5 3.标签
6 $('a')
7 $('div')
8 4. 组合
9 $('a,.c1,#div1')
10
11
12 <div id="i1">
13 ddddd
14 </div>
15 <div class="c1" id="div1">
16 <a href="">xxx</a>
17 <a href="">yyyyy</a>
18 </div>
19
20 5.层级选择器
21 $('#div1 a') //id div1 下的 所有 a 标签
22 $('#div1>a') //id div1 下的 子级 a 标签
23
24 6.筛选 器
25 $(#div>a:first)//id div1 下的 子级 a 标签 的第一个
26 $(#div>a:last)//id div1 下的 子级 a 标签 的最后一个
27 $(#div>a:eq(0))//id div1 下的 子级 a 标签 索引
28
29 $(this).next() //下一个
30 $(this).nextAll() //下面所有的 同级
31 $(this).nextUntil('#id4') //下面标签直至到 #id4
32
33 $(this).prev() //上一个
34 $(this).preva ll() //上面所有
35
36 $(this).parent() //父级
37 $(this).parents() //父 父 级 所有
38 $(this).parentsUntil('.p1') //父 父 级 所有
39
40 $(this).children() //子级
41 $('#id').sibilings() //所有兄弟 同级
42 $('#id').find('#id') //所有子级
43 7.属性
44 $('[type]') //有 type 属性的标签
45 $('[type=radio]')//有 type=radio 属性的标签
46
47 $(':radio') //表单属性
48 筛选
View Code
转换：
jquery对象[0] ＝〉〉 dom对象
dom对象 ＝〉〉 $(dom对象)// jquery对象
实例:
$(':checkbox').prop('checked'); 获取值
$(':checkbox').prop('checked',true); 设置值
jquery 方法 内置循环
$(':checkbox').xxxx
文本操作
$(..).text() #获取文本内容
$(..).text('<a> </a>') #设置文本内容
$(..).html() #获取网页内容
$(..).html('<a> </a>') #设置网页内容
$(..).val() #获取值
$(..).val('<a> </a>') #设置值
样式操作
.hasClass('')//判断 有无样式
.removeClass('')//移除
.addClass('')//添加
.toggleClass('')//判断 有无样式 有就移除 无就添加
属性操作
$(..).attr('n','v') //自定义属性进行修改 一个形参,获取值 两个形参 设置值
$(..).removeAttr('n')//移除属性
$(..).prop('n',true)//用于chekbox,radio 一个形参,获取值 两个形参 设置值
索引
var v=$(this).index();
css操作
$(tag).css('color','green');//可以精确的设置
内容操作
.append(temp)//添加在子列表最下面
.prepend(temp)//添加在子列表最上面
.after(temp)//添加在兄弟位 下面
.before(temp)//添加在兄弟位 上面
.remove() //移除
.empty() // 清空内容
.clone // 克隆 复制
clearInterval(obj);//清除定时器
位置
滚动条
$(window).scrollTop()//无参 获取
$(window).scrollTop(100)//有参 设置
文档标签的位置
$('#id').offset()//获取到坐标
offset().left //横坐标
offset().top//纵坐标
事件
绑定方式
$('.c1').click()
$('.c1').bind('click',function(){})//绑定事件
$('.c1').unbind('click',function(){})//解除绑定
$('.c1').on('click',function(){})
$('.c1').off('click',function(){})
$('.c1').delegate('li','click',function(){})
$('.c1').undelegate('li','click',function(){})
阻止事件发生
return false
//加载页面框架完成就执行
$(function(){
})
扩展
1、 //扩展
$.extend({
'name':function(){
return 's';
}
})
$.name();//调用
2、
$.fn.extend({
'name':function(){
return 's';
}
})
$('id').name();//调用
自执行 封装 变量
二、操作元素
$('il').height([val|fn])# 获取纯高度
$('il').width([val|fn])
$('il').innerHeight()#获取边框+纯高度
$('il').innerWidth()
$('il').outerHeight([soptions])#获取边框+纯高度+
$('il').outerHeight([soptions])#获取边框+纯高度+
$('il').outerWidth([options])