jquery form 不可用_【20201118】jQuery前端框架学习笔记

最新推荐文章于 2022-07-27 17:24:49 发布
最新推荐文章于 2022-07-27 17:24:49 发布
阅读量145 收藏
点赞数
文章标签： jquery form 不可用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_26820427/article/details/113579464
版权

1. 介绍

1.1 介绍

jQuery是一款非常流行的前端Javascript框架，jQuery相比原生的Javascript要更加简单、更加直观。jQuery除了简化JS代码之外，还提供了一系列的常用属性的获取，常用功能的封装。不仅如此，jQuery还将JS的事件处理封装的更加友好。最重要的是使用jQuery编写JS代码可以忘记各个浏览器之间的差异导致的兼容问题，让我们写起JS代码时候更爽！

jQuery还提供了一种封装方式，可以将一系列JS动态事件封装成为一个独立的控件。可以通过纯JS代码实现HTML的自定义控件目的。

强大的jQuery已经成为了大多数的网页必引入的JS框架，有了jQuery之后老前端工程师不再写原生JS代码，有了jQuery之后新前端工程师不再学原生JS代码。

2. 安装

2.1 下载

2.1.1 官网下载地址

https://jquery.com/download/

129d5cdf4803f1b234eb200828cd3cbe.png

发现死活下载不了，换用wget试试？

81ef2dd297948ad4eec11b5eb716a2a2.png额，这是什么情况？用npm试试？

be067a915e614413cdf3efa4270b623f.png终于成功了！

2.1.2 网盘下载地址

这里福哥给出一个网盘的下载地址，如果童鞋们下载不了，又不想(不会)使用npm下载的话，可以使用网盘下载。

链接: https://pan.baidu.com/s/1FrW544KjeqWvfNYP1VkIGw 提取码: m422

2.2 安装

既然jQuery是JS框架所以我们也把它放到js目录下面

c48aeb2aff3053f642e93a03dcf112ed.png

安装jQuery很简单，直接通过script标签引入到网页里即可。

<html><head>    <title>jQuery框架演示title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <script type="text/javascript" src="server->BASE_URI %>js/jquery.min.js">script>head><body>body>html>

3. 使用

3.1 选择器

在原生JS里定位一个元素需要使用document.getElementById、document.getElementsByClassName、document.getElementsByName、document.getElementsByTagName、document.querySelector等等这些方法，而JQ里可以使用选择器定位元素。

原生

class="row" style="width: 280px; background: #fff; padding: 12px; margin: 0 auto;"> <div class="col-sm-12"> <h3 class="m-t-none m-b">登录h3> <p>请输入正确的用户名和密码。p> <form name="form" class="form"> <div class="form-group"> <label>用户名label> <input type="text" name="user" class="form-control" /> div> <div class="form-group"> <label>密码label> <input type="password" name="pass" class="form-control" /> div> <div> <button class="btn btn-primary">登录button> div> form> div>div><script> var form = document.getElementsByClassName('form'); var text = document.getElementsByName('user'); var button = document.getElementsByTagName('button'); form[0].onsubmit=function () { alert('你好，'+document.getElementsByName('user')[0].value+'！'); return false; }; text[0].value = '鬼谷子叔叔'; setTimeout(function () { button[0].click(); });script>

jQuery

class="row" style="width: 280px; background: #fff; padding: 12px; margin: 0 auto;"> <div class="col-sm-12"> <h3 class="m-t-none m-b">登录h3> <p>请输入正确的用户名和密码。p> <form name="form" class="form"> <div class="form-group"> <label>用户名label> <input type="text" name="user" class="form-control" /> div> <div class="form-group"> <label>密码label> <input type="password" name="pass" class="form-control" /> div> <div> <button class="btn btn-primary">登录button> div> form> div>div><script> var form = $('.form'); var text = $('[name="user"]'); var button = $('button'); form.bind('submit',function () { alert('你好，'+$('[name="user"]').val()+'！'); return false; }); text.val('鬼谷子叔叔'); setTimeout(function () { button.click(); });script>

