jQuery学习笔记之jQuery选择器的使用

一.基本选择器:

  • #id   :选择给定ID名的元素 如:$("#id1")为选择id为id1的元素
  • .class   :选择给定类名的元素
  • element   :选择给定元素名的所有原色
  • *  :匹配所有元素
  • selector1,selector2,......   :选择这些名称的元素,以逗号隔开,可以是类或id名

二.层次选择器:

  • $("ancestor  descendant") :选择ancestor元素下的所有descendant(后代)元素
  • $("parent>child") :选择parent下的所有child(子)元素
  • $('prev+next') :选择紧跟prev后面的第一个next元素
  • $('prev~siblings') :选择prev后面的所有siblings元素

      $('prev+next') 和$(.prev).next("next")作用一样

      $('prev~siblings')和$(.prev).nextAll("siblings")作用一样

 

三.过滤选择:

  • :first    选择第一个元素  如:$("div:first")为选择第一个div元素
  • :last   选择最后一个元素
  • :not(selector)  选择不是selector的元素
  • :even  选择偶数索引的元素
  • :odd  选择所有奇数索引的元素
  • :eq(index)  选择索引等于index的元素
  • :gt(index)  选择索引大于index的元素
  • :lt(index)  选择索引小于index的元素
  • :header  选择所有<H>元素
  • :animanted  选择所有动画元素

四。内容过滤:

  • :contains(text)  选择含有text文本的元素 如:$("div:contains('hello')")为选择含有hello字符的div元素
  • :empty 选择所有不含字符的元素
  • :has(selector)  选择含有selector元素的元素
  • :parent 选择含有子元素的元素

五。可见性过滤:

  • :hidden 选择所有可见元素
  • :visible 选择所有不可见元素

六。属性过滤:

  • [attribute]  选择拥有此属性的元素 如$("div[id]")选择包含id属性的div元素
  •  [attribute=value] 选择attribute属性等于value值的元素
  •  [attribute!=value]  选择attribute属性不等于value值的元素
  •  [attribute^=value]   选择attribute属性等于value值的元素
  •  [attribute$=value]  选择attribute属性值以value值开始的元素
  •  [attribute*=value]  选择attribute属性值含有value值的元素
  • [selector1][selector2]....满足这些条件的元素(组合)

七。子元素过滤选择器

  • :nth-child(index/even/odd/eqation)选择父元素下的[索引/偶/奇]的子元素
  • :first-child 选择父元素的第一个子元素
  • :last-child选择父元素的最后一个子元素
  • :only-child 选择父元素下是唯一的子元素

八。表单属性过滤

  • :enabled 选择所有可见元素 如:$("#form1:enabled")是选择表单id为form1的所有可以用元素
  • :disable 选择所有不可见元素
  • :checked 选择所有被选择的元素
  • :selected 选择所有被选中的选项元素

九.表单对象过滤

  • :input  选择所有<input><textarea><select><button>元素
  • :text 选择所有单行文本款,下面的都是这个格式
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :button
  • :file
  • :hidden
     

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下。 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编程时候代码书写的方式产生的。 随着javascript的发展,异步的场景越来越多。前端有AJAX,setTimeout等,后端Node异步更多。按照传统的做法,那么就是各种回调嵌回调。代码可以把人绕晕。 这个时候,CommonJS社区提出了一个叫做Promise/A+的规范,这个规范定义了如何书写异步代码,包括使
二、动画 1 show()方法和hide()方法 复制代码 代码如下: $("selector").show() 从display:none还原元素默认或已设置的display属性 $("selector").hide() 设置元素的display样式为none,等于$("selector").css("display","none") (注:传入参数后,.show()和.hide()方法同时动画改变元素的width,height和透明属性;传入参数控制显隐速度,单位毫秒,如.show(600),也可传入f
本文实例讲述了JavaScript控制网页层收起和展开效果的方法。分享给大家供大家参考。具体如下: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"htmlheadbase href=#> 希望本文所述对大家的javascript程序设计有所帮助。
在NodeJS中启用ES6 (harmony) 版本: 开始吧, Linux下启用 来源: http://h3manth.com/new/blog/2013/es6-on-nodejs/ Node version : v0.11.6 先来看一看版本 harm ;) : $ node --v8-options | grep harm --harmony_typeof (enable harmony semantics for typeof) --harmony_scoping (enable harmony
话说回来,虽然jQuery让学习前端技术的越来越多了起来,(本人就是因为学校图书馆偶然间遇到了一本jQuery基础教程(二)开始想深入的学习前端技术),关于jQuery的博文甚至多于javascript,它让编程的门槛大大的降低了,但是它隐藏了太多细节了,形如$('#id').append('pxxx/p').clone().appendTo(x).end().css(...)................这样操作的模式已经很难找到常规javascript的影子。浏览器的差异仿佛一去就不见了踪影,我不认为
javascript中的每个对象都有一个内置的属性prototype,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。意思是是prototype属性保存着对另一个JavaScript对象的引用,这个对象作为当前对象的父对象。 复制代码 代码如下: A.prototype = new B(); 理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以

原生JS实现LOADING效果 - 2015-04-30 14:04:51

纯文本loading效果,可以自己定义颜色和速度 复制代码 代码如下: /** Loading animation * Created by 黑と白の印
本文实例讲述了JS使用oumousemove和oumouseout动态改变图片显示的方法。分享给大家供大家参考。具体如下: 鼠标放到图片上时图片会自动变大,鼠标离开图片还原 !DOCTYPE htmlhtmlheadscriptfunction bigImg(x){x.style.height="64px";x.style.width="64px";}function normalImg(x){x.style.height="32px";x.style.width="32px";}/script/head
有一个字符串“[lightinthebox]”,但是我只是需要lightinthebox,就是不要“[]”。怎么用又快又有效的办法去掉呢。 stringObject.substring(start,stop) //截取的是开始与结束的字符串。 stringObject.substr(start,length) //截取的是开始与字符串长度。 考虑到这些,和方法的连缀。 stringObject.substr(1).substring(-1,0) //就是可行的啦 这里就顺便说一个截取时间啦,现在都是有那种想
复制代码 代码如下: script function readThis(){ var tempStr = ""; var filePath= document.all.upfile.value; var oXL = new ActiveXObject("Excel.application"); var oWB = oXL.Workbooks.open(filePath); oWB.worksheets(1).select(); var oSheet = oWB.ActiveSheet; try{ for(