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

【前端基础篇】JavaScript之jQuery介绍

说明 text() 设置或返回所选元素的文本内容 html() 设置或返回所选元素的内容(包括 HTML 标签) val() 设置或返回表单字段的值 **这三个⽅法即可以获取元素的内容,⼜可以设置元素的内容...// 获取表单值 var inputValue = $("#inputId").val(); console.log(inputValue); // 打印出输入框的当前值 // 设置表单值 $("#...inputId").val("新值"); // 用户在 inputId 输入框中会看到值被更新为 "新值" css(): 获取或设置CSS属性,能够动态地改变元素的样式,是实现动态交互效果的重要工具。...#inputId 输入框时,背景颜色会变为黄色 blur(): 当元素失去焦点时触发,通常用于验证用户输入。...; }); // 用户提交表单时,弹出提示 change(): 当表单元素的值发生变化时触发,适用于下拉菜单或单选按钮等。

9910
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jQuery中常用的函数和属性详细解析

    solid gray"); 查找所有div的子节点p,添加样式 $("input:radio", document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮 jQuery为开发插件提拱了两个方法...id]") 匹配所有具有指定属性的元素 $("input[name='newsletter']")匹配所有具有指定属性值的元素 $("input[name!...") 匹配父元素的唯一1个子元素 表单元素选择器 $(":input") 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button $(":text") 匹配所有类型为...( array, callback ) 使用某个方法修改一个数组中的项,然后返回一个新的数组 jQuery.inArray( value, array ) 返回value在数组中的位置,如果没有找到,则返回...-1 jQuery.unique( array ) 删除数组中的所有重复元素,返回整理后的数组 来自

    2.6K10

    day02jQuery表单验证

    jQuery常用技术 1.元素动态增删方案 2.正则表达式基础 3.表单验证案例 1.jQuery元素动态增删 使用JavaScript的形式进行元素的增删时,优点是逻辑清晰明了,缺点是比较繁琐 函数...1 4 ​​exec​​ 检索字符串中指定的值。返回找到的值,并确定其位置。 1 4 ​​test​​ 检索字符串中指定的值。...返回 true 或 false 2.3 应用 2.3.1 验证11位手机号 let phone = $('input:eq(0)').val(); //定义验证规则 //let phoneVerify...(cn|com)$/; console.log(emailVerify.test(email)); 2.4 案例-表单验证 用户提交表单时对表单中的数据进行验证,同时,当输入框失去焦点时进行快速验证提示...'input:not([type="submit"])').each(function(){ let content = $(this).val(); //用户名验证

    4700

    JQuery最全常用方法指南

    ”) 匹配所有可见的元素 属性过滤选择器 $(”div[id]”) 匹配所有具有指定属性的元素 $(”input[name =’newsletter’]”) 匹配所有具有指定属性值的元素 $(”input...: only - child”) 匹配父元素的唯一1个子元素 表单元素选择器 $(”: input”) 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button...- 1 jQuery.unique(array) 删除数组中的所有重复元素,返回整理后的数组 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及...(); //返回id为msg的元素的宽度 $("#msg").width("300"); //将id为msg的元素的宽度设为300 $("input").val("); //返回表单输入框的value...值 $("input").val("test"); //将表单输入框的value值设为test $("#msg").click(); //触发id为msg的元素的单击事件 $("#msg").click

    11K31

    Java 后台开发面试题分享九

    2)调用函数时,应该提供的参数没有提供,该参数等于 undefined。 3)对象没有赋值的属性,该属性的值为 undefined。 4)函数没有返回值时,默认返回 undefined。....html() 是用来读取元素的 html 内容(包括 html 标签)。 .text() 用来读取元素的纯文本内容,包括其后代元素。 .val() 是用来读取表单元素的 value 值。....html() 和 .text() 方法不能使用在表单元素上,而 .val() 只能使用在表单元素上。....html() 方法使用在元素集合上时,只读取第一个元素;.val() 方法和 .html() 相同,如果其应用在元素集合上时,只能读取第一个表单元素的 value 值,但是 .text() 不一样,如果....html(),.text(),.val() 都可以使用回调函数的返回值来动态的改变多个元素的内容。

    73520

    jQuery

    ").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止...html内容 html(val)// 设置所有匹配元素的html内容 文本值: text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容 值: val()// 取得第一个匹配元素的当前值...val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置checkbox、select的值 示例: 获取被选中的checkbox或radio 的值: <label for....data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。...$("div").data("k",100);//给所有div标签都保存一个名为k,值为100 .data(key); 描述:返回匹配的元素集合中的第一个元素的给定名称的数据存储的值通过  .data(

    4.7K50

    Web前端学习笔记之jQuery基础

    匹配所有索引值为偶数的元素,从 0 开始计数 :odd // 匹配所有索引值为奇数的元素,从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素...html内容 html(val)// 设置所有匹配元素的html内容 文本值: text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容 值: val()// 取得第一个匹配元素的当前值...val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置checkbox、select的值 示例: 获取被选中的checkbox或radio的值: <label for...终止each循环 return false; 伏笔... .data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。...$("div").data("k",100);//给所有div标签都保存一个名为k,值为100 .data(key): 描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data

    3.6K20

    jquery

    匹配所有索引值为偶数的元素,从 0 开始计数 :odd // 匹配所有索引值为奇数的元素,从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素...html内容 html(val)// 设置所有匹配元素的html内容 文本值: text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容 值: val()// 取得第一个匹配元素的当前值...val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值 例如: <input type="checkbox" value=...终止each循环 return false; 伏笔... .data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。...$("div").data("k",100);//给所有div标签都保存一个名为k,值为100 .data(key): 描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data

    5.8K30

    jquery jQuery快速入门

    值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。...html内容 html(val)// 设置所有匹配元素的html内容 文本值: text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容 值: val()// 取得第一个匹配元素的当前值...val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值 例如: <input type="checkbox" value=...终止each循环 return false; 伏笔... .data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。...$("div").data("k",100);//给所有div标签都保存一个名为k,值为100 .data(key): 描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data

    16.3K50

    python web开发 jQuery基础

    () 隐藏所有 元素 $("p.test").hide() 隐藏所有 class = "test" 的 元素 $("#test").hide() 隐藏 id = "test" 的元素 大多数情况下..., jQuery 函数位于 document ready 函数中,防止没有加载完成就对不存在的元素进行操作 $(document).ready(function(){ // jQuery 代码 });...document ready 函数 也可简写 $(function(){ // jQuery 代码 }); 3. jQuery 选择器 基于元素的 id, 类,类型,属性,属性值等进行查找选择 HTML...class 查找元素,如$(".test") 点击按钮,所有带有 class=“test” 属性的元素都被隐藏 $(document).ready(function () {...获取内容和属性 5.1 获取内容 操作 DOM 文档 text() 设置或返回元素的文本 html() 设置或返回元素的内容(包括 HTML 标记) val() 设置或返回表单字段的值 <!

    4.3K50

    一文玩转jQuery+Ajax

    Forms 举例 说明 表单选择器 $(":input") 查找所有的input元素,会匹配input、textarea、select和button元素 文本框选择器 $(":text") 查找所有文本框...操作元素的属性 固有属性:元素本身就有的属性(id、name、class、style) 返回值是Boolean的属性:checked、selected、disabled 自定义属性:用户自定义的属性 方法...内容") 设置元素的文本内容,不包含html标签 val() 获取元素的value值(表单元素) val("值") 设定元素的value值(表单元素) 表单元素:文本框text、密码框password...发送请求,没有参数,没有返回值 $.get("请求地址") 发送请求,传递参数,没有返回值 $.get('请求地址',{name:"岳泽以",age:25}) 发送请求,不传参数,有返回值 $.get(...(data){ console.log(data) }) $.post 发送请求,没有参数,没有返回值 $.post("请求地址") 发送请求,传递参数,没有返回值 $.post('请求地址',

    4K21

    jQuery

    一、语法简介 $("选择器") 或 jQuery("选择器") var 元素对象 = $("选择器"); eg: var 元素对象 = $("#id值"); 元素对象.val(); // 获取当前对象上...的大弟弟b | a~b:选择a的所有b弟弟| 属性选择器: [属性名] 获取元素上带有该属性名的元素对象 [属性名='值'] 获取元素上带有该属性名且值为''的元素对象 属性选择器一般和标签选择器联合使用...}); }); 自定义校验器 $.validator.addMethod(name,function(value,element,params){},"message"); 参数说明: value:用户输入的值...function: 完成校验的逻辑,满足返回true,不满足返回false(默认) val: 输入框中的值 ele: 被校验的输入框对象(js对象) param: 校验器的值...message: 提示信息 七:jQuery中表单提交不了 发生此种情况,若既没有报错也无跳转,多半是由于在表单中添加了诸如: name="submit"这样的属性, 在jQuery中包括使用js

    4.3K20

    脚本语言知识总结.

    / 没有返回值,形参不需要声明类型 return a+b; // 可以返回 } //alert(add(1,2)); // 方式二  function 匿名函数, sub成为函数名称 var sub =...获得返回数据 Ø 通过Dom查找获得元素 Ø 调用元素的innerHTML进行操作 ?...,校验输入内容不能为空 $(":text,:password").blur(function(){ // 获得表单元素内容 val() var value = $(this).val(); // 获得value...具体选中元素 l 表单操作 :checked :selected 选中 表单选中元素 配合基本过滤选择器,缩小选中的范围 4.jQuery的DOM操作 使用jQuery的九种选择器可以基本选中需要操作的对象...,但是为了提高jQuery的查询效率,可以结合jQuery的内置查找函数一起使用 ①:查询 children([expr])  获取指定的子元素 find(expr)  获取指定的后代元素 parents

    5K130

    jQuery 教程

    text() 设置或返回被选元素的文本内容 toggleClass() 在被选元素中添加/移除一个或多个类之间切换 unwrap() 移除被选元素的父元素 val() 设置或返回被选元素的属性值(针对表单元素...inArray() 在数组中查找指定值并返回它的索引值(如果没有找到,则返回-1) $.isArray() 判断指定参数是否是一个数组 $.isEmptyObject() 检查对象是否为空(不包含任何属性...:jQuery Validate | 菜鸟教程 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。...该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。...jQuery val() – 获取值 使用jQuery val() 方法获取表单的字段值。 jQuery attr() – 获取属性值 使用jQuery attr() 方法获取属性值。

    17K20

    jQuery

    ,只有文本内容,没有标签 text(val)// 设置所有匹配元素的内容,不识别标签,将标签作为文本插入进去     值: val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值...获取用户输入的值 var name = $("#name").val(); var hobby = $("#hobby").val(); // 2....获取用户输入的值 // var name = $("#name").val(); // var hobby = $("#hobby").val(); //...在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。...$("div").data("k",100);//给所有div标签都保存一个名为k,值为100 .data(key): 取值,没有的话返回undefined     描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

    9K20

    ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现

    对于客户端验证,ASP.NET MVC对jQuery的验证插件进行了扩展,实现了另一种不同的内联方式是我们 可以将验证规则定义在被验证输入元素的属性中。...input>元素具有一个“data-val”属性和一系列以“data-val-”为前缀的属性,前者表示是否需要对用户输入的值进行验证,后者则代表相应的验证规则。...二、客户端验证规则的生成 ASP.NET MVC在利用jQuery进行客户端验证的时候,虽然验证规则并没有采用其原生的方式通过被验证元素的class属性来提供,但是却可以通过“data-val-{rulename...我们现在关心的是当我们调用HtmlHelper相应的扩展方法将Model对象的某个属性以表单输入元素的形式呈现的时候是如何生成这些以“data-val-”为前缀的验证属性的呢?...当我们在某个View中调用HtmlHelper的扩展方法将Model对象的某个属性以表单输入元素呈现出来的时候,会采用我们前面介绍的ModelValidator的提供机制根据目标属性对应的

    7.1K70

    jQuery开发补充笔记

    jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。...使用JQ完成省市联动效果 需求分析: 在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市 技术分析: 准备工作 : 城市信息的数据 添加节点...表单效验 需求: 用户名和密码长度验证 用户名和密码的输入的特殊字符验证 采用md5加密传输用户输入的密码 <!...$(".depend").blur(function(){ //获取输入框里面的值 var val = $(this).val();...").trigger("focus"); //根据返回的true或者false决定是否进行表单提交,这里采用查找页面上是否存在错误信息来验证表单(值得学习)

    4.7K20
    领券