29、jQuery操作Dom元素

原创于 2021-09-19 17:15:53 发布 · 177 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript学习

本文介绍了如何使用jQuery操作DOM元素，包括获取和设置文本、HTML内容、CSS样式及元素的显示隐藏状态。此外还提到了如何利用jQuery进行简单的窗口尺寸获取、元素显示状态切换以及发起AJAX请求等实用技巧。

操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>hello</strong>');//设置值

css的操作

$('#test-ul li[name=python]').css({"color":"red"});
$('#test-ul li[name=python]').css("color","green");

元素的显示和隐藏：本质,display:none

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zROFY5U3-1632043300828)(C:\Users\Administrator\Desktop\学习笔记\前端学习\javascript\29、jQuery操作Dom元素.assets\image-20210919171615950.png)]$

娱乐测试：

$(window).width();
$(window).height();
$('#test-ul li[name=python]').toggle();//来回切换隐藏，展示

未来ajax();

$('#form').ajax();
$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OuZ60MKR-1632043300832)(C:\Users\Administrator\Desktop\学习笔记\前端学习\javascript\29、jQuery操作Dom元素.assets\image-20210919172021487.png)]$

彩蛋

1.idea查看js,jquery源码

鼠标右键点击方法即可：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WWdKO8E6-1632043300834)(C:\Users\Administrator\Desktop\学习笔记\前端学习\javascript\29、jQuery操作Dom元素.assets\image-20210919170412638.png)]$