js层级选择框样式（JS选择框）

发布时间：2023-12-08

js层级选择框样式（JS选择框）

更新：2022-11-08 21:23

本文目录一览：

  1. 如何用JS选中下拉框选项
  2. js层次选择器div+one 这个+号代表什么
  3. jQuery层次选择器用法示例
  4. 用js怎么设置单元格的边框
  5. 如何用js实现select下拉框里是树形结构，可复选，select框中传复选所有值？如下图所示。
  6. js如何设置excle表格边框的样式...

如何用JS选中下拉框选项

  1. 打开vscode，创建一个H5规范的页面，用于演示js如何给下拉框设置默认值。
  2. 在页面中添加一个下拉框，并在html中通过selected属性，默认选择下拉框的第2个值。
  3. 在浏览器中打开页面，就可以看到这个下拉框默认选中的第二个下拉值。
  4. 在页面顶部引入jquery，由于本文将jquery和页面放在同一级目录，所以，直接使用了jquery文件名引用。如果不在同一级目录，引入的路径需要有层级。
  5. 在页面底部，添加jquery代码，使用.val()方法，在页面文档加载后，就马上修改下拉框的默认选中值为第三个值。此时是不管html的标签中selected属性原来是标记在哪一个选项的，都会改成新的值。
  6. 在浏览器中打开页面，这个时候就会看到，下拉框的默认值已经变成了第三个选项。
  7. 如果想要通过下拉框的显示值来设置默认选中项，就需要使用类似下面的语法：
$("#sltDef").find("option:contains('第4个选项')").attr("selected", true);

js层次选择器div+one 这个+号代表什么

就是选择紧接在div后面的类名为one的元素，用通俗的话来说就是选择和你年龄最接近的那个弟弟。比如：

<div>这是年龄和你最接近的哥哥</div>
<div>这是你</div>
<p class="one">这是年龄和你最接近的弟弟，它会被div+.one选中</p>
<p class="one">这是年龄更小的弟弟，它不会被选中</p>

jQuery层次选择器用法示例

本文实例讲述了jQuery层次选择器用法。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>2-5</title>
  <!-- 引入jQuery -->
  <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
  <script src="js/assist.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script type="text/javascript">
    $(document).ready(function(){
      // 选择body内的所有div元素
      $('#btn1').click(function(){
        $('body div').css("background","#bbffaa");
      });
      // 在body内选择元素名是div的子元素
      $('#btn2').click(function(){
        $('body > div').css("background","#bbffaa");
      });
      // 选择所有class为one的下一个div元素
      $('#btn3').click(function(){
        $('.one + div').css("background","#bbffaa");
      });
      // 选择id为two的元素后面的所有div兄弟元素
      $('#btn4').click(function(){
        $('#two ~ div').css("background","#bbffaa");
      });
    });
  </script>
</head>
<body>
  <h3>层次选择器</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked" />
  <label for="isreset">点击下列按钮时先自动重置页面</label>
  <br />
  <br />
  <input type="button" value="选择 body内的所有div元素" id="btn1" />
  <input type="button" value="在body内,选择子元素是div的" id="btn2" />
  <input type="button" value="选择所有class为one的下一个div元素" id="btn3" />
  <input type="button" value="选择id为two的元素后面的所有div兄弟元素" id="btn4" />
  <br />
  <br />
  <!-- 测试的元素 -->
  <div class="one" id="one">id为one,class为one的div
    <div class="mini">class为mini</div>
  </div>
  <div class="one" id="two" title="test">id为two,class为one,title为test的div.
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
  </div>
  <div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
  </div>
  <div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
  </div>
  <div style="display:none;" class="none">style的display为"none"的div</div>
  <div class="hide">class为"hide"的div</div>
  <div>包含input的type为"hidden"的div
    <input type="hidden" size="8" />
  </div>
  <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

效果图： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery选择器用法总结》、《jQuery操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jQuery常见经典特效汇总》 希望本文所述对大家jQuery程序设计有所帮助。

用js怎么设置单元格的边框

直接换是不可以的 关于单元格的线形还是颜色，这些都是先选择线的粗细然后再加边框，(必须有个去边框的过程不然直接修改是不可以的) 具体过程如下： 单元你想要改的单元格 → 右键 → 设置单元格格式 → 边框 → 然后你点一下无边框那个 → 然后选择线的样式或者粗细 → 然后点外边框 → 这样就可以了 希望能帮助到你

如何用js实现select下拉框里是树形结构，可复选，select框中传复选所有值？如下图所示。

首先说树形结构，国内有个开源的js控件叫zTree，支持复选。 然后下拉框你可能需要自己做一个（html输入框+右边的一个图标按钮）。 最后，用一个隐藏的div把树形结构包起来，这个div设置成绝对定位，在下拉框右侧选择按钮的单击事件处理函数里，显示这个隐藏的div，并把它的位置设置成在下拉框下面就行了。 思路就是这样，要么楼主可以找找有没有其他更现成的控件，extjs4我记得有类似的，但是他的复选功能不太符合中国习惯，也许现在的版本改好了，你可以查查试试看。

js如何设置excle表格边框的样式...

请尝试 oXL.Selection.Borders.Weight = 2; 来设置边框, 1表示最细边框,2表示细边框,4表示粗线。 对于更粗的,可以尝试通过 oXL.Selection.Borders.LineStyle = 1; 来表示,具体线型: 1 实线, -4115 虚线, 4 点划相间线, 5 划线后跟两个点, -4118 点式线, -4119 双线。 以上信息是根据excel自带的vb文档找到的,VB下测试正常, 没有在JS下测试。

推荐文章