首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将此Jquery函数重写为普通Javascript

的意思是将使用Jquery库的代码改写为纯Javascript代码,不再依赖Jquery库。下面是一个示例的Jquery函数和对应的普通Javascript重写版本:

Jquery函数:

代码语言:txt
复制
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

普通Javascript重写版本:

代码语言:txt
复制
document.addEventListener("DOMContentLoaded", function(){
    var buttons = document.getElementsByTagName("button");
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", function(){
            var paragraphs = document.getElementsByTagName("p");
            for (var j = 0; j < paragraphs.length; j++) {
                paragraphs[j].style.display = "none";
            }
        });
    }
});

在普通Javascript版本中,我们使用了document.addEventListener来监听页面加载完成的事件,替代了Jquery中的$(document).ready()。然后,我们使用document.getElementsByTagName来获取所有的按钮元素,并使用addEventListener为每个按钮添加点击事件监听器。在点击事件处理函数中,我们使用document.getElementsByTagName获取所有的段落元素,并通过修改style.display属性将它们隐藏起来。

这样,我们就将原本使用Jquery的代码重写为了普通Javascript代码,实现了相同的功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

探索 JavaScript 函数:普通函数、箭头函数和生成函数

JavaScript的动态领域中,函数是基本构建块,赋予开发者高效组织和执行代码的能力。理解普通函数、箭头函数以及相对较新的生成器函数之间的微妙差异,对于编写整洁、简明和高效的代码至关重要。...本文将深入探讨每种函数类型,探索它们的语法、行为和使用场景。普通函数:普通函数,也被称为传统函数或函数声明,在 JavaScript 自早期以来就一直是重要组成部分。...提升:普通函数会被提升,意味着它们可以在代码中被声明之前调用。this 绑定:普通函数内部的 this 值在运行时动态确定,取决于函数的调用方式。...普通函数的使用广泛且适用于各种场景,使其成为 JavaScript 开发的重要组成部分。箭头函数:箭头函数是在 ECMAScript 6(ES6)中引入的,与普通函数相比,它们提供了更简洁的语法。...生成器函数适用于处理异步操作、惰性求值以及需要高效生成值序列的场景。结论:总之,理解普通函数、箭头函数和生成器函数之间的差异对于编写有效的 JavaScript 代码至关重要。

