软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> 10分钟 -> 正文阅读

[Web前端]10分钟


1.:input表单选择器


如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea>、<select><button>标记的表单元素,因此,它选择的表单元素是最广的。
例:使用:input表单选择器获取表单元素,调用addClass()方法向这些元素添加一个样式类别,修改它们在页面中显示的背景色:
.bg_blue
{
    background-color: blue;
}
 <h3>修改全部表单元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <select>
            <option>Option</option>
        </select><br />
        <textarea rows="3" cols="8"></textarea><br />
        <button>
            Button</button><br />
        </form>

        <script type="text/javascript">
            //注意:#frmTest 与:input之间要有空格
            $("#frmTest :input").addClass("bg_blue");
        </script>

[img]http://img.blog.csdn.net/20160401223854098

2.:text表单文本选择器


:text表单文本选择器可以获取表单中全部单行的文本输入框元素,单行的文本输入框就像一个不换行的字条工具,使用非常广泛。
例:使用:text表单选择器修改多个单行文本输入框元素的背景颜色:
.bg_blue
{
    background-color: blue;
    color:Orange;
}
 <h3>修改多个单行输入框元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="text" id="Text1" value="我是小纸条"/><br />
        <textarea rows="3" cols="8"></textarea><br />
        <input type="text" id="Text2" value="我也是小纸条"/><br />
        <button>
            Button</button><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :text").addClass("bg_blue");
        </script>

[img]http://img.blog.csdn.net/20160401224138037

3.:password表单密码选择器


如果想要获取密码输入文本框,可以使用:password选择器,它的功能是获取表单中全部的密码输入文本框元素。
例:调用:password选择器,获取表单中的全部密码文本输入框,并使用addClass()方法修改它们的背景色:
<h3>修改多个密码输入框元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="text" id="Text1" value="单行文本输入框"/><br />
        <input type="password" id="Text2" value="密码文本输入框"/><br />
        <textarea rows="3" cols="8">区域文本输入框</textarea><br />
        <input type="password" id="Text3" value="密码文本输入框"/><br />
        <button>
            Button</button><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :password").addClass("bg_red");
        </script>

[img]http://img.blog.csdn.net/20160401224341428

4.:radio单选按钮选择器


表单中的单选按钮常用于多项数据中仅选择其一,而使用:radio选择器可轻松获取表单中的全部单选按钮元素。
例:使用:radio选择器获取表单中全部的单选按钮元素,并将它们的选择状态设为不可用:
<h3>将表单中单选按钮设为不可用</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input id="Radio1" type="radio" />
        <label for="Radio1"></label>
        <input id="Radio2" type="radio" />
        <label for="Radio2"></label><br />
        <button>
            Button</button><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :radio").attr("disabled","true");
        </script>

[img]http://img.blog.csdn.net/20160401224603695

5.:checkbox复选框选择器


表单中的复选框常用于多项数据的选择,使用:checkbox选择器可以快速定位并获取表单中的复选框元素。
例:调用:checkbox选择器获取表单中的全部复选框,并使用attr方法将它们全部设为选中状态:
 <h3>将表单的全部复选框设为选中</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input id="Checkbox1" type="checkbox" />
        <label for="Checkbox1">
            西红柿</label><br />
        <input id="Checkbox2" type="checkbox" />
        <label for="Checkbox2">
            茄子</label><br />
        <input id="Checkbox3" type="checkbox" />
        <label for="Checkbox3">
            黄瓜</label><br />
        <button>
            Button</button><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :checkbox").attr("checked","true");
        </script>

[img]http://img.blog.csdn.net/20160401224857102

6.:submit提交按钮选择器


通常情况下,一个表单中只允许有一个“type”属性值为“submit”的提交按钮,使用:submit选择器可获取表单中的这个提交按钮元素。
例:调用:submit选择器获取表单中的提交按钮元素,并使用addClass()方法修改该元素的背景色:
<h3>修改表单中提交按钮的背景色</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input type="submit" value="点我就提交了" /><br />
        <button>
            Button</button><br />
        </form>

        <script type="text/javascript">
            $("#frmTest input:submit").addClass("bg_red");
        </script>

[img]http://img.blog.csdn.net/20160401225300369
注意:如果不写input在前面,结果是这样:[img]http://img.blog.csdn.net/20160401225433729

7.:image图像域选择器


当一个<input>元素的“type”属性值设为“image”时,该元素就是一个图像域,使用:image选择器可以快速获取该类全部元素。
例:使用:image选择器获取表单中指定的图像元素,并使用addClass()方法改变它的背景色:
.bg_red
{
    background-color: green;
    width:159px;
    height:42px;
    padding:20px;
}
<h3>修改表单中图像元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="image" src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
        <br />
        <img alt="" src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :image").addClass("bg_red");
        </script>

[img]http://img.blog.csdn.net/20160401225803778

8.:button表单按钮选择器


表单中包含许多类型的按钮,而使用:button选择器能获取且只能获取“type”属性值为“button”的<input><button>这两类普通按钮元素。
例:使用:button选择器获取表单中的普通按钮,并调用addClass()方法修改它们的背景色:
<h3>修改表单中按钮元素的背景色</h3>
        <form id="frmTest" action="#">
            <input id="Button1" type="button" value="我是普通按钮" /><br />
            <input id="Submit1" type="submit" value="点我就提交" /><br />
            <button> 我也是普通按钮 </button><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :button").addClass("bg_blue");
        </script>

[img]http://img.blog.csdn.net/20160401230024544

9.:checked选中状态选择器


有一些元素存在选中状态,如复选框、单选按钮元素,选中时“checked”属性值为“checked”,调用:checked可以获取处于选中状态的全部元素。
例:使用:checked选择器获取全部处于选中状态的元素,并调用attr()方法将它们设为不可用:
<h3>将处于选中状态的元素设为不可用</h3>
        <form id="frmTest" action="#">
        <input id="Radio1" type="radio" checked="checked" />
        <label id="Label1" for="Radio1">
            苹果</label><br />
        <input id="Radio2" type="radio" />
        <label id="Label2" for="Radio2">
            桔子</label><br />
        <input id="Checkbox1" type="checkbox" checked="checked" />
        <label id="Label3" for="Checkbox1">
            荔枝</label><br />
        <input id="Checkbox2" type="checkbox" />
        <label id="Label4" for="Checkbox2">
            葡萄</label><br />
        <input id="Checkbox3" type="checkbox" checked="checked" />
        <label id="Label5" for="Checkbox3">
            香蕉</label><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :checked").attr("disabled", true);
        </script>

[img]http://img.blog.csdn.net/20160401230556548

10.:selected选中状态选择器


与:checked选择器相比,:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。
例:使用:selected选择器获取处于选中状态的元素,并调用text()方法获取它们的内容,显示在页面中:
select
{
  width:120px;
  height:100px;
}
<h3>获取处于选中状态元素的内容</h3>
        <form id="frmTest" action="#">
        <select id="Select1" multiple="multiple">
            <option value="0">苹果</option>
            <option value="1" selected="selected">桔子</option>
            <option value="2">荔枝</option>
            <option value="3" selected="selected">葡萄</option>
            <option value="4">香蕉</option>
        </select><br /><br />
        <div id="tip"></div>
        </form>

        <script type="text/javascript">
            var $txtOpt = $("#frmTest :selected").text();
            $("#tip").html("选中内容为:" + $txtOpt);
        </script>

[img]http://img.blog.csdn.net/20160401230825892
总结:都是一个模子出来的,掌握一个就知道了。
......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-04-02 20:54:21  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture
生肖星座 三丰软件 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-7-25 20:40:31
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --