jQuery_标签_开发者

博客(392)
视频(0)
论坛(0)
云声(0)
代码示例(0)

[技术干货] 用自写的jQuery库+Ajax实现了省市联动功能(附实例代码)【转载】

1. 省市联动：在网页上，选择对应的省份之后，动态的关联出该省份对应的市。选择对应的市之后，动态地关联出城市对应的区。2. 设计数据库表123456789101112131415t_area （区域表）id(PK-自增) code name pcode---------------------------------------------1 001 河北省 null2 002 河南省 null3 003 石家庄 0014 004 邯郸 0015 005 郑州 0026 006 洛阳 0027 007 江苏 null8 008 南京 007 将全国所有的省、市、区、县等信息都存储到一张表当中。采用的存储方式实际上是code pcode形势。3. 这里只是一个模拟，所以建的数据库是不完整的，想要完整的数据库，可以去网上找。4. 上代码（1）自写的jQquery库12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849function jQuery(selector){ // selector可能是#id，也可以是其他的选择器，例如类选择器：.class if(typeof selector == "string"){ if (selector.charAt(0) == '#') { domObj = document.getElementById(selector.substring(1)); return new jQuery(); } } if(typeof selector == "function"){ window.onload = selector; } this.html = function(htmlStr){ domObj.innerHTML = htmlStr; } this.click = function(fun){ domObj.onclick = fun; } this.val = function(v){ if (v == undefined) { return domObj.value; }else{ domObj.value = v; } } this.change = function(fun){ domObj.onchange = fun; } // 静态的方法：发送ajax请求 jQuery.ajax = function(jsonArgs){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (this.readyState == 4) { if (this.status == 200) { var jsonObj = JSON.parse(this.responseText); jsonArgs.success(jsonObj); } } } if (jsonArgs.type.toUpperCase() == "POST") { xhr.open("POST",jsonArgs.url,jsonArgs.async); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") xhr.send(jsonArgs.data); } if (jsonArgs.type.toUpperCase() == "GET") { xhr.open("GET",jsonArgs.url + "?" + jsonArgs.data,jsonArgs.async); xhr.send(); } }}$=jQuery;（2）html文件（Ajax请求）1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用ajax实现省市联动</title></head><body><script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script><script type="text/javascript">$(function(){ // 发送ajax请求，获取所有的省份，省份的pcode是null $.ajax({ type: "get", url : "/ajax/listArea", data : "t=" + new Date().getTime(), async : true, success:function(jsonArr){ var html = "<option value=\"\">--请选择省份--</option>"; for (var i = 0; i < jsonArr.length; i++) { var area = jsonArr[i]; html += "<option value=\""+area.code+"\">"+area.name+"</option>" } $("#province").html(html) } }) // 只要change发生，就发送ajax请求 $("#province").change(function(){ $.ajax({ type: "get", url : "/ajax/listArea", data : "t=" + new Date().getTime()+ "&pcode="+this.value, async : true, success:function(jsonArr){ var html = "<option value=\"\">--请选择市--</option>"; for (var i = 0; i < jsonArr.length; i++) { var area = jsonArr[i]; html += "<option value=\""+area.code+"\">"+area.name+"</option>" } $("#city").html(html) } }) })})</script><select id="province"></select><select id="city"></select></body></html>（3）servlet文件（后端）12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182package com.bjpowernode.ajax.servlet; import com.alibaba.fastjson.JSON;import com.bjpowernode.ajax.bean.Area;import jakarta.servlet.ServletException;import jakarta.servlet.annotation.WebServlet;import jakarta.servlet.http.HttpServlet;import jakarta.servlet.http.HttpServletRequest;import jakarta.servlet.http.HttpServletResponse; import java.io.IOException;import java.sql.*;import java.util.ArrayList; /** * 动态获取所有的省份 */@WebServlet("/listArea")public class ListAreaServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 连接数据库，获取所有的对应区域，最终响应一个JSON格式的字符串给WEB前端 Connection conn = null; PreparedStatement ps = null; ResultSet rs= null; ArrayList<Area> areas = new ArrayList<>(); String pcode = request.getParameter("pcode"); String sql; try { Class.forName("com.mysql.cj.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=UTF-8"; String user = "root"; String password = "1234"; conn = DriverManager.getConnection(url,user,password); if (pcode == null){ sql = "select code,name from t_area where pcode is null"; ps = conn.prepareStatement(sql); }else{ sql = "select code,name from t_area where pcode = ?"; ps = conn.prepareStatement(sql); ps.setString(1,pcode); } rs = ps.executeQuery(); while (rs.next()) { String code = rs.getString("code"); String name = rs.getString("name"); Area area = new Area(code, name); areas.add(area); } } catch (ClassNotFoundException e) { throw new RuntimeException(e); } catch (SQLException e) { throw new RuntimeException(e); } finally{ if (rs != null) { try { rs.close(); } catch (SQLException e) { throw new RuntimeException(e); } } if (ps != null) { try { ps.close(); } catch (SQLException e) { throw new RuntimeException(e); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { throw new RuntimeException(e); } } } response.setContentType("text/html,charset=UTF-8"); String json = JSON.toJSONString(areas); response.getWriter().print(json); } }

赫塔穆勒 发表于2025-07-24 17:04:54 2025-07-24 17:04:54 最后回复 DevFeng 2025-07-31 17:04:08
34 7

jQuery
[技术干货] js封装成插件的步骤方法

本篇文章主要介绍了js封装成插件的步骤方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧由于项目原因，工作一年多还没用js写过插件，项目太成熟，平时基本都是在使用已经封装好的功能插件。感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件，所以就去网上学习了下如何封装.....虽然之前看了很多源码，但是感觉就算了解也是野路子.....什么是封装呢？我的理解就是把一个功能单独做成一个组件，就像做饺子，以前做饺子必须自己先用面粉做饺子皮，再做饺子馅，然后再手工包饺子，但是现在人们发明了自动包饺子机器，虽然机器里面的每一步骤和你自己包饺子是一样的，但是实际上你现在需要做的就只有一件事，就是放原料。这边机器就是封装好的插件，而原料就是你要传的参数为什么要把js功能封装成插件呢？我觉得有以下几点吧　　1、便于代码复用　　2、避免各个相同功能组件的干扰，可能会有作用域的一些问题吧　　3、便于维护，同时利于项目积累　　4、不觉得一直复制粘贴很low么.......我在网上看到的封装好像有两种，一种是js的原生封装，一种是jquery的封装。这边我先讲一下原生封装吧。我们在封装的时候会把js代码放到一个自执行函数里面，这样可以防止变量冲突。1234567(function(){ ...... ...... }()} 然后再创建一个构造函数123456789(function(){ var demo = function(options){ ...... } }()) 把这个函数暴露给外部，以便全局调用123456(function(){ var demo = function(options){ ...... } window.demo = demo;}())其实现在你可以直接调用了，封装好了，虽然没实现什么功能1234var ss = new demo({ x:1, y:2})；或者1234new demo({ x:2, y:3})；然后传参怎么搞呢，我们一个插件一般有一些必选参数或者可选参数，在我看来可选参数不过就是在插件里面给了默认值罢了。我们传的参数会覆盖插件中的默认参数，可以用$.extend({})覆盖12345678910111213141516171819(function(){ var demo = function(options){ this.options = $.extend({ "x" : 1, "y" : 2, "z" : 3 },options) } window.demo = demo; }()) 然后你可以在在初始化构造函数的时候执行一些操作12345678910111213141516171819(function(){ var demo = function(options){ this.options = $.extend({ "x" : "1", "y" : "2", "z" : "3" },options); this.init(); }; demo.prototype.init = function(){ alert("x是"+this.options.x+" y是"+this.options.y+" z是"+this.options.z); }; window.demo = demo;}());new demo({ "x" :"5", "y" :"4"});</script>就是这样了。一个超级简单的封装我这边有个疑问，extend只是jquery有吗，js对象有什么代替方法吗？晚点在看看............. 还有需要提的是封装js的时候我们要考虑周全，比如它的扩展性和兼容性，还有性能怎么样，还有没必要的就不需要封装了......要有选择性。现在网上已经完成的插件数不胜数，而且功能又十分强大，但是恰恰是这点，有的时候一个很大的插件我们只用到很小的一部分，那么就需要我们自己修改成适合我们自己的了，而且有些项目的风格和现在的插件风格也不同，所以关键是要适合自己的项目。以上就是本文的全部内容，希望对大家的学习有所帮助转载自https://www.jb51.net/article/123369.htm

加油O幸福 发表于2022-03-28 22:35:11 2022-03-28 22:35:11 最后回复加油O幸福 2022-03-28 22:35:11
392 0

jQuery
[技术干货] 【转载】Python 前端开发之jQuery动画效果

【文章的来源（华为云社区）】一、jQuery动画效果jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。1、显示动画方式一：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。$("div").show();方式二：通过控制元素的宽高、透明度、display属性，逐渐显示，例如：3秒后显示完毕。$('div').show(3000);方式三：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。$("div").show("slow");参数说明：slow 慢：600ms normal 正常：400ms fast 快：200ms方式四：动画执行完后，立即执行回调函数。//show(毫秒值，回调函数; $("div").show(5000,function () { alert("动画执行完毕！"); });总结：上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。2、隐藏动画方式参照上面的show()方法的方式。如下： $(selector).hide(); $(selector).hide(1000); $(selector).hide("slow"); $(selector).hide(1000, function(){});练习：实现点击按钮显示盒子，再点击按钮隐藏盒子实现点击按钮显示盒子，再点击按钮隐藏盒子：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 200px; height: 200px; background-color: green; border: 1px solid red; display: none; } </style> </head> <body> <div id="box"> </div> <button id="btn">隐藏</button> </body> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> //jquery 提供了一些方法 show() hide() 控制元素显示隐藏 var isShow = true; $('#btn').click(function(){ if(isShow){ $('#box').show('slow',function(){ $(this).text('盒子出来了'); $('#btn').text('显示'); isShow = false; }) }else{ $('#box').hide(2000,function(){ $(this).text(''); $('#btn').text('隐藏'); isShow = true; }) } }) </script> </html>3、开关式显示隐藏动画$('#box').toggle(3000,function(){});显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。代码如下：$('#btn').click(function(){ $('#box').toggle(3000,function(){ $(this).text('盒子出来了'); if ($('#btn').text()=='隐藏') { $('#btn').text('显示'); }else{ $('#btn').text('隐藏'); } }); })4、滑入和滑出1、滑入动画效果：（类似于生活中的卷帘门）:下拉动画，显示元素。$(selector).slideDown(speed, 回调函数);注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）2、滑出动画效果：上拉动画，隐藏元素。$(selector).slideUp(speed, 回调函数);3、滑入滑出切换动画效果：$(selector).slideToggle(speed, 回调函数);代码如下：示例：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; display: none; background-color: green; } </style> <script src="jquery-3.3.1.js"></script> <script> $(function () { //点击按钮后产生动画 $("button:eq(0)").click(function () { //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]); $("div").slideDown(2000, function () { alert("动画执行完毕！"); }); }) //滑出动画 $("button:eq(1)").click(function () { //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]); $("div").slideUp(2000, function () { alert("动画执行完毕！"); }); }) $("button:eq(2)").click(function () { //滑入滑出切换（同样有四种用法） $("div").slideToggle(1000); }) }) </script> </head> <body> <button>滑入</button> <button>滑出</button> <button>切换</button> <div></div> </body> </html>5、淡入淡出动画1、淡入动画效果：让元素以淡淡的进入视线的方式展示出来。 $(selector).fadeIn(speed, callback);2、淡出动画效果：让元素以渐渐消失的方式隐藏起来$(selector).fadeOut(1000);3、淡入淡出切换动画效果：通过改变透明度，切换匹配元素的显示或隐藏状态。$(selector).fadeToggle('fast', callback);参数的含义同show()方法。代码如下：示例：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; display: none; /*透明度*/ opacity: 0.5; background-color: red; } </style> <script src="jquery-3.3.1.js"></script> <script> $(function () { //点击按钮后产生动画 $("button:eq(0)").click(function () { // //淡入动画用法1: fadeIn(); 不加参数 $("div").fadeIn(); // //淡入动画用法2: fadeIn(2000); 毫秒值 // $("div").fadeIn(2000); // //通过控制透明度和display //淡入动画用法3: fadeIn(字符串); slow慢：600ms normal正常:400ms fast快：200ms // $("div").fadeIn("slow"); // $("div").fadeIn("fast"); // $("div").fadeIn("normal"); //淡入动画用法4: fadeIn(毫秒值，回调函数[显示完毕执行什么]); // $("div").fadeIn(5000,function () { // alert("动画执行完毕！"); // }); }) //滑出动画 $("button:eq(1)").click(function () { // //滑出动画用法1: fadeOut(); 不加参数 $("div").fadeOut(); // //滑出动画用法2: fadeOut(2000); 毫秒值 // $("div").fadeOut(2000); //通过这个方法实现的：display: none; // //通过控制透明度和display //滑出动画用法3: fadeOut(字符串); slow慢：600ms normal正常:400ms fast快：200ms // $("div").fadeOut("slow"); // $("div").fadeOut("fast"); // $("div").fadeOut("normal"); //滑出动画用法1: fadeOut(毫秒值，回调函数[显示完毕执行什么]); // $("div").fadeOut(2000,function () { // alert("动画执行完毕！"); // }); }) $("button:eq(2)").click(function () { //滑入滑出切换 //同样有四种用法 $("div").fadeToggle(1000); }) $("button:eq(3)").click(function () { //改透明度 //同样有四种用法 $("div").fadeTo(1000, 0.5, function () { alert(1); }); }) }) </script> </head> <body> <button>淡入</button> <button>淡出</button> <button>切换</button> <button>改透明度为0.5</button> <div></div> </body> </html>6、自定义动画语法：$(selector).animate({params}, speed, callback);作用：执行一组CSS属性的自定义动画。第一个参数表示：要执行动画的CSS属性（必选）第二个参数表示：执行动画时长（可选）第三个参数表示：动画执行完后，立即执行的回调函数（可选）代码如下：示例：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { position: absolute; left: 20px; top: 30px; width: 100px; height: 100px; background-color: green; } </style> <script src="jquery-3.3.1.js"></script> <script> jQuery(function () { $("button").click(function () { var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; var json2 = { "width": 100, "height": 100, "left": 100, "top": 100, "border-radius": 100, "background-color": "red" }; //自定义动画 $("div").animate(json, 1000, function () { $("div").animate(json2, 1000, function () { alert("动画执行完毕！"); }); }); }) }) </script> </head> <body> <button>自定义动画</button> <div></div> </body> </html>7、停止动画$(selector).stop(true, false);参数说明：第一个参数： true：后续动画不执行。 false：后续动画会执行。第二个参数： true：立即执行完成当前动画。 false：立即停止当前动画。PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。示例：鼠标悬停，弹出下拉菜单：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; margin: 100px auto 0; padding-left: 10px; background-color: pink; } .wrap li { background-color: green; } .wrap > ul > li { float: left; margin-right: 10px; position: relative; } .wrap a { display: block; height: 30px; width: 100px; text-decoration: none; color: #000; line-height: 30px; text-align: center; } .wrap li ul { position: absolute; top: 30px; display: none; } </style> <script src="jquery-3.3.1.js"></script> <script> //入口函数 $(document).ready(function () { //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。 var jqli = $(".wrap>ul>li"); //绑定事件 jqli.mouseenter(function () { $(this).children("ul").stop().slideDown(1000); }); //绑定事件(移开隐藏) jqli.mouseleave(function () { $(this).children("ul").stop().slideUp(1000); }); }); </script> </head> <body> <div> <ul> <li> <a href="javascript:void(0);">一级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> <li><a href="javascript:void(0);">二级菜单4</a></li> </ul> </li> <li> <a href="javascript:void(0);">二级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> <li><a href="javascript:void(0);">二级菜单4</a></li> </ul> </li> <li> <a href="javascript:void(0);">三级菜单1</a> <ul> <li><a href="javascript:void(0);">三级菜单2</a></li> <li><a href="javascript:void(0);">三级菜单3</a></li> <li><a href="javascript:void(0);">三级菜单4</a></li> </ul> </li> </ul> </div> </body> </html>上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。

泽宇-Li 发表于2020-06-24 08:08:16 2020-06-24 08:08:16 最后回复泽宇-Li 2020-06-24 08:08:16
1893 0

Python 前端 jQuery
[热门活动] Apache jQuery-File-Upload未经身份验证的任意文件上传漏洞（CVE-2018-9206）

一、概要近日研究人员发现apache jQuery-File-Upload <= v9.22.0中存在未经身份验证的任意文件上载漏洞（CVE-2018-9206）可以导致远程代码执行，该漏洞exp已被公布，建议涉及的用户尽快完成漏洞修复。jQuery-File-Upload是一个应用广泛的文件上传工具，该漏洞的主要原因为jQuery File Upload的安全限制被绕过，通过该漏洞攻击者可上传web shell进而造成远程命令执行，漏洞威胁等级为严重。参考链接：https://www.zdnet.com/article/zero-day-in-popular-jquery-plugin-actively-exploited-for-at-least-three-years/#ftag=RSSbaffb68二、漏洞级别漏洞级别：【严重】（说明：漏洞级别共四级：一般、重要、严重、紧急。）三、影响范围漏洞影响Apache jQuery-File-Upload 9.22.0及以下版本。四、安全建议官方已经在9.22.1更新中修复该漏洞，请及时更新。更新链接：https://github.com/blueimp/jQuery-File-Upload注意：修复漏洞前请将资料备份，并进行充分测试。

建赟 发表于2018-10-23 14:33:33 2018-10-23 14:33:33 最后回复建赟 2018-10-23 14:33:44
3893 1

Apache jQuery
【干货分享】使用 jQuery.i18n.properties 实现 Web 前端的国际化

jQuery.i18n.properties 简介 [color=rgb(51,51,51)]jQuery.i18n.properties 是一款轻量级的 jQuery 国际化插件。与 Java 里的资源文件类似，jQuery.i18n.properties 采用 .properties 文件对 JavaScript 进行国际化。jQuery.i18n.properties 插件根据用户指定的（或浏览器提供的）语言和国家编码（符合 ISO-639 和 ISO-3166 标准）来解析对应的以“.properties”为后缀的资源文件。 [color=rgb(51,51,51)]总的来说，jQuery.i18n.properties 有一下一些特点： 1.使用 Java 标准的 .properties 文件作为资源文件，资源文件命名有以下三种格式： basename_properties basename_language.properties basename_language_country.properties 2.使用 ISO-639 作为语言编码标准，ISO-3166 作为国家名称编码标准 3.按顺序加载默认资源文件和指定语言环境的资源文件，保证默认值始终可用 4.未指定语言环境时使用浏览器提供的语言 5.可以在资源字符串中使用占位符（例如：hello= 你好 {0}! 今天是 {1}。） 6.资源文件中的 Key 支持命名空间（例如：com.company.msgs.hello = Hello!） 7.支持跨行的值 8.可以以 JavaScript 变量（或函数）或 Map 的方式使用资源文件中的 Key jQuery.i18n.properties(settings) 选项描述类型可选？name资源文件的名称，例如 strings 或 [strings1,strings2]，前者代表一个资源文件，后者代表资源文件数组。String 或 String[]否path资源文件所在目录的路径String是mode加载模式：“vars”表示以 JavaScript 变量或函数的形式使用资源文件中的 Key，“map”表示以 Map 的方式使用资源文件中的 Key，“both”表示可以同时使用两种方式。如果资源文件中的 Key 包含 JavaScript 的关键字，则只能采用“map”。默认值是“vars”。String是languageISO-639 指定的语言编码（如：“en”表示英文、“zh”表示中文），或同时使用 ISO-639 指定的语言编码和 ISO-3166 指定的国家编码（如：“en_US”，“zh_CN”等）。如果不指定，则采用浏览器报告的语言编码。String是cache指定浏览器是否对资源文件进行缓存，默认为 false。boolean是encoding加载资源文件时使用的编码。默认为 UTF-8。String是callback代码执行完成时运行的回调函数function是

开发者学堂小助 发表于2017-08-29 15:14:51 2017-08-29 15:14:51 最后回复开发者学堂小助 2017-08-29 15:14:51
6038 0

前端 jQuery

推荐直播

热门标签

Java Python 数据结构数据库 Linux 机器学习网络任务调度 MySQL JavaScript