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 ...

随机推荐

《Git学习指南》学习笔记（一）
第二章入门 git的安装在Linux下,git的安装很简单.以我的系统Deepin/Ubuntu为例,只需在终端敲入sudo apt-get install git即可.其他Linux发行版可尝试 ...
OSS文件上传及OSS与ODPS之间数据连通
场景描述有这样一种场景,用户在自建服务器上存有一定数量级的CSV格式业务数据,某一天用户了解到阿里云的OSS服务存储性价比高(嘿嘿,颜值高),于是想将CSV数据迁移到云上OSS中,并且 ...
物联网常见通信协议RFID、NFC、Bluetooth、ZigBee等梳理
1 概述在上一篇文章<物联网常见通信协议与通讯协议梳理[上]-通讯协议>中,对物联网常用通信协议和通讯协议作了区分,并对通讯协议进行了分享:本文将对常用的通信协议进行剖析,重点面向市场 ...
20172330 2017-2018-1 《Java程序设计》第五周学习总结
20172330 2017-2018-1 <Java程序设计>第五周学习总结教材学习内容总结第五章首先是对各种各种运算符的了解:刚开始以为相等就是=,还有其他一些符号都挺简单的,然后 ...
搭建独立域名博客 -- 独立域名博客上线了 www.hanshuliang.com
博客是安装在阿里云的服务器上. 小结 : -- 进入数据库命令 :mysql -uroot -p123456 ; -- 检查nginx配置语法 :.../nginx/sbin/nginx -t; -- ...
poj 3009 (深搜求最短路)
题目大意就是求在特定规则下的最短路,这个规则包含了消除障碍的操作.用BFS感觉选择消除障碍的时候不同路径会有影响,用DFS比较方便状态的还原(虽然效率比较低),因此这道题目采用DFS来写. 写的第一次 ...
linux核心版本号的说明
日志不会很长,因为每天都在学习,我认为的重点,我自己做的记录,我很高兴能分享给大家: Linux的核心版本编号有点类似如下癿样子: 2.6.18-92.el5 主版本.次版本.释出版本-修改版本因为 ...
安全的API接口解决方案
在各种手机APP泛滥的现在,背后都有同样泛滥的API接口在支撑,其中鱼龙混杂,直接裸奔的WEB API大量存在,安全性令人堪优在以前WEB API概念没有很普及的时候,都采用自已定义的接口和结构,对 ...
C# 开发者最经常犯的 8 个错误
在和C#新手一起工作的时候,我注意到他们经常重复一些错误.这些错误,当你指出来的时候很容易理解.然而,如果一个开发者没有意识到这些错误,将会影响正在开发的软件的质量和效率,因此,我决定总结8个常见的错 ...
查询MySQL某字段相同值得重复数据
1.先查询重复的id: SELECT book_id,COUNT(*) AS COUNT FROM xs_book_source WHERE site_id=5 GROUP BY book_id HA ...

JQuery学习四（过滤选择器）

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

随机推荐

热门专题