zoukankan      html  css  js  c++  java
  • jQuery学习01

    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的元素。

  • 相关阅读:
    数据产品设计专题(2)- 数据产品设计方法论之框架体系
    数据产品设计专题(1)- 数据产品设计方法论之互联网思维
    数据仓库专题(23):总线矩阵的另类应用-Drill Down into a More Detailed Bus Matrix
    数据仓库专题(22):总线架构和维度建模优势-杂项
    数据仓库专题(21):Kimball总线矩阵说明-官方版
    胖子哥的大数据之路(17):重构-基于商业本质看互联网思维
    胖子哥的大数据之路(16):数据采集标准-我们到底需要什么样的数据?
    android开发实践之1:安装部署环境设置
    MVC模式
    访问者模式
  • 原文地址:https://www.cnblogs.com/chendu/p/5791350.html
Copyright © 2011-2022 走看看