JQ001-认识jQuery

jQuery环境配置：将jQuery.js文件引入到html页面中即可。

代码如下：

<!DOCTYPE html>

<html>

<head>

<title></title>

<script src="../script/jquery.js" type="text/javascript"></script>

</head>

<body>

</body>

</html>

$(document).ready()与window.onload的简单区别。

商品导航栏代码如下：

jQuery对象和DOM对象

jQuery对象

DOM对象

jQuery对象是通过jQuery包装DOM后产生的对象。jQuery对象是jQuery独有的，如果一个对象是jQuery是jQuery对象没呢么就可以使用jQuery里面独有的方法。

jQuery对象无法使用DOM 对象中的任何方法，比如：$(“#id”).innerHTML等写法都是错误的。

每一份DOM 都可以表示成一棵树

jQuery对象和DOM对象

如果获取对象是jQuery对象则，在变量前面加上$

jQuery对象转换成DOM对象：

通过get(index)方法得到相应的DOM 对象。

DOM对象转换成jQuery对象

对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个 jQuery对象了。方式为:$(DOM对象)

JQ002-jQuery选择器

  1. 基本选择器

选择器

描述

返回

实例

#id

根据给定的id匹配一个元素

单个元素

$("#test")选取id为test的元素

.class

根据给定的id匹配一个元素

集合元素

$(".test")选取所有class为test的元素

Element

根据给定的元素名匹配元素

集合元素

$("p")选取所有的<p>元素

*

匹配所有元素

集合元素

$("*")选取所有的元素

selector1,selector2,...., selectorN

将每一个选择器匹配到的元素合并后一起返回

集合元素

$("div, span, p.myClass")选取所有<div> <span>和拥有class为myClass的<p>标签的一组元素
  1. 层次选择器

选择器

描述

返回

实例

$("ancestor descendant")

选取ancestor元素里的所有descendant（后代）元素

集合元素

$("div span")选取<div>里的所有的<span>元素

$("parent > child")

选取parent元素下的child（子）元素，与$("ancestor descendant")有区别

集合元素

$("div > span")选取<div>元素下元素名是<span>的子元素

$("prev+next")

选取紧接在prev元素后的next元素

集合元素

$(".one + div")选取class为one的下一个<div>兄弟元素

$("prev~siblings")

选取prev元素之后的所有siblings元素

集合元素

$("#two ~ div")选取id为two的元素后面的所有<div>兄弟元素
  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>元素（注：大于1，不包括1）

:lt(index)

选取索引小于index的元素（index从0开始）

集合元素

$("input:lt(1)")选取索引大于1的<input>元素（注：小于1，不包括1）

:header

选取所有的标题元素，例如h1，h2，h3等

集合元素

$(":header")选取网页中所有的<h1>，<h2>，<h3>.......

:animated

选取当前正在执行动画的所有元素

集合元素

$("div:animated")选取正在执行动画的<div>元素

4.过滤选择器——内容过滤选择器

选择器

描述

返回

示例

:contains(text)

选取含有文本内容为"text"的元素

集合元素

$("div:contains('我')")选取含有文字“我”的<div>元素

:empty

选取不包含子元素或者文本的空元素

集合元素

$("div:empty")选取不包含子元素（包括文本元素）的<div>空元素

:has(slector)

选取含有选择器所匹配的子元素的元素

集合元素

$("div:has(p)")选取含有<p>元素的<div>元素

:parent

选取含有子元素或者文本的元素

集合元素

$("div:parent")选取拥有子元素（包括文本元素）的<div>元素

5.过滤选择器——可见性过滤选择器

选择器

描述

返回

示例

:hidden

选取所有不可见的元素

集合元素

$(":hidden")选取所有不可见的元素。包括<input type="hidden" />，<div   style="display:none;">和<div   style="visibility:hidden;">等元素。如果只想选取<input>元素，可以使用$("input:hidden")

:visible

选取所有可见的元素

集合元素

$("div:visible")选取所有可见的<div>元素

6.过滤选择器——属性过滤选择器

选择器

描述

返回

示例

[attribute]

选取拥有此属性的元素

集合元素

$("div[id]")选取拥有属性id的元素

[attribute=value]

选取属性的值为value的元素

集合元素

$("div[title=test]")选取属性title为"test"的<div>元素

[attribute!=value]

选取属性的值不等于value的元素

集合元素

$("div[title!=test]")选取属性title不等于"test"的<div>元素（注意：没有属性title的<div>元素也会被选取）

[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>元素

[selector1][selector2]...[selectorN]

用属性选择器合并成一个复合属性选择器，满足多个条件。没选择一次，缩小一个范围

集合元素

$("div[id][title$='test']")选取拥有属性id，并且属性title以“test”结束的<div>元素

7.过滤选择器——子元素过滤选择器

选择器

描述

返回

示例

:nth-child(index/even/odd/equation)

选取每个父元素下的第index个子元素或者奇偶元素。(index从1算起）

集合元素

:eq(index)只匹配一个元素，而nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index从1开始，而:eq(index)是从0算起的

:first-child

选取每个父元素的第一个子元素

集合元素

:first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。
  例如：$("ul li:first-child");选择每个<ul>中的第一个<li>元素

:last-child

选取每个父元素的最后一个子元素

集合元素

同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素

:only-child

如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中包含其他元素，则不会被匹配

集合元素

$("ul
li:only-child")在<ul>中选取是唯一子元素的<li>元素

:nth-child(2)选取每个父元素下的索引值等于2的元素

:nth-child(3n)选取每个父元素下的索引值是3的倍数的元素（n从0开始）

:nth-child(3n+1)选取每个父元素下的索引值是(3n+1)的元素（n从0开始）

8.过滤选择器——表单对象属性过滤选择器

这组选择器主要是对所选择的表单元素进行过滤

选择器

描述

返回

示例

:enabled

选取所有可用元素

集合元素

$("#form1
:enabled");选取id为"form1"的表单内的所有可用元素

:disabled

选取所有不可用元素

集合元素

$("#form2
:disabled");选取id为"form2"的表单内的所有不可用元素

:checked

选取所有被选中的元素

集合元素

$("input:checked");选取所有被选中的<input>元素

:selected

选取所有被选中的选项元素（下拉列表）

集合元素

$("select
:selected");选取所有被选中的选项元素

9.表单选择器

选择器

描述

返回

示例

:input

选取所有的<input>、<textarea>、<select>和<button>元素

集合元素

$(":input")

:text

选取所有的单行文本框

集合元素

$(":text")

:password

选取所有的密码框

集合元素

$(":password")

:radio

选取所有单选框

集合元素

$(":radio")

:checkbox

选取所有多选框

集合元素

$(":checkbox")

:submit

选取所有提交按钮

集合元素

$(":submit")

:image

选取所有的图像按钮

集合元素

$(":image")

:reset

选取所有重置按钮

集合元素

$(":reset")

:button

选取所有button按钮

集合元素

$(":button")

:file

选取所有上传域

集合元素

$(":file")

:hidden

选取所有不可见元素

集合元素

$(":hidden")

10.如果选择器中含有“.“、”#”、“（”或“]“等特殊字符需要用\来进行转义

例如：

<div
id="id#b">bb</div>

<div id="id[1]">cc</div>

需要用以下方法获取元素：

$('#id\\#b');

$('#id\\[1\\]');

JQ001-认识jQuery 和 JQ002-jQuery选择器的更多相关文章

  1. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  2. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  3. jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器

    1.  什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...

  4. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  5. 【学习笔记】锋利的jQuery（一）选择器

    一.要点阐述 1,jQuery创建于2006年1月的一个开源项目,强调理念是“write less,do more”,压缩后大小30KB左右.. 2,jQuery里的方法都被设计程自动操作对象集合,而 ...

  6. 汇总jQuery的61种选择器及示例

    汇总jQuery的61种选择器及示例 恋痿喃 ㄍń稀广 因罘乐睽 ú燔蒇 骤幄觳 ч豹 齑骝氮铷 宅廓Ω孓 锏遒 荛猩ㄜ彬 芡钷ж ┊贩错鹌 掩饰着可还是几步就窜到了门口看着这个让她 ...

  7. jQuery（2）——选择器

    选择器 利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为.jQuery的行为规则都必须在获取到元素后才能生效. [jQuery选择器的优势] (1)简洁的写法 ...

  8. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

  9. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  10. （jQuery知识点整理-含有选择器）

                                       第一单元                                       jQuery介绍:   javaScript ...

随机推荐

  1. 001.mysql安装(lnmp)

    mysql官方网站:http://dev.mysql.com/downloads/ Linux环境:刚安装的32位的“最小化安装“的CentOS 6.7 mysql版本:本次实验安装的是mysql5. ...

  2. OpenStack云计算快速入门之二：OpenStack安装与配置

    原文:http://blog.chinaunix.net/uid-22414998-id-3265685.html OpenStack云计算----快速入门(2) 该教程基于Ubuntu12.04版, ...

  3. maven archetype生成自定义项目原型(模板)

    maven archetype可以将一个项目做成项目原型,之后只需要以此原型来创建项目,那么初始创建的项目便具有原型项目中的一切配置和代码.通俗讲就是一个项目模板. eclipse中那些快速生成mav ...

  4. 某墙尼妹，用个Response.Filter来解决StackExchange.Exceptional中google cdn的问题

    某墙墙了古古路,一些开源的东东里用了古古路CDN,比如Exceptional,Opserver ,导致服务要么慢要么用不了 必须要替换之 Exceptional就只要用Response.Filter替 ...

  5. [WPF系列]-DataBinding 枚举类型数据源

    public class EnumerationDataProvider : ObjectDataProvider { public Type EnumerationType { get; set; ...

  6. 帆软报表FineReport数据库连接编码转换

    1. 问题描述 数据库会以某种编码方式保存与读取数据,FineReport解析时默认使用GBK字符集,若数据库端编码与设计器端编码不一致时,就会导致中文及特殊字符的乱码. FineReport在定义数 ...

  7. PHP_Cli模式初涉——转载一篇

    http://www.cnblogs.com/ellisonDon/archive/2012/11/19/2777523.html http://www.cnblogs.com/ellisonDon/ ...

  8. 用最简单的方式在C#中使用多线程加速耗时的图像处理算法的执行（多核机器）。

    图像处理中,有很多算法由于其内在的复杂性是天然的耗时大户,加之图像本身蕴涵的数据量比一般的对象就大,因此,针对这类算法,执行速度的提在很大程度上依赖于硬件的性能,现在流行的CPU都是至少2核的,稍微好 ...

  9. 虚拟机linux上网问题

    VMware中虚拟机网络的三种设置 1.桥接(bridged)(设置上网比较繁琐,但是在嵌入式开发中比较有用)2.NAT(上网比较简单,但是不能用于嵌入式开发中)3.Host only (该模式下仅主 ...

  10. C语言中结构体赋值问题的讨论

    今天帮师姐调一个程序的BUG,师姐的程序中有个结构体直接赋值的语句,在我印象中结构体好像是不能直接赋值的,正如数组不能直接赋值那样,我怀疑这个地方有问题,但最后证明并不是这个问题.那么就总结一下C语言 ...