jQuery-选择器

最新推荐文章于 2022-07-20 17:12:55 发布
最新推荐文章于 2022-07-20 17:12:55 发布
阅读量190 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wake_me_Up123/article/details/83756566
版权 
<body>
  <p>Email:<input type="text" name="email"></p>
  <p>密码:<input type="text" name="password"></p>
  <p>重复密码:<input type="text" name="repassword"></p>
  <p>学号:<input type="text" name="stunum"></p>
  <p>学分:<input type="text" name="stuscore"></p>
  <p><input type="password"></p>
</body>
<script src="public/Js/jquery-3.3.1.js"></script>
<script type="text/javascript">
  $('input[name=password]').css('background', 'red');
  $('input[name=email]').css('background', 'green');
  $('input[name^=stu]').css('background', 'blue');  //匹配stu开头的
  $('input[name$=password]').css('background', 'gray');  //匹配password结尾的
  $('input[name*=s]').css('background', 'pink');   //模糊匹配
</script>

简单选择器

  <p>
    <input type="text" />
    <span>1</span>
    <span>2</span>
  </p>
  <p>
    <input type="text" />
    <span>3</span>
    <span>4</span>
  </p>
  <p>
    <input type="text" />
    <span>5</span>
    <span>6</span>
  </p>
  <div><span>7</span></div>
</body>
<script src="public/Js/jquery-3.3.1.js"></script>
<script type="text/javascript">
  //alert($);
  $('div span').css('background', 'yellow');
  //input之后紧挨着的一个第一个span
  $('input + span').css('background', 'green');
  //input同级的所有span
  $('input ~ span').css('background', 'red');
</script>

简单过滤器

  <ul>
    <li>导航1</li>
    <li>导航2</li>
    <li>导航3</li>
    <li>导航4</li>
    <li>导航5</li>
    <li>导航6</li>
  </ul>
</body>
<script src="public/Js/jquery-3.3.1.js"></script>
<script type="text/javascript">
  $('li:first').css('background', 'pink');
  $('li:last').css('background', 'red');
  $('li:odd').css('background', 'gray');  //隔行变色：奇数
  $('li:even').css('background', 'blue');  //隔行变色：偶数
  $('li:eq(3)').css('background', 'yellow');  //选中特定行
</script>

内容过滤器

  <table border="1">
    <tr>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
    </tr>
    <tr>
      <td>张飞</td>
      <td>男</td>
      <td>26</td>
    </tr>
    <tr>
      <td>孙尚香</td>
      <td>女</td>
      <td>23</td>
    </tr>
    <tr>
      <td><span>赵云</span></td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>花木兰</td>
      <td></td>
      <td>22</td>
    </tr>
  </table>
  <p><br /></p>
  <p>a</p>
  <p></p>
</body>
<script src="public/Js/jquery-3.3.1.js"></script>
<script type="text/javascript">
  // 选中td中含有“女”的标签
  $('td:contains(女)').css('background', 'green');

  // 寻找td为空的
  $('td:empty').css('background', 'yellow');

  //寻找不为空的p标签，寻找有父节点资格的P标签
  $('p:parent').css('background', 'pink');

  //寻找td下含有span的
  $('td:has(span)').css('background', 'red');
