jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍
终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery
jQuery是什么?
▓▓▓▓▓▓ jQuery对象和DOM对象
我们在编写脚本时,可能会同时用到原生JavaScript和jQuery,那么这时就会存在一些问题。要解决这些问题就先得认识jQuery对象和DOM对象
DOM对象:通过例如getElementById方法获取到DOM树中的元素就是DOM对象
jQuery对象:通过jQuery包装DOM对象后产生的对象
注意:jQuery对象和DOM对象不能使用对方的任何方法
// 错误$('div').innerHTML;// 错误document.getELementsByTagName('div')[0].html();
jQuery对象和DOM对象是可以互相转化的
jQuery对象转成DOM对象有两种方法:
1、[index]
var $div = $('div');//jQuery对象var div = $div[0];//DOM对象
2、get(index)
var $div = $('div');//jQuery对象var div = $div.get(0);//DOM对象
DOM对象转成jQuery对象有一种方法:$(DOM对象)
var div = document.getELementsByTagName('div')[0];//DOM对象var $div = $(div);//jQuery对象
▓▓▓▓▓▓ jQuery选择器
jQuery中的选择器完全继承了CSS的风格
逐一来看
▓▓▓▓▓▓ 基本选择器
改变id为div1的所有div的背景色
$('#div1').css('background','#bbffaa');
改变所有p标签和class为one的div的背景色
1 $('p,.one').css('background','#bbffaa');
▓▓▓▓▓▓ 层次选择器
选取div里的所有span元素
1 $('div span');
选取div下元素名是span的子元素
1 $('div > span');
选取class是one的下一个<div>同辈元素
$('.one + div');
选取class是one的后面的所有的<div>同辈元素
$('.one ~ div');
▓▓▓▓▓▓ 过滤选择器
1、基本过滤选择器
选取所有<div>元素中第一个<div>元素
1 $('div:first');
选取class不是one的<div>元素
$('div:not(.one)');
选取索引是偶数的的<div>元素
$('div:even');
选取索引等于2的<div>元素
$('div:eq(2)');
选取索引大于2的<div>元素
1 $('div:gt(2)');
选取所有标题元素,例如h1、h2等
$(':header');
选取当前正在执行动画的所有元素
$(':animated');
选取获取当前焦点的元素
$(':focus');
2、内容过滤选择器
选取含有文本“坚持”的<div>元素
$('div:contains('坚持')');
选取不包含子元素或者文本的<div>元素
$('div:empty');
选取含有<p>元素的<div>元素
$('div:has(p)');
选取含有子元素或者文本的元素
$('div:parent');
3、可见性过滤选择器
选取所有不可见的元素。包括<input type="hidden" />,<div style="display:none">和<div style="overflow:hidden">
$(':hidden');
选取所有可见的<div>元素
$('div:visible');
4、属性过滤选择器
选取有id属性的元素
$('div[id]');
选取id等于myId的<div>元素
$('div[id="myId"]');
选取id值不等于myId的<div>元素
$('div[id!="myId"]');
选取id值以my开头的<div>元素
$('div[id^="my"]');
选取id值以my结尾的<div>元素
$('div[id$="my"]');
选取id值含有my的<div>元素
$('div[id*="my"]');
选取属性title等于en或者以en为前缀(en后跟一个连字符'-')的元素
$('div[title|="en"]');
选取属性title中用空格分隔的值中包含字符en的<div>元素
$('div[title~="en"]');
选取拥有属性id并且属性title以en为前缀的<p>元素
$('p[id][title|="en"]');
5、子元素过滤器
选取每个class为one的<div>父元素下的第2个子元素
$('div.one :nth-child(2)');
选取每个class为one的<div>父元素下的第1个子元素
$('div.one :first-child');
选取<ul>中是唯一子元素的<li>元素
$('ul li:only-child');
6、表单对象属性过滤选择器
选取id为"form1"表单内的所有可用元素
$('#form1:enabled');
选取id为"form1"表单内的所有不可用元素
$('#form1:disabled');
选取所有被选中的<input>元素
$('input:checked');
选取所有被选中的选项元素
$('select option:selector');
▓▓▓▓▓▓ 表单选择器
选取所有的<input>、<textarea>、<select>和<button>元素
$(':input');
选取所有的单行文本框
$(':text');
选取所有的不可见的元素
$(':hidden');
其余的选择方法都可以通过单词了解到意思(例如 :submit 就是选择所有的提交按钮)就不再赘述。
参考资料:锋利的jQuery(第二版)
http://www.jquery123.com/
转载于:https://www.cnblogs.com/qqandfqr/p/6158784.html
jQuery学习之路(1)-选择器相关推荐
- JQuery学习04篇(层次选择器)
直接po图和代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- jQuery 学习之路(1):引子
一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...
- jQuery学习之旅 Item1 选择器【一】
点击"名称"会跳转到此方法的jQuery官方说明文档. 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择I ...
- JQuery学习四(过滤选择器)
:first选择第一个元素.$("div:first")进行选择第一个<div> :last 选择最后一个最后一个元素 $("div:last")选 ...
- jquery学习之路jquery之一:jquery选择元素的方法,太神了 2012.8.2
1.css选择器 例子: a 匹配所有连接<a>标签 #sss 所有id为sss的元素 a#sss.yangshi 所有id为sss并且有yangshi类的a元素 p a.sss ...
- 小白的jquery学习之路之04效果新闻向上无缝循环显示
15该节的原理是通过改变里面的ul的top值实现的 第一种方法,当c=4时,让c=0,我们会发现新闻刷刷的向上走,因此是不行的,没做到无缝循环显示 <html> <head>& ...
- 我的jQuery学习之路_笔记(五)
empty和remove区别 1,empty方法: 严格的讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点: empty不能删除自己本身这个节点: 2,remove方法 ...
- 小白的jquery学习之路之天猫04 效果 fadeTo animate方法 天猫图片滑动效果
效果 淡入淡出 fadeTo([[s],o,[e],[fn]]) // 图片的透明度 在2秒时间 到0.3 $("#dog").fadeTo(2000,0.3); fad ...
- jquery学习系列8(过滤选择器)
1.过滤器 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>& ...
- JQuery学习之路Part8:家族树操作(查找祖先、后代、兄弟同胞、绝对查找)【完结】
一.向上寻找 获取被选元素的直接父元素 语法:parent() 例: $(document).ready(function(){$("span").parent(); }); 获取 ...
最新文章
- fastclick:处理移动端click事件300毫秒延迟
- python3爬虫实例-python3.7简单的爬虫实例详解
- sql可视化工具_数据分析该用什么工具?
- ExtJS入门(08)窗口,按钮,输入框,
- 《四世同堂》金句摘抄(十二)
- 本地安装Docker
- kali不支持yum_Kali之teamviewer安装
- 全网最详细 Python如何读取NIFTI格式图像(.nii文件)和 .npy格式文件和pkl标签文件内容
- JAVA输出两个顺序链表的并集_(顺序表)两个集合求并集-洋葱先生-杨少通
- 数据库表名字段名命名规范
- python加法赋值运算符为_Python中什么是算术运算符、赋值运算符和复合运算符?...
- 自考 02333 软件工程 思维导图 结构化方法
- 【Cousera】北京大学 | 计算导论与C语言基础习题_8:最长平台
- 色彩设计的原理txt_设计原理:颜色
- Qgis系统教程1:软件安装
- golang xorm 自定义日志记录器,使用zap实现日志输出、切割日志
- JAVA - 变量作用域
- 导进去然后这边就报错了 看修改也看不懂
- 统计学(1)二项分布 几何分布 泊松分布 指数分布 正态分布 gamma分布 beta分布
- ts没有与此调用匹配的重载
热门文章
- 分享一个安全实现JSONP跨域的插件
- 《JavaScript高级程序设计》笔记之'ECMAScript基础'
- 百度中文依存句法分析工具DDParser重磅开源
- 【论文】本周论文推荐(迁移学习、阅读理解、对话系统、图神经网络、对抗生成网络等)...
- 本科化学 研究生力学 毕业从事销售最后却转行算法
- python 提取指定目录下的图片名称
- 双非本科逆袭 拿下ACM金牌、字节和旷视offer、保研985!
- 每日一题[LeetCode 689]三个无重叠子数组的最大和
- 《Node.js实战(双色)》作者之一——吴中骅访谈录
- 云计算将逐渐成为支撑SaaS应用的基础