jq怎么获取radio选中的值（详解js获取单选按钮radio的值）

jquery是什么？

jquery是一个快速、简洁的javascript框架，是继prototype之后又一个优秀的javascript代码库(或javascript框架)。

jquery设计的宗旨是“write less，do more”，即倡导写更少的代码，做更多的事情。它封装javascript常用的功能代码，提供一种简便的javascript设计模式，优化html文档操作、事件处理、动画设计和ajax交互。

jquery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器，并且可对css选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jquery兼容各种主流浏览器，如ie 6.0+、ff 1.5+、safari 2.0+、opera 9.0+等

搭配视频效果更佳哦~~~

jquery从入门到精通

https://www.ixigua.com/6846624275877593611

开篇基础

jquery 是一款跨主流浏览器的javascript 库，封装了javascript 相关方法调用，简化javascript 对html dom 操作

官网地址： https://jquery.com/

官网首页jquery 介绍：

原文翻译：

jquery 是一个快速，小巧，功能丰富的javascript 库。 它通过易于使用的api 在大量浏览器中运行，使得html 文档遍历和操作，事件处理，动画和ajax 变得更加简单。 通过多功能性和可扩展性的结合，jquery 改变了数百万人编写javascript 的方式。

为什么[why]使用 jquery

非常重要的理由就是：它能够兼容市面上主流的浏览器， ie 和firefox， google 浏览器处理 ajax，创建异步对象是不同的，而jquery 能够使用一种方式在不同的浏览器创建ajax 异步对象。

其他优点：

（1） 写少代码,做多事情【write less do more】

（2） 免费，开源且轻量级的js 库，容量很小

（3） 兼容市面上主流浏览器，例如 ie，firefox，chrome

（4） 能够处理html/jsp/xml、css、dom、事件、实现动画效果， 也能提供异步ajax 功能

（5） 文档手册很全，很详细

（6） 成熟的插件可供选择，多种js 组件，例如日历组件（点击按钮显示下来日期）

（7） 出错后，有一定的提示信息

（8） 不用再在html 里面通过<script>标签插入一大堆 js 来调用命令了

例如：使用javascript 定位dom 对象常用的三种方式：

（1） 通过id 属性：document.getelementbyid()

（2） 通过 class 属性：getelementsbyclassname()

（3） 通过标签名：
document.getelementsbytagname()

上面代码可以看出javascript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jquery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

dom 对象

文档对象模型（document object model，简称 dom），是 w3c 组织推荐的处理可扩展标志语言的标准编程接口。

通过 dom 对 html 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 dom 对象。dom 对象可以使用 javascript 中的方法。

获取jquery

官网下载地址：
https://jquery.com/download/

jquery 的不同版本中，2.xx 不再支持 ie6/7/8 浏览器。现阶段ie6/7/8 已经是淘汰的，非主流。可以不用考虑兼容问题。

对于每一个同一版本号的 jquery，其库又分为两个。一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。

牛刀小试

编写jquery 的工具很多，能编写html 的工具都支持jquery. 例如记事本 ，editplus, webstorm, visual studio code , hbuilder , hbuilderx , idea.

单独学习jquery 库使用，可以轻量的开发工具，例如editplus ,hbuilder,hbuilderx

编写项目可以使用集成开发工具，例如在idea， eclipse ,myeclipse ,webstorm 等

第一个例子完成：浏览器完全装载html 页面 dom 后,显示一个提示信息框

实现步骤：

1. 使用hbuilder 或hbuilderx, idea 都可以，以hbuilderx 为工具，创建一个项目（名称：jquery-course），给项目选择一个文件存放目录。

2. 在项目中再创建一个目录

右键项目名称—新建—目录，常用名称为 js

3. 拷贝下载的jquery.js 文件到目录

4. 使用 jquery，首先要将 jquery 库引入。使用如下语句：

<script type=”text/javascript” src=”js/jquery-3.4.1.js”></script>

