JQuery：overflow、 <dl> 、data()、 siblings() 、prev()

最新推荐文章于 2023-05-31 08:39:35 发布

一招鲜@Q

最新推荐文章于 2023-05-31 08:39:35 发布

阅读量1.3k

点赞数

分类专栏： JS 文章标签： overflow &amp;lt;dl&amp;gt; data() siblings() prev()

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

记录项目中碰到的几个前端方法，属性。

overflow：

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

<dl>:

<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

结果：

计算机

用来计算的仪器 ... ...

显示器

以视觉方式显示信息的装置 ... ...

data():

data() 方法向被选元素附加数据，或者从被选元素获取数据。

<script type="text/javascript">
$(document).ready(function(){
  $("#btn1").click(function(){
    $("div").data("greeting", "Hello World");
  });
  $("#btn2").click(function(){
    alert($("div").data("greeting"));
  });
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>

siblings() :

如果给定一个表示 DOM 元素集合的 jQuery 对象，.siblings() 方法允许我们在 DOM 树中搜索这些元素的同胞元素，并用匹配元素构造一个新的 jQuery 对象。

该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。

语法：

.siblings(selector)

例如：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

当执行：

$('li.third-item').siblings().css('background-color', 'red');

则1，2，4，5 背景颜色都设置为红。

prev()：

prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。

语法：
.prev(selector)

一招鲜@Q

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JQuery：overflow、 <dl> 、data()、 siblings() 、prev()

记录项目中碰到的几个前端方法，属性。overflow：visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。&lt;dl&gt;:&lt;dl&gt;...
复制链接

扫一扫