jQuery
http://jquery.cuishifeng.cn/
相当于js的模块，类库
DOM/BOM/JavaScript的类库
一、查找元素
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).prevAll() //上面所有 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 筛选
转换：
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();//调用
自执行 封装 变量
(function(){
})(jquery)
二、操作元素
$('il').height([val|fn])# 获取纯高度
$('il').width([val|fn])
$('il').innerHeight()#获取边框+纯高度
$('il').innerWidth()
$('il').outerHeight([soptions])#获取边框+纯高度+
$('il').outerHeight([soptions])#获取边框+纯高度+
$('il').outerWidth([options])