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库所不 ...
随机推荐
- 第60节:Java中的JavaScript技术
欢迎到我的简书查看我的文集 前言: JavaScript是什么呢?它是一种基于对象和事件驱动的脚本语言,主要是应用于客户端上的.JavaScript它可以做到信息的动态交互,具有交互性,它不允许直接访 ...
- Python开发爆破字典
这里只是分享一下Python如何生成爆破字典 关于爆破工具编写我会在下一篇提到 其实有了爆破字典的话,直接使用Burp,Hydra等一些工具就可以做爆破了! Burp的使用在我以前的博客中有写过,至于 ...
- 对称加密AES
static void Main(string[] args) { //string str = "rqiJI7eEICT+YZmScpAdbjzLnA4mgL3uU5uHXLBeaE6s8 ...
- java中最常见的几种运行时异常，你get了吗？
NullPointerException (空指针异常) ClassCastException (类型强制转换异常) NumberFormatException (数字格式异常) NegativeAr ...
- Python档案袋（ Sys 与 Import 模块)
Sys模块: 获取Python有关的环境变量: import sys #得到Python的一些相关路径,环境变量 #其中site-packages目录存放的是一些第三方库 #其中lib目录存放的是一些 ...
- Anaconda下载地址
Anaconda installer archive:地址1: https://repo.continuum.io/archive/地址2:https://mirrors.tuna.tsinghua. ...
- Ajax,JSONP以及跨域问题
没用过裸的Ajax 也没听过jsonp,也不了解跨域问题,emmm… 参考: http://www.runoob.com/ajax/ajax-tutorial.html https://www.lia ...
- 纯手写SpringMVC框架，用注解实现springmvc过程
闲话不多说,直接上代码! 1.第一步,首先搭建如下架构,其中,annotation中放置自己编写的注解,主要包括service controller qualifier RequestMapping ...
- Spring Security + OAuth系统环境搭建（一）
最近在做权限管理系统的重构工作,系统基于Spring Security + OAuth架构,整体架构.技术和之前调研的结果差不多,架构调研时有在这篇博客做过简单记录“Spring Cloud微服务下的 ...
- jvm详情——5、选择合适的垃圾收集算法
回收器选择JVM给了三种选择:串行收集器.并行收集器.并发收集器,但是串行收集器只适用于小数据量的情况,所以这里的选择主要针对并行收集器和并发收集器. 默认情况下,JDK5.0以前都是使用串行收集器, ...