精华内容
下载资源
问答
  • js标签选择器
    千次阅读
    2021-07-08 14:33:10

    一、原生js的选择器

    1.首先如果你的dom元素有id值的话大多数浏览器支持直接使用的方法比如

    <div id="box">
    
    
    
    </div>
    <script>
    box.onclick=function(){//可以直接调用id为box的dom元素
        console.log(1111)
    }
    
    </script>

    2.如果没有id值的话有多种选择的方法

    let box=document.getElementById("这里是dom元素的id值");
    let box=document.getElementsByClassName("这里是class值")//注意返回的是数组元素
    let box=document.getElementsByTagName("这里是标签名")//注意返回的是标签名的所有值可能是数组
    querySelector():返回文档中匹配指定css选择器的第一个元素
    querySelectorAll():返回文档中匹配指定css选择器的所有元素
    getElementsByName(name): 返回文档中name属性为name值的元素,因为name属性值不是唯一的,所以查询到的结果有可能返回的是一个数组,而不是一个元素。

    以上是原生js的选择器

    二、jQuery选择器

    内容
    基本选择器有ID选择器、类选择器、标签选择器、通用选择器,事件的添加方法如下:
    $(...).事件名(function() { });
    属性样式有:

        $(...).css("border","1px solid red")
        $(...).css({...})
        $(...).css("border")
        $(...).attr(属性名,值)
        $(...).html() innerHTML
        $(...).text() innerText
        $(...).val() value值
        $(...).addClass()增加
        $(...).removeClass() 移除
        $(...).toggleClass()开关**

    $("#box")//这里选择的是一个id为box的元素
    $(".box")//这里选择的是一个class为box的元素
    $("#box ul")//这里选择的是一个id为box的元素里面的所有ul元素
    $(".box ul")//这里选择的是一个class为box的元素里面的所有ul元素
    $("*")//可以使用此方法选中所有的元素
    $("div")//这里是选中了所有的div元素


     

    更多相关内容
  • JS标签选择器以及节点操作

    万次阅读 2019-03-19 15:21:21
    JS的DOM开始当然是从选择器开始的,小编这边先做一个归类。 一、DOM选择器 document代表整个文档这边就省略他的开头了 1. getElementById( ) //显然是用作与获取id来获取标签(实战中不常用) 2....

    JS的DOM开始当然是从选择器开始的,小编这边先做一个归类。

    一、DOM选择器

    document代表整个文档这边就省略他的开头了

    1. getElementById( )     //显然是用作与获取id来获取标签(实战中不常用)

    2.getElementByTagName( )     //通过标签类型来获取节点(常用)

    3.getElementByClassName( )    //类名获取

    4.querySelector( )       //内部放的是可以跟css选择器一样的格式但选取的是静态的(选取的那一刻之后更改了源头这个还是不会变)

    二、节点操作

    网页之中不可能所有的标签都是用选择器选出来的嘛那么小编这边在介绍一下节点操作,节点分为元素节点和节点,节点包含文本之类的这边也不做介绍,感兴趣可以去看一下。

    元素节点:

    1.parentElement( )     //返回引用对象父节点

    2.children( )               // 返回子元素节点集

    3.firstElementChild / lastElementChild       //返回 第一 \ 最后 子元素节点

    4.nextElementSibling / previousElementSibling    //返回上一个 / 下一个兄弟元素节点

    上述都是基于对象选择下面是一些基于文档的增查删改:

    1.creatElement( )    //创建元素节点 

    2.appendChild( )     //插入元素节点,插入顺序跟数组方法push一样,如果是操作页面中本身有的属性则相当于剪切

       insertBefore(a,b)      // 把a节点元素插到b前面

    3.parent.removeChild()    //通过父级选取元素节点删除

       child.remove( )           //删除自身

    4.parent.replaceChild(new , orgin)     //通过父级选择替换    

    节点的一些属性:

    1.nodeName      //节点名称

    2.nodeVaule      //文本节点内容可读写

    3.nodeType       //文本属性值(这边罗列几个常见的)

    可以用作判断。

    4. innerHTML     //往对象标签中添加内容,注意都是基于html文件的所以说在里面写的内容相当于直接加到html文档之中所以也 可以去写一些标签进去可以实现效果。

    5. setAttribute(属性名,属性值)     // 我们通过这样的方法可以给标签加属性,可以是自建属性。

        getAttribute(属性名)        //获取属性值

    展开全文
  • 获取所有符合条件的标签,所以返回值是数组 //标签选择器 var divArray=document.querySelectorAll("div"); console.log(divArray); //class选择器 var c1Array=document.querySelectorAll(".c1"); console.log(c1...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<div id="one"></div>
    		<div class="c1"></div>
    		<h1 class="c1"></h1>
    		<a href="###">哈哈哈哈</a>
    		<div class="box">
    			<a href="###">京东</a>
    			<a href="###">淘宝</a>
    		</div>
    	</body>
    </html>
    <script type="text/javascript">
    	//通过css选择器获取标签
    	//1.获取所有符合条件的标签,所以返回值是数组
    	//标签选择器
    	var divArray=document.querySelectorAll("div");
    	console.log(divArray);
    	//class选择器
    	var c1Array=document.querySelectorAll(".c1");
    	console.log(c1Array);
    	//后代选择器
    	var aArray=document.querySelectorAll(".box a:first-child");
    	console.log(aArray);
    	//2.只获取符合条件的第一个标签
    	//所以返回值就是具体的标签对象
    	var a=document.querySelector(".box a");
    	console.log(a);
    	var one=document.querySelector("#one");
    	console.log(one);
    </script>
    

    运行结果:
    在这里插入图片描述

    展开全文
  • 文章目录jQuery基本选择器js选择器(原生选择器) jQuery基本选择器 1. ID选择器 ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对象。 使用公式:$("#id") 示例:$("#box")...

    jQuery基本选择器

      1. ID选择器
                ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对象。
                使用公式:$("#id")
                示例:$("#box")    //获取id属性值为box的元素
                <input id='box'/>
    
      2. 元素选择器
                元素选择器是根据元素名称匹配相应的元素。
                元素选择器指向的是DOM元素的标记名,也就是说元素选择器是根据元素的标记名选择的。
                使用公式:$("element")
                示例:$("div")    //获取所有div元素
                <div></div>
    
     3.类名选择器
                类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。
                使用公式:$(".class")
                示例:$(".box")     //获取class属性值为box的所有元素
                <p class="box"></p>
    
      4.复合选择器
                复合选择器将多个选择器(可以是ID选择器、元素选择器或是类名选择器)组合在一起,两个选择器之间以逗号","分隔,
                只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集
                利用jQuery索引器可以取得集合中的jQuery对象。
                注意:多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个匹配的元素合并后一起返回。
                使用公式:$("selector1,selector2,......,selectorN")
                selector1:一个有效的选择器,可以是ID选择器、元素选择器或类名选择器等
                selector2:另一个有效的选择器,可以是ID选择器、元素选择器或类名选择器等
                selectorN:(可选择)任意多个选择器,可以是ID选择器、元素选择器或类名选择器等
                示例:$("div,#btn")    //要查询文档中的全部的<div>元素和id属性为btn的元素
    
       5.通配符选择器
            $("*")   //取得页面上所有的DOM元素集合的jQuery包装集
    

    js选择器(原生选择器)

    JS选择器的主要作用
           JS选择器主要用来获取HTML页面中的元素,将页面中的元素保存到一个对象中
           然后就可以对这些对象的属性值进行相应操作以实现一些动态效果,以达到页面的生动,易用。
           需要注意的一点是操作的一定是对象,直接将元素当做对象使用是不行的。
           
           JS选择器是将对象对应的元素的属性直接进行操作,所以其改变的style的值是直接改变行间样式
           优先级远高于CSS样式,所以使用时应注意与已经完成的CSS样式的取舍。
    
    js中原生的选择器主要有以下四种
    document.getElementById()
    document.getElementsByClassName()
    document.getElementsByName()
    document.getElementsByTagName()
    
    1.document.getElementById()
    Id选择器
    通过Id属性来获取对象
    HTML部分
    
    	<div id="div1">这是一个div标签</div>
    JS部分
    	var d1 = document.getElementById("div1")
    
    
    2.document.getElementsByClassName()
    ClassName选择器
    通过ClassName属性获取对象
    HTML部分
    	<div class="c1">这是一个div标签</div>
        <p class="c1">这是一个p标签</p>
        <a class="c1">这是一个a标签</a>
        <span class="c1">这是一个span标签</span>
    JS部分
    	var c1 = document.getElementsByClassName("c1")
    	
    类名选择器获取到的是HTMLCollection对象,它是一个类似于数组的对象
    如果需要选择具体的某一个Element对象,则需要做类似于取数组元素的操作,如下(以取第一项为例):
     	var c1 =  document.getElementsByClassName("div1")[0]
    
    3.document.getElementsByTagName()
    TagName选择器
    通过元素名称来获取对象
    HTML部分
    	<ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    JS部分
    	var li = document.getElementsByTagName("li")
    TagName选择器获取到的内容与ClassName选择器一样,是HTMLCollection对象
    所以,如果需要选择具体的某一个Element对象,也需要做类似于取数组元素的操作,如下(以取第一项为例):
    	var li = document.getElementsByTagName("li")[0]
    
    4.document.getElementsByName()
    Name选择器
    通过Name属性来获取对象
    HTML部分
    	<form action="" name="xx">
            <input type="radio" name="xx" value="1">1
            <input type="radio" name="xx" value="2">2
            <input type="radio" name="xx" value="3">3
        </form>
    JS部分
    	 var form = document.getElementsByName('xx')
    Name选择器主要用于form标签等需要name属性的标签的获取,获取到的是NodeList对象
    此类对象与HTMLCollection对象相似,所要获取的具体对象操作也类似于数组,如下:
    	var form = document.getElementsByName("xx")[0]
    
    展开全文
  • .getElementsByTagName(“tagname”)tag标签选择器; .getElementsByClassName(“.classname”).class名选择器 示例代码: <!DOCTYPE html><html><head><meta charset="utf-8"><title>...
  • 文章目录CSS基础选择器CSS基础选择器的作用选择器的分类标签选择器类选择器类选择器-多类名id 选择器id 选择器 和 类选择器的区别*通配符选择器基础选择器的总结: CSS基础选择器 CSS基础选择器的作用 选择器(选择...
  • JavaScript dom基础篇之标签选择器

    千次阅读 2019-07-25 13:17:24
    <script type="text/javascript"> var btn = document.getElementsByTagName('button'); var div= document.getElementsByClassName('content'); for(var i=0;i;i++){ //循环给每一个按钮绑定一个事件 (function...
  • vue 组件标签里面套组件 Vue标签选择器 (vue-tag-selector) A simple tag selector as a vue component. 一个简单的标签选择器作为vue组件。 Vue-tag-selector is a component for vuejs for tag type fields. ...
  • JS中如何使用选择器选择多个元素

    千次阅读 2021-06-12 00:42:18
    在jQuery中,可以使用以逗号(,)分隔的元素选择器列表--多个元素选择器,或*选择器来选择多个元素。多个元素选择器可用于选取多个元素,需要使用逗号分隔每个元素。*选择器选取文档中的所有元素,包括 html、head 和...
  • 简单选择器简单选择器是es6类,用于创建易于设置样式的选择输入。 “简单选择器”将创建一个HTML模板来代替您的标准标记。 使用webpack yarn安装会添加简单选择器用法<select name =“ my-select” id =“ ...
  • 标签选择器】 <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <!-- 标签选择器 --> <h1>清平调</h1> <h3>李白</h3> <script> $...
  • vue+iview地址选择器

    2020-08-07 16:46:09
    vue全国地址选择器(带省市区json数据),支持华东华北等大区选择,下载直接就可以放在项目使用,记得好评。
  • css常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,我们一起来看看吧! 一. 通配符选择器 通配符选择器常用' * '号表示,他是所有选择器里作用范围最广的,能匹配...
  • js的各种选择器

    千次阅读 2019-12-31 16:05:47
    Js选择器总结 一、原生JS选择器# JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll() A: getElementById(ID): ...
  • js选择器

    2017-11-01 10:51:58
    ![这里写代码片](http://img.blog.csdn.net/20171101105142427?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjQ1NTY3MDc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
  • JS仿JQuery选择器功能

    2020-11-27 19:50:34
    JQuery作为应用最广的JS库,其最强大的功能之一就是几乎涵盖所有方法的且代码十分简短的选择器功能,我们也可用自己的代码实现此功能,代码逻辑、使用方法与JQuery一致 function ZQuery(arg){ this.elements = [];...
  • 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 3. 标签选择器 根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置。 示例代码 <style type=...
  • jquery系列教程1-选择器全解jquery基本选择器jquery基本选择器,包括id选择器、class选择器、标签选择器、通配符选择器,同时配合选择器的空格、逗号等语法,可以实现大部分需要的选择功能。 代码如下:$("#myid");...
  • CSS——标签选择器,类选择器

    千次阅读 2020-06-26 21:04:00
    文章目录选择器(重点)CSS基础选择器标签选择器(元素选择器)类选择器类选择器小案例小案例 制作一个简易Google图标 选择器(重点) 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这...
  • 什么是元素选择器? 什么是元素选择器? 用过jquery的开发者都知道,jquery封装了对元素的查找功能,即通过jquery的api获取页面元素的过程,该过程只需提供一个元素选择的条件字符串即可获取相应的满足条件的页面...
  • javascript getElementByTagName的使用 .dd1{ color:#FF0000; } .dd2{ color:blue; } dfdfd dfdfd dfdfd [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
  • jquery选择器   --> //窗体一加载就会执行$后的方法 $(function(){ var mytable=$("#mytable");   alert(mytable.html()); var ulNode=$(".main"); alert(ulNode.html()); var p=$("p"); ...
  • 1、id选择器 #box{ } #box{ ................. } 特点:每一个标签只能有一个ID。 2、类选择器 .类名{ } .box{width: 100px;height: 100px;background: blue} .box2{border:5px solid ...
  • JavaScript中各种选择器

    千次阅读 2020-08-09 16:52:28
    标签选择器 $(“p”).css(“color”,“blue”); //3.id选择器 id属性赋值要求唯一 # $("#a").css(“font-weight”,“bold”); //4.类选择器 class属性赋值可以重复 . $(".b").css(“font-style”,“italic”); //5....
  • 基于Vue实现多标签选择器

    千次阅读 2019-09-22 21:14:31
    -- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --> <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> --> < style > .not-active { display : ...
  • jquery选择器简述

    2020-11-24 01:11:11
    其中,参数element,表示待查找的HTML标记名,如$(“div”),标签选择器获取元素的方式是高效的,因为它继承自javascript中的getEmelentsByTagName,它获取的是整个元素的集合。 2.ID选择器 $(“id”) 其中,参数id...
  • css选择器标签选择器和id选择器

    千次阅读 2017-02-09 18:26:54
    一,标签选择器<!DOCTYPE html> <title>08-css标签选择器.html</title> <!-- 标签选择器,根据指定的标签名称,找到当前界面所有的该名称的标签,然后设置属性 1,格式: 2,注意点:
  • 概述 ...CSS 选择器有很多,大致可分为:基础...标签选择器(就是标签的名字) 所有的标签,都可以是选择器。比如 div、span、ul、li、dt、dl、dd、input 等 无论这个标签藏的多深,一定能够被选择上 标签选择器,...
  • 标签颜色选择器 我自己学习的另一个标签插件。 与其他插件的区别在于每个标签上的颜色选择器。 工作正在进行中 此插件正在开发中,我需要通过以下方法对其进行改进: 使用Bower创建软件包(依赖项,易于安装,...)...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 219,802
精华内容 87,920
关键字:

js标签选择器