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. vue,一路走来（16）--本地及手机调试

    闲暇时间记录一下如何绑定域名,实现本地及手机调试的过程.我的是微信开发项目,很多功能及操作都是基于微信来开发的,理所当然的就用到微信开发者工具了. 1.首先打开目录C:\Windows\System3 ...

  2. Sybase 修改数据库默认排序

    我新建了一个sybase数据库,想用dump文件load,可是报数据库的排序不对,就去Centrol里面修改,但是还是报错,说是字符集不存在.办法如下: 打开命令行,进入到sybase的ASE-15_ ...

  3. java Random随机生成一个数

    package java05; import java.util.Random; /* Random随机生成一个数字 1.导包: import java.util.Random; 2.创建 Rando ...

  4. PL SQL安装

    首先,在官网下载PL SQL 的对应版本,本机是64位的就下载64位的,网址:https://www.allroundautomations.com/downloads.html#PLS 点击应用程序 ...

  5. windows java jdk安装

    安装 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 勾选协议,选择 ...

  6. [BZOJ4278] [ONTAK2015]Tasowanie 贪心+后缀数组

    题目链接 最近做题目好像有点东一榔头西一棒.好吧其实订正模拟题的时候需要用到什么感觉不太熟的就写一下吧. 显然直接贪心,比较两个点后面的串的字典序,小就选谁就可以了. 可以把两个串接起来,加一个\(i ...

  7. 3.自定义返回json格式的数据给前台（自定义Controller类中的Json方法）

    在mvc的项目中,我们前台做一些操作时,后台要返回一些结果给前台,这个时候我们就需要有一个状态来标识到底是什么类型的错误, 例如: 执行删除的时候,如果操作成功(1行受影响),我们需要返回状态为1并输 ...

  8. ConcurrentLinkedQueue和LinkedBlockingQueue区别

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11394436.html 线程安全队列类图 两者的区别在于 ConcurrentLinkedQueue基 ...

  9. [codeforces 508E]Maximum Matching

    题目:Maximum Matching 传送门:http://codeforces.com/contest/1038/problem/E 分析: 一个块拥有{color1,val,color2},两个 ...

  10. <HTTP权威指南>记录 ---- 网络爬虫

    网络爬虫 网络爬虫(web crawler)能够在无需人类干预的情况下自动进行一系列Web事务处理的软件程序.很多爬虫会从一个Web站点逛到另一个Web站点,获取内容,跟踪超链,并对它们找到的数据进行 ...