Jquery Domc操作

为什么要使用jquery?

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

二、

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

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

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

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

搜索操作

搜索父元素

jquery之 DOM 操作

搜索同辈元素

jquery之 DOM 操作

栗子:

jquery之 DOM 操作
jquery之 DOM 操作

效果:jquery之 DOM 操作

搜索子元素

jquery之 DOM 操作

栗子:注意这里的eq(下标)是从0开始计数的

jquery之 DOM 操作
jquery之 DOM 操作
效果:
jquery之 DOM 操作

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

栗子2:jquery之 DOM 操作
jquery之 DOM 操作

效果:
jquery之 DOM 操作
失去焦点:
jquery之 DOM 操作
再次输入值:
jquery之 DOM 操作

过滤操作

过滤操作:指的就是通过eq(下标) hasClass(类名)等对筛选过的内容进行过滤,找到自己要用的东西
jquery之 DOM 操作

查找节点

jquery之 DOM 操作

创建节点

jquery之 DOM 操作

栗子:
jquery之 DOM 操作
jquery之 DOM 操作
效果:点一次按钮出来一个新的节点。
jquery之 DOM 操作

删除节点

jquery之 DOM 操作
empty 和remove的区别
empty 删除的是内容,标签还在。
remove删除标签+内容

栗子:
jquery之 DOM 操作
jquery之 DOM 操作

原文:
jquery之 DOM 操作

empty:只删除标签里面的内容,保留标签。
jquery之 DOM 操作
remove: 连标签一起删了。
jquery之 DOM 操作

替换节点

jquery之 DOM 操作

复制节点

jquery之 DOM 操作

栗子:
jquery之 DOM 操作
jquery之 DOM 操作

效果:
jquery之 DOM 操作

内部插入节点

jquery之 DOM 操作
栗子:
jquery之 DOM 操作
jquery之 DOM 操作

效果:
jquery之 DOM 操作

外部插入节点

jquery之 DOM 操作

HTML 操作

jquery之 DOM 操作

文本操作

jquery之 DOM 操作

值操作

jquery之 DOM 操作

元素属性操作

jquery之 DOM 操作
jquery之 DOM 操作

操作元素样式

jquery之 DOM 操作

元素CSS操作

jquery之 DOM 操作

jquery跳出 each循环

jquery之 DOM 操作
jquery之 DOM 操作

jquery之 DOM 操作

jquery之 DOM 操作

jquery之 DOM 操作

相关文章: