每天10个前端知识点:jQuery 前端日常

1. jQuery && js

jQueryjs

onload$(function() {});window.onload=function(){};

获取元素$('div');document.getElementsByTagName('div');

事件obj.click(fn);obj.onclick=fn;

this$(this)this

索引$(this).index()aDiv[i].index=i;...

操作属性(1)获取attr(name)(1).

(2)设置attr(name, value)(2)[]

(3)getAttribute()/setAttribute()

2. jQuery效果

.hide() 隐藏

.show() 显示

.slideDown() 下滑

.slideUp() 上滑

.fadeIn() 淡入

.fadeOut() 淡出

参数：time时间，easing运动方式，fn回调函数

.animate(params, [speed], [easing], fn)

eg: .animate({width: '100px', opacity: 1}, 'slow', {duration: 1000, easing: 'linear', complete: function(){...}})

animate()函数记得先清除定时器

$('ul').stop().animate(...);

3. jQuery选择器

(1) 伪类选择器

$('li:first') 第一个

$('li:last') 最后一个

$('li:eq(n)') 第n+1个

$('li:odd') 第奇数个 (tips:记忆odd字母个数为奇数个)

$('li:even') 第偶数个 (tips:记忆even字母个数为偶数个)

$('li:contains(xxx)') 包含文本xxx的li标签

$('li:has(p)') 包含p标签的li标签

(2) 属性选择器

$('input[type==password]') 属性type为password的input标签

4. jQuery操作css属性

获取 .css('name');

设置

单一样式 .css('name', 'value')

多个样式 .css({'name': 'value', 'name2': 'value2'})

eg: .css('background-color': 'red')或者.css('backgroundColor': 'red')

5. jQuery操作内容

非表单

获取 .html() // innnerHTML

设置 .html('xxx')

表单

获取 .val() // value

设置 .val('xxx')

文本

获取 .text()

设置 .text('xxx')

6. jQuery操作类名

添加 .addClass('xxx')

删除 .removeClass('xxx')

添加/删除 .toggleClass('xxx')

7. jQuery操作属性

获取 .attr(name)

设置

单一属性 .attr('name', 'value')

多个属性 .attr({'name': 'value', 'name2': 'value2'})

8. jQuery DOM

(1) 创建元素

$('<div>text</div>')

(2) 添加元素

.append()

parent.append(child); 父级添加子级至末尾

.appendTo

child.appendTo(parent); 子级追加至父级末尾

.prepend()

parent.prepend(child); 父级添加子级至最前

.prependTo()

child.prependTo(parent); 子级追加至父级最前

.before()

sib1.before(sib2); sib2添加至同级sib1前面

.after()

sib1.after(sib2); sib2添加至同级sib1后面

.insertBefore()

sib1.insertBefore(sib2); sib1添加至同级sib2前面

.insertAfter()

sib1.insertAfter(sib2); sib1添加至同级sib2后面

.wrap()

child.wrap(parent); 子元素被父元素包裹

.unwrap()

child.unwrap(); 子元素移出上级父元素

(3) 删除元素

.remove()

obj.remove(); 删除obj节点

.empty()

obj.empty(); 删除obj内所有子节点

.detach()

$('p').detach(); 删除所有p标签及其中内容

$('p').detach('.hello'); 删除所有类为hello的p标签及其中内容

9. jQuery事件

jQuery中所有事件都是绑定的

.ready() DOM完全加载时执行的函数

.change()

.click()

.dblclick() 双击 注意是dbl

.contextmenu() 右击

.hover()

hover(over, out) 可以绑定两个方法

<script>

obj.hover(function() {

// 移入

}, function() {

// 移出

})

</script>

.mouseover()

.mouseout()

.mousedown()

.mouseup()

.mousewheel 鼠标滚轮 jQuery没有封装这个函数，需用on事件绑定

.keydown()

.keypress()

.keyup()

最好不用jQuery封装的事件，都用on事件绑定

.on() 绑定

.off() 解绑

.bind() 绑定

.unbind() 解绑

// live() die() jQuery 1.7+被删除

jQuery事件绑定on()、bind()与delegate() 方法详解

事件相关

return false; 阻止默认事件、阻止冒泡

ev.preventDefault(); 阻止默认事件

ev.stopPropagation(); 阻止冒泡

事件委托

第一种方法

.on(events, selector, callback)

<script>

// $('table td').on('hover', function() {

// $(this).toggleClass('active');

// })

// =>

$('table').on('hover', 'td', function() {

#(this).toggleClass('active');

})

</script>

第二种方法

.delegate()

<script>

$('table').delegate('td', 'hover', function() {

$(this).toggleClass('active');

})

</script>