通过选择器定位获取的dom对象,此时会转变为 jQuery对象 9.1 基本选择器 id选择器:通过dom对象的id定位dom对象,通过id找对象,id在当前页面中是唯一的。...$("#dom对象的id值") class选择器:class表示css中的样式,使用样式的名称定位dom对象。 $(".class样式名") 标签选择器:使用标签的名称定位dom对象。...13.2 第二组 13.2.1 hide函数 $(选择器).hide() : 将jQuery对象数组中所有 DOM 对象隐藏起来 13.2.2 show函数 $(选择器).show() : 将jQuery...注意:在代码中的写的等标签不会在页面中显示,而是会在页面中执行,但是获取的文本内容中含有这个 $(选择器).html():无参数调用方法,获取 DOM 数组第一个dom对象的在网页上显示的文本内容。...jQuery 从 xml, json, text,, html 这些中测试最可能的类型。
表单选择器 重要,不难 求同存异,利用之前的知识,迁移过来。判断的是表单的类型,注意,判断的是表单元素的类型,类型,类型。...名称 说明 解释 (:input) 匹配所有 input, textarea, select 和 button 元素 查找所有的input元素: (":input") (:text) 匹配所有的文本框...查找所有文本框: (":text") (:password) 匹配所有密码框 查找所有密码框: (":password") $(:radio) 匹配所有单选按钮 查找所有单选按钮 (:checkbox...$(" #userform :selected" ) 匹配“家乡”中的“北京”选项 2.6 属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html...#%&*])+ 总结: 1.选择器重点讲了好几个,今天是表单选择器; 2.掌握如何针对某个选择器进行操作,规律:三个字总结:找 事 匿 3.jQuery链式操作 2.6 作业 使用jQuery+正则表达式
eq(index) 查找指定元素的第index个元素,index是索引号,从0开始 $("li").eq(2).css("color","red"); 选择所有li元素中的第二个 first()...last() //获取第n个元素 数值从0开始 $('span').eq(1).css...查找所有单选按钮 $(:checkbox) 匹配所有复选框 查找所有复选框: $(":checkbox") $(:submit) 匹配所有提交按钮 查找所有提交按钮:...[a-zA-Z]{2,3}){1,2}$/; 邮箱 总结: 1.选择器重点讲了好几个,今天是表单选择器; 2.掌握如何针对某个选择器进行操作,规律:三个字总结:找 事 匿 3.jQuery...(){ //当我们在这个按钮上进行单击的时候,逐个获取li的信息内容 //然后打印输出; //each的前面是需要逐个遍历的选择器对象;当前是li,所以:$("li")
这个 dataType 选项用来指示你如何去处理server端返回的数据。 这个和 jQuery.httpData 方法直接相对应。...获取Select选择的Text和Value: 1....").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select...选择的Value 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5. var maxIndex=$...选中浮选和单选按钮: $('input:checkbox,input:radio').attr('checked', 'checked'); 清除选中状态 $('input').removeAttr(
,我们在本示例中添加了一个9行2列的表格,然后使用各种过滤选择器获取表格中的行。...实现步骤 (1) 实现图4.2.4所示的界面 (2) 使用jQuery过滤选择器获取把表格中的奇数行(标题行除外) (3) 把获取到得奇数行设置为灰色背景色,参考代码如下所示。...以下()不属于jQuery选择器。 A. 表单选择器 B. 子选择器 C. 层次选择器 D. 表单选择器 2. 以下关于jQuery层次选择器的说法正确的是()。 A....表单选择器和表单属性选择器不能和其他选择器合用 D. :button选择器获得的按钮包括提交按钮和重置按钮 4. 下列关于jQuery选择器中特殊字符的说法错误的是()。...A. jQuery选择器中不能包含任何特殊字符 B. jQuery选择器可以包含空格 C. jQuery选择器支持转义字符 二、上机练习 数据库中的数据查询出来后,在前台用表格进行显示。
,我们在本示例中添加了一个9行2列的表格,然后使用各种过滤选择器获取表格中的行。...实现步骤 (1) 实现图4.2.4所示的界面 (2) 使用jQuery过滤选择器获取把表格中的奇数行(标题行除外) (3) 把获取到得奇数行设置为灰色背景色,参考代码如下所示。...以下()不属于jQuery选择器。 A. 表单选择器 B. 子选择器 C. 层次选择器 D. 表单选择器 2. 以下关于jQuery层次选择器的说法正确的是()。 A....表单选择器和表单属性选择器不能和其他选择器合用 D. :button选择器获得的按钮包括提交按钮和重置按钮 4. 下列关于jQuery选择器中特殊字符的说法错误的是()。...A. jQuery选择器中不能包含任何特殊字符 B. jQuery选择器可以包含空格 C. jQuery选择器支持转义字符 二、上机练习 数据库中的数据查询出来后,在前台用表格进行显示。
如果你用过 jQuery,可能熟悉该库中的类似功能:.one() 方法。...单选按钮和复选框的 defaultChecked 属性 你可能知道,对于单选按钮和复选框,可以直接通过 checked 属性去获取或设置它,如下所示(假设 radioButton 是对特定表单输入的引用...2radioButton.checked = false; 3console.log(radioButton.checked); // false 但是还有一个名为 defaultChecked 的属性,它可以应用于单选按钮组或复选框组...单选按钮。...如上所述,这也可以用于复选框组。你可以试着修改 HTML 中的默认选中选项,然后再次点击按钮看看效果。
];//使用forms的数字下标获取元素 document.forms['yourForm'];//使用forms的名称下标获取元素 document.yourForm;//使用name名称直接获取元素...以下罗列出共有的属性: 属性或方法 说明 disabled 布尔值,表示当前字段是否被禁用 form 指向当前字段所属表单的指针,只读 name 当前字段的名称 readOnly 布尔值,表示当前字段是否只读...我们知道,中文输入法,它的原理是在输入法面板上先存储文本,按下回车就写入英文文本,按下空格就写入中文文本。...通过checked属性来获取单选按钮的值。...(fm.sex[i].value);//得到值 } } PS:除了checked属性之外,单选按钮还有一个defaultChecked按钮,它获取的是原本的checked按钮对象,而不会因为checked
选取单选按钮 点击元素 在事件中经常使用术语"触发"(或"激发")例如:"当您按下按键时触发 keypress 事件"。 ?...jQuery 选择器 jQuery选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML元素。...选取单选按钮 点击元素 jQuery 事件方法语法 在 jQuery 中,大多数 DOM 事件都有一个等效的jQuery 方法。...GET - 从指定的资源请求数据 POST - 向指定的资源提交要处理的数据 GET基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。 POST也可用于从服务器获取数据。...phpecho '这是个从PHP文件中读取的数据。'; ?> jQuery $.post() 方法 $.post()方法通过 HTTP POST 请求向服务器提交数据。
它可以用最少的代码, 完成更多复杂而困难的功能 jQuery的主旨:write less, do more....4.1.3. jQuery基本使用 第一步:下载jQuery库 第二步:引入下载的jQuery库 第三步:编写jQuery代码 4.1.4.jQuery获取标签 4.1.5.jQuery中事件介绍...4.1.8.2.选择器分类 l1.基本选择器 l2.层级选择器 l3.属性选择器 l4.筛选(过滤)选择器 l5.表单选择器 4.1.8.3.基本选择器 实战代码: 4.1.8.4.层级选择器 选择器...4.1.8.7.父子兄弟选择 案例:百度风云排行榜 4.1.8.8.表单选择器 4.1.9.jQuery中动画(***) 4.1.9.1.jq中动画简介 通过jQuery动画方法,能够很轻松地为网页添加非常精彩的视觉效果...如果是区块,则设置 CSS 代码:display:block; 如果是内联, 则设置 CSS 代码:display:inline; 4.1.9.4.jq中的滑动、卷起动画 jQuery 提供了一组改变元素高度的方法
表单类型选择器 需求描述:选中表单中的文本框密码框文件框按钮提交按钮重置按钮等,设置其背景为红色 选择器 需求描述:输出表单获取焦点表单选中表单禁用表单列表项选中的状态所在的标签信息 jQuery 核心对象 # 3.1 属性 # 3.1.1 属性 # 1. attr() 方法描述:专门操作属性值为非布尔值的属性,该方法读写一体。...需求描述:当鼠标左键按下的时候,控制台输出 “鼠标左键按下” 按钮 $('button').mousedown(function () { console.log...对象 给 jQuery 对象 添加 3 个功能方法: checkAll() : 全选 unCheckAll() : 全不选 reverseCheck() : 全反选 如何实现呢?
选择器是 jQuery 最基础的东西,本文中列举的选择器基本上囊括了所有的 jQuery 选择器,也许各位通过这篇文章能够加深对 jQuery 选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写...1、基本选择器(重点) #id:根据元素的 id 属性来获取元素 element:根据元素的名称来获取元素 selector1,selector2:同时获取多个元素 .class:根据元素的 class...:only-child :如果当前元素是唯一的子元素,则匹配 8、表单选择器 :input :选取页面中的所有表单元素,包含 select 以及 textarea 元素 :text :选取页面中的所有文本框...:password:选取所有的密码框 :radio :选取所有的单选按钮 :checkbox:选取所有的复选框 :submit :获取 submit 提交按钮 :reset:获取 reset 重置按钮...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:jQuery中的9个选择器
本篇文章将深入探讨微信小程序中主要的用户交互组件,包括按钮、表单、滑动条、对话框等。我们将详细分析每个组件的特性、使用方法以及最佳实践,帮助你更好地理解如何通过这些组件来提升用户体验。...字符串 设置按钮按下时亮起的样式类 hover-start-time 数值 设置按钮按住后出现点击态的延迟时间,默认值为 20ms...,当这一组选择框中的任意一个选中状态发生了变化时,都会调用回调函数,在其传递的参数中会装一个数组对象,数组中存放的是所有选中状态的 checkbox 的 value 值。...有些场景下,同样需要一组选择框,只是这些选择框互相之间是有约束关系的,即只能进行单选。这时候就需要使用 radio 和 radio-group 组件。...经常会遇到一些需要用户从列表中选择一项出来的需求,例如选择生日、选择收货地址等。
在其核心,jQuery重点放在从HTML页面里获取元素并对其进行操作。如果你熟悉CSS,就会很清楚选择器的威力,通过元素的特性或元素在文档中的位置去描述元素组。...选择器和包装集 为了使设计和内容分离而把CSS引入Web技术的时候,需要以某种方式从外部样式表中引用页面元素组。...基本选择器 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能使用一次,class允许重复使用。.../当鼠标指针位于节点上方时触发事件 $("p").mouseout() //当鼠标指针从节点上移开时触发事件 $(window).keydown() //当键盘或按钮被按下时触发事件 $(window...这个选项也会影响data选项中的内容如何发送到服务器。
而通过jQuery获取的对象是jQuery包装集对象,简称jQuery对象,只有jQuery对象才能使用jQuery提供的方法。...tb = $(".gray ~ img") console.log(tb);//俩个img 表单选择器 Forms 举例 说明 表单选择器 $(":input...单选按钮选择器 $(":radio") 查找所有的单选按钮 复选框选择器 $(":checkbox") 查找所有的复选框 提交按钮选择器 $(":submit") 查找所有的提交按钮 图像域选择器 $...(":image") 查找所有的图像域 重置按钮选择器 $(":reset") 查找所有的重置按钮 按钮选择器 $(":button") 查找所有的按钮 文件域选择器 $(":file") 查找所有的文件域...方法 说明 attr("class") 获取class属性的值,即样式名称 attr("class","样式名") 修改class属性的值,修改样式 addClass("样式名") 添加样式名称 css
; }; //提交按钮 //创建一个新的Button按钮对象 var btnsubmit = new Ext.Button({ text: "提交", //当用户点击的时候[即js中的onclick...//事件监听,按顺序执行。...this.unitEl.addClass('x-form-unit'); // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况 this.width...: "性别", //宽度 width: 100, items: [ { //这个属性是设置单选的关键 //只有同一组 name 的单选按钮才能单选...//单选框的值 inputValue: "1", //单选框的文字说明 boxLabel: "女" } ] }); //获取单选组的值 radiogroup.on
特别地,表单输入往往会有很多复杂性,我们希望把这些复杂性都隐藏在组件中,例如 自定义设计 、标签、验证、帮助消息等等,并且我们还要确保这些部分中的每一个都按正确的顺序排列渲染。...可悲的是,当我在 Vue 中查看单选按钮或复选框的自定义输入的示例时,他们根本没有考虑 v-model ,或者没有正确的使用。...正常的 select 元素也会像这样,尽管 multiple 多项选择有所不同。 单选按钮 那么,单选按钮呢?...它仍然在 change事件的处理程序中做同样的事情(尽管现在是 change 而不是 input),但是现在根据 picked是否与该单选按钮的值相同来确定 checked 是 true 还是 false...由于本示例中没有包含 name,可以认为一组单选框之间将不会实际上彼此同步。
针对表单元素,jQuery还有一组特殊的选择器: :input:可以选择,,和; :file:可以选择,和input[type=file]一样; :checkbox:可以选择复选框,和input[type=checkbox]一样; :radio:可以选择单选框,和input[type=radio]一样...; :focus:可以选择当前输入焦点的元素,例如把光标放到一个上,用$('input:focus')就可以选出; :checked:选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目...单击这个例子中的按钮,首先看到的是“Hello World!”,然后才是“Clicked”。...表单name name属性规定表单名称,如果name="test",则Javascript可以使用document.forms.test来获取该表单 1 <form method="get" action
批量示例: element选择器: 批量元素与收尾元素示例: 过滤选择器: 1、EVEN: 2、ODD: 3、el索引单个选择器 二、表单选择器 表单选择器最常用示例:"input[name='userName...的操作按钮,当点击jQuery按钮后会显示图片。 ..."); }); element选择器: element 选择器选取带有指定元素名称的所有元素。... index 的元素,索引号从 0 开始 元素集合,如 $("li:gt(1)") 获取索引大 于但不包括 1 的 元素 :lt(index) 获取索引值小于 index 的元素,索引号从 0...表单选择器最常用示例:"input[name='userName']" 语法解析:input就是form表单的输入框,毕竟input肯定是个元素集合,那么,我们使用[]来获取集合中的内容,一般我们表单提交都会添加
script标签 js与jQuery代码对比 案例1:点击按钮获取文本框中的值(JS对比jQuery),如下图 JS版: jQuery版: 先引入jQuery库 jQuery选择器:用来选中元素 ...: 我们先来看一下怎么获取被选中的单选按钮的值怎么获取。...我们先给按钮添加一个点击事件,点击按钮获取被选中的单选框的value属性值。.../* 表单选择器 */ //给提交按钮添加点击事件 $("#ok").click(function(){ //获取表单中被选中的单选按钮的值 :radio表示单选按钮 :checked表示被选 //中的...我们以后统一用:confole.info(sex);然后在页面按F12选中控制台 看输出结果 多选按钮: 多选按钮和单选按钮呢 基本上是一样的,来我们对比着上面的写一下试试。
领取专属 10元无门槛券
手把手带您无忧上云