jQuery

day01

1.1 jQuery

作用:写的少,做的多

1.2使用步骤

引入 jQuery 文件

添加入口函数(非必须,可以写在html上面,提高安全性,每个入口都是独立的)

加钱干活($),在入口函数中调用封装好的api实现页面效果

1.3jQuery 的基本使用

1.$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $ 。

2.$ 是jQuery 的顶级对象,把元素利用$包装成jQuery对象,就可以调用jQuery 的方法。

3.它的常用方式:

添加入口函数

获取元素

dom元素转换为jQuery对象

创建元素

注意:只有jQuery对象才能调用jQuery封装的方法

1.4jQuery 对象和 DOM 对象

1.用原生 JS 获取来的对象就是 DOM 对象

2.jQuery 方法获取的元素就是 jQuery 对象。

3.jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。

注意:

只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。它们的api不能混用哦。

4.DOM 对象与 jQuery 对象之间是可以相互转换的。

\1. DOM 对象转换为 jQuery 对象: $(DOM对象)

$('div')

\2. jQuery 对象转换为 DOM 对象(两种方式)

$('div') [index] index 是索引号

$('div') .get(index) index 是索引号

2.jQuery 选择器

2.1 jQuery 基础选择器

2.2jQuery 筛选选择器

2.3 jQuery 筛选方法(重点)

重点记住: parent() children() find() siblings() eq() next()

3.jQuery 样式操作

3.1样式操作方法

单个:css('属性名','属性值')

多个:css({属性名:'属性值';属性名2:'属性值2'})

3.2类操作

addClass()添加类

removeClass()移除类

toggleClass()切换类

hasClass()判定是否存在类

4.jQuery 效果

参数1:速度,默认normal(400),常用三种(slow(200)、normal(400)、fast(600);

参数2:变化规则,默认是“swing”,可用参数“linear”;

参数3:回调函数,在动画完成时执行的函数,每个元素执行一次。

自定义动画 animate

animate({CSS样式},参数1,参数2,参数3)

动画队列及其停止排队方法

stop()写到动画或者效果的前面, 相当于停止结束上一次的动画。

day02

1.jQuery 属性操作

1.设置或获取元素固有属性值:prop(''属性'')

设置属性语法:prop(''属性'', ''属性值'')

2.设置或获取元素自定义属性值:attr(''属性'')    // 类似原生 getAttribute()

设置属性语法:attr(''属性'', ''属性值'')                // 类似原生 setAttribute()

注意:

操作状态值的时候(如'checked','selected','disabled'等)只能使用prop,否则无法获取到想要的结果

3.数据缓存 data()

data(''name'',''value'') // 向被选元素附加数据

data()              // 获取元素所有自定义属性,返回一个对象

data(''name'')          // 向被选元素获取抒写名称的自定义属性数据

2.jQuery 内容文本值

1. 普通元素内容 html()( 相当于原生inner HTML)

html()  // 获取元素的内容

html(''内容'') // 设置元素的内容

2.普通元素文本内容 text() (相当与原生 innerText)

text()          // 获取元素的文本内容

text(''文本内容'') // 设置元素的文本内容

3. 表单的值 val()( 相当于原生value)

val()          // 获取表单的值

val(''内容'') // 设置表单的值

3.jQuery 元素操作

1.遍历元素

jq对象遍历:jq对象.each(回调函数(下标,形参))

普通对象遍历:$.each(普通对象,回调函数(下标,形参))

2.创建元素

$(''<li></li>'');

3.添加元素

内部添加:

元素.append(''内容'')            //添加在内部最后面

元素.prepend(''内容'')            //添加在内部最前面

外部添加:

元素.after(''内容'')              //添加在目标元素后面

元素.before(''内容'')          //添加在目标元素前面

4.删除元素

元素.remove()                //删除本身元素

元素.empyt()                  //删除元素里面的所有节点

元素.html('''')                  //值为空时是删除所有,有值时为改修内容

4.jQuery 尺寸、位置操作


4.2jQuery 位置

位置主要有三个: offset()、position()、scrollTop()/scrollLeft()

1. offset() 设置或获取元素偏移

① offset() 方法设置或返回被选元素相对于**文档**的偏移坐标,跟父级没有关系。

② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。

③ 可以设置元素的偏移:offset({ top: 10, left: 30 });

2. position() 获取元素偏移

① position() 方法用于返回被选元素相对于**带有定位的父级**偏移坐标,如果父级都没有定位,则以文档为准。

② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定

位父级左侧的距离。

③ 该方法只能获取

3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧**

① scrollTop() 方法设置或返回被选元素被卷去的头部。

② 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,133评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,682评论 3 390
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,784评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,508评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,603评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,607评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,604评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,359评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,805评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,959评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,588评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2 352

推荐阅读更多精彩内容