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

时间: 2024-12-11 19:22:41

jQuery学习01的相关文章

jQuery 源码学习 - 01 - 简洁的 $('...')

首先贴上学习参考资料:[深入浅出jQuery]源码浅析--整体架构,备用地址:chokcoco/jQuery-. jQuery 库,js 开发的一个里程碑,它的出现,让网页开发者们告别荒蛮的上古时代,初步解放生产力,正式进入黄铜时代. 虽然如今 Angular/React/Vue 三驾马车驰骋畋猎,jQuery的时代渐行渐远,但是它的思想它的设计都有着里程碑式的作用.当然,我是拿它来补基础的,逃... 1.自执行函数 (function(params) { // ... })(Variable)

jquery学习(一)

简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type="text/javascript"></script> 首先一定要注意的是引入的路径 按照案例写一个简单的DEMO <%@ page language="java" contentType="text/html; charset=UT

第二十三篇 jQuery 学习5 添加元素

jQuery 学习5 添加元素 同学们,这节课,使用jQuery动态添加元素,是很关键的一课,一般用在什么地方呢:别人发表一篇文章,你评论楼主的时候,总不能是提交表单,到后台的其他页面处理,然后再刷新回来吧,这样的话,用户体验不好.考虑一下用户的计算机配置不好.网络不好等多个因素,总是刷新页面,会造成等待的时间太长.甚至有的浏览器直接刷新不出来了,那么用户就抓狂了,就对你的产品有怨言. 所以,我们做前端,要实现动态添加,以后再使用ajax这类异步刷新和后台交互就可以了,那么多的不说,我们现在学的

【iScroll源码学习01】准备阶段 - 叶小钗

[iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3496369.html 主题 iScroll HTML JavaScript ① viewport相关知识点(device-width等) ②  CSS3硬件加速 ③ 如何暂停CSS动画 ④ e.preventDefault导致文本不能获取焦点解决方案 ...... 当然,我们写的demo自然不能和

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

jQuery学习总结(一)

jQuery学习完了,但是感觉知识点很杂,想JavaScript一样,所以还是总结一下比较好. 1.DOCTYPE 在每次的html页面前都会有这样一句话,那么它有什么作用呢? DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档.也就是告知浏览器的渲染显示方式. 2.新的方法--专属jQuery (1)$()方法: 可以通过$()方法来获得页面的指定节点,参数是某种CSS的选择器. var userN

jQuery学习-事件之绑定事件(三)

在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event, handlers ) {         var sel, handleObj, matches, i,             handlerQueue = [],             delegateCount = handlers.delegateCount,             cur =

OSX学习01之更新头像

前不久在官网上守株待兔,买了一个官翻版865,其实最想买294的,可是米不足啊——所以,在同时下了865和293的订单,并纠结了一天后,确定了865,剩余的钱够一个Mac mini了,如果不买也可以日后买iMac. 相关的内容等会儿写另一帖,废话就不说了. 拆机后简单的设置下账户信息,但是没觉得账户图片好看,又没发现又什么方式设置账户图片,纠结了很久. 本机没有什么图片,这时候可以先把图片下载下来再说. 进入系统偏好设置-->用户与群组-->当前用户,点击现有头像-->最近使用-->