如何使用jQuery按name属性选择元素?

给定一个HTML文档,如何使用jQuery按name属性选择元素?下面本篇文章就来给大家介绍一下使用jQuery按name属性选择元素的方法,希望对大家有所帮助。

原文地址:如何使用jQuery按name属性选择元素?

在jQuery中,可以使用2个方法通过name属性选择元素;下面就来通过示例来介绍一下。

方法1:使用name属性选择器

name属性选择器可用于按name属性选择元素。此选择器选择值与指定值完全相等的元素。

语法:

[name="nameOfElement"]

示例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

  </head> 

  <body>

    <center>

        <p> 下面的文本框中有 <b>name属性 'address'.</b>

            <form>

                <textarea rows="4" cols="40" name="address"></textarea>

            </form>

        </p>

        <p> 下面的文本框中有 <b>name属性 'area'.</b>

            <form>

                <input type="text" name="area">

            </form>

        </p>

        <p>单击按钮,隐藏name为“area”的input输入框</p>

        <button onclick="selectByName()">隐藏</button>

        <script src="https://code.jquery.com/jquery-3.3.1.min.js">

        </script>

        <script type="text/javascript">

            function selectByName() {

                element = $('[name="area"]');


                //hide the element

                element.hide();

            }

        </script>

    </center>

</body>

</html>

输出:

方法2:使用javascript按名称获取元素并将其传递给jQuery

可以使用javascript getElementsByName()方法选择所需的元素,并将其传递给jQuery函数,以进一步用作jQuery对象。

语法:

selector = document.getElementsByName('nameOfElement');

element = $(selector);

示例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

  </head> 

  <body>

    <center>

        <p> 下面的文本框中有 <b>name属性 'address'.</b>

            <form>

                <textarea rows="4" cols="40" name="address"></textarea>

            </form>

        </p>

        <p> 下面的文本框中有 <b>name属性 'area'.</b>

            <form>

                <input type="text" name="area">

            </form>

        </p>

        <p>单击按钮,隐藏name为“address”的文本框</p>

        <button onclick="selectByName()">隐藏</button>

        <script src="https://code.jquery.com/jquery-3.3.1.min.js">

        </script>

        <script type="text/javascript">

            function selectByName() {

                selector = document.getElementsByName('address');

                element = $(selector);

                // hide the element

                element.hide();

            }

        </script>

    </center>

</body>

</html>

输出:

推荐阅读:

php服务器

php5下载

layui框架

帝国cms视频教程

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,278评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,933评论 0 1
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,408评论 0 7
  • jQuery模块 选择器、DOM操作、事件、AJAX与动画 匿名函数自执行 作用:解决命名空间与变量污染的问题 总...
    青青玉立阅读 4,451评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,162评论 0 3

友情链接更多精彩内容