当前位置:首页 > jQuery技术文章 > jQuery选择器之表单元素选择器详解

jQuery表单元素选择器知识点分享

  • 发布时间:
  • 作者:码农之家原创
  • 点击:177

这篇文章主要知识点是关于jQuery、表单元素、选择器、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery UI开发指南
  • 类型:前端开发大小:6.02 MB格式:PDF作者:Eric Sarrion
立即下载

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

本文实例为大家分享了表单元素选择器,供大家参考,具体内容如下

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

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="imooc.css" rel="external nofollow" 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选择器之表单元素选择器详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

js设置默认时间跨度过程代码分析

Excel 2003中文电子表格(第2版)

零基础趣学C语言

Cocos Creator完全使用手册

虚拟封装软件 Turbo Studio v19.6.1178 绿色便携版

展开 +

收起 -

jQuery 相关电子书
学习笔记
网友NO.895307

基于jQuery选择器之表单对象属性筛选选择器的实例

!DOCTYPE htmlhtmlhead meta http-equiv="Content-type" content="text/html; charset=utf-8" / title/title link rel="stylesheet" href="imooc.css" rel="external nofollow" 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/headbody h2子元素筛选选择器/h2 h3enabled、disabled/h3 form input type="text" value="未设置disabled" / input type="text" value="设置disabled" disabled / input type="text" value="未设置disabled" / /form script type="text/javascript" //查找所有input所有可用的(未被禁用的元素)input元素。 $("input:enabled").css("border", "2px groove red"); /script script type="text/javascript" //查找所有input所有不可用的(被禁用的元素)input元素。 $("input:disabled").css("border", "2px groove blue"); /script h3checked、selected/h3 form input type="checkbox" checked="checked" input type="checkbox" input type="radio" checked input type="radi……

网友NO.699097

Jquery选择器中使用变量实现动态选择例子

例子一: table tr th用户名/th th状态/th tr tr td张三/td td data-uid="10000"正常/td tr tr td李四/td td data-uid="10001"冻结/td tr tr td王二麻子/td td data-uid=10002冻结/td tr/tablescript type="text/javascript"$(document).ready(function(){ var uid = 1001; $("td[data-uid = "+ uid +"]").html('正常');}/script 例子二: script type="text/javascript" $(function(){ alert(123); var v=4; var test=$("input[type='radio'][value='"+v+"']");//直接拼接字符串就可以了 console.info(test); var testValue=test.attr({"checked":true}); console.info(testValue); }); /script body This is my JSP page. br table tr td性别:/td td input name="sex" type="radio" value="0"/男 0 input name="sex" type="radio" value="1"/女 1 input name="sex" type="radio" value="2"/女 2 input name="sex" type="radio" value="3"/女 3 input name="sex" type="radio" value="4"/女 4 /td /tr /table /body 例子三、jQuery中选择器参数使用变量应该注意的问题 这是原来的代码 var li_……

网友NO.526218

jQuery原理系列-css选择器的简单实现

jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低。 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.getElementById更高效,浏览器已经做了hash,一次性找到元素不用遍历每个节点。 2)查找 name用document.getElementsByName更高效,浏览器已经做了一个含有该name的集合, 3)查找标签名 用document.getElementsByTagName更高效,浏览器已经做了一个含有该tag集合,从这个集合中再查找子集显然可以少遍历很多的元素,至于浏览器是不是在元素创建的时候就更新了……

网友NO.353190

jQuery中:empty选择器用法实例

本文实例讲述了jQuery中empty选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配所有不包含子元素或者文本的空元素。 注意: 空格也属于选择器包含的元素。 语法结构: $(":empty") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等 。例如: $("li:empty").animate({width:"200px"}) 以上代码能够将li元素集合中的空li元素的宽度以自定义动画的方式设置为200px。 实例代码: 实例一: !DOCTYPE html html head meta charset=" utf-8" meta name="author" content="//www.jb51.net/" / title码农之家/title style type="text/css" li { list-style-type:none; width:150px; height:30px; border:1px solid red; } .run{background-color:green;} .static{background-color:#603;} /style script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"/script script type="text/javascript" $(document).ready(function(){ $("button").click(function(){ $("li:empty").an……

网友NO.557682

jQuery过滤选择器:not()方法使用介绍

jQuery(':not(selector)') 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) p "a"sdfsdfs/p p "b"sdfsdfs/p p "c"sdfsdfs/p $("p:not(.a)").css({"color":"red"}) 那么除了class等于a的p元素外,其他的P的文字颜色就变成了红色. :not()伪类过滤选择器,这叫法真拗口,jQuery的:not()方法是jQuery的伪类选择器,可以过滤不需要的元素,筛选出正确的结果,简单的说我们有如下代码: $("selector1:not(selector2)") 我们分析下上面的代码,我们要获取selector1的元素,但可能我不需要全部,怎么办,通过:not()方法来过滤,如果selector1的集合中有#1,#2,#3,#4 我们的selector2就是要过滤掉#4,上面的代码我们最终将获得#1,#2,#3 再举几个列子 $(‘li:not(:only-child)')//匹配所有的li,除了只有一个子元素的 $(‘li:not(:first-child)');//匹配除了在他父元素中是第一……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757