jquery的Dom操作
查找元素（选择器已实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设置节点的css样式等。
操作元素的属性：
| 方法 | 说明 | 举例 |
|---|---|---|
| attr（属性的名称） | 活动指定的属性‘操作CheckBox时， 选中返回checked，没有选中返回undefined |
attr("checked") attr("name") |
| prop(属性名称) | 获取具有true和false两个属性的属性值 | prop("checked") |
属性的分类
1.获取属性
固有属性：元素本身就有的属性（id name class style）：无论attr、prop都能拿到
返回值是Boolean的属性：checked selected disabled：
- 未被定义attr ---undefined prop----false
- 定义的attr ---checked prop----true
自定义的属性
- attr可获取
- prop不可获取
2.设置属性
| 类型 | 固有属性 | 返回值是Boolean的属性 | 自定义属性 |
|---|---|---|---|
| attr | $("#aa").attr("value","1") | $("#aa").attr("checked","chedked") | $("#aa").attr("uname","admin") |
| prop | $("#aa")prop("value","1") | $("#aa")prop("checked","true") | / |
3.移除属性
removeAttr("属性名")
总结：属性是Boolean用prop方法checked、selected、disabled,其余用attr方法
操作元素的样式
<div id="con" class="blue large">测试<div>
| 方法 | 说明 | 代码例子 |
|---|---|---|
| attr("calss") | 获取class属性的值，即样式名称 | $("#con").attr("class") |
| attr("class","样式名") | 修改class属性的值，修改样式(原本的样式会被覆盖) | $("#con").attr("green") |
| addClass("样式名") | 添加样式名称原来的基础上添加样式，如果出现相同新的样式以后定义的样式为准 | $("#con").addClass("pink")<粉色大战绿色> |
| css() css({"具体的样式名":"样式值","...":"",.......}) |
添加具体的样式添加行内样式 | $(“#con").css({"font-size":"40px","font-family":"楷体“}) |
| removeClass(class) | 移除样式的名称 | $("#con").removeClass("large") |
在ie浏览器中要获取边框要输入准确的边框
border-top-width
css()
获取样式：
获取多个div的样式只能得到第一个对应的样式
$('div').css('width')
设置样式：
行内样式，设置单样式
$('div0').css("width","100px");
$('div0').css("height",100);
设置多样式
$('div').css({
width:300,
'height':'300px',
'background-color':'green'
})
添加类：
addClass()
$('#div).addClass('类名1 类名2')
移除类:
removeClass()
$('#div).removeClass('类名1 类名2')
$('#div).removeClass()//移除所有的类
判断类：
hasClass()判断某个元素是否有某个类。有返回true
$('#hasClass).click(function(){
$('#div1').hasClass('fontSize');
})
切换类：
$('#toggleClass').click(function(){
//判断一个元素有某个类就移除这个类，如果元素没有这个类就添加这个类
$('#div').toggleClass('fontSize')
})
获得元素的宽高
width()
height()
1.不带参数是获取
2.代参数是设置
-
设置或者获取高度和宽度是不包括内边距和边框外边距的
$('#img1').width(); $('#img1').height(300);
innerWidth()
innerHeight()
获取宽高加了padding（内边距）
outerWidth()
outerHeight()
获取宽高包括内边距和边框（padding和margin）
outerWidth（true）
outerHeight(true)
获得元素的宽高包括内边距、边框、外边距
页面可视区的宽高
$(window).width();
$(widow).height();
案例
Tab栏切换
$(function(){
$('.tab>.tab-item').mouseenter(function(){
$(this).addClass('active').siblings('li').removeClass('active');
//获取当前的索引
var idx = $(this).index();
$('.prodects>.main).eq(idx).addClass('active').siblings('div').removeClass('selected');
})
})
操作元素的内容
<div id="con" class="blue large">测试<div>
<input type ="text" value="oop" id="a"/>
| 方法 | 说明 | 代码 |
|---|---|---|
| html()非表单元素 | 获取元素的html内容 | $("#con").html() |
| html("html,内容")非表单元素 | 设定元素的html的内容 | $("#con").html("上海") |
| text()非表单元素 | 设定元素的文本内容，不包含html | $("#con").text() |
| text("text,内容") | 设置元素的文本内容，不包含html | $("#con").text("上海") |
| va()表单元素 | 获取元素的value的值 | $("#a").val() |
| val("值")表单元素 | 设定元素的value值 | $("#a").val("牛逼") |
text()
获取文本：获取所有后代的文本
修改文本：如果文本有标签也不会解析，包含了多个dom元素的jQuery对象会把所有的dom元素都会设置上。
隐式迭代
表单元素：
文本框(text)、密码框(password)、单选按钮(radio)、复选框(checkbox)、隐藏域(hidden)、文本域(textarea)、下拉框(select)
非标单元素：
div、span、h1-h6、tr、td、table、li、p
创建元素
-
原生的js创建节点的方式
document.write(); innerHTML documnet.craeteElement()jquery的方法：
能创建元素但是只存在内存中，如果要显示在页面上，要追加节点
$("元素内容");
var ss = $("<p>测试</p>");
$('#div1').append(ss);
html（）：----识别html标签
1.不给参数就获取到了元素的所有内容
2.设置参数就会把原来的内容会覆盖
$(function(){
$('#div').html()
});
添加元素
<div id="a">
<p>小鲜肉</p>
</div>
var span="<span>小奶狗</span>"
| 方法 | 说明 | 代码 |
|---|---|---|
| prepend(content) | 在被选择元素的内部的开头插入元素的内容，被追加的content参数，可以是字符、html元素标记最前面 | $("#a").prepend("span") |
| $(content).prependTo(selector) | 把content元素或内容加入到selector元素的开头最前面 | $("#span").prependTo("#a") |
| append（content） | 在被选择元素的内部的结尾插入元素或内容，被最加的Content的参数，可以是字符、HTML、元素的标记最后面 | $("#a").append("span") |
| $(content).appendTo(selector) | 把content元素或内容插入selector元素内，默认在尾部最后面 | $("#span").appendTo("#a") |
| before（） | 在元素前插入指定的元素或内容：$(selsctor).before(content)同级 | $("#a").before("span") |
| after() | 在元素后插入指定的元素和内容：$(selsctor).after(content))同级 | $("#a").after("span") |
注：
- 不存在追加元素到指定位置
存在会将原来元素直接剪切设置到指定位置
删除元素
<div id="a">
内容
</div>
| 方法 | 说明 | 代码 |
|---|---|---|
| remove（） | 删除所选元素或指定的子元素，包括整个标签和内部内容一起删 | $("#a").remove()//自杀 |
| empty（） | 清空所选元素的内容 | $("#a").empty()//清空元素 |
遍历元素
each（）
$(selector).each(function(index,element))
参数function为遍历的回调函数
index为遍历元素的序列号，从0开始
element是当前的元素，此时是Dom元素
<span class="green">我</span>
<span class="green">我</span>
<span class="green">我</span>
<span class="green">我</span>
$(".green").each(function(index,element){
console.log(index);
console.log(element);
console.log(this);
console.log($(this));
})
克隆
clone();
只存在内存中，如果要添加要追加
无论是true还是false都会克隆后代节点
但是true是会把事件也会克隆到对应的克隆对象，默认不给参数是false
$(function(){
#('buttion1').click(function(){
var cc=$('#div1').clone();
$('#body').append(cc);
}) ;
});
案例
表格生成案例
$(function(){
//模拟数据
var data=[{
name:"传智博客"，
url："1",
type:"IT培训机构"
},
{
name:"传智博客"，
url："1",
type:"IT培训机构"
},
{
name:"传智博客"，
url："1",
type:"IT培训机构"
},]
$('#button1').click(function(){
//1.html(),他是会覆盖的要一次性的做
var list=[];
for(var i=0;i<data.length;i++){
list.push("<tr>");
//生成td
for（var key in data[i]){
list.push("<td>");
list.push(data[i][key]);
list.push("</td>");
}
list.push("</tr>");
}
//把他变成字符串
$('#div').html(list.join(""));
}) ;
});
$(function(){
//模拟数据
var data=[{
name:"传智博客"，
url："1",
type:"IT培训机构"
},
{
name:"传智博客"，
url："1",
type:"IT培训机构"
},
{
name:"传智博客"，
url："1",
type:"IT培训机构"
},]
$('#button1').click(function(){
//2.$()
for(var i=0;i<data.length;i++){
var str=$('<tr><td>'+data[i]["name"]+'</td><td>'+data[i]["url"]+'</td><td>'+data[i]["type"]+'</td></tr>');
$('#div1').append(str);
}
}) ;
});
城市选择案例
$(function(){
//全部移动
$('#buttion').click(function(){
$('#src-city>option').appendTo($('#a1')) ;
});
//选中的到右边
$('buttion1').click(function(){
$('#src-city>option:selectd').appendTo('#al');
});
});
表格删除案例
$(function(){
//清空全部
$('#buttion1').click(function(){
$('#tbody').empty();
});
//删除对应的行
$('tbody .get').click(function(){
$(this).parent().parent().remove();
});
});
美女图片例子
$(function(){
$('#image-a').click(function(){
var src1 =$(this).attr('href');
var title1=$(this).attr('title');
$('#image-xia').attr('src',asc1);
$('#text1').text(title);
//阻止a标签的跳转
return false；
}) ;
});
表格的全选反选
$(function(){
$('#kuang').click(function(){
var checked = $('#checked1').prop('checked');
$('#li input').prop('checked',checked);
}) ;
//下面的多选的点击事件
$('#li input').click(function(){
//判断是否都选中
var all =$('#li input').length
var all-checked=$('#li input:checked');
if(all==all-checked){
$('#upchecked').prop('checked','true');
}else{
$('#upchecked').prop('checked','false');
}
});
//优化
$('#upchecked').prop('checked',all==all-checked);
});
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现