0fc295fe00dcea155e54103c4190131f.png

3.2 样式修改

使用原生JS修改元素的样式需要通过style这个集合，而JQ可以通过css方法完成一个或者多个样式的修改操作。

原生

<script>    $('[name="user"]').css({        backgroundColor:'#ccc',        color:'#ff6600',        fontSize:'16px'    }).val('鬼谷子叔叔');script>

jQuery

<script>    var user = document.getElementsByName('user');    user[0].style.backgroundColor = '#ccc';    user[0].style.color = '#ff6600';    user[0].style.fontSize = '16px';    user[0].value = '鬼谷子叔叔';script>

7a65f2fb2bf1c0827f5bbe4a2a500755.png

3.3 事件绑定

使用JQ的事件绑定可以大大简化编写代码的复杂程度，这里面原生JS的实现方法是通过addEventListener和removeEventListener函数实现，在JQ里换成了bind和unbind方法。

绑定事件

var user = $('[name="user"]');user.val('鬼谷子叔叔');user.bind('focus',function () {    $(this).css({color:'blue'});});user.bind('blur',function () {    $(this).css({color:'black'});});

清除单个事件

var user = $('[name="user"]');user.unbind('focus');user.unbind('blur');清除全部事件var user = $('[name="user"]');user.unbind();

4. 总结

今天童鞋们和福哥一起学习了jQuery框架的基本使用技巧，这里面只包括jQuery的元素选择、属性修改、事件绑定这些基本操作，后面福哥再专门开课教给大家使用jQuery开发自定义的控件。

【20201117】Bootstrap前端框架学习笔记

【20201116】HTML语言入门——标签样式

免费看文章，自己学技术

每一篇文章都是福哥一个字一个字地敲出来的，都是福哥原创的。

每一篇文章都是经过了福哥的反复验证的，都是可以正常使用的。

20a94f2b2dad3f2bbacd6f82ec52383d.png

6ee3373776b5492bd5b6cfcd76f2d3a3.png

