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>
　　　　　　　　　　$(":input")上述所有内容都会被找到
　　　　　　　　9.索引
　　　　　　　　　　index()
　　　　　　　　10.属性
　　　　　　　　　　attr(name|properties|key,value|fn) 设置或返回被选元素的属性值
　　　　　　　　　　$("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

　　　　　　大小位置