jQuery是一个Javascript库，考虑添加Javascript标记。 jQuery是一个流行的跨浏览器JavaScript库，它通过最小化浏览器之间的差异来促进文档对象模型（DOM）遍历，事件处理，动画和AJAX交互。标记为jquery的问题应该与jquery相关，因此有问题的代码应该使用jquery，并且至少需要jquery与用法相关的元素。
在 php8 / bootstrap 5.1.3 / jquery 3.6.1 应用程序中使用最新版本的 coloris( https://coloris.js.org/ ) 我的表单上有几个 coloris 元素定义为 在 php8 / bootstrap 5.1.3 / jquery 3.6.1 应用程序中使用最新版本的 coloris( https://coloris.js.org/ ) 我的表单上有几个 coloris 元素定义为 <input type="text" id="accent_color" name="accent_color" class="form-control" value="{{ $accentColor }}" data-coloris> 我有一个js函数用代码清除这些coloris元素： jQuery('#accent_color').val(''); 它可以工作，但是在右侧有一个矩形元素 （如示例页面中的绿色块https://coloris.js.org/examples.html）使用当前颜色 - 此代码不会清除它。 如何清除这个矩形元素？ https://github.com/mdbassit/Coloris#manually-updating-the-thumbnail 当触发输入事件时，颜色缩略图会更新 相邻的输入字段。如果您以编程方式更新 输入字段，您可能需要使用手动触发事件 以下代码： document.querySelector('#color-field').dispatchEvent(new 事件('输入', { bubbles: true })); 简而言之，如果您使用 javascript 更改 input 元素的值，您还应该调度 input 事件来更新最新选择的颜色的预览： const colorpicker = document.querySelector('[data-coloris]'); colorpicker.value = ''; colorpicker.dispatchEvent(new Event('input', { bubbles: true }));
在 jQuery 中，您可以通过在 mousedown 处理程序中使用 event.preventDefault 来阻止 打开其下拉菜单，从而允许您在仍然 的情况下用其他内容替换下拉菜单 在 jQuery 中，您可以通过在 <select> 处理程序中使用 event.preventDefault 来阻止 mousedown 打开其下拉菜单，从而允许您用其他内容替换下拉菜单，同时仍保留表单元素的原始样式。 这在 Chrome 和 MSIE 中工作正常，但在 Firefox 和 Opera 中无论如何都会出现下拉菜单（未在 Safari 中测试）。 示例：http://jsfiddle.net/9cmEh/ 选择元素应该看起来已启用，并且仍然像已启用一样响应所有用户交互，但不应呈现下拉列表。相反，下拉列表将被替换为自定义呈现的内容，例如包括颜色样本、图标或字体，但“自定义下拉列表”部分已经在我的项目中完成。 有人知道如何在所有*浏览器中实现此功能吗？ “全部”表示所提到的五个浏览器的最新版本。 $(function() { $('select').on('focus', function(e) { this.blur(); window.focus(); }); }); 小提琴 至少可以在 Firefox 中使用，但似乎在 Chrome 中不起作用？ 编辑 我无法想出一种合适的方法来检测一种方法是否有效，所以用一些浏览器嗅探来代替。这并不是最好的方法，但却是我能想到的最好的方法，而且它似乎在我测试过的浏览器中有效： $(function() { $('select').on('focus mousedown', function(e) { if ($.browser.webkit||$.browser.msie) { e.preventDefault(); }else{ this.blur(); window.focus(); } }); }); 你的这个 //e.stopPropagation works only in Firefox. if (event.stopPropagation) { event.stopPropagation(); event.preventDefault(); } 来自这里链接，这可能对歌剧情况有所帮助，这是一个略有不同的问题，但你也许能够让它发挥作用 在大多数情况下，这应该适用于单击和焦点（带选项卡）： $('select').on('focus mousedown', function(e){ e.stopPropagation(); e.preventDefault(); this.blur(); window.focus(); }); 这是一个已知错误：https://bugzilla.mozilla.org/show_bug.cgi?id=392863 目前它位于 firefox ESR32 中。 如果像我一样，您在自定义 HTML/Javascript 选择下有一个 hidden <select>，并且仍然希望 将焦点保持在隐藏的 <select> 上（用于辅助功能、选项卡导航、箭头、输入...）。 只需使用z-index: -1。 .hidden-select { position: absolute; opacity: 0; filter: alpha(opacity=0); z-index: -1; } 禁用未选定的元素（选项）。 $('选择选项:not(:selected)').attr("禁用",true);
我在我的网站上使用 OpenWeatherMap 的 API 来仅在一页中显示某些特定地点的天气状况。 这是代码： <p>我在我的网站上使用 OpenWeatherMap 的 API 来仅在一页中显示某些特定地点的天气状况。 这是代码：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script src="https://code.jquery.com/jquery-3.0.0.js"></script> <body> <input type="hidden" name="name" value="dehradun" id="cityName"> <button onclick="getWeather()">Get weather of Dehradun</button> <div class="weatherResponse"></div> <br><br> <input type="hidden" name="name" value="pune" id="cityName"> <button onclick="getWeather()">Get weather of Pune</button> ' <div class="weatherResponse"></div> <br><br> <script> function getWeather() { $('.weatherResponse').html(''); var cityName = $('#cityName').val(); var apiCall = 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&mode=json&units=metric&appid=<apikey>'; $.getJSON(apiCall, weatherCallback); function weatherCallback(weatherData) { var cityName = weatherData.name;; var country = weatherData.sys.country; var description = weatherData.weather[0].description; var temp = weatherData.main.temp; $('.weatherResponse').append("The Weather in " + cityName + " " + country + " is currently " + description + " with temperature: " + temp); } } </script> </body></code></pre> </div> </div> <p></p> <p>假设如果我想使用相同的Javascript函数显示两个地方的天气状况，那么它对两个地方（代码中首先提到的地方（Dehradun））显示相同的结果。 </p> <p>帮我解决这个问题。</p> </question> <answer tick="true" vote="0"> <p><strong>您可以将城市名称和div（显示结果）作为函数参数传递</strong></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> function getWeather(cityName, className) { $('.'+className+'').html(''); var apiCall= 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&mode=json&units=metric&appid=d3d913fca612366a61837ea39a622480'; $.getJSON(apiCall,weatherCallback); function weatherCallback(weatherData) { var cityName= weatherData.name;; var country= weatherData.sys.country; var description= weatherData.weather[0].description; var temp= weatherData.main.temp; $('.'+className+'').append("The Weather in " + cityName + " " + country + " is currently " + description + " with temperature: " + temp); } }</code></pre> <pre><code><script src="https://code.jquery.com/jquery-3.0.0.js"></script> <body> <button onclick="getWeather('dehradun','wr1')">Get weather of Dehradun</button> <br><br> <div class="wr1"></div> <br><br> <button onclick="getWeather('pune','wr2')">Get weather of Pune</button> <br><br> <div class="wr2"></div> <br> </body></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>我粗略地添加了下面的工作代码，当您单击一个按钮时，它会在两个文本中显示该城市的是否报告，尝试单击两个按钮并看一下：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script src="https://code.jquery.com/jquery-3.0.0.js"></script> <body> <input type="hidden" name="name" value="dehradun" id="cityName2"> <button onclick="getWeather('dehradun')">Get weather of Dehradun</button> <div class="weatherResponse"></div> <br><br> <input type="hidden" name="name" value="pune" id="cityName1"> <button onclick="getWeather('pune')">Get weather of Pune</button> <br><br> <div class="weatherResponse"></div> <script> function getWeather(cityName){ $('.weatherResponse').html(''); var apiCall= 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&mode=json&units=metric&appid=d3d913fca612366a61837ea39a622480'; $.getJSON(apiCall,weatherCallback); function weatherCallback(weatherData){ var cityName= weatherData.name;; var country= weatherData.sys.country; var description= weatherData.weather[0].description; var temp= weatherData.main.temp; $('.weatherResponse').append("The Weather in " + cityName + " " + country + " is currently " + description + " with temperature: " + temp); } } </script> </body></code></pre> </div> </div> <p></p> </answer> </body></html>
我希望公开页面上显示的电话号码受到保护。示例将电话号码字符转换为 HTML 实体，机器人无法获取纯文本形式的号码。让我知道技巧。
我正在寻找解决方案， 我的表格在每个选定列的顶部都有复选框。 我想通过单击一个复选框来单击“选中”列中的所有TD。 到目前为止小提琴： $(':
我有一个返回 0.28 的 php 脚本。然后使用 AJAX 将其提取到 HTML，并插入到跨度中。问题是，它插入了 5 个空格，并且似乎是换行符。那么 jQuery...
我尝试在按下按钮后立即发送 GET 请求。由于我对 HTML 和 JQuery/Ajax 缺乏经验，所以我对如何做到这一点有点困惑。我的代码如下 ...
Jquery 中有没有名为 followFrom() 的函数？
我有一个脚本，我发现它需要一个图像ID并让图像滚动直到这里设定的限制-（2550像素），jQuery中是否有任何名为followFrom的函数，其中告诉图像要...
我有以下代码。 店铺名称 我有以下代码。 <div class="form-group"> <label for="store_account_name">Store Title</label> <input type="text" value="" class="form-control" name="store_account_name" id="store_account_name" placeholder="Please insert store title of the external store" required /> </div> <div class="form-group"> <label for="store_url">Store URL</label> <input type="url" value="" class="form-control" name="store_url" id="store_url" placeholder="Please insert store URL as described in help section" required /> </div> 在提交按钮上，我想检查表单是否经过验证。我有一个监听器事件，其中有 PreventDefault 按钮。所以我想仅当这两个输入都成功验证时才发送 ajax 调用。是否有任何 JS 函数来检查验证状态或任何 css 属性添加到无效字段。 您应该使用表单的 onsubmit 事件。听起来您正在监听提交按钮的点击事件，这是不正确的。 表单的提交事件仅在表单有效时才会触发。如果表单无效，HTML5 验证规则将阻止此事件触发。 jsFiddle 演示 $('#myform').submit(function(e){ e.preventDefault(); // do ajax now console.log("submitted"); }); 根据您的评论，我认为这就是您正在寻找的- 在“onsubmit”的“form”属性上调用函数。在该函数中，进行验证，然后如果字段有效则进行 ajax 调用，否则无效。 试试这个功能： $("input[type='submit']").click(function () { var form = $(this).parents("form:first"); form.submit(function (e) { if(e.result){ // validate submitted successfully according to html validation // ajax here } }); }); 如果您将 php 和 json 用于您的计划，那么它会像其他伟大的项目一样清晰且回答良好。 如果表单提交给客户端，则返回结果，如果不通过 json 抛出错误。
我在使用 jQuery 删除元素所需的内容时遇到问题。 例如下面的编码，我想删除类中的 required ，但是 jquery 不起作用： 我在使用 jQuery 删除元素所需的内容时遇到问题。 例如下面的编码，我想删除类中的required，但jquery不起作用： <div class="form-group" id="hidden_other" style="display:none;"> <input class="form-control required" id="other_model" name="other_model" title="Other Model" placeholder="Please fill in other model"> </div> jquery $("#other_model").removeAttr("required"); 希望有人能指导我如何解决。谢谢。 您正在寻找 removeClass(class) 方法，而不是 removeAttr(attr) 方法。这应该可以解决问题： $("#other_model").removeClass("required") 您需要作为一个类，所以，您应该使用下面的代码 $('#other_model').removeClass('required'); 如果你使用 required 作为属性，就像下面这样 <input class="form-control" id="other_model" name="other_model" title="Other Model" placeholder="Please fill in other model" required> 这将强制输入，要删除此内容，您应该使用以下代码。 $('#other_model').prop('required',false); 希望这会有用。 您需要先添加required属性才能移动它。 这是从输入中删除它的示例。 const field = $('#test'); console.log('Is Required', !!field.attr('required')); field.removeAttr('required'); console.log('Is Required', !!field.attr('required')); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="test" required="true" /> 相反，如果您只是想删除 class required，您只需执行 $.removeClass('required');
jQuery 单击以检查它是否具有某个类的 div，然后更改不同类的值
我正在编写的代码适用于一个应用程序，您可以在其中选择一个图标，然后显示 CSS 行，以便您可以轻松地复制粘贴它并将其用于另一个项目。我遇到了麻烦...
当我搜索用户名“a”时，它仅获取前 5 个用户名并显示“正在加载更多结果...”，但它没有加载，当我调试它时，页面参数不会增加，它只是保持 1 ...
在我的代码中，我有经典的引导手风琴手风琴，我想在单击时更改展开的 ul/li 的宽度（减小宽度），现在有 h5 的全宽度，任何人都可以帮忙吗？ 在我的代码中，我有经典的引导手风琴手风琴，我想在单击时更改展开的 ul/li 的宽度（减小宽度），现在有 h5 的全宽度，任何人都可以帮忙吗？ <div class="panel-group" id="accordion"> <div class="panel" > <a data-toggle="collapse" data-parent="#accordion" href="#divListCiagniki"> <h5>ciągniki</h5> </a> <div id="divListCiagniki" class="panel-collapse collapse" style="width:50%"> <ul class="panel-body" > <li>example</li> <li>example</li> <li>example</li> </ul> </div> </div> <div class="panel"> <a data-toggle="collapse" data-parent="#accordion" href="#divListMaszynyRolnicze"> <h5>maszyny rolnicze</h5> </a> <div id="divListMaszynyRolnicze" class="panel-collapse collapse "> <div class="panel-body"> <ul> <li>example</li> <li>example</li> <li>example</li> <li>example</li> <li>example</li> <li>example</li> <li>example</li> <li>example</li> </ul> </div> </div> </div> 如果您需要减小 ul/li 标签的宽度， 使用 <div id="divListCiagniki" class="panel-collapse collapse" style="width:<Required width>; overflow:hidden;"> //overflow：隐藏隐藏超出宽度的文本。 我建议使用这样的东西： li:active { width: 80% !imporant; } 记得使用!important覆盖bootstrap样式 我的意思是更改 div id 的宽度：divListCiagniki 或 divListMaszynyRolnicze 但不幸的是上面的两个技巧都不起作用
我有一个 ul 定义如下 在我的 javascript 中，我使用 jquery 将 li 项目添加到此 ul $("mylist").append("测试 我有一个 ul 定义，如 <div> <ul id="mylist"> </ul> </div> 在我的 javascript 中，我使用 jquery 将 li 项目添加到此 ul $("mylist").append("<li>Test</li>"); 我希望我的 ul 自动向下滚动 div 到我添加了很多 li 项目并且 ul 超过为其定义的高度时 我尝试过的事情： 在CSS中我为ul设置了max-height和overflow-y:scroll 在 Javascript 中我做了 $("mylist li").last().focus(); 点击这个JS小提琴。它会对你有帮助。 Jquery： $('.add').click(function(){ $("#mylist").append("<li>Test</li>"); $('#mylist').animate({scrollTop: $('#mylist').prop("scrollHeight")}, 500); }); HTML： <div> <ul id="mylist"></ul> <button class="add">Add li</button> </div> CSS： #mylist { width: 100px; height: 200px; padding: 20px; background-color: #eeeeee; overflow-y: auto; } 这也可以在 Vanilla JS 中完成，不需要 JQuery： items = document.querySelectorAll(".dummy"); last = items[items.length-1]; last.scrollIntoView(); 另请参阅下面的片段： //this adds the new element at the bottom button = document.querySelector("button") button.onclick = function() { list = document.querySelector("#mylist"); var li = document.createElement("li"); li.textContent = "Added with Vanilla JS" list.appendChild(li); //this jumps to the last element on the bottom items = document.querySelectorAll(".dummy"); console.log(items); last = items[items.length-1]; last.scrollIntoView(); } #mylist { max-height: 200px; overflow-y: auto; } .dummy { min-height: 80px; background-color: lightgrey; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button>Add</button> <div> <ul id="mylist"> <li class="dummy">Test</li> <li class="dummy">Test</li> <li class="dummy">Test</li> <li class="dummy">Test</li> <li class="dummy">Test</li> </ul> </div> 我使用 jQuery animate 来实现平滑滚动。我只是向 ul 添加一些元素，然后滚动到 li 下的最后一个 ul 元素。 JS代码： $(function () { $("#mylist").append("<li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li>"); $('div').animate({ scrollTop: $("#mylist li").last().offset().top }, 'slow'); }); HTML 代码： <div> <ul id="mylist"></ul> </div> 现场演示@JSFiddle：http://jsfiddle.net/dreamweiver/0Lofm4mL/1/ 尝试类似的事情 $('button').click(function() { var $last = $("<li>Test</li>").appendTo("#mylist"); $("#mylist").stop().animate({ scrollTop: $last.offset().top }, '500', 'swing', function() {}); }) #mylist { max-height: 200px; overflow-y: auto; } .dummy { min-height: 80px; background-color: lightgrey; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button>Add</button> <div> <ul id="mylist"> <li class="dummy">Test</li> <li class="dummy">Test</li> <li class="dummy">Test</li> <li class="dummy">Test</li> <li class="dummy">Test</li> </ul> </div> 一个更简单的答案如下： function setItem(){ // We go through all items and change the value of the id attribute to empty $('#mylist li').each(function (i, v) { $(v).attr('id', ''); }); // We add the items $('#mylist').append('<li id="last">test</li>'); // Currently there is only one identifier called "last" window.location.href = '#last'; } #mylist{ overflow-y: scroll; height: 100px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="setItem();">Add</button> <div id="mylist"></div> 使用listNode.lastElementChild.scrollIntoView() 有一种简单的方法可以做到这一点： container = $('MyElement').get(0); container.scrollTop = (container.scrollHeight + container.offsetHeight);
我有一个使用asp.net core 3.1 MVC的项目。 它包含一个带有禁用选择的表单。 我有一个使用asp.net core 3.1 MVC的项目。 它包含一个带有禁用选择的表单。 <div class="col-12 mb-3"> <select asp-for="SelectableItem" class="multi-select form-control" id="selectedItem" disabled="disabled" required="required"> <option value="">-- Select Item --</option> </select> <span asp-validation-for="SelectableItems" class="text-danger"></span> </div> 完全渲染的 html <select class="multi-select form-control" id="selectedItem" disabled="" required="required" data-val="true" data-val-required="Selected Item is required" name="SelectedItem"> <option value="">-- Select Item --</option> </select> 此选择将被禁用，直到用户选中一个框，然后填充选择元素并启用它，因为内容取决于已选择的复选框。 当用户尝试提交表单时，JQuery.Validation.Unobtrusive 的验证会验证除禁用字段之外的所有内容，因为该字段是必需的，但我也希望对其进行验证。 我只希望为该一种表单启用它，因此并不是整个应用程序中所有禁用的元素，但似乎无法让它工作。 我尝试了以下方法及其一些变体。 $('form').validator.setDefaults({ignore: null}) $('form').data('validator').settings.ignore = ""; $('form').validator.setDefaults({ignore: []}) $('#selectableItem').Validate().settings.not('[disabled]') 这些似乎都没有做任何事情，禁用的选择拒绝验证，并且所有其他建议（例如只读）不适用于选择元素，我也不希望它被全局允许，因为这会弄乱其他一些形式。 如果您确实想验证所有禁用的表单字段，则插件中的相关行是： .not( ":submit, :reset, :image, :disabled" ) 按照以下步骤操作： 在您的项目中找到jquery.validate.js并打开它。 按 Ctrl+F 找到包含 disabled 的行，然后对此行进行注释（或者您可以删除此行中的 :disabled）： 如果你使用默认的ASP.NET Core项目，记得更改_ValidationScriptsPartial.cshtml文件，因为这个视图添加了jquery.validate.min.js的引用，但是你修改了jquery.validate.js（如果你仍然想使用min.js） ，请阅读 docs 并了解如何捆绑和缩小静态资源）： <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> //change here... <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script> 这是一个工作演示： 模型（添加[Required]属性）： public class Test { [Required] //add this public string SelectableItem { get; set; } } 查看（删除 required="required" 属性值对）： @model Test <form method="post"> <input type="checkbox" /> <div class="col-12 mb-3"> <select asp-for="SelectableItem" class="multi-select form-control" id="selectedItem" disabled="disabled"> <option value="">-- Select Item --</option> </select> <span asp-validation-for="SelectableItem" class="text-danger"></span> </div> <input type="submit" value="Create" /> </form> @section Scripts { @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} <script> $(document).ready(function () { $('input:checkbox').change(function () { if (this.checked) { //add to select list $("#selectedItem").append($("<option></option>") .attr("value", "1") .text("aa")); $("#selectedItem").append($("<option></option>") .attr("value", "2") .text("bb")); $("#selectedItem").append($("<option></option>") .attr("value", "3") .text("cc")); // $("selectedItem").prop('required', true); $("#selectedItem").removeAttr('disabled'); } else { //remove item from select list $("#selectedItem").empty().append($("<option></option>") .attr("value", "") .text("-- Select Item --")); $("#selectedItem").prop('disabled', true); } }); }); </script> } 结果：
我目前正在 http://davidpetersson.nu/madartwork/ 工作 我想将帖子中的内容加载到我的起始页上的 div 中。这有效。有点儿。 我有一个特定的 div 和一个点击事件...
使用 D3.js（IE、safari 和 chrome）创建 SVG 后如何保存/导出 SVG 文件？
我目前有一个使用 D3 的网站，我希望用户可以选择将 SVG 保存为 SVG 文件。我使用 crowbar.js 来执行此操作，但它仅适用于 chrome。 Safari 没有发生任何事情...
我创建了一个多页表单（5 页） - 每页都有单选输入，每页只能进行一个选择（所有字段都标记为必填）。大多数答案都会被分配一个“产品”，有些
我收到一个 Json 数组作为 ajax 调用的响应，我想立即将此 Json 数组数据发布到另一个页面并重定向到该页面。有谁知道我该怎么做 $.post("