JQuery学习四（过滤选择器）

：first选择第一个元素。$（“div:first”）进行选择第一个<div>

:last 选择最后一个最后一个元素 $（"div:last"）选取最后一个<div>

[:not(选择器）] 选择不满足“选择器”条件的元素

　　$("input:not(.myclass)")选取样式名不是Myclass的<input>

:even :odd 选取的索引数是奇数和偶数的元素。(把第零行看作第一行开始计算)

　　$("input:even")选择索引是奇数的<input>

:eq(索引序号)。：gt(索引序号) :lt(索引序号) 选取索引等于。

　　　大于。小于索引序号的元素。比如 $("input:lt(1)")选取索引小于1的<input>

$(":header")选择所有的h1------h6的元素

$("div:animated")选择正在执行动画的<div>元素

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>

         <script type="text/javascript">

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

                 $("#table1 td:even").css("background", "red");

                 $("#table1 td:odd").css("background", "gray");

                 $("#table1 td:first").css("font-size", "50px").css("background","yellow");

                 $("#table1 td:gt(0):lt(3)").css("font-size","30px");

             })

             }

             )

         </script>

 </head>

 <body bgcolor="blue">

     <table id="table1">

         <tr>

             <td>firstline</td>

         </tr>

         <tr>

             <td>secondline</td>

         </tr>

         <tr>

             <td>thirdline</td>

         </tr>

         <tr>

             <td>fourthline</td>

         </tr>

         <tr>

             <td>fifthline</td>

         </tr>

         <tr>

             <td>sixthline</td>

         </tr>

         <tr>

             <td>seventhline</td>

         </tr>

         <tr>

             <td>eightthline</td>

         </tr>

         <tr>

             <td>ninthline</td>

         </tr>

         <tr>

             <td>tenthline</td>

         </tr>

     </table>

     <input value="changecolor"type="button"id="change" onclick=""/>

 </body>

 </html>

$("table").click(function(){$("td",$(this)).css("background","red")});用法

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>

         <script type="text/javascript">

             $(function(){($("table").click(

                 function () { $("tr", $(this)).css("background", "white"); }))

             })

             //this 传递的是相对自己的对象的意思。就是只在被点击的这个对象里的标签上改变颜色

         </script>

 </head>

 <body bgcolor="blue">

     <table id="table1">

         </tr>

         <tr>

             <td>sixthline</td>

         </tr>

         <tr>

             <td>seventhline</td>

         </tr>

         <tr>

             <td>eightthline</td>

         </tr>

         <tr>

             <td>ninthline</td>

         </tr>

         <tr>

             <td>tenthline</td>

         </tr>

     </table>

         <table id="table2">

             <tr>

                 <td>firstline</td>

             </tr>

             <tr>

                 <td>secondline</td>

             </tr>

             <tr>

                 <td>thirdline</td>

             </tr>

             <tr>

                 <td>fourthline</td>

             </tr>

             <tr>

                 <td>fifthline</td>

             </tr>

         </table>

         <input value="changecolor" type="button" id="change" onclick="" />

 </body>

 </html>

$("div[id]") 选取有id属性的div

