jQuery学习笔记(简介,选择器)
jQuery优势
1. 强大的选择器。jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。
2. 出色的DOM操作封装
3. 可靠的事件处理机制
4. 完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.Ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
5. 出色的浏览器兼容性。jQuery2.0版本以后已经不再支持IE 6/7/8版本。
6. 链式操作方式
7. 隐式迭代。当使用jQuery找到带有“.myClass”类的全部元素,然后隐藏它们时,无需循环遍历每一个返回的元素。
8. 行为层与结构层的分离。开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。这种行为层与结构层分离的思想,可以使jQuery开发人员和HTML或其他页面开发人员各司其职,摆脱过去开发冲突或个人单干的开发模式。
DOM对象与jQuery对象的相互转换
建议变量命名风格,如果是jQuery对象的变量,建议以$打头。如:
var $variable = jQuery对象
如果是正常的DOM对象,则不用,正常命名即可。如:
var variable = DOM对象
1. jQuery对象转换为DOM对象
jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index)。示范代码分别如下:
var $cr = $("#cr"); var cr = $cr[0];alert(cr.checked);
var $cr = $("#cr"); var cr = $cr.get(0); alert(cr.checked);
2. 将DOM对象转换为jQuery对象
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。示范:
var cr = document.getElementById("cr"); var $cr = $(cr);
jQuery选择器
需要注意,$("#tt")获取的永远是对象,即使是网页上没有此元素。只能通过此对象的长度来判断元素是否真实存在。比如:
if($("#tt")) {// do something, wrong }if($("#tt").length > 0) {// do something, correct }
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
1. 基本选择器
基本选择器通过id、class的标签我等来查找DOM元素。
选择器 | 描述 | 返回 | 示例 |
#id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
.class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
element | 根据给定的元素名匹配元素 | 集合元素 | $("p")选取所有的<p>元素 |
* | 匹配所有元素 | 集合元素 | $("*")选取所有的元素 |
selector1,selector2, ......,selectorN |
将每一个选择器匹配到的元素合并后一起返回 | 集合元素 |
$("div,span,p.myClass")选取所有<div>, <span>和拥有class为myClass的p>标签的一组元素 |
2. 层次选择器
层次选择通过DOM元素之间的层次关系来获取特定元素。例如:后代元素、子元素、相邻元素和同辈元素等。
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选取ancestor元素里的所有descendant(后代)元素 | 集合元素 | $("div span")选取<div>里的所有的<span>元素 |
$("parent > child") |
选取parent元素下的child(子)元素, 与$("ancestor descendant")有区别, $("ancestor descendant")选择的是后代元素 |
集合元素 | $("div > span")选取<div>元素下元素名是span>的子元素 |
$("prev + next") | 选择紧接在prev元素后面的next元素 | 集合元素 | $(".one + div")选取class为one的下一个<div>同辈元素 |
$("prev ~ siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 | $("#two ~ div")选取id为two的元素后面的所有<div>同辈元素 |
可以使用next()方法来代替$("prev + next")选择器;也可以用nextAll()方法来代替$("prev ~ siblings")选择器。示范:
//选取#prev之后的所有同辈div元素 $("#prev ~ div").css("background","#bbffaa"); //同上 $("#prev").nextAll("div").css("background","#bbffaa"); //选取#prev所有的同辈元素,无论前后位置 $("#prev").siblings("div").css("background","#bbffaa");
3. 过滤选择器
过滤选择器主要是通过特定的过滤规则筛选出所需的DOM元素,过滤规则与CSS中的伪类选择语法相同,以一个冒号(:)开头。 按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
3.1 基本过滤选择器
选择器 | 描述 | 返回 | 示例 |
:first | 选取第一个元素 | 单个元素 | $("div:first")选取所有<div>元素中第一个<div>元素 |
:last | 选取最后一个元素 |
单个元素 |
$("div:last")选取所有<div>元素中最后一个<div>元素 |
:not(selector) | 去除所有与给定选择器材匹配的元素 | 集合元素 | $("input:not(.myClass)")选取class不是myClass的<input>元素 |
:even | 选取索引是偶数的所有元素,索引从0开始 | 集合元素 | $("input:even")选取索引是偶数的<input>元素 |
:odd |
选取索引是奇数的所有元素,索引从0开始 | 集合元素 |
$("input:odd")选取索引是奇数的<input>元素 |
:eq(index) |
选取索引等于index的所有元素(index从0开始) | 集合元素 |
$("input:eq(1)") 选取索引等于1的<input>元素 |
:gt(index) |
选取索引大于index的所有元素(index从0开始) | 集合元素 |
$("input:gt(1)") 选取索引大于1的<input>元素 |
:lt(index) |
选取索引小于index的所有元素(index从0开始) | 集合元素 |
$("input:lt(1)") 选取索引小于1的<input>元素 |
:header |
选取所有标题元素,例如:h1,h2,h3,...... | 集合元素 |
$("header")选取网页中所有的<h1>,<h2>,...... |
:animated |
选取当前正在执行动画的所有元素 | 集合元素 |
$("div:animated")选取正在执行动画的<div>元素 |
:focus |
选取当前获取焦点的所有元素 | 集合元素 |
$("focus")选取当前获取焦点的元素 |
3.2 内容过滤选择器
选择器 | 描述 | 返回 | 示例 |
:contains(text) | 选取含有文本text的元素 | 集合元素 | $("div:contains('我')")选取含有文本“我”的<div>元素 |
:empty | 选取不包含子元素或者文本为空的元素 | 集合元素 | $("div:empty")选取不包含子元素(包括文本元素)的<div>空元素 |
:has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有<p>的<div>元素 |
:parent | 选择含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取含有子元素(包括文本元素)的<div>元素 |
3.3 可见性过滤选择器
选择器 | 描述 | 返回 | 示例 |
:hidden | 根据给定的id匹配一个元素 | 集合元素 |
$(":hidden")选取所有不可见的元素。 包括<input type="hidden"/>, <div style="dislay:none;">, <div style="visibility:hidden;">等元素 |
:visible | 根据给定的类名匹配元素 | 集合元素 | $(div":visible")选取所有可见<div>元素 |
3.4 属性过滤选择器
选择器 | 描述 | 返回 | 示例 |
[attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有属性idi的<div>元素 |
[attribute=value] | 选取属性的值为value的元素 | 集合元素 | $("div[title=test]")选取属性title为“test”的<div>元素 |
[attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 |
$("div[title=test]")选取属性title不等于的<div>元素 (注意:没有属性title的元素也会被选取) |
[attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | $("div[title^=test]")选取属性title以“test”开始的<div>元素 |
[attribute$=value] |
选取属性的值以value结尾的元素 | 集合元素 |
$("div[title¥=test]")选取属性title以“test”结尾的<div>元素 |
[attribute*=value] |
选取属性的值含有value的元素 | 集合元素 |
$("div[title^=test]")选取属性title含有“test”的<div>元素 |
[attribute|=value] |
选取属性等于给定字符串或以该字符串为前缀的元素(-) | 集合元素 |
$("div[title|='en']")选取属性title等于en或以en为前缀的元素。如:en-books。 |
[attribute~=value] |
选取属性用空格分隔的值中包含一个给定值的元素 | 集合元素 |
$("div[title~='uk'")选取属性title用空格分隔的值中包含字符uk的元素。 |
[attribute1][attribute2] [attributeN] |
用属性选择器合并成一个复合属性选择器,满足多个条件。 每选择一次,缩小一次范围。 |
集合元素 |
$("div[id][title$='test']")选取拥有属性id,并且属性title以“test”结尾的<div>元素 |
3.5 子元素过滤选择器
选择器 | 描述 | 返回 | 示例 |
:nth-child (index/even/odd/equation) |
选取每个父元素下的第index个子元素或者奇偶元素。(index从1开始) |
集合元素 | $("div.one :nth-child(2)")选取class为one的<div>父元素下的第2个子元素 |
:first-child | 选取每个父元素的第1个子元素 | 集合元素 | $("div.one :first-child")选取class为one的<div>父元素下的第1个子元素 |
:last-child | 选取每个父元素的最后一个子元素 | 集合元素 | $("div.one :last-child")选取class为one的<div>父元素下的第最后一个子元素 |
:only-child | 选择每个父元素的独子元素(非独子、空集不算) | 集合元素 | $("div.one :only-child")选取class为one的<div>父元素下仅有一个元素的元素 |
4. 表单选择器
选择器 | 描述 | 返回 | 示例 |
:enabled |
选取所有可用元素 |
集合元素 | $("#form1 :enabled")选取id为“form1”的表单内的所有可用元素 |
:disabled | 选取所有不可用元素 | 集合元素 | $("#form1 :disabled")选取id为“form1”的表单内的所有不可用元素 |
:checked | 选取所有被选中的元素(单选框、复选框) | 集合元素 | $("input :checked")选取所有被选中的<input>元素 |
:selected | 选择所有被选中的选项元素(下拉列表) | 集合元素 | $("select option:selected")选取所有被选中的选项元素 |
jQuery学习笔记(简介,选择器)相关推荐
- jquery学习笔记(-)
Jquery学习笔记(-) Jquery的简介 Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k),兼容各种浏览器(IE6.0+,FF1 ...
- jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
- 【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...
- jQuery学习笔记02:核心部分
jQuery学习笔记:核心部分 一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素 参数:expr(字符串,一个查询表达式或一段html字符串 ...
- javaweb(03) jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍 什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
- jQuery学习笔记开篇
开始学习人见人爱花见花开的jQuery. jQuery是一个轻量级,快速简洁的javascript框架.它的官方网址是(http://jquery.com/).jQuery的优点是它容量小巧,简洁和简 ...
- jquery学习笔记及常用函数封装
二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...
- jQuery学习笔记(黑马课堂+补充)
JQuery学习笔记(自用) 1.DOM对象和jQuery对象 DOM对象:原生JS取到的对象 getElementsById() getElementsByTagName() 特点:只能调用Dom方 ...
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery学习笔记:Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
最新文章
- 小型职工工作量c语言,计算机c语言职工工作量统计系统(20页)-原创力文档
- 数组静态初始化【应用】
- 【修真院WEB小课堂】定时器有哪些用法?
- java国际象棋棋牌_java使用swing绘制国际象棋棋盘
- String字符串格式化为:00001
- Excel转换成VCF
- Linux 文件锁的原理、实现和应用
- ubuntu16.04 查看系统可用内存
- Ubuntu系统安装搜狗输入法
- no ip mroute-cache是什么意思
- 成像系统分辨率的理论
- 实木地板被机器人弄成坑_实木地板被修家具的压出凹痕看了心里难过怎么办
- VC++6.0安装成功后如何启动应用或者如何创建快捷方式
- 网络编辑要学些什么技能?
- 7. PyEcharts
- apache报错:Unclean shutdown of previous Apache run
- 通过脚本实现将服务器的Log实时传送到Telegram群组
- 中间件之webSphereMQ上分之路(一)
- 马云最新分析:未来3年投资四万从事这两大行业,一年后年入百万
- java中英文混合字符判断,java实现中英文混合字符截取方法
热门文章
- VC++套接字、数据库、文件读写综合应用-客户端读取文件套接字接收服务端写入数据库
- [NOIP2018模拟赛10.19]只会暴力报告
- break 与continue 语句
- PHP去掉诡异的BOM \ufeff JSON开头包含红点
- Linux shell脚本基础学习详细介绍(完整版)一
- “开始菜单”按钮今年8月将重回Windows 8
- opencv图像灰化_opencv读入图像、灰度化、归一化、向量化
- iis php5.3 mysql_Win2008 R2配置IIS7.5+PHP Manager+PHP5.3+Mysql5.5+Wincache
- python标准库有多强大_Python标准库——走马观花
- 4.6 什么是神经风格迁移-深度学习第四课《卷积神经网络》-Stanford吴恩达教授