jquery之 DOM 操作

Jquery Domc操作

为什么要使用jquery？

一、
1.Jquery是一种封装的js 是一个轻量级js框架，只有30多kb
2.具有强大的选择器
3.兼容市面上大部分浏览器
4.强大的Ajax封装 注意：在写ajax时，注意 括号{ } 的层级结构
5.能够给用户实现更多更强大的功能（相比于js）

二、

$(function()代码块)与window.load（代码块）的区别1.）$(function(){ 代码块}) 是当dom树（一堆标签、代码形成的）加载完毕之后执行。

window.load（代码块）是当浏览器的所有资源（dom树，css文件，图片、js文件等）加载完毕后才会加载代码块的内容。

2.）$(function(){ 代码块}) 里面可以写多个方法语句（按代码顺序加载）
window.load（）只能写一个

3.）
$(this) 与 this的区别
this 代表当前js对象
$（this） 代表当前jquery对象

搜索操作

搜索父元素

搜索同辈元素

栗子：

效果：

搜索子元素

栗子：注意这里的eq（下标）是从0开始计数的

效果：

在执行本次查询时遇到的问题：
$("#table_dom").children() 实际是选中了整个表。
概念：children 方法用于获取一个包含匹配元素集合中的 每一个子元素== 所有子元素的== 元素 集合
所以在这个题中，是获得了整个表。$("#table_dom").children().children() 找到的是表内的标签
$("#table_dom").children().children().children 找到的是表内的标签

栗子2：

效果：

失去焦点：

再次输入值：

过滤操作

过滤操作：指的就是通过eq（下标） hasClass（类名）等对筛选过的内容进行过滤，找到自己要用的东西

查找节点

创建节点

栗子：


效果：点一次按钮出来一个新的节点。

删除节点

empty 和remove的区别
empty 删除的是内容，标签还在。
remove删除标签+内容

栗子：

原文：

empty：只删除标签里面的内容，保留标签。

remove: 连标签一起删了。

替换节点

复制节点

栗子：

效果：

内部插入节点

栗子：

效果：

外部插入节点

HTML 操作

文本操作

值操作

元素属性操作

操作元素样式

元素CSS操作

jquery跳出 each循环