jQuery基础知识

一、jQuery基础
1、jQuery是什么?
jQuery是一个js框架，其主要思想是，通过
选择器查找到对应的节点，然后对这个节点进行
封装(封装成一个jQuery对象)。通过调用jQuery
对象的属性或者方法来实现对节点的操作。这样做的
好处是：第一，将不同的浏览器之间的差异屏蔽起来了。
第二，代码更加简洁，维护方便。
2、jQuery编程的步骤
step1: 使用选择器查找节点
step2: 调用jQuery对象的方法或者属性
选择器：jQuery模仿css选择器语法，创建的一套
用于查找节点的规则。
3、jQuery对象与dom节点
1)dom节点如何转换成jQuery对象
调用$()函数，比如
$(obj);
2)jQuery对象如何转换成dom节点
方式一: $obj.get(0)
方式二: $obj.get()[0]
3) jQuery与其它js框架如何共存?
使用conflict()函数。
二、选择器
1、选择器是什么?
jQuery模仿css选择器语法，创建的一套
用于查找节点的规则。
2、基本选择器
#id
.class
element
selector1,select2..selectn
*
3、层次选择器
select1 select2
select1>select2
select1+select2
select1~select2
4、过滤选择器
(1)基本过滤选择器
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)

(2)内容过滤选择器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配的元素
的元素
:parent 匹配含有子元素或者文本的元素

(3)可见性过滤选择器
:hidden 匹配所有不可见元素，
或者type为hidden的元素
:visible 匹配所有的可见元素
(4)属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
(5)子元素过滤选择器
:nth-child(index/even/odd)
(6)表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
5、表单选择器
:input
:text
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
三、dom操作
1、dom查找
通过选择器找到节点后，可以调用
a, html() : 输出或者修改节点之间的html内容
b,text()：输出或者修改节点之间文本
c,val()：输出或者修改节点的value属性
2、创建节点:
$(html)
3、添加节点:
append():向每个匹配的元素内部追加内容
prepend():向每个匹配的元素内部前置内容
after():在每个匹配的元素之后插入内容
before():在每个匹配的元素之前插入内容
4、删除节点
remove()
remove(selector)
empty():清空节点
5、复制节点
clone()
clone(true):使复制的节点也具有行为(将事件
处理代码一块复制)

6、属性操作
读取：attr('');
设置：
attr('','') 或者一次
设置多个 attr({"":"","":""});
删除：removeAttr('')
7、样式操作
获取和设置: attr("class","")
追加:addClass('')
移除:removeClass('')
或者removeClass('s1 s2')
或者removeClass()//会删除所有样式
切换样式：toggleClass,有该样式，就删除，没有，
就添加。
是否有某个样式 hasClass('')
读取css('')
设置css('','')或者
css({'':'','':''})//设置多个样式

1、遍历节点
children():只考虑子元素，不考虑其它后代元素。
next()/next(selector)
prev()/prev(selector)
siblings()/siblings(selector)
find(selector)/
parent()

2、事件处理机制
1)事件绑订的方式
bind(type,fn)
2)、绑订方式的简写形式
click(function(){
});
3)、合成事件
hover(enter,leave) : 模拟光标悬停事件
toggle(fn1,fn2...)：模拟鼠标连续单击事件
4)、事件冒泡
a、获得事件对象
//event不再是原始的事件对象，而
//是封装之后的对象。
click(function(event){
});
b、停止冒泡
event.stopPropagation()
c、停止默认行为
event.preventDefault()
5)、事件对象的属性
event.type
event.target:返回事件源（是dom对象!!!）
event.pageX/pageY: 点击的坐标
6)、模拟操作
trigger('click')
3、动画
1)、show("slow"/"normal"/"fast"/100) hide()
另外，还可以添加一个回调函数，比如:
show('slow',function(){
//这儿的代码会在动画执行完成之后
//才执行。
});
2)、fadeIn() fadeOut(): 淡入、淡出
改变不透明度。
fadeIn,fadeOut可以添加
"slow"/"normal"/"fast"/100参数，也可以
添加一个回调函数。
3)、slideUp() slideDown() : 改变元素的高度
用法跟前面一样。
4)、自定义动画 animate(params,speed,callback):
params: 是一个形如 {"height":"300px","width","200px"}
speed: 单位是毫秒，表示动画执行的速度。
callback:回调函数，动画执行完成之后，执行
该函数。
4、操作类数组的方法：
说明：jquery操作数组的方法，
$()操作返回的如果是一个数组，可以使用如下方法来操作
each(fn(i)):循环遍历每一个元素,this代表被迭代的dom对象，$(this)代表被迭代的jquery对象。
eq(index)：返回index+1位置处的jquery对象
index(obj)：返回下标，其中obj可以是
dom对象或者jquery对象。
length：个数
get()：返回dom对象组成的数组
get(index)：返回index+1个dom对象。

补充：web前端 , JavaScript ,