5. $(document)，将 dom 对象 document 转换为jquery 对象。

$(document).ready()函数是当 dom 对象加载完毕后，马上执行的函数。

$(document).ready()与$()、jquery()、window.jquery()是等价的，所以

$(document).ready()可以写成 $(function() { alert(“hello jquery”) } );

6. 完整代码

dom 对象和jquery 对象

dom 对象是用javascript 语法创建的对象，也看做是 js 对象。

1. dom 对象转换jquery 对象：

使用$(dom 对象) 方式，可以 dom 对象转换为 jquery 对象， 转换为jquery 对象才可以使用jquery 中的提供的方法，操作dom 对象。一般情况下，在命名 jquery 对象时，为了与 dom 对象进行区分，习惯性的以$ 开头，这不是必须的。

例：新建html 页面文件 domtojquery.html

1. 页面加入按钮 button

2. 转换 dom 对象

2. jquery 对象转为dom 对象

jquery 对象本身为数组对象，该数组中的第 0 个元素即为该 jquery 对象对应 的 dom

对象。所以有两种方式可以获取到 dom 对象：get(0) 方式与下标[0]

例：新建html 文件 jquerytodom.html

1. 页面添加 text ，button

2. jquery 对象.get(0) 或 jquery 对象[0] 均可完成 jquery 对象转 dom对象

选择器

选择器: 就是定位条件；通知jquery 函数定位满足条件的dom 对象

基本选择器

根据id，class 属性，标签类型名定位html 元素，转为jquery 对象.

1. id 选择器

语法：$(“#id”)

2. class 选择器

语法：$(“.class 名称”)

3. 标签选择器

语法：$(“标签名”)

例：新建selector.html

1. 在页面 head 部分加入 css

2. 加入 jquery 引用

3.body 部分定义div

4.创建 js 函数

4. 所有选择器

语法：$(“*”) 选取页面中所有dom 对象。

5. 组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id， class，标签名等。

语法：$(“#id, .class, 标签名”)

例：

1. 上面的 selector.html 页面中加入按钮

2. 增加 js 函数

表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

<input type=”text”>

<input type=”password”>

<input type=”radio”>

<input type=”checkbox”>

<input type=”button”>

<input type=”file”>

<input type=”submit”>

<input type=”reset”>

$(“:tr”): 不能用，tr 不是input 标签语法： $(“:type 属性值”)

例如：

$(“:text”)选取所有的单行文本框

$(“:password”)选取所有的密码框

$(“:radio”)选取所有的单选框

$(“:checkbox”)选取所有的多选框

例：

新建form.html 页面定义元素：

定义 js 函数：

过滤器

jquery 对象中存储的dom对象顺序与页面标签声明位置关系

<div>1</div> dom1

<div>2</div> dom2

<div>3</div> dom3

$(“div”) == [dom1,dom2,dom3]

过滤器就是过滤条件，对已经定位到数组中dom 对象进行过滤筛选，过滤条件不能独立出现在jquery 函数，如果使用只能出现在选择器后方。

基本过滤器

1. 选择第一个first, 保留数组中第一个dom 对象

语法：$(“选择器:first”)

2. 选择最后个last, 保留数组中最后dom 对象

语法：$(“选择器:last”)

3. 选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

4. 选择数组中小于指定索引的所有dom 对象

语法：$(“选择器:lt(数组索引)”)

5. 选择数组中大于指定索引的所有dom 对象

语法：$(“选择器:gt(数组索引)”)

实例操作

1.定义样式

2. 页面加入div

3. 定义js 函数

表单对象属性过滤器

1. 选择可用的文本框

$(“:text:enabled”)

2. 选择不可用的文本框

$(“:text:disabled”）

3. 复选框选中的元素

$(“:checkbox:checked”)

4. 选择指定下拉列表的被选中元素

选择器>option:selected

例：

创建filterform.html 页面：

js 函数