JQ基础——选择器与过滤器(全)

JQ选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<style>
.w{width: 100px;height: 100px;}
.a{width:220px;height: 120px;}
</style>
</head>
<body>
1.单选择,全选择
<div>dsdasda</div>
<p>dasdasda</p>
<div class="w">这是class类的</div>
<script>
$(function(){
$(".w").css("border","3px solid red");
$("*").css("border","4px solid black");
})
</script>
2.多选择
<div class="w"></div>
<span class="a">asdasdasd</span>
<script>
$(function(){
$(".a,.w").css("border","3px solid red")
$("div,span").css("border","3px solid red")
})
</script>
3.后代选择
<div class="w">
<span>sdasda</span>
<p>dasdad</p>
<div>dadad</div>
</div>
<script>
$(function(){
$("div span").css({"border":"3px solid black","color":"red"})
$("div").css("border","3px solid red")
$("div>*").css({"background-color":"blue","border":"3px solid red"})
})
</script>
</body>
</html>

JQ过滤器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<style>
.a{color:}
</style>
<body>
<h1>标题</h1>
<div>
<p>:first 可以匹配找到的第一个元素</p>
<div>中间的</div>
<h2>标题</h2>
<div>:last 可以匹配找到的最后一个元素</div>
</div>
<table>
<tr id="tr1">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<table>
<tr id="tr2">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<div>lalalala 11</div>
<div>lalalala 22</div>
<div id="div3"></div>
<div id="div4">
<input type="hidden" /><input type="hidden" /><input type="hidden" />
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li> </ul>
<script>
$(function(){
$("div:first").css({"color":"blue"})
$("div:last").css({"color":"red"})
$(":header").css({"color":"green"})
// $(":not").css({"color":"white"})
$("#tr1 td:even").css({"color":"purple","font-size":"30px"})
$("#tr1 td:odd").css({"color":"yellow","font-size":"10px"})
$("#tr2 td:eq(2)").css({"color":"darkorange","font-size":"30px"})
//计数是重0开始的。。所以是第3个数显示。
$("#tr2 td:gt(3)").css({"color":"cadetblue","font-size":"40px"})
//比它大的数,不包括本身
$("#tr2 td:lt(1)").css({"color":"cadetblue","font-size":"20px"})
$("div:contains('lalala')").css({"color":"darkslategray","font-size":"34px"})
//匹配文本的,文本为lalala的挑选器
$("div:empty").css({"width":"100px","height":"50px","border":"3px solid black"})
$("div:has(h2)").css({"border":"3px solid black"})
//有指定元素的元素,就是那个div。
$("#div3").html("一共有"+$("input:hidden").length+"个隐藏元素的input元素")
//指定input元素才可以
$("#div4").html("一共有"+$("tr:visible").length+"个显示元素的input元素")
//属性过滤器
$("div[id='div3']").css({"border":"2px dotted green"})
//可以用id!='div3'id不是div3的元素
//name~='news' 匹配指定属性以指定值开始的元素
//name$='news' 匹配指定属性值以指定值结尾的元素。
//name*='news' 指定属性值包含指定值的元素。
//input[id][name*="news"] 这个就厉害了,复合选择器,要有id,还要name中有new的才可以。 })
</script>
</body>
</html>

选择器与过滤器(全)————JQ的更多相关文章

  1. MVC5控制器、路由、返回类型、选择器、过滤器

    ASP.NET MVC5 学习笔记-1 控制器.路由.返回类型.选择器.过滤器   [TOC] 1. Action 1.1 新建项目 新建项目->Web->Asp.net Web应用程序, ...

  2. jQuery 学习之路(2):选择器与过滤器

    一.基本选择器 标签选择器: $('button') ID选择器: $('#id1') 类选择器: $('.class1') 多重选择器: $('#id1,.class1,button') 全体选择器 ...

  3. jQuery-强大的jQuery选择器、过滤器

    1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $(" ...

  4. jQuery选择器与过滤器(二)

    一.jQuery选择器1.基本选择器:所有选择器    *标签选择器    标签名ID选择器    #ID类选择器    .className组合选择器    selector1,selector2 ...

  5. jQuery选择器最佳实践--来自jQ官网

    1.基于ID选择器进行查询,并且使用find方法. //快速 $("#container div.footer"); //超快 $("#container"). ...

  6. ASP.NET MVC5 学习笔记-1 控制器、路由、返回类型、选择器、过滤器

    [TOC] 1. Action 1.1 新建项目 新建项目->Web->Asp.net Web应用程序,选择MVC,选择添加测试. 在解决方案上右键,选择"管理NuGet程序包& ...

  7. jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  8. jQ选择器学习片段(JavaScript 部分对应)

    $()函数在大多的JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是. $("#id")通过id来获取元素,用来代替document.getElement ...

  9. JQ基本选择器

    JQ选择器采用CSS和Xpath选择器语法规范,满足用户在DOM中快速匹配元素或元素集合. 1.JQ支持CSS1.CSS2.CSS3.不同版本的所有选择器,而早期的很多浏览器并没有完全支持CSS3版本 ...

随机推荐

  1. linux性能分析工具Memory

  2. squid代理与缓存(上)

    squid代理与缓存(上) 1. Squid介绍 1.1 缓存服务器介绍 缓存服务器(英文意思cache server),即用来存储(介质为内存及硬盘)用户访问的网页,图片,文件等等信息的专用服务器. ...

  3. Linux系统理解以及Linux系统学习心得

    原创作品转载请注明出处  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 作者:严哲璟 说一下我对Lin ...

  4. JVM参数说明

    转载于https://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html文章 JVM参数说明 -Xms:初始堆大小  默认值=物理内存的1 ...

  5. HttpClient测试框架

    HttpClient是模拟Http协议客户端请求的一种技术,可以发送Get/Post等请求. 所以在学习HttpClient测试框架之前,先来看一下Http协议请求,主要看请求头信息. 如何查看HTT ...

  6. 【Vim编辑器】基本命令

    前言 工作中免不了会使用到vim编辑文档,总会觉得不好上手,遂从网上找到一篇说明文档整理如下,共勉. 原文地址: https://www.cnblogs.com/shiyanlou/archive/2 ...

  7. npm 常见错误记录

    1.Module build failed: ReferenceError: Unknown plugin "import" specified in "base&quo ...

  8. kafka-producer.properties

    # Licensed to the Apache Software Foundation (ASF) under one or more # contributor license agreement ...

  9. logstash配置文件详解

     logstash pipeline 包含两个必须的元素:input和output,和一个可选元素:filter. 从input读取事件源,(经过filter解析和处理之后),从output输出到目标 ...

  10. (转)超详细java中的ClassLoader详解

    转:https://blog.csdn.net/briblue/article/details/54973413 ClassLoader翻译过来就是类加载器,普通的java开发者其实用到的不多,但对于 ...