每天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>