分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

jQuery选择器之表单元素选择器

发布时间:2023-09-06 01:12责任编辑:顾先生关键词:jQuery选择器
<!DOCTYPE html><html><head> ???<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> ???<title></title> ???<link rel="stylesheet" href="imooc.css" type="text/css"> ???<style> ????????input{ ???????????display: block; ???????????margin: 10px; ???????????padding:10px; ???????} ???</style> ???<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> ???<h2>子元素筛选选择器</h2> ???<h3>input、text、password、radio、checkbox</h3> ???<h3>submit、image、reset、button、file</h3> ???<div class="left first-div"> ???????<form> ???????????<input type="text" value="text类型"/> ???????????<input type="password" value="password"/> ???????????<input type="radio"/> ????????????<input type="checkbox"/> ???????????<input type="submit" /> ???????????<input type="image" /> ???????????<input type="reset" /> ???????????<input type="button" value="Button" /> ???????????<input type="file" /> ???????</form> ???</div> ???<script type="text/javascript"> ???????//查找所有 input, textarea, select 和 button 元素 ???????//:input 选择器基本上选择所有表单控件 ???????$(":input").css("border", "1px groove red"); ????</script> ???<script type="text/javascript"> ???????//匹配所有input元素中类型为text的input元素 ???????$(":text").css("background", "#A2CD5A"); ???</script> ???<script type="text/javascript"> ???????//匹配所有input元素中类型为password的input元素 ???????$(":password").css("background", "yellow"); ???</script> ???<script type="text/javascript"> ???????//匹配所有input元素中的单选按钮,并选中 ???????$(":radio").attr(‘checked‘,‘true‘); ???</script> ???<script type="text/javascript"> ???????//匹配所有input元素中的复选按钮,并选中 ???????$(":checkbox").attr(‘checked‘,‘true‘); ????</script> ???<script type="text/javascript"> ???????//匹配所有input元素中的提交的按钮,修改背景颜色 ???????$(":submit").css("background", "#C6E2FF"); ???</script> ???<script type="text/javascript"> ???????//匹配所有input元素中的图像类型的元素,修改背景颜色 ???????$(":image").css("background", "#F4A460"); ???</script> ???<script type="text/javascript"> ???????//匹配所有input元素中类型为按钮的元素 ???????$(":button").css("background", "red"); ???</script> ???<script type="text/javascript"> ???????//匹配所有input元素中类型为file的元素 ???????$(":file").css("background", "#CD1076"); ???</script></body></html>

jQuery选择器之表单元素选择器

原文地址:http://www.cnblogs.com/sunxirui00/p/7542648.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved