本文共 1955 字，大约阅读时间需要 6 分钟。

jQuery 常用操作手册

1. 属性操作

设置属性（prop）

• 语法：$("div").prop(属性名, 属性值);
• 示例：$("div").prop('id', 'box')

获取属性（prop）

• 语法：$("div").prop(属性名);
• 示例：console.log($('div').prop('id'))

设置自定义属性（attr）

• 语法：$("div").attr(属性名, 属性值);
• 示例：$("div").attr('index', 1)

获取自定义属性（attr）

• 语法：$("div").attr(属性名);
• 示例：console.log($('div').attr('index'))

删除属性

• 语法1：$("div").removeProp(属性名);
• 语法2：$("div").removeAttr(属性名);
• 示例：$("div").removeProp('id') 或 $("div").removeAttr('index')

2. 样式操作

设置单个样式（css）

• 语法：$("div").css(css属性名, 值);
• 示例：$("div").css('width', '100px')

设置多个样式（css）

• 语法：$("div").css({ css属性名: 值, ... });
• 示例：$("div").css({ width: '100px', height: '200px' })

获取样式（css）

• 语法：$("div").css(属性名);
• 示例：$("div").css('width')

3. 类名操作

添加类名（addClass）

• 语法：$("div").addClass(类名);
• 示例：$("div").addClass('active')

删除类名（removeClass）

• 语法：$("div").removeClass(类名);
• 示例：$("div").removeClass('active')

切换类名（toggleClass）

• 语法：$("div").toggleClass(类名);
• 示例：$("div").toggleClass('active')

判断类名（hasClass）

• 语法：$("div").hasClass(类名);
• 示例：$("div").hasClass('active')

4. 内容操作

获取内容（text）

• 语法：$("div").text();
• 示例：$("div").text()

设置内容（text）

• 语法：$("div").text('盒子');
• 示例：$("div").text('盒子')

获取标签内容（html）

• 语法：$("div").html();
• 示例：$("div").html()

设置标签内容（html）

• 语法：$("div").html('<b>文字</b>');
• 示例：$("div").html('<b>文字</b>')

获取表单值（val）

• 语法：$("input").val();
• 示例：$("input").val()

设置表单值（val）

• 语法：$("input").val('请输入用户名');
• 示例：$("input").val('请输入用户名')

5. 节点操作

创建元素（wrap）

• 语法：$("标签和内容")
• 示例：var box = $('<div></div> <div class="box"><div></div> div盒子;`

添加元素（append）

• 语法：父元素.append(子元素)
• 示例：var box = $("div"); var b = $("<b>加粗文字</b')"> box.append(b);

添加到前面（prepend）

• 语法：父元素.prepend(子元素)
• 示例：var box = $("div"); var b = $("<b>加粗文字</b')"> box.prepend(b);

替换元素（replaceWith）

• 语法：某个元素.replaceWith(新元素)
• 示例：var span = $("span"); var b = $("<b>加粗文字</b')"> span.replaceWith(b);

删除元素（empty）

• 语法：元素.empty()
• 示例：var box = $("div"); box.empty();

删除元素（remove）

• 语法：元素.remove()
• 示例：var box = $("div"); box.remove();

复制元素（clone）

• 语法：元素.clone([是否复制自身的事件],[是否复制子元素的事件])
• 示例：$("div").clone()