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. 【Android逆向】算法还原2

    这题比较简单 1. app-release.apk 安装至手机 提示需要输入账号和密码 2. jadx 打开看看 public native boolean check(byte[] bArr, by ...

  2. IntelliJ IDE使用指南

    下载IDEA 注释模板 #if (${PACKAGE_NAME} && ${PACKAGE_NAME} != "")package ${PACKAGE_NAME}; ...

  3. sql判断字符串中含中文方法

    基于UTF-8字符集 它是一种多字节字符集,编码为变长编码.那么它的编码范围根据:http://www.iteye.com/topic/977671 作者提供的资料学习,整理出它编码范围如下: u2e ...

  4. 【LeetCode贪心#06】加油站(股票买卖变种)

    加油站 力扣题目链接(opens new window) 在一条环路上有 N 个加油站,其中第 i 个加油站有汽油 gas[i] 升. 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i+1 ...

  5. 【LeetCode链表#10】删除链表中倒数第n个节点（双指针）

    删除链表倒数第N个节点 力扣题目链接(opens new window) 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点. 进阶:你能尝试使用一趟扫描实现吗? 示例 1: 输入:he ...

  6. centos docker服务问题

    概述 docker的应用版本正式上线,结果一上线就出各种幺蛾子. 本文档主要介绍centos系统安装docker和启动的问题解决方法. 环境 docker registry:2 centos 6 &a ...

  7. CT图像重建

    20世纪70年代中期,在医学领域出现了一种神奇装置,名为"计算机辅助 X 射线断层成像仪"(简称CAT或CT),它能够在不损伤病人的情况下,提供人体从头到脚各部位的断层X射线图像. ...

  8. 【Azure 环境】Update-MgEntitlementManagementAccessPackageAssignmentPolicy 命令执行时候遇见的 No HTTP Resource was found 问题分析

    Microsoft Graph PowerShell SDK: acts as an API wrapper for the Microsoft Graph APIs, exposing the en ...

  9. 图数据库实操：用 Nebula Graph 破解成语版 Wordle 谜底

    本文首发于 Nebula Graph Community 公众号 春节期间如果有小伙伴玩过 Wordle 这个火爆社交媒体的猜词游戏,可能对成语版本的汉兜有所耳闻.在玩汉兜过程中,我发现用 Nebul ...

  10. RocketMQ(5) 订阅关系的一致性规范

    多个消费者组订阅了多个Topic,并且每个消费者组里的多个消费者实例的订阅关系应该保持一致. 例如下消费关系, 不同的消费组,消费不同的队列,相同的消费组订阅相同的队列,tag 错误示例: 一个消费者 ...