02 jQuery选择器
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选择器的更多相关文章
- jquery选择器 看这个链接吧!2017.6.2
http://www.cnblogs.com/tylerdonet/archive/2013/04/02/2996713.html关于jquery选择器说明.
- 转:jQuery选择器大全(48个代码片段+21幅图演示)
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...
- Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM
Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...
- JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- jQuery的案例及必知重要的jQuery选择器
Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
随机推荐
- win32 - RegisterRawInputDevices 和 GetRawInputData
RegisterRawInputDevices 可以注册鼠标或者键盘等输入的信息,然后GetRawInputData可以获取传来的WM_INPUT消息中的输入信息. 代码参考: #include &l ...
- Gin框架使用jwt-go配合中间件认证
参考文档 // 文档 https://github.com/golang-jwt/jwt https://pkg.go.dev/github.com/golang-jwt/jwt@v3.2.2+inc ...
- pep8相关规范
https://www.jianshu.com/p/ffcc66bab3ce 导包规范: 1.首先是标准库,如 import os 2.然后是第三方库,如 from django.conf impor ...
- 【Azure 环境】调用Azure RunCommand 的REST API 设置虚拟机的环境变量(SetEnvironmentVariable)
问题描述 在Azure VM的门户页面中,可以通过 RunPowerShellScript来执行PowerShell脚本,如下图: 那么,如何使用REST API 在Azure VM中执行PowerS ...
- GenAI助力DevOps,塑造软件工程的未来
自 2022 年以来,GenAI 无疑已成为一种普遍的技术趋势.在本文中,我们将探索 DevOps 中令人兴奋的 GenAI 领域,讨论其潜在优势.局限性.新兴趋势和最佳实践,深入了解 AI 支持的 ...
- C++ STL容器 set类型
C++ STL容器 set类型 set是C++引入的二叉树数据结构 特点: 自动将元素排序 插入和删除查找logn 必须元素支持严格的弱顺序 不能改变元素的值 代码 using Group = std ...
- CPN Tools 系统建模分析工具(持续更新)
一直想把之前看有关CPN的文献资料做一个综合性的整理,所以最近花了些时间,把乌克兰敖德萨国家电信科学院交通运输部学院的讲义做一个翻译.本课程的翻译不具授权(如有侵权请及时联系,做删除处理) 本课程的标 ...
- leaflet 领图 一个本地的类似百度地图工具-不连外网
官网:https://leafletjs.com/ 二次开发手册-中文:http://112.91.146.167:9090/api/ 领图(一款给力的开源离线地图解决方案) https://blog ...
- Redis持久化之RDB(Redis DataBase) 和 AOF(Append Only File)
Redis提供了两种持久化方式:RDB(Redis DataBase)和AOF(Append Only File). 1. RDB持久化: RDB持久化是指在指定的时间间隔内将内存中的数据集快照写入磁 ...
- Kotlin学习快速入门(8)—— 委托
原文地址:Kotlin学习快速入门(8)-- 属性委托 - Stars-One的杂货小窝 委托其实是一种设计模式,但Kotlin把此特性编写进了语法中,可以方便开发者快速使用 委托对应的关键字是by ...