当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery基本过滤选择器用法示例

jQuery基本过滤选择器的用法代码

  • 发布时间:
  • 作者:码农之家
  • 点击:103

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

jQuery实战从入门到精通
  • 类型:jQuery大小:189.1 MB格式:PDF作者:未来科技
立即下载

jQuery基本过滤选择器用法示例

本文实例讲述了jQuery基本过滤选择器用法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
  //选择第一个div元素.
  $('#btn1').click(function(){
    $('div:first').css("background","#bfa");
  })
  //选择最后一个div元素.
  $('#btn2').click(function(){
    $('div:last').css("background","#bfa");
  })
  //选择class不为one的 所有div元素.
  $('#btn3').click(function(){
    $('div:not(.one)').css("background","#bfa");
  })
  //选择 索引值为偶数 的div元素。
  $('#btn4').click(function(){
    $('div:even').css("background","#bfa");
  })
  //选择 索引值为奇数 的div元素。
  $('#btn5').click(function(){
    $('div:odd').css("background","#bfa");
  })
  //选择 索引等于 3 的元素
  $('#btn6').click(function(){
    $('div:eq(3)').css("background","#bfa");
  })
  //选择 索引大于 3 的元素
  $('#btn7').click(function(){
    $('div:gt(3)').css("background","#bfa");
  })
  //选择 索引小于 3 的元素
  $('#btn8').click(function(){
  $('div:lt(3)').css("background","#bfa");
  })
  //选择 所有的标题元素.比如h1, h2, h3等等...
  $('#btn9').click(function(){
    $(':header').css("background","#bfa");
  })
  //选择 当前正在执行动画的所有元素.
  $('#btn10').click(function(){
    $(':animated').css("background","#bfa");
  });
});
</script>
</head>
<body>
<h3>基本过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<br />
<br />
<input type="button" value="选择第一个div元素." id="btn1"/>
<input type="button" value="选择最后一个div元素." id="btn2"/>
<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
<input type="button" value="选择索引值等于3的元素." id="btn6"/>
<input type="button" value="选择索引值大于3的元素." id="btn7"/>
<input type="button" value="选择索引值小于3的元素." id="btn8"/>
<input type="button" value="选择所有的标题元素." id="btn9"/>
<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one" > id为one,class为one的div
  <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" > id为two,class为one,title为test的div.
  <div class="mini" title="other">class为mini,title为other</div>
  <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini"></div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div  class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div> 包含input的type为"hidden"的div
  <input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>

效果图:

jQuery基本过滤选择器用法示例

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery选择器用法总结》、《jQuery操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。

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

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

详解强大的jQuery选择器之基本选择器、层次选择器

jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件,参考上篇:jQuery插件原来如此简单——jQuery插件的机制及实战)。正是jQuery强大的选择器功能,让它很容易上手,吸引了大批的开发者,本文就来介绍一下强大的jQuery选择器。 jQuery选择器类型 jQuery选择器主要分为四类: 1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择器 由于过滤选择器内容比较多,因此本文仅介绍前两种,下篇文章将介绍后两种。 一点准备工作 为了能让大家看到具体的效果,这里先创建一个示例页面,里面包含各种div和span元素,然后用jQuery选择器来匹配元素并调整它们的样式。 示例页面代码: !DOCTYPE html html head titleDemo/title meta http-equiv……

网友NO.591354

jQuery分组选择器简单用法示例

本文实例讲述了jQuery分组选择器简单用法。分享给大家供大家参考,具体如下: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titlejQuery分组选择器/title script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"/script script type="text/javascript" $(function(){ // 注意:#content.title,.header.title无效 $('.header, div.title, [title="foot"]').css('backgroundColor','red'); }); /script/headbody div class="header"header div class="title"title/div /div hr div id="content" content div class="title"title/div div class="context"context/div div class="other"other/div /div hr footer title='foot'footer/footer/body/html 这里使用 在线HTML/CSS/JavaScript代码运行工具 :http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行效果: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法……

网友NO.269723

jQuery中:file选择器用法实例

本文实例讲述了jQuery中:file选择器用法。分享给大家供大家参考。具体分析如下: 此选择器能够选取类型为file的input元素。 语法结构: 复制代码 代码如下: $(":file") 实例代码: 复制代码 代码如下: !DOCTYPE html html head meta charset=" utf-8" meta name="author" content="//www.jb51.net/" / title码农之家/title script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"/script script type="text/javascript" $(document).ready(function(){ $("button").click(function(){ $(":file").css("background-color","red"); }); }); /script /head body ul liinput type="file" //li /ul button点击查看效果/button /body /html 希望本文所述对大家的jQuery程序设计有所帮助。 ……

网友NO.600923

jquery的选择器的使用技巧之如何选择input框

下面的方法是选择name是redthree的 并且选中了的input 里面的 title属性的内容 input name="redTrdd" title='xiaoming' xtest = $(":input[name='radThree'][checked]").attr("title"); ……

网友NO.993161

JS仿JQuery选择器功能

JQuery作为应用最广的JS库,其最强大的功能之一就是几乎涵盖所有方法的且代码十分简短的选择器功能,我们也可用自己的代码实现此功能,代码逻辑、使用方法与JQuery一致 function ZQuery(arg){ this.elements = []; //存东西 this.domString = ''; //保存字符串标签 if(typeof arg=='function'){ //DOMReady DOMReady(arg); }else if(typeof arg=='string'||arg instanceof String){ if(arg.indexOf('')!=-1){ this.domString = arg; }else{ //获取元素 this.elements = getEle(arg); this.length = this.elements.length; } }else{ //原生对象-》ZQuery对象 this.elements.push(arg); this.length = this.elements.length; }}ZQuery.prototype.css = function(name,value){ if(arguments.length==2){ //设置一个样式 for(var i=0;ithis.elements.length;i++){ this.elements[i].style[name] = value; } }else{ if(typeof name=='string'){ //获取样式 return getStyle(this.elements[0],name); }else{ //批量设置样式 var json = name; for(var name in json){……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com