18800
  • 详解javascript中的即时函数,内部函数,能重写自身的函数即时函数内部函数返回函数的函数能重写自己的函数小结

    在上篇谈到匿名函数和回调函数的基础上,我们接着介绍javascript中的即时函数,内部函数,返回函数的函数,能重写自身的函数等几种常见的函数类型及使用方法。...所以,一般来说即时函数通常用来执行一次性的操作或者异类初始化的任务。 内部函数 从上一篇文章中,我们显然知道,在javascript中,函数与其他类型的值在本质上是一样的,函数本身也是一种值。...能重写自己的函数 我们可以在一个函数的内部重定义该函数。...有两种方法,一是将函数的返回值赋予函数本身,同样是前面那个例子 a = a(); 只要执行上面一句代码,显然a酒杯重新定义为他自己的返回函数了。...请注意,返回值中是不带括号的,因此该结果仅仅是一个函数的引用,并不会产生函数的调用。 由于这里执行语句是以var a = 开头的所以我们这里也使用了能重写自己的函数

    1.6K11

    【C++】STL 算法 ① ( STL 算法相关头文件 | 函数对象 仿函数 简介 | 函数调用操作符 | 重写函数调用操作符的类 | 函数对象 与 普通函数区别 )

    文章目录 一、STL 算法相关头文件 二、函数对象 / 仿函数 简介 1、函数对象 / 仿函数 博客回顾 2、函数调用操作符 3、函数对象 / 仿函数 - 重写函数调用操作符的类 4、函数对象 与 普通函数区别...fun(){} 调用 fun 函数 , 其中 函数名 " fun " 后面的 括号 " () " 就是 函数调用操作符 ; fun(); 3、函数对象 / 仿函数 - 重写函数调用操作符的类 " 函数对象...因为 编译器可以进行内联优化 ; 普通函数 : 英文名称 " Ordinary Functions " ; 定义 : 普通函数 是 C++ 言 中的 重要组件 , 通过函数名后跟括号和参数列表来调用...; 效率 : 普通函数通常 没有额外的函数调用开销 , 但在某些情况下 , 编译器可能无法对它们进行内联优化 ; 5、函数对象 与 普通函数 使用场景 函数对象 与 普通函数 使用场景 : 函数对象...: 如果 调用 多个函数 , 每个函数需要保持各自的状态 , 此时需要使用 函数对象 ; 普通函数 : 如果只需要 执行 一个简单的 , 无状态的 , 一次性的 函数调用 操作 , 此时推荐使用 普通函数

    30610

    jQuery ajax - ajax() 方法jQuery ajax - ajax() 方法

    如果需要发送同步请求,请将此选项设置为 false。 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。...使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。...在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。 jsonp 类型:String 在一个 jsonp 请求中重写回调函数的名字。...用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。...数据类型 $.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML,那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。

    14.5K30

    jquery中ajax参数详解

    如果需要发送同步请求,请将此选项设置为 false。 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。...使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。...在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。 jsonp 类型:String 在一个 jsonp 请求中重写回调函数的名字。...用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。...数据类型 $.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML,那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。

    2.1K30

    Web-第四天 jQuery学习

    Web-第四天 jQuery学习 jQuery基础入门1 今日内容介绍 重写javascript案例:弹出广告 重写javascript案例:隔行换色 重写javascript案例:全选/全不选 今日内容学习目标...第1章 重写弹出广告 1.1 案例分析 重写javascript案例“弹出广告” 1.2 案例相关的函数 1.2.1 jQuery概述 1.2.1.1 什么是jQuery jQuery是一个JavaScript...及jQuery对象只能使用自己的函数 DOM对象转换成jQuery对象,语法:jQuery(dom对象) jQuery对象转换成DOM对象,语法:$username[index] //1 原生javascript...基础入门2 今日内容介绍 重写javascript案例:省市联动 重写javascript案例:左右选择 重写javascript案例:表单校验 今日内容学习目标 能够使用jQuery为标签添加属性或样式...能够为指定标签添加子标签或兄弟标签 学会给标签绑定事件 第7章 省市联动 7.1 案例分析 重写javascript案例“省市联动” 7.2 案例相关的函数 本案例需要对标签的value属性值,标签体内容进行操作

    3.5K40

    $.ajax()方法参数详解

    async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。...如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。          ...使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个 “?”为正确的函数名,以执行回调函数。           text:返回纯文本字符串。...data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。            ...jsonp:要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。 该值用来替代在"callback=?"

    1.1K10

    $.ajax常用用法

    async:默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。...如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。...使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。 text:返回纯文本字符串。...data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。            ...jsonp:要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"

    11210

    【JavaScript】内置对象 - Date 日期对象 ① ( Date 对象简介 | 使用构造函数创建 Date 对象 | 构造函数参数为时间戳 | 构造函数参数为空 | 构造函数参数为字符串 )

    Date 日期对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date...一、Date 日期内置对象 1、Date 对象简介 JavaScript 的 Date 内置对象用于处理日期和时间 , 该 Date 内置对象 提供的 一系列 方法 可用于执行各种日期和时间相关的操作...Date 对象 1、构造函数参数为空 使用 new Date(); 构造函数 创建 Date 对象 , 该构造函数中没有参数 , 则会返回当前的时间 ; 代码示例 : // 创建 Date...Jan 01 1970 08:00:00 GMT+0800 (中国标准时间) console.log(date); 执行结果 : 3、构造函数参数为字符串 使用 new Date(dateString...// 输出 : Sun Dec 17 1995 03:24:00 GMT+0800 (中国标准时间) console.log(date); 执行结果 : 4、构造函数参数为多个数字值 使用

    50410

    jquery中ajax参数说明

    4.async:  要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。...script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。...使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。 text:返回纯文本字符串。...17.jsonp: 要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"...: $.each()函数不同于JQuery对象的each()方法,它是一个全局函数,不操作JQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。

    2.1K80

    jQuery封装的AJAX使用

    async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。...可用的类型如下: xml:返回XML文档,可用JQuery处理。 html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。 script:返回纯文本JavaScript代码。...使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。 text:返回纯文本字符串。...data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。...jsonp:要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"

    2.9K60
    领券