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>

posted @ 2023-08-28 17:05 生而自由爱而无畏阅读(7) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 2 CSS基本选择器

· 4 CSS属性选择器

· CSS 选择器与jQuery 选择器

· jQuery核心函数之选择器（整个选择器大致结构）

· 2 jQuery 选择器

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

公告

昵称：生而自由爱而无畏
园龄： 3年4个月
粉丝： 8
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

python爬虫成神之路进行时

02 jQuery选择器

02 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>