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. SQL Server 关于列的权限控制

    在SQL SERVER中列权限(Column Permissions)其实真没有什么好说的,但是好多人对这个都不甚了解,已经被人问了几次了,所以还是在这里介绍一下,很多人都会问,我能否单独对表的某列授 ...

  2. C、C++： 引用、指针、实例、内存模型、namespace

    // HelloWorld.cpp : Defines the entry point for the console application. // #include "stdafx.h& ...

  3. PHP服务缓存优化之ZendOpcache、xcache、eAccelerator

    PHP服务缓存优化原理 Nginx 根据扩展名或者过滤规则将PHP程序请求传递给解析PHP的FCGI,也就是php-fpm进程 缓存操作码(opcode) Opcode,PHP编译后的中间文件,缓存给 ...

  4. 记录一次MongoDB3.0.6版本wiredtiger与MMAPv1引擎的写入耗时对比

    一.MongoDB3.0.x的版本特性(相对于MongoDB2.6及以下): 增加了wiredtiger引擎: 开源的存储引擎: 支持多核CPU.充分利用内存/芯片级别缓存(注:10月14日刚刚发布的 ...

  5. [AJAX]ajax在兼容模式下失效解决办法

    使用jQuery,用ajax实现局部刷新功能,在火狐,360急速浏览器高速模式下,ie8,9都能正常运行,但切换到兼容模式下无效,解决办法有两种关闭浏览器兼容性视图,二是引入json2.js文件 这里 ...

  6. MVC PartialView

      参考 Updating an MVC Partial View with Ajax RenderPartial vs RenderAction vs Partial vs Action in MV ...

  7. (转)浅析Java中的访问权限控制

    原文地址: http://www.cnblogs.com/dolphin0520/p/3734915.html 今天我们来一起了解一下Java语言中的访问权限控制.在讨论访问权限控制之前,先来讨论一下 ...

  8. 计算机网络－IP类型判断

    第一个类别为A类,最后一个类别为E类,前边三个类别(A类.B类和C类)被用来标识工作站.路由器.交换机以及其他设备,而最后两个类别(D类和E类)被保留做特殊用途. 一个IP地址由32个比特位构成,这就 ...

  9. AC日记——约瑟夫问题 codevs 1282

    1282 约瑟夫问题  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master 题解  查看运行结果     题目描述 Description 有编号从1到N的N个小 ...

  10. MySQL数据类型-decimal详解

    from:http://www.linuxidc.com/Linux/2013-07/88032.htm 1.首先,对于精度比较高的东西,比如money,我会用decimal类型,不会考虑float, ...