奥尔斯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery 学习笔记 选择器之一
10-29
在本文中，我们将深入探讨jQuery中的选择器，这是jQuery库的核心功能之一，使得JavaScript操作DOM变得更为简单。jQuery选择器允许我们高效地选取DOM元素，然后执行一系列操作，如修改内容、添加样式或绑定事件。 ...
jQuery学习笔记[1] jQuery中的DOM操作
12-11
1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它. JavaScript中的getElementById(),getElementsByTagName()…等方法. 例如:使用DOM Core来获取表单对象的方法: document....
$(“#form“).submit()不起作用
Elizabeth_r的博客
04-26 2507
form表单 function里面用$(#form).submit失灵, 改成这种的就行了:varform=document.getElementById("form"); form.submit(); 原因：$("#form").submit()会去执行你定义在标记中的onsubmit="returnfasle" 而document.getElement...
jquery中提交form失败原因(非常见原因)
myGW_CSDN的博客
05-05 1083
由于本人是后台玩家，因为做毕设导致要自己写前端。于是就遇到了很多奇葩的问题。 问题: 之前由于不想让表单提交之后跳转，于是直接在form标签中使用了onsubmit="return false",结果在使用$("#form").submit()的时候死活提交不成功。 通常原因: 搜索的原因都是说不要将button标签的id或name设置成与标签名相同。例如id="submit"。结果检查之...
C#实现弹出一个对话框的同时，后面的form不可用
weixin_41883890的博客
07-27 369
form1点击按钮弹出对话框，对话框是用form实现的,命名为form2。想让form2弹出的同时form1变为不可用。当谈出来的时候还可以点击后面的form1。
jquery禁用form表单中所有的表单项
caizi1288的专栏
11-23 819
需要jquery支持，测试版本为jquery-1.7.2.min.js [code="java"] //禁用form表单中所有的input[文本框、复选框、单选框],select[下拉选],多行文本框[textarea] function disableForm(formId,isDisabled) { var attr="disable"; if(!i...
jQuery form表单美化实例代码.zip
最新发布
09-22
**jQuery Form 表单美化实例代码** 在网页开发中，用户界面的美观度与交互性是提升用户体验的关键因素之一，而表单作为用户与网站互动的重要桥梁，其设计尤为重要。`jQuery`，一个轻量级的JavaScript库，以其简洁的...
jQuery学习笔记之jQuery选择器的使用
10-28
1. `:enabled`：选择所有启用的表单元素，如`$("#form1 :enabled")`会选择表单id为"form1"的可用元素。 2. `:disabled`：选择所有禁用的表单元素。 3. `:checked`：选择所有被选中的复选框或单选按钮。 4. `:...
jQuery笔记1
08-08
本笔记主要探讨 jQuery 的基本选择器和层次选择器，这些是 jQuery 中最基础也是最常用的功能。 ### 一、基本选择器 1. **ID 选择器**：通过元素的 `id` 属性来定位特定的元素。使用 `$("#id")` 的形式，例如 `$("#...
jquery设置表单元素为不可用的简单代码
11-26
本章节通过简单的实例代码介绍一下如何将表单元素设置为不可用状态。 代码实例如下： <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//www.jb51.net/" /> <title>软件开发网</title> [removed][removed] [removed] $(function(){ $("#webnam
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
12-01
问题：最近使用 jqeury 的 validationEngine 做ajax校验，当表单中的最后一个字段需要做ajax验证时，此时在字段输入完毕后点击回车提交表单时不起作用，必须再按一次/点击submit按钮。 分析：通过个跟踪其源代码，最终发现ajax验证成功后也再次submit了表单，但还是不能真正提交表单。 原因：很诡异，因为我的提交表单按钮名字是submit。改掉就好了。 代码如下:<input id=”submit” type=”submit” class=”btn pull-left” value=”登录”>
几种设置表单元素中文本输入框不可编辑的方法总结
12-02
代码: 代码如下:<input type=”text” value=”fisker” onclick=”alert(this.value);” onfocus=”this.blur()” /> 输入框无法获得焦点，不能编辑 表单可以获得值。 可以复制。 蛮奇怪的，都选住了，还没有获得焦点？ 2,readonly 代码: <input type=”text” value=”fisker” onclick=”alert(this.value);” readonly /> 输入框只读。不能编辑 同样表单可以获得值。 也可以复制。 3,disabled 代码: 代码如下:<input t
[Jquery]设置表单元素不可用input disable
沧白
10-31 6386
Jquery1.5以前// 设置不可用 $("#inp1").attr("disabled", "disabled"); // 设置可用 $("#inp1").attr("disabled", "");Jquery1.5以后// 设置不可用 $("#inp1").attr("disabled", "disabled"); $("#inp1").attr("disabled", true); // 设
jquery.form.js失效问题。
weixin_34044273的博客
08-22 320
项目中引用 jquery.form.js插件。 打算用 .ajaxForm(options); 方式提交到后台，但是发现 .ajax 是可以正常交互的，但是 .ajaxform 就是不行。 首先 在form表单中，button的type问题。 form表单中，button 的 type 有三种值。 分别是： reset : 如...
jQuery控制form表单提交无效
嘟哝什么
07-12 4009
$(form).submit() 无效 查看form表单内部 是否有submit属性的button 如果有的话 jQuery是无法提交表单的 尝试改成type='button' 用onclick事件触发表单提交 这是一个小坑...
jquery如何让所有表单元素均为只读
热门推荐
julien71的博客
07-03 1万+
点击打开链接
Jquery学习笔记分享
11-24
JQuery是一个非常流行的 JavaScript 库，可以简化处理 HTML 文档、处理事件、处理动画等操作，并提供了易于使用和...希望这些 Jquery 学习笔记能够帮助大家更好地使用 JQuery，提高开发效率，实现更加出色的前端效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值