jquery

1. jquery能做什么

选择网页元素、改变结果集、元素的操作：取值、赋值、移动、复制、删除和创建、工具方法、事件操作、特殊效果、ajax

2. jquery对象和dom对象的区别以及转化

区别

不可以这样： document.querySelector('#container').height()
jquery可以这样： $('#container').html('123')
dom可以这样： document.querySelector('#container').innerHtml='456'
所以jquery只能使用jquery的属性和方法

转化

jquery转化为dom:
$('#container li')[0]
则可使用dom对象的方法：$('#container li')[0].innerText='1111'
dom转化为jquery:
$(document.querySelector('.active'))

3. 事件

绑定事件

普通的事件绑定：
$('div').on('click',function(e){
console.log(this);
console.log(e);
})
简写：
$('div').click.(function(){
......
})

bind、unbind、delegate、live、on、off的作用：

bind是给具体的某个元素绑定事件,unbind就是解绑比如：
$('button').bind('click',function(){})
live对于某一元素已经存在还是将来被添加到页面中，live都能将事件绑定到它身上。原理用到的就是事件委派
假如有一个表格，我们要动态增删里面的行元素，同时想给每个行元素绑定一个点击事件。给具体的tr元素绑定事件时不现实的。因为它总是变化。于是我们可以换个思路，把事件绑定发哦table元素上。如果点击事件目标是tr元素，执行绑定的函数就好了。这就是事件委派
$('table tr').live('click,function(){}')
然而事实上，我们要动态加的元素指不定在dom树的哪一层，为了让所有新添加的元素都能触发预先绑定的事件处理函数，jquery将事件处理函数委派在了dom树的根元素上，也就是document元素身上，这样一来，无论新添加的元素位于dom树的哪个层级，它触发的事件冒泡到根元素上。在这里，如果事件触发目标是想绑定事件处理函数的那个元素，执行该函数就好了。
这样就用到了delegate把事件绑定在table身上
$('table').delegate('tr','click',function(){})
on的使用方法很简单：
如果你没有指定后代元素，那么就是简单的事件绑定，类似于bind。比如：
$('tr').on('click',function(){});
会把点击事件绑定在tr身上，如果执行完代码后新添加了一个tr元素，那它身上自然是没有事件处理函数的，那做事件委托是这样子的：
$('table').on('click','tr',function(){})
事件委托到了table元素身上，它的tr子元素身上的点击事件会触发事件处理函数。off对应on解绑事件
推荐使用on和off

4. jquery显示和隐藏元素

.hide()隐藏文本。.show()显示文本
使用代码：

$('#hide').click(function(){
    $('p').hide()
})
$('#show').click(function(){
    $('p').show()
})

5. jQuery 动画的使用

.toggle:切换。如果以前是隐藏则是显示。
.fadeIn:淡入方式
.fadeOut:淡出方式
.slideDown、.slideUp:滑动
.animate:过程渐变

$div3.animate{
    width: 80px;
    height: 80px;
    left: 0px;
    right: 0px;(必须是定位的)
}

.finish()//回到开始
.stop()//停止执行

6. 设置和获取html的内部的内容和文本内容

$('div').html()//当没有参数的时候。返回元素的innerHtml
$('div').html('123')//当传递了一个string参数的时候。修改元素的innerHtml为参数值
text()与html类似，操作的是dom的innerText方法。

7. 设置和获取表单用户输入或者选择的内容及设置和获取元素属性

$('#ipt1').val()//获取元素的属性
$('#ipt1').val('hello world')//设置value的值
$('#ipt1').attr('type')//获取元素特定的属性值
$('#ipt1').attr('type','checkbox')设置元素属性

8. demo
9. demo
10. demo
11. demo