当前位置:首页 > 资讯 > info5 > 正文

jQuery(1)----入门&选择器

发表于: 2013-03-19   作者:sgx425021234   来源:转载   浏览:
摘要: 一、jQuery简介jQuery是继Prototype之后又一个优秀的JavaScript库jQuery理念:写得少,做得多.优势如下:轻量级强大的选择器出色的DOM操作的封装可靠的事件处理机制完善的Ajax出色的浏览器兼容性链式操作方式……第一个案例 二、jQuery对象jQuery对象就是通过jQuery($())包装DOM对象后产生的对象jQuery对象是jQuery独有的.如果一个对象是j

一、jQuery 简介

jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库
jQuery 理念: 写得少, 做得多. 优势如下:
轻量级
强大的选择器
出色的 DOM 操作的封装
可靠的事件处理机制
完善的 Ajax
出色的浏览器兼容性
链式操作方式
……

第一个案例

jQuery(1)----入门&选择器_第1张图片

 

二、jQuery 对象

jQuery 对象就是通过 jQuery ($()) 包装 DOM 对象后产生的对象
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法
约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $.  
var $variable = jQuery 对象
var variable = DOM 对象

三、DOM 对象转成 jQuery 对象

对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象.

var dc=document.getElement("aa");

var $dc=$(dc);
   转换后就可以使用 jQuery 中的方法了

jQuery 对象转成 DOM 对象

jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM 对象的时候, 有如下两种处理方法:
(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象. 

var $dc=$("#dc");

var dc=$dc[0];


(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象  

                 var $dc=$("#dc");

               var dc=$dc.get(0);

四、jQuery 选择器


jQuery(1)----入门&选择器_第2张图片

 

 

基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).

jQuery(1)----入门&选择器_第3张图片

 

层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.

 

 

注意:  (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

基本过滤选择器

jQuery(1)----入门&选择器_第4张图片

 

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

jQuery(1)----入门&选择器_第5张图片

 

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

 jQuery(1)----入门&选择器_第6张图片

 

可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input  type=“hidden”>)和 visible:hidden 之类的元素

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

jQuery(1)----入门&选择器_第7张图片

 

子元素过滤选择器

jQuery(1)----入门&选择器_第8张图片

 

nth-child() 选择器详解如下:
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

jQuery(1)----入门&选择器

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
jQuery入门及各种选择器讲解 1.jQuery简介(write less do more) jQuery 是继 Prototype 之后又一个
通过标签名,属性名或内容对DOM元素进行选择,没有浏览器的兼容问题 选择器类型: 基本选择器 层次
嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库
1、JQuery选择器继承了CSS、path语音的部分语法,允许通过标签名、属性名、内容对DOM元素进行快速、
jQuery入门[1]-构造函数 jQuery入门[1]-构造函数 jQuery入门[2]-选择器 jQuery入门[3]-事件 jQu
jQuery 选择器   $()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是.
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 i
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值
JQuery选择器顾名思义就是通过选择器选中相应的DOM元素执行需要的操作,JQuery选择器的强大之处还在
1 jQuery选择器是什么? jQuery选择器可以通过标签名、属性名或者内容对DOM元素进行快速、准确的选
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号