码迷,mamicode.com
首页 > Web开发 > 详细

jQuery学习01

时间:2016-08-20 23:19:38      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

1. jQuery

1.1 定义:

jQuery是一个集合了许多我们常用的函数的一个JS库,它的使用能使开发者更方便的完成需要用JS代码来完成的特效。

1.2 优点:

jQuery是集成了便捷性好、容错性高、兼容性好等优点的JS库。

1.3 学习目的:

由于jQuery是众多函数的集合,那它存在许多的方法,我们学习的目的就是学习jQuery中的方法,并最好能知悉这些方法的实现原理。

1.4 使用方法:

jQuery为外部的JS库,所以在每次HTML页面设计时都需要引入jQuery,不然无法使用jQuery中的方法。

2. $的本质

$的本质就是一个函数

2.1 $第一种使用方法

$(function(){}):jQuery入口函数

2.2 $第二种使用方法

$(domObj):将dom对象转换成jQuery对象

2.3 $第三种使用方法

$(selector):作为选择器,选取文档中的元素。

3. 入口函数

jQuery入口函数的写法:

$(document).ready(function(){});

$(function(){});

js的入口函数写法:

window.onload = function(){};

jQuery入口函数与JS入口函数的区别:

1 jQuery入口函数是在文档树加载完成的时候执行,不需要等待图片等其他资源加载完成。

2 JS入口函数时在文档树加载完成,并且图片等其他资源全部加载完成后执行。

4. DOM对象与jQuery对象

4.1 DOM对象:通过JS方法获取到的页面元素。

无法使用jQuery对象的方法。

4.2 jQuery对象:通过jQuery方法获取的页面元素。就是由DOM对象组成的一个包装集。

无法使用DOM对象的方法。

4.3 两者的相互转换

jQuery对象转DOM对象:jQuery对象是由DOM对象组成的一个伪数组,所以可以通过索引的方式将jQuery对象转DOM对象。转换方法有两种。

1 jQueryObj[index]

2 jQueryObj.get(index)

DOM对象转jQuery对象:使用$函数直接将DOM对象转换为jQuery对象。

$(DOMObj)

5.jQurery选择器

5.1 基本选择器

$(".className"):类选择器

$("#id"):id选择器

$("tagName"):标签选择器

$("selector1,selector2,..."):并集选择器

$("selector1selector2"):交集选择器

5.2 层级选择器

$("selector1 selector2"):后代选择器

$("selector1>selector2"):子代选择器

区别:后代元素为父元素下的所有元素,子代元素为父元素下第一层级的元素。

5.3 过滤选择器

格式:$("selector:filter")。

$("selector:odd"):奇数过滤选择器

$("selector:even"):偶数过滤选择器

$("selector:eq(index)"):序号过滤选择器

5.4 筛选选择器

筛选选择器不同于其他选择器,筛选选择器全是jQuery对象的方法,所有都需要带()。

jQueryObj.children(selector):在对象下的子元素中找与selector对应的所有元素。()内如果没有selector,则表示选择所有子代元素。

jQueryObj.find(selector):在对象下的所有后代元素中找与selector对应的所有元素。()内不能缺少selector。

jQueryObj.next():找与对象同级的下一个元素。

jQueryObj.siblings(selector):在与对象同级的元素中找与selector对应的所有元素。()内如果没有selector,则表示选择所有与对象同级的元素。不包括对象本身。

jQueryObj.parent():找对象的父级元素。

jQueryObj.eq(index):在对象子元素中找索引为index的元素。

jQuery学习01

标签:

原文地址:http://www.cnblogs.com/chendu/p/5791350.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!