详解jQuery选择器

大致介绍

终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery

jQuery是什么?

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设 计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。(来自百度-_-)

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的背景色

$('p,.one').css('background','#bbffaa');

层次选择器

选取div里的所有span元素

$('div span');

选取div下元素名是span的子元素

$('div > span');

选取class是one的下一个<div>同辈元素

$('.one + div');

选取class是one的后面的所有的<div>同辈元素

$('.one ~ div');

过滤选择器

1、基本过滤选择器

选取所有<div>元素中第一个<div>元素

$('div:first');

选取class不是one的<div>元素

$('div:not(.one)');

选取索引是偶数的的<div>元素

$('div:even');

选取索引等于2的<div>元素

$('div:eq(2)');

选取索引大于2的<div>元素

$('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.jb51.net/books/92918.html

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!   

(0)

相关推荐

  • jQuery选择器_动力节点Java学院整理

    选择器是jQuery的核心.一个选择器写出来类似$('#dom-id'). 为什么jQuery要发明选择器?回顾一下DOM操作中我们经常使用的代码: // 按ID查找: var a = document.getElementById('dom-id'); // 按tag查找: var divs = document.getElementsByTagNames('div'); // 查找<p class="red">: var ps = document.getElement

  • JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位

    废话不多说了,直接给大家贴代码了,具体代码如下所示: checkpassword = function(v){ var numasc = 0; var charasc = 0; var otherasc = 0; if(0==v.length){ return "密码不能为空"; }else if(v.length<8||v.length>12){ return "密码至少8个字符,最多12个字符"; }else{ for (var i = 0; i &

  • 详解jquery选择器的原理

    详解jquery选择器的原理 html部分 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="js/minijquery.js"></script> </head> <body>

  • js控制文本框禁止输入特殊字符详解

    在开发难免遇到一些前端需要验证输入的数据是否合法的问题,收集分享在这里同学们使用,欢迎补充. 1.标签上直接替换方法: JS 控制不能输入特殊字符 <input type="text"class="domain"onkeyup="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')": this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')

  • jQuery选择器实例应用

    刚学完jQuery选择器,闲来无事,照着书上的范例敲了一段代码(HTML和CSS抄自书上),自己试着写了写jQuery的代码,感觉相当轻便啊. 显示效果: 功能说明: 1.点击上边的图书分类一栏,实现向下的伸缩扩展,可以控制分类的显示状态: 2."简化"功能点击后实现分类显示菜单数量的简化,简化后,简化字样变成"展开": 3.页面中的两个红色箭头图标均为显示状态的图标,每次点击后都会变换相应的状态效果. 代码实现: <html> <head>

  • easyui-datagrid特殊字符不能显示的处理方法

    在easyui中datagrid.combobox.tree等组件都不能显示含有html标签的特殊字符,因为这些字符会被当作html标签被解析掉.这里给出了一个处理方案,希望对大家有帮助. 以datagrid为例: 找到jquery.datagrid.js文件,在其中添加如下方法: function escapeHtml(s) { if (s === undefined) { return s; } else { s = String(s === null ? "" : s); ret

  • jQuery选择器特殊字符与属性空格问题

    一.选择器中含有特殊符号的注意事项 1.选择器中含有"."."#"."("或"]"等特殊字符 根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有"#"和"."等特殊字符,如果按照普通的方式去处理出来的话就会出错.解决此类错误的方法是使用转义符转义. <div id="id#b">bb</div> <

  • 常用jQuery选择器汇总

    学习[js DOM 编程艺术],最后面有许多jQuery的选择器,每个都动手敲了一遍. jQuery 提供了高级选择器的方法. j s获取元素的三个基本方法分别是通过标签名,类名和id,即(getElementsByTagName, getElementsByClassName和getElementById).那么jQuery是如何获取呢? 通过标签获取:$('tag') 通过类名获取:$('.className') 通过id获取:$('#id') 除了上面个三个最基本最简单的,还有下面几个cs

  • jquery选择器大全 全面详解jquery选择器

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点:1.简化代码的编写2.隐式迭代3.无须判断对象是否存在其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的.如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式.现在我们正式进入j

  • 详解jQuery选择器

    大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档

  • 详解jQuery中ajax.load()方法

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); load()函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容. load()函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式. 因为默认使用的是Get请求方式,所以我们也可以在url加数据进行提交. 例

  • 实例详解jQuery Mockjax 插件模拟 Ajax 请求

    1. 原理 jquery-mockjax是用于mock 前台ajax向后台请求的返回数据. 原理很简单 在你js代码要发送ajax请求的地方断点一下,然后比较在[引入jquery-mockjax] 和 [没有引入jquery-mockjax]的情况下$.ajax.toString()的值情况. 很明显,引入jquery-mockjax时,这个mock库会对jquery提供的ajax函数做替换.这样就很容易能mock起来. 在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这

  • 详解jQuery的animate动画方法及动画排队问题解决

    animate()动画方法 作用:执行css属性集的自定义动画 语法:$(selector).animate(styles,speed,easing,callback) • 参数1: css 的属性名和运动结束位置的属性值的集合. • 参数2:可选,规定动画的速度,默认是 "normal".其他值,"slow"."normal"."fast",数字格式,单位为毫秒. • 参数3:可选,规定在不同的动画点中设置动画速度的 eas

  • 详解jQuery 链式调用

    链式调用 jQuery对象调用任何方法(除了节点关系方法)执行完后,方法都会有一个返回值,返回值就是jQuery对象自己,这个现象给我们提供了便利,可以对执行结果继续打点调用jQuery的方法和属性.即--可以使用jQuery对象进行连续打点调用 console.log($(this).css("background-color", "pink").html("hello")); jQuery对象调用除了节点关系的方法之外,其他的方法执行后,返回

  • 详解jquery和vue对比

    前言:很多人说jquey和vue没有什么可比的,应该和Angular,React来比吧,我到觉得他们倒没有多大的可比性,都是基于mvvm思想设计的框架,无非就是实现的方式不一样,在不同场景下性能上会有一些差异.然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据上去,难道不是一个根本性的改变吗? 1.jquery介绍:想必大家都用过jquery吧,这个曾经也是现在依然最流行的web前端js库,可是现在无论是国内还是国外他的使用率正在

  • 实例详解jQuery表单验证插件validate

    validate插件是一个基于jquery的表单验证插件了里面有许多的常用的一些验证方法我们可以直接调用,具体的我们一起来看看. 例子,html代码 <!DOCTYPE html> <html lang="en"> <head> <include file="Common/Header" /> <meta charset="utf-8"> <script src="/jq

  • 详解JQuery基础动画操作

    1.jQuery动画效果,隐藏和显示. 两个方法:hide()"隐藏"      show()"显示" <p>JQuery动画效果,隐藏和显示</p> <input type="button" value="隐藏" id="button1"> <input type="button" value="显示" id="b

随机推荐