文档章节

jQuery的选择器(四)

博为峰教研组
 博为峰教研组
发布于 2016/12/07 18:43
字数 621
阅读 6
收藏 0

三、过滤选择器

5. 子元素过滤选择器

:nth-child

:nth-child(index):获取第index个子元素 ,index从1开始,与:eq(index)区别开

:nth-child(even):获取第偶数个子元素

:nth-child(odd):获取第奇数个子元素

:nth-child(xn+y) :获取第xn+y个子元素

 其中x>=0,y>=0,  n>=0。例如

x=3, y=0时就是3n,表示取第3n个元素。

当x=0,y>=0时,等同于:hth-child(x);

当x=2,y=0时,等同于nth-child(even);

当x=2,y=1时,等同于:nth-child(odd))

:first-child:第一个子元素

:last-child:最后一个子元素

:only-child:当某个元素有且仅有一个子元素,那么选中这个子元素。

通过子元素过滤选择器选择相应的html元素

6.表单对象属性过滤选择器

 :enabled:取所有可用元素

 :disabled: 取所有不可用元素

 :checked:取选中的单选框或复选框元素

 :selected:取下拉列表被选中的元素

<body>

<h3> 表单对象属性过滤选择器.</h3>

   <form id="form1" action="#">

  <button id="btn1">对表单内可用赋值操作.</button>

  <button id="btn2">对表单内不可用赋值操作.</button>

  <button id="btn3">获取多选框选中的个数.</button>

   <button id="btn4">获取下拉框选中的内容.</button>

  <br /><br />

     可用文本框:<input type="text" value="可用文本框"/>  <br/>

     不可用文本框:<input type="text" disabled="disabled" value="不可用文本框"/>

 <br/>

 可用文本域:<textarea>可用文本域</textarea>

 <br/>

 <br/>

     多选框:<br/>

 <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1

     <input type="checkbox" name="newsletter" value="test2" />test2

     <input type="checkbox" name="newsletter" value="test3" />test3

     <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4

     <input type="checkbox" name="newsletter" value="test5" />test5

 <div></div>

 <br/><br/>

     下拉列表1:<br/>

<select name="test" multiple="multiple" style="height:100px">

<option>上海</option>

<option selected="selected">北京</option>

<option>广州</option>

<option selected="selected">天津</option>

<option>江苏</option>

<option>湖北</option>

    </select>

     <br/><br/>

     下拉列表2:<br/>

 <select name="test2" >

    <option>上海</option>

    <option>北京</option>

    <option selected="selected">湖南</option>

    <option>天津</option>

    <option>广州</option>

    <option>湖北</option>

    </select>

<br/><br/>

     <div></div>

  </form>

</body>

通过表单过滤选择器获取指定的html元素

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

        $(document).ready(function(){

         $("#btn1").click(function(){

         $("input:enabled").val("jquery");

         $(":enabled").val("javascript");

         });

         $("#btn2").click(function(){

         $("input:disabled").val("html");

         });

         $("#btn3").click(function(){

   //打印出复选框中选中元素的个数

         var num=$("input:checked").length;

         console.log(num);

         });

         $("#btn4").click(function(){

     //遍历2个下拉列表,将选中的元素在控制台中打印出来

         $("select>option:selected").each(function(index,doc){

         console.log($(doc).text());

         });

         });

        });

</script>

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
【jQuery】-----jQuery简介(一)

query在线api文档:http://t.mb5u.com/jquery/ 最新的api文档:http://api.jquery.com 官方网站:http://www.ycku.com 北风网网址:http://www.ibeifeng.com 一.什么是jQuery 1、 什么是DOM...

LYQ1990
2016/06/03
0
0
JQuery 选择器与过滤器(随手笔记)

一、表单选择器 虽然可以使用常规的选择器来对表单的元素进行定位,但还是不能满足多变的需求,所以这里我们一起来学习一下JQuery表单选择器。 例如: 二、表单过滤器 JQuery提供了四种表单过...

Red_Ant_hoyl
07/25
0
0
jquery合集--从零开始学习jQuery系列- 转载

从零开始学习jQuery系列 作者: ziqiu.zhang 来源: 博客园 发布时间: 2009-12-22 11:37 阅读: 3452 次 [收藏] 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二...

nkbai
2010/04/06
0
0
jQuery.extend和jQuery.fn.extend的区别

jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来。很多地方说的也不详细。这里详细说说之间的区别. 工具/原料 jQuery库。 javascript 方法/步骤 我们先把jQuer...

zwjjap
2015/07/23
0
0
jQuery零基础入门——(四)查找和过滤

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 通常情况下选择器可以直接定位到...

JandenMa
07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
14
1
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部