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. python-获得特定程序的屏幕截图并保存为文件

    import win32gui import win32ui import win32con name = "test.txt - Notepad" hwnd = win32gui ...

  2. Caused by: com.alibaba.druid.pool.DataSourceClosedException: dataSource already closed

    报错场景:spring boot+mybatis,线程池执行批量任务.springboot正常启动后,定时任务中数据库查询报错.报错信息如下: 1 Caused by: org.apache.ibat ...

  3. 什么是数据同步利器DataX，如何使用？

    转载至我的博客 https://www.infrastack.cn ,公众号:架构成长指南 今天给大家分享一个阿里开源的数据同步工具DataX,在Github拥有14.8k的star,非常受欢迎,官网 ...

  4. 如何拓展jwt返回的数据

    默认的返回值仅有token,我们还需在返回值中增加username和id,方便在客户端页面中显示当前登陆用户 通过修改该视图的返回值可以完成我们的需求. 在user/utils.py中,创建 def ...

  5. 【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误

    问题描述 PHP应用突然遇见了500 The page cannot be displayed because an internal server error has occurred.错误,但是如 ...

  6. 1. Canal入门

    1. Canal简介 官方文档: https://github.com/alibaba/canal/wiki/简介 早期,阿里巴巴B2B公司因为存在杭州和美国双机房部署,存在跨机房同步的业务需求.早期 ...

  7. Java 封装+构造器+this 小测试

    1 package com.bytezero.account; 2 3 4 public class Account 5 { 6 private int id; //账号 7 private doub ...

  8. vue3切换theme功能

    切换主题,老生常谈.反正我是第一次弄,还挺巧妙 我的实现方式是通过:root的修改,来一键换色 :root { // 主题色 --ry-primary-color: #ff9c00; // layou ...

  9. org.jetbrains.idea.maven - com.google.inject.CreationException: Unable to create injector, see the following errors-导入maven项目报错

    一.问题由来 最近准备更换Java开发工具,以前是使用Eclipse,现在准备换成号称Java开发神器的IntelliJ IDEA .在同事那里找到安装包后, 安装,导入需要的文件等等,一切都进行得很 ...

  10. .NET数据库ORM框架SqlSugar使用笔记

    官方介绍 以下介绍来自SqlSugar官网: 高性能 ,不夸张的说,去掉Sql在数据库执行的时间,SqlSugar是EF数倍性能,另外在批量操作和一对多查询上也有不错的SQL优化 高扩展性 ,支持自定 ...