day17 jQuery
jQuery
上次遗忘: 为同一个标签内容添加两个动作;
http://jquery.cuishifeng.cn
模块<==>类库
DOM/BOM/JavaScript的类库
一 查找元素
DOM
10个左右
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')
4. 组合a
<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')
$('a,.c2,#i10')
5. 层级
$('#i10 a') 子子孙孙
$('#i10>a') 儿子
6. 基本
:first
:last
:eq()
7. 属性
$('[alex]') 选择含有alex属性的标签
$('[alex="123"]') 选择属性alex="123"的标签
8 表单
<form>
<input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option</option></select> <textarea></textarea> <button>Button</button> </form>attr(name|properties|key,value|fn) 设置或返回被选元素的属性值
$(":input")上述所有内容都会被找到
9.索引
index()
10.属性
$("img").attr("src") 返回文档中所有图像的src属性值
$("img").attr({ src: "test.jpg", alt: "Test Image" }); 为所有图像设置src和alt属性。
$("img").attr("title", function() { return this.src });把src属性的值设置为title属性的值
removeAttr(name) 从每一个匹配的元素中删除一个属性
11.文档处理
append prepend after before remove empty clone
12.css处理
$('t1').css('样式名称','样式值')
筛选
$(this).next() 当前标签下一个标签
$(this).prev() 下一个
$(this).siblings() 兄弟标签
$(this).parent() 父标签
$(this).children() 子标签
$("#i1").find(".c1") 子子孙孙中查找
last()
first()
nextAll()
nextUtil()
parents() 所有祖先成员
parentsUntil('#i1') 查找祖先到id='i1'
hasClass(class)
内容操作
$(...).text() 获取标签内容
$(...).text("1")设置标签内容
$(...).html() 获取标签
$(...).html("<a>1</a>")设置标签
$(...).val() 获取文本内容
$(...).val('lfdjaslk') 设置文本内容
位置操作
$(window).scrollTop() 滚动的值
$(window).scrollTop(val) 设置滚动到什么位置
scrollLeft(val)
offset().left 指定标签在HTML中的坐标
offset().top指定标签在HTML中的坐标
position() 指定标签在html中的坐标
$('i1').height( )获取标签的高度)
$('i1').innerHeight( ) #获取边框+纯高度 + ?
$('i1').outerHeight( )
$('i1').outerHeight(true)
事件
DOM 有三种绑定方式
jQuery有多重绑定方式
$('.c1').click();
$('.c1')......
$('.c1').bind('click',function(){})
unbind
$('.c1').delegate('a'.'click',function(){}) //添加元素后可以为新加标签添加事件
undelegate
$('.c1').on('click',function(){})//以上全是调用on
off
阻止事件发生:
return false;
# 当页面框架加载完成之后,自动执行 $(function(){});
jquery扩展:
$.extend({
'wangsen':function(){
return 'sb';
}
});
调用: $.wangsen();
$.fn.extend({
'wangsen':function(){
return 'sb';
}
});
调用$("#id").wangsen();
编写自己的js文件,然后调用
版本:
1.X系列兼容性较好 1.12
2.X
3.X
对象转换
jQuery对象[0] ==>Dom对象
Dom对象 ==> $(Dom对象)
实例
多选\反选\全选
-选择权
-
$('#tb:checkbox').prop('checked') 获取值
$('#tb:checkbox').prop('checked',true) 设置值
-
jQuery方法内置循环:$('#tb:checkbox').xxx
- $('#tb:checkbox').each(function(){code});//对其中的每个对象进行操作;
左侧菜单Tab
-筛选器
-添加删除class
$('#i1').addClass('hide')
$('#i1').removeClass('hide')
-链式编程
$('#i1').children().removeClass('hide').parent().siblings().find('.content').addClass('header');
点赞
$('t1').append()
$('t1').remove()
setInterval()
clearInterval()
透明度
position
大小\位置
