47 JQ的事件和DOM操作

JQ的事件和DOM操作

jQ对于事件进行了大量的封装，click()

$().click(function(){

});

jQ对于DOM操作

获取某些节点：document.getElementById();->$(选择器)
添加内容：xxx.innerHTML=XXx; ->	$().html();

1.掌握常用的事件进行网页特效设计

jQ中的事件分类：

基础事件

​ 鼠标事件

​ 键盘事件

​ window事件

​ 表单事件

复合事件

​ 鼠标光标悬停

​ 鼠标连续点击

​

1.1 掌握常用的鼠标事件

mouseover和moouseenter的区别

穿过被选元素或其后代元素都会触发对应的mouseover事件。

只有在穿过被选元素时才会触发对应的mouseenter事件。

1.2 掌握常用的键盘事件

1.2 掌握常用的键盘事件

1.3 浏览器事件

浏览器事件：resize()改变浏览器窗口时 会触发。

​ scroll() 浏览器滚动事件

1.4 绑定和解绑事件

1.事件函数

2.bind来绑定事件 unbind可以解绑事件

3.on绑定事件 off可以解绑事件

1.5 掌握常用的复合事件

hover：它等价于mouseover和mouseout事件的组成（其实以前用的是mouseenter和mouseleave)

toggle :在1.8版本才能使用连续点击事件

toggle:不带参数

toggleClass:

2.掌握JQuery的常用DOM操作

2.1 CSS-DOM

css():

css(CSS属性名，CSS属性值)；设置单个效果

css({属性名1：值，属性名 2：值}) 设置多个效果

css();获取某个属性的值

addClass(属性名)；

addClass(类属性名1 类属性名2)； 例如：addClass("test test1 test2")

removeClass():

removeClass(类属性名)；

removeClass(类属性名1 类属性名2)；

toggleClass()：见上方

hasClass():判断是否包含某个类样式

2.2 操作DOM节点（DOM-Core)

HTML代码操作 html() 等价于xxx.innerHTML

标签内容操作 text()等价于xxx.innerText

属性val的操作

value属性只有在表单元素中才有此属性.

value属性的获取，当初在JS时 直接 xxx.value.

xxx.val(); xxx.val(“xx”);

JQuery中节点操作

查找节点

创建节点

插入节点

删除节点

替换节点

删除和替换

复制节点 clone(boolean) boolean:是否复制事件

复制节点 clone(boolean):是否个复制事件

设置和获取属性值，删除属性

遍历子节点

children([选择器]);可以获得所有的直接子节点 也可以在其中添加选择器获取指定的子节点
find([选择器])：可以通过它获取后代中的指定节点	

遍历兄弟节点

next()
pre()
siblings([选择器]) 获取所有的兄弟节点

遍历父节点

parent();直接父节点
parents([选择器]);获取祖先节点