我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JS中如何使用选择器及属性、方法

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JS中如何使用选择器及属性、方法

这篇文章将为大家详细讲解有关JS中如何使用选择器及属性、方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

选择器、属性及方法调用的配合使用:

<style>
      #a{
        width: 200px;
        height: 100px;
        background-color: red;
        
      }
      .b{
        width: 200px;
        height: 100px;
        background-color: green;
        
      }
      .div1{
        width: 200px;
        height: 100px;
        background-color:aqua;
      }
    </style>

  <body>
    <div id="a"></div>
    <div class="b" ></div>
    <div class="b" ></div>
    <div class="div1">精英教育</div>
    <input type="text" name="ipt1" />
    <input type="checkbox" name="ckb2" / disabled="disabled">
  </body>
  
  <script>
    //先选择元素在进行加效果
    //ID选择器(使用较高JS)
    var a = document.getElementById("a");
    //检测类型
    alert(typeof(document.getElementById("a")))
    
    a.style.backgroundColor="royalblue";
    
    a.innerHTML ="<span>hello<span>";
    a.innerText = "<span>hello<span>";
//    class选择器
    var b_class = document.getElementsByClassName("b");
    b_class[0].style.backgroundColor="red";
    
    var b_class = document.getElementsByClassName("b");
    b_class[1].style.backgroundColor="blueviolet";
//    标签选择器
    var b_b = document.getElementsByTagName("div");
    b_b[1].style.backgroundColor="yellow";
    
    var div_1 = document.getElementsByName("ipt1");
    div_1[0].value="文本框";
    
    var ckb2 = document.getElementsByName("ckb2")[0];
    ckb2.setAttribute("checked","");
  //移除属性
    ckb2.removeAttribute("disabled")
    
  //创造元素
   var a = document.createElement("a");
   a.setAttribute("href","http://www.baidu.com");
   a.innerText="百度一下";
   
   document.body.appendChild(a);
   document.body.removeChild(a);
   
  div1.appendChild(a);
  
    
  </script>

<body>
    <!--DOM  Document Object Model
    BOM  Bowers O M-->
    <div id="div1" class="div1"></div>
    <div class="div1"></div>
    <input type="text" name="ipt1" />
    <input type="checkbox" name="ckb1" disabled="disabled"/>
  </body>
</html>
<script>
//  alert('1111');
//  window.alert('123')
  var div1 = document.getElementById('div1');
  div1.style.backgroundColor = 'red';
//  div1.innerHTML = "<ul><li>123456</li></ul>";
  div1.innerText = "<ul><li>123456</li></ul>";
  
  
  var div1_class = document.getElementsByClassName('div1');
  div1_class[1].style.backgroundColor = "green";
  
  var div1_1 = document.getElementsByTagName('div');
  div1_1[1].style.backgroundColor = "blue";
  
//  jQuery
  var div1_2 = document.getElementsByName('ipt1');
  div1_2[0].value = '123';
  
  var ckb1 = document.getElementsByName('ckb1')[0];
//  ckb1.setAttribute("checked","checked");
  ckb1.removeAttribute('disabled');
  
  var a = document.createElement("a");
  a.setAttribute("href","http://www.baidu.com");
  a.innerText = "百度";
  
  document.body.appendChild(a);
  document.body.removeChild(a);
  
  div1.appendChild(a);
</script>

关于“JS中如何使用选择器及属性、方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JS中如何使用选择器及属性、方法

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JQUERY的属性选择符和自定义选择符使用方法(二)

属性选择符就是通过HTML元素的属性选择元素。如获取所有链接的TITLE属性,可以用$('a[title]')
2022-11-21

如何使用CSS属性值正则匹配选择器

这篇文章给大家分享的是有关如何使用CSS属性值正则匹配选择器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。属性值正则匹配选择器包括下面3种:[attr^="val"][attr$="val"][attr*="va
2023-06-08

css如何强制使用属性选择器显示空链接

小编给大家分享一下css如何强制使用属性选择器显示空链接,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!强制使用属性选择器显示空链接这对于通过CMS插入的链接特别有
2023-06-27

css中:not()选择器的使用方法

这篇文章主要介绍css中:not()选择器的使用方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css的基本语法是什么css的基本语法是:1、css规则由选择器和一条或多条声明两个部分构成;2、选择器通常是需要改变
2023-06-14

JS中Object.assign方法如何使用

今天小编给大家分享一下JS中Object.assign方法如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、基本语法
2023-07-02

Vue3中的计算属性及侦听器如何使用

这篇文章主要介绍“Vue3中的计算属性及侦听器如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue3中的计算属性及侦听器如何使用”文章能帮助大家解决问题。计算属性我们知道,在模板中可以直接通
2023-07-06

dw中css选择器nthchild的使用方法

这篇文章主要介绍dw中css选择器nthchild的使用方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!CSS3中选择器:nth-child()该怎么使用呢?1、在新建的html文件中,建立几个相同的标签,比如建立
2023-06-08

编程热搜

目录