jQuery操作Dom元素，源码实例

思诚代码块

于 2022-02-17 18:26:17 发布

阅读量410

点赞数

分类专栏： JavaScript实战笔记+理论文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122988279

版权

JavaScript实战笔记+理论专栏收录该内容

27 篇文章 2 订阅

订阅专栏

大家好，今天分享一下jQuery操作Dom元素

写源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"> </script>
</head>
<body>
<ul id="test-ul">
    <li class="javascript">js</li>
    <li name="go"> go</li>

</ul>
<script>
    $('#test-ul li[name=go]').text();
    $('#test-ul').html();
    
</script>
</body>
</html>

显示结果：
在这里插入图片描述

在浏览器控制台上做

在这里插入图片描述
这是获得值：

 $('#test-ul li[name=go]').text();
  ' go'

$('#test-ul li[name=go]').text('123');

把原先的‘go’ 的内容，改成123

截图：

在这里插入图片描述

$('#test-ul').html();

'\n    <li class="javascript">js</li>\n    <li name="go">123</li>\n\n'

$('#test-ul').html('<strong>我是帅哥</strong>');    //设置值

截图：
在这里插入图片描述

jQuery css 使用

$('#test-ul li[name=go').css("color","red");
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]

截图：
在这里插入图片描述

页面效果：

在这里插入图片描述

$('#test-ul li[name=go').show()   //展示

$('#test-ul li[name=go').hide()   //点击谁让他显示，它的兄弟节点隐藏

$(window).width()
390

在这里插入图片描述

在这里插入图片描述
好了，有关于jQuery操作Dom元素就到这里了，谢谢大家

思诚代码块

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery操作Dom元素，源码实例

大家好，今天分享一下jQuery操作Dom元素写源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="lib/jquery-3.4.1.js"> </script></head><body><ul id="
复制链接

扫一扫