</script>
Wake_me_Up123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery颜色选择器ColorPicker
04-26
ColorPicker基于强大的jQuery，使用方便、配置简单，同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中，兼容各大浏览器。
jquery.选择器
a4432432的博客
11-14 99
选择器 通过查找，把匹配的对象放入一个容器中【重点在选择】 ID选择器 语法：$("#id值")； 特点：ID选择器，只返回一个元素 $ =>jQuery Class选择器 定义：根据给定的类名来匹配元素 语法：$(".className") 返回是一个数组； 标签选择器 定义：根据给定的元素名称，来匹配元素 语法： $("tagName") 返回 返回一...
jquery基础
06-23 66
什么是JQ？ 一个优秀的JS库，大型开发必备 JQ的好处？ 简化JS的复杂操作 不再需要关心兼容性 提供大量实用方法 如何学习JQ？ www.jquery.com JQ只是辅助工具，要正确面对 需要分阶段学习 JQ设计思想？ 选择网页元素 模拟CSS选择元素 独有表达式选择 多种筛选方法 JQ写法 方法函数化 链式操作 取值赋值合体 JQ与JS关系 可以共...
jQuery
Ciel_Y的博客
01-22 1637
1.产生原因： 1.1因为JavaScript的缺点： JavaScript jQuery 入口函数 只能有一个，如果有多个，后面的会覆盖前面 可以有多个，并且不会发生覆盖的情况 代码容错性 代码容错性差，代码出现错误，会影响到后面代码的运...
JQuery
weixin_43890079的博客
08-18 335
30.JQuery 其是对javascript封装的一个框架包,简化对javascript的操作 javascript代码：获得页面节点对象、ajax元素节点对象实现、事件操作、事件对象 jquery代码：无需考虑浏览器兼容问题、代码足够少 jQuery：javascript+query 使用前期，jquery侧重快速找到页面上各种节点。 后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。 1. 选择器 1) 基本选择器 $(‘#id属性值’) ---...
JQuery-选择器整理
love_jk的专栏
05-14 1214
一、基本选择器 1）ID选择器 2）标签选择器 3 ) 类选择器 4 ) 通配符选择器 二、层级选择器 1 ) 包含选择器 2 ) 子选择器 3 ) 相邻选择器 4 ) 兄弟选择器 三、简单的伪类选择器 1 ) 特定位置选择器 2 ) 指定范围选择器 3 ) 排除选择器 四、与内容相关的伪类选择器 1 ) 匹配包含文本选择器 2) 匹配包含元素选择器 3 ) 匹配包含判断选择器 4 ) 解析内容过滤实现原理 五、与元素显示状态相关的伪类选择器
jQuery基础----常用的选择器
u011863822的博客
07-20 1298
本篇就是列举了一些常用的jQuery选择器而匹配元素，当然如果学习过css会更好理解的。
Jquery-WeUI 日期时间选择器（自定义时间）
ZCF1024 的后宫
02-02 4394
Juqery-WeUI日期选择控件： Jquery-WeUI日期选择控件只能限制日期，对于时间部分的限制方法不明确，此博客主要研究时间部分的限制（时，分，秒，时-分分隔符，分-秒分隔符） 通过查看jquery-weui.js的源码：https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.js ...
jquery - 颜色选择器
weixin_40156417的博客
06-20 1151
<link href="../../Content/jquery.minicolors.css" rel="stylesheet" /> <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#ffafac"> <scr...
jquery-minicolors：jQuery MiniColors插件
02-04
jQuery MiniColors：一个基于jQuery的微小颜色选择器 由Cory LaViska为A Beautiful Site，LLC开发 根据MIT许可获得许可： : 演示与文档 通过NPM安装 这是MiniColors的官方NPM版本： npm install --save @claviska/...
jquery-1.12.4.js
10-02
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
jquery-year-picker:用于 jquery UI 的年份选择器插件，例如 datepicker。 它允许用户从列表中选择年份
06-04
用于 jquery UI 的年份选择器插件，例如 datepicker。 它允许用户从列表中选择年份。 用法 在 html 页面上放置一个带有 id 或 css 类的文本框。 在指定的 id 或类名上调用yearpicker jquery 方法。 Yearpicker 准备...
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
省市县插件PCASClass.js的使用
Wake_me_Up123的博客
03-22 7618
如上图，在制作“所在地区”时，可以使用插件PCASClass.js引用PCASClass.js在html文件的header部分引入此文件：<script src="../PCASClass.js"></script> //此处填写文件的路径引入选择框在需要使用省市县插件的地方编辑如下：所在地区： <select name="province" style="height:30px"></selec
js手机号码格式、tp5身份证格式验证
Wake_me_Up123的博客
04-07 4830
手机号码的规范验证，并不只是单纯的11位数字，可以通过如下的正则表达式代表现有的手机号码：/^1[34578]\d(9)$/，表示第一位是“1”，第二位是“34578”中的任意一位，d（9）表示从第三位之后的9位都是数字。 具体的函数编写如下：function checkPhone(){ var phone = document.getElementById('phone').value;
重写submit提交事件
Wake_me_Up123的博客
10-08 4011
//需求1：点击 submit按钮时，检查是否选择 type ，若没有选择则给出提示：“清选择类型”； // 检查文本框中是否有输入（可以去除前后空格），若没有则给出提示：“请输入内容”； // 若选择都通过，则在相应的 ul 节点中添加对应的 li 节点。 //需求2：使包括新增的 li 都能响应 onclick 事件：弹出 li 的文本值。 $(
jQuery-函数的四种调用方式
Wake_me_Up123的博客
11-26 2933
jQuery 接收参数的四种方式： CSS 选择器：以字符串的方式传参； $(p).css('color', 'red'); 传递一个DOM对象或者document对象，window对象给$ $(document).ready(function(){ $("p").css('color', 'red').hide(5000); }); 传递一个html文本给()，这时()，这时()...
jquery时间选择器
最新发布
12-13
以下是使用jQuery实现时间选择器的步骤： 1. 在HTML文档中引入最新版本的jQuery库和日期选择器插件。可以通过以下方式引入： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值