02 jQuery选择器

jQuery的逻辑和css选择器的逻辑是一样的.

// 语法:	$(选择器)

可以使用jQuery选择器快速的对页面结构进行操作.

案例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery.min.js"></script>

    <script>

        $(function(){

            $(".btn").on('click', function(){

                $(".info").text("");

                let username = $("#username").val();

                let password = $("#password").val();

                let gender = $("input:radio[name='gender']:checked").val();  // input标签中radio 并且name是gender的. 并且被选择的.

                let city = $("#city").val();

                let flag = true;

                if(!username){

                    $("#username_info").text('用户名不能为空!');

                    flag = false;

                }

                if(!password){

                    $("#password_info").text('密码不能为空!');

                    flag = false;

                }

                if(!gender){

                    $("#gender_info").text('请选择性别!');

                    flag = false;

                }

                if(!city){

                    $("#city_info").text('请选择城市!');

                    flag = false;

                }

                if(flag){

                    $("#login_form").submit();

                } else {

                    return;

                }

            })

        })

    </script>

</head>

<body>

    <form id="login_form">

        <label for="username">用户名: </label><input type="text" id="username" name="username"><span class="info" id="username_info"></span><br/>

        <label for="password">密码: </label><input type="password" id="password" name="password"><span class="info" id="password_info"></span><br/>

        <label>性别: </label>

            <input type="radio" id="gender_men" name="gender" value="men"><label for="gender_men">男</label>

            <input type="radio" id="gender_women" name="gender" value="women"><label for="gender_women">女</label>

            <span class="info" id="gender_info"></span>

        <br/>

        <label for="city">城市: </label>

            <select id="city" name="city">

                <option value="">请选择</option>

                <option value="bj">北京</option>

                <option value="sh">上海</option>

                <option value="gz">广州</option>

                <option value="sz">深圳</option>

            </select>

            <span class="info" id="city_info"></span>

        <br/>

        <input type="button" class="btn" value="登录">

    </form>

</body>

</html>

02 jQuery选择器的更多相关文章

  1. jquery选择器 看这个链接吧！2017.6.2

    http://www.cnblogs.com/tylerdonet/archive/2013/04/02/2996713.html关于jquery选择器说明.

  2. 转：jQuery选择器大全(48个代码片段+21幅图演示)

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

  3. Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM

    Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...

  4. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  5. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  6. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  7. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  8. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  9. 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...

  10. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

随机推荐

  1. Go微服务框架go-kratos实战学习06：配置中心使用-nacos作为配置中心和 file作为配置存储

    一.kratos 配置介绍 配置文件的作用就是把一些会变化的配置项单独存放,与程序相剥离. 把配置项进行单独管理. kratos 支持多种形式的配置, 比如 file,环境变量. 还支持一些配置软件, ...

  2. Android Studio 导入自己编译的 framework jar

    网上的文章大多是 Android Studio 2.x 环境,实行起来,坑比较多. 本文适用于 Android Studio 3.x 及以上,亲测可行. 一.编译生成 framework.jar 包 ...

  3. React实现导航栏点击高亮

    在jquery中实现导航栏的切换只需要一行代码找到同级其他元素removeClass以及添加点击元素addClass就可以实现了,但是React没法直接找到同级元素,这个时候需要一点js中的思维,根据 ...

  4. Vue源码学习(十一):计算属性computed初步学习

    好家伙,   1.Computed实现原理 if (opts.computed) { initComputed(vm,opts.computed); } function initComputed(v ...

  5. 5分钟教你从爬虫到数据处理到图形化一个界面实现山西理科分数查学校-Python

    5分钟教你从爬虫到数据处理到图形化一个界面实现山西理科分数查学校-Python 引言 在高考结束后,学生们面临的一大挑战是如何根据自己的分数找到合适的大学.这是一个挑战性的任务,因为它涉及大量的数据和 ...

  6. 手把手教你python数据处理项目——探索ebay汽车销售数据

      探索Ebay汽车销售数据 一.实验目的 1. 熟悉清理数据的流程: 2. 分析Ebay二手车销售数据: 3. 了解jupyter notebook为pandas提供的一些独特特性. 二.实验开发环 ...

  7. linux系统信息命令笔记

    1,时间和日期 2,磁盘信息 4,进程概念介绍 4.1,ps 基本命令使用 ps aux 显示内容太多了.一般用ps a 或 ps au 4.2, top命令的基本使用 top 可以动态的显示运行中的 ...

  8. PHP项目&TP框架&SQL&XSS&架构&路由&调试&写法

    开发基础-TP框架-入口&调试&路由&写法等 参考手册-TP5开发手册-为了掌握了解框架 首页文件看APP_PATH定义-为了后期分析核心代码 全局搜索:THINK_VERSI ...

  9. Java开发者的Python快速进修指南：掌握T检验

    前言 T检验是一种用于比较两个独立样本均值差异的统计方法.它通过计算T值和P值来判断样本之间是否存在显著性差异.通常情况下,我们会有两组数据,例如一组实验组和一组对照组. T检验的原假设是两组样本的均 ...

  10. Zabbix与乐维监控对比分析（四）——告警管理篇

    在前面发布的Zabbix与乐维监控对比分析文章中,我们评析了二者在架构与性能.Agent管理.自动发现.权限管理.对象管理等方面的差异.接下来让我们一起看看二者在告警管理方面的差异. 告警管理是所有I ...