jQuery: 选择器，筛选器
jQuery 简介
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
官方下载地址：http://jquery.com/download/
选择器
基本选择器: $("*"), $("#id"), $(".class"), $("element"), $(".class,p,div")
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>hello div</div>
<div class="div1">hello div1</div>
<p>hello p</p>
<p id="p1">hello p1</p>
<script>
$("*").css("color","red");
$("*").css("color","red").css("background", "yellow");
$("div").css("color","red");
$("#p1").css("color","red");
$(".div1").css("color","red");
$(".div1, #p1").css("color","red");
</script>
</body>
层级选择器: $(".outer div"), $(".outer>div"), $(".outer+div"), $(".outer~div")
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>hello div</div>
<div class="div1">hello div1</div>
<p>hello p</p>
<p id="p1">hello p1</p>
<p>hello p4</p>
<dir class="outer">
<div>
<p>hello p2</p>
</div>
<p>hello p3</p>
</dir>
<p>hello p5</p>
<p>hello p6</p>
<script>
$(".outer p").css("color","red"); // outer 下所有的 p 元素
$(".outer>p").css("color","red"); // outer 下的子 p 元素
$(".outer+p").css("color","red"); // outer 下面的一个 p 元素
$(".outer~p").css("color","red"); // outer 下面所有的 p 元素
</script>
</body>
基本筛选器: $("li:first"), $("li:eq(2)"), $("li:even"), $("li:gt(1)")
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div">hello div
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
<script>
$(".div li:first").css("color","green");
$(".div li:last").css("color","green");
$(".div li:eq(2)").css("color","green");
$(".div li:lt(2)").css("color","green");
$(".div li:gt(1)").css("color","green");
</script>
</body>
属性选择器: $('[id="div1"]'), $('["lily="luck"][id]')
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p lily="good">hello p1</p>
<p lily="luck">hello p2</p>
<script>
$("[lily]").css("color","pink");
$("[lily='luck']").css("color","pink");
</script>
</body>
表单选择器: $("[type='text']")----->$(":text") 注意只适用于input标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="text">
<input type="button">
<script>
$("[type='button']").css("width","200px");
$(":button").css("width","200px");
</script>
</body>
筛选器
查找筛选器: $("div").children(".test"), $("div").find(".test")
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div1">hello1
<div class="div2">hello2
<div class="div3">
hello3
</div>
</div>
<div>hello4</div>
</div>
<script>
$(".div1").children().css('color',"red")
$(".div1").children(".div2").css('color',"red") // 只找儿子辈
$(".div1").find(".div3").css("color","red") // 后辈都找
</script>
</body>
$(".test").next(), $(".test").nextAll(), $(".test").nextUntil()
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div1">hello1
<div class="div8">hello8</div>
<div class="div2">hello2
<div class="div3">
hello3
</div>
</div>
<div class="div4">hello4</div>
<div class="div5">hello5</div>
<div class="div6">hello6</div>
<div class="div7">hello7</div>
</div>
<script>
$(".div2").next().css("color","red");
$(".div2").nextAll().css("color","red");
$(".div2").nextUntil(".div6").css("color","red"); //不包含 .div6
</script>
</body>
$("div").prev(), $("div").prevAll(), $("div").prevUntil()
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div1">hello1
<div class="div8">hello8</div>
<div class="div9">hello9</div>
<div class="div10">hello10</div>
<div class="div2">hello2
<div class="div3">
hello3
</div>
</div>
<div class="div4">hello4</div>
<div class="div5">hello5</div>
<div class="div6">hello6</div>
<div class="div7">hello7</div>
</div>
<script>
$(".div2").prev().css("color","red");
$(".div2").prevAll().css("color","red"); // 在同级下起作用
$(".div2").prevUntil(".div8").css("color","red"); // 不包括 .div8
$(".div3").parent().css('color',"red");
$(".div3").parents().css('color',"red");
$(".div3").parentsUntil("body").css('color','red');
$(".div2").siblings().css('color','red');
</script>
</body>
jQuery 对象和DOM对象 相互转化
# DOM 对象： obj = document.getElementById('sel')
# jQuery 对象： $(obj)
# jQuery 对象：$('#'sel)
# DOM 对象： $('#'sel)[0]
jQuery: 选择器，筛选器的更多相关文章
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jquery选择器筛选器
jQuery对象 Query 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里 ...
- JQuery 选择器 筛选器
什么是jQuery对象 参考:http://jquery.cuishifeng.cn/css.html jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQue ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- jQuery 初识 筛选器 属性选择器
---------------------------大事使我们惊讶,小事使我们沮丧,久而久之,我们对这二者都会习以为常. 一 jQuery是什么? ［1］ jQuery由美国人John Resi ...
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
- jQuery基本筛选器-表单筛选器-关系筛选器
一.基本筛选器 :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素,从 0 开始计数 :odd ...
- jquery查找筛选器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS筛选器简单实例1
1.通配符 <!--筛选器---通配符实例--> <!--支持IE7+ --> <style type="text/css"> *.all { ...
- jQuery中的选择器及筛选器
1.jQuery的介绍 1.jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE! 2.它是轻量级的js库,这是其它的js库所不 ...
随机推荐
- 14.不同条目的listview
分类界面 整个项目的逻辑就是这样的 CategoryInfo public class CategoryInfo { private String title; private String url ...
- 第43节：Java学前要点
Java学前要点 01 学习Java,有人推荐去培训,有人说没用,其实有钱的,不知道如何学,或者逼不得已去的就可以,也有人自己为了不花这些钱,而选择自学,我觉得也行. 现在大部分人学东西要学的好,都是 ...
- 机器学习入门06 - 训练集和测试集 (Training and Test Sets)
原文链接:https://developers.google.com/machine-learning/crash-course/training-and-test-sets 测试集是用于评估根据训练 ...
- 超详细的 Redis Cluster 官方集群搭建指南
今天从 0 开始搭建 Redis Cluster 官方集群,解决搭建过程中遇到的问题,超详细. 安装ruby环境 因为官方提供的创建集群的工具是用ruby写的,需要ruby2.2.2+版本支持,rub ...
- CSS Modules 与 scoped 的不一样
What ? css 的作用域表现. Css modules 是一个CSS文件,其中所有类名和动画名称默认为局部作用域. 使用JS编译原生的CSS文件,使其具备模块化的能力,该文件需要import使用 ...
- odoo开发笔记 -- 表名_name长度限制
场景描述: odoo中定义模型的时候,系统会根据参数_name="********" 按照一定的系统规则自动生成表名; 最近开发过程中发现,_name参数的字符长度不能超过64位, ...
- (转)Apache从2.2换至2.4httpd.conf的调整笔记(windows环境)
原文:https://www.cnblogs.com/tjws/articles/3469075.html#top 整理一下Windows环境Apache 2.2 改成 Apache 2.4.1后 h ...
- Struts1入门实例（简单登录）
Struts1入门实例(简单登录) 现在开始加入公司的核心项目,但由于项目开发比较早,所以使用的技术不是很新潮,前台用的还是struts1. 虽然不是什么新技术,但仍可以从中学到好多东西的.花了一个晚 ...
- java正则表达式的忽略大小写
(?i)abc 表示abc都忽略大小写 a(?i)bc 表示bc忽略大小写 a((?i)b)c 表示只有b忽略大小写
- How Tomcat works — 二、tomcat启动（1）
主要介绍tomcat启动涉及到的一些接口和类. 目录 概述 tomcat包含的组件 server和service Lifecycle Container Connector 总结 概述 tomcat作 ...