web12(jq)

jq的方法

进一步选择（筛选）

first() 将jq元素集合选择其中的第一个元素。

last() 选择集合中的最后一个元素。

eq(index) 选择集合中指定索引的元素。

filter(selector) 按选择器的要求，进一步选择集合中的元素。

not(selector) 按选择器的要求，剔除集合中符合条件的元素。

add(selector) 向集合中新增元素。

slice() 截取集合中的一部分。

end() 取消之前的一次对集合本身所做的改变。

节点的遍历

向上遍历

parent() 选择父元素

parents() 选择祖先元素们

parentsUntil(arg) 选择祖先元素，到arg为止（不包括arg）

closest(selector) 选择自身和祖先元素中，符合selector条件的，距离自身最近的一个元素

同胞遍历

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

siblings() 除了自身之外的所有同胞元素

向下遍历

children() 返回所有子元素

find(selector) 查找所有符合选择器要求的子孙节点（没参数则一个都不选择）

元素的操作

创建元素

创建元素，只需要用$()包裹html代码就可以；

$('<li><h1>新的</h1></li>');

插入元素

将新的元素插入到子元素的最后	父元素.append(新的)	新的.appendTo(父元素)
将新的元素插入到子元素的最前	父元素.prepend(新的)	新的.prependTo(父元素)
将新元素插入到同胞之前	同袍.before(新的)	新的.insertBefore(同胞)
将新元素插入到同胞元素之后	同袍.after(新的)	新的.insertAfter(同胞)

谁发起，后续的操作就针对谁。

替换元素

旧的.replaceWith(新的)

新的.replaceAll(旧的)

克隆元素

元素.clone(bool)

js	jq
必然会克隆的是元素自身及属性，参数控制子孙节点是否被克隆，事件不会被克隆	必然被克隆的是元素自身、属性及子孙节点。参数控制的是由jq附加的事件是否被克隆，原生js的事件不会被克隆。

移除元素

元素.remove()

元素的属性操作

通用的属性操作

设置时，attr(name,value);

读取时，attr(name);

移除时：removeAttr(name);

系统认可的属性（因为Jq属性是一个集合），系统没有对认可的属性做优化，因此只能用attr方法来操作。

class属性的操作

addClass() 添加class属性值

removeClass() 移除class属性值

hasClass() 返回的是一个boolean值，判断有无某属性

toggleClass() 属性样式的切换

$(document).click(function () {
        h1.toggleClass('aa bb')
    })

style属性的操作

css()在设置时，可以使用css(name,value)的形式，也可以使用css(object)的形式：对象的形式即

h1.css({

name:value

})

name可以是如下的对象形式（注意背景颜色的三种写法例子）：

h1.css({
        color:'red',
        height:'100px',
        backgroundColor:'yellow',
        'backgroundColor':'yellow',
        'background-color':'yellow',
    })

value的值是单一值时：可以用数字的形式赋值，同时支持**+=或者-=,但必须是字符串形式**。

h1.css({
        height: '100px',
        height:100,
        height:'+=100px',
        height:'-=100px',
    })

读取时css(name)不是读取元素style属性的值，而是读取元素真实的渲染值。

表单属性的操作

对于表单元素attr()，只能设置默认值

要设置真实值，需要用到**prop()**方法。

对于经常需要操作的value提交值，jq提供了**val()**方法

alert($(':text').val());

data绑定数据的操作

在jq中，可以为一个元素单独提供一个对应的数据空间，在这个空间的数据，只能使用jq操作。相当于不可见的属性操作

data() 设置和读取data

removeData() 移除数据

 $('h1').data('abc',123);
    $('h1').removeData('abc');
    $('h1').hasData('abc');

    alert(
    $('h1').data('abc')
    )

元素尺寸的获取和设置

读取值

width() height() 返回的是元素的自身的尺寸

innerWidth() innerHeight() 返回的是元素自身加内边距的尺寸

outerWidth() outerHeight() 返回的是元素自身+内边距+边框的尺寸

outerWidth(true) outerHeight(true) 返回的是元素自身+内边距+边框+外边距的尺寸。参数的默认值是false。

设置值，可以自动进行计算，以行内样式的方式来改变尺寸，通过调整元素自身尺寸来达到目的。

width(num) height(num) 设置的是元素的自身的尺寸

innerWidth(num) innerHeight(num) 设置的是元素自身加内边距的尺寸

outerWidth(num) outerHeight(num) 设置的是元素自身+内边距+边框的尺寸

outerWidth(num,true) outerHeight(num,true) 设置的是元素自身+内边距+边框+外边距的尺寸。参数的默认值是false。

元素的位置获取和设置

相对于文档左上角的偏移值：

可以读取 可以设置

读取时：

​ 元素.offset() 返回一个对象{left:xxx;top:yyy};

设置时：

​ 元素.offset(参数)

​ 元素可以是对象

​ 也可以是函数

$('#box').offset(function (index,old) {
        return {
          left:old.left+100
        }
      })

相对于定位参照元素的偏移值

相对于：距离自身最近的，具有定位状态的，祖先元素来定位。如果没有符合条件的，则相对于整个Html来定位。

元素.position() 这个方法返回一个对象{left:xxx;top:yyy};

这个方法只能读取，无法像offet一样来设置。

 $('#box').position({
            left:10
        })

使用元素.offsetParent()返回元素的position方法的参照元素

$('#box').offsetParent().css({
        borderColor:'red'
      })

元素的事件操作

标准事件操作：

元素.on(事件名称,cb) 为当前元素附加事件

已存在的祖先元素.on(事件名称,选择器,cb) 为符合选择器条件的元素（包括未来添加的）附加事件

元素.one(事件名称,cb) 为当前元素附加只执行一次的事件（触发后就移除自身）

已存在的祖先元素.one(事件名称,选择器,cb) 为符合选择器条件的元素（包括未来添加的）附加只执行一次的事件（所有元素公用一次机会）。

清除当前元素的点击事件：

元素.on(事件名称,cb)对应的清除事件 元素.off(事件名称,cb)

off方法没有参数时，是清除所有事件。

清除未来元素的事件：

已存在的祖先元素.on(事件名称,选择器,cb)对应的清除事件

已存在的祖先元素.off(事件名称,选择器,cb)

给谁附加的事件，清除时也找谁

$('li').on('click',function () {

})
$('li').click(function () {

})

简写和正规写法没有任何执行上的区别。

jq对事件的增强

获得焦点和失去焦点

原有的focus,blur是没有事件冒泡的，jq新增了focusion,focusOut有事件冒泡的

js动画

内置动画

显示、隐藏	show() hide() toggle()	默认的执行时间是0
卷动	slideDown(3000) slideUp(3000) slideToggle(3000)	默认的执行时间是400毫秒
淡入淡出	fadeIn(3000) fadeOut(3000) fadeToggle(3000) fadeTo(3000,0.5)	默认的执行时间是400 fadeTo会改变透明度的上限

内置动画在隐藏完成时都会自动加入display:none

在js程序中，延迟执行，周期函数，事件，都会开启辅进程工作。主进程总是优先于辅助进程

jq的动画是以队列的方式来执行的，反复多次向一个元素附加动画，会自动形成自动执行的队列（数组）

stop(arg1，arg2）

arg1:表示是否清除动画队列

arg2:是否立即完成当前动画

jq暂停插件：

必须保证元素没有等待队列的前提下，才能执行resume() 恢复 pause() 暂停

animate(porp(属性),speed(time时间),easing(动画曲线),callback(回调函数cb))