$(div[title=test") 选取title==test的<div>

$("div[title!=test]")选取title属性不为test的<div>

$("#form1:disabled")//获得表单中所有未启用的控件

$("#form2:enabled")获得表单中所有启用的控件

#("input:checked")input中所有被选中的属性

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>

         <script type="text/javascript">

             $(function () {

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

                     var elements = $("input[type=checkbox]");

                     for (var i = 0; i < elements.length; i++)

                         elements[i].checked = true;

                 })

             })

             $(function () {

                 $("#reverse").click(

                     function () {

                         var elements = $("input[type=checkbox]");

                         for (var i = 0; i < elements.length; i++) {

                             if (elements[i].checked ==false)

                                 elements[i].checked = true;

                             else elements[i].checked = false;

                         }

                     });

             })

         </script>

 </head>

 <body bgcolor="blue">

     <input type="checkbox">a<br/>

     <input type="checkbox">b<br />

     <input type="checkbox">c<br />

     <input type="checkbox">d<br />

     <input type="checkbox">e<br />

     <input type="checkbox">f<br />

     <input type="checkbox">g<br />

     <input type="button"id="selectall" value="全选"/>

     <input type="button"id="reverse"  value="反选" />

 </body>

 </html>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>

         <script type="text/javascript">

             $(function () {

                 $('input').change(function () {

                     var names=new Array();

                     $("input:checked").each(function(key,value){names[key]=$(value).val();});

                     $('#msgname').text("一共选中了"+names.length+"项,"+names.join("."));

                 });

             })

             $(function () {

                 var link = $("<a href='http//:www.qq.com'>百度</a>");

                 $("div:first").append(link);

             })

             $(function () {

                 var data = {"新浪":"http://www.xinlang.com",

                     "腾讯":"http://www.qq.com","网易":"http://www.163.com"

                 ,"淘宝":"http://www.taobao.com"};

                 $.each(data,function(key,value){

                     var tr = $("<td><a href='" + value + "'>" + key + "</a></td>");

                     $("#tablesite").append(tr);

                 });

             })

         </script>

 </head>

 <body bgcolor="blue">

     <input type="checkbox"value="a">a<br/>

     <input type="checkbox"value="b">b<br />

     <input type="checkbox"value="c">c<br />

     <input type="checkbox"value="d">d<br />

     <input type="checkbox"value="e">e<br />

     <input type="checkbox"value="f">f<br />

     <input type="checkbox"value="g">g<br />

     <p id="msgname"></p>

     <div></div>

     <table id="tablesite">

     </table>

 </body>

 </html>

JQuery学习四（过滤选择器）的更多相关文章

jQuery学习之过滤选择器
基本过滤选择器 :first 选取第一个元素:$("div:first") :last 选取最后一个元素:$("div:last") :not(selector ...
JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器和并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
Jquery | 基础 | 使用 jQuery 表单过滤选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery事件篇---过滤选择器 & 表单选择器
内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器发文不易,转载请注明出处! 过滤选 ...
jQuery学习笔记(2)-选择器的使用
一.选择器是什么有了jQuery的选择器,我们几乎可以获取页面上任意一个或一组对象二.Dom对象和jQuery包装集 1.Dom对象 JavaScript中获取Dom对象的方式 <div i ...
jQuery之属性过滤选择器
转自:http://blog.csdn.net/woshisap/article/details/7341136 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute), 在jQu ...
JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
黑马day16 jquery&属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素 .[attribute] 使用方法: $("div[id]") ; 返回值集合元素说明:匹配包括给定属性的元素.样 ...
黑马day16 jquery&内容过滤选择器&可见度选择器
内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上 .:contains(text) 使用方法: $("div:contains('John')") 返回值集 ...
Jquery | 基础 | 属性过滤选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

【CSVRead】-jmeter
csv read 读取文件
angularJS遇到的坑
最近在用angularjs做一些东西,由于学艺不精,对angularjs了解不够,导致经常会不小心掉进一些自己挖的坑里(⊙_⊙),在这里记下来,谨防又踩. 1.angularjs ng-show no ...
第一次课堂作业---circle
链接:circle
lol佐伊美图
心血来潮,分享一波从各个网站上搜集到的佐伊美图,持续更新!(最近更新日期:2019/03/17) Section1 暮光星灵 2018/11/16 2019/02/15 2019/03/17 Se ...
RHEL 6.4（i386）安装MySQL 5.6的方法
C# 泛型和委托
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
Agile.Net 组件式开发平台 - 服务开发示例
在上一篇文章中已经讲解了组件的开发,这篇文章讲解平台服务开发. Agile.Net开发管理平台项目,已经托管在开源中国码云平台(http://git.oschina.net) 登陆码云平台进入项目主页 ...
shmem：
在/proc/meminfo中发现,cached不等于ActiveFile + InActiveFile,我们来看看cache到底都包括啥内存 1)首先肯定包含activeFile 和 inactiv ...
mysql通过binlog恢复数据
如果mysql不小心操作失误导致数据错误或者丢失这时候binlog起到了很大的作用恢复有几种方式 1.按时间恢复--start-datetime 如果确定了时间点,那么按时间恢复是一个再好不过的 ...
google go语言开发
C:cd C:\Program Files\go\gopath\src\opmsset GOOS=linuxset GOARCH=amd64set CGO_ENABLED=0make.batgo in ...

JQuery学习四（过滤选择器）

JQuery学习四（过滤选择器）的更多相关文章

随机推荐

热门专题