jquery基础

1、首先介绍一下jquery

jquery是JS的一个库,使用广泛。开发中我们常用jquery库,而很少用原生的JS库

基本语法: $(selector).action()

美元符号用来定义jquery,selector表示添加的选择器对象,action定义对选中元素的操作

2、jquery选择器【selector

这里的选择器等同于CSS选择器,用来选择 HTML 元素组或单个元素。基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素

【注】实际开发中我们浏览分析其他网站的时候使用开发者工具选择页面中元素,然后右键-copy-copy selector即可获取对应元素的选择器

3、jQuery事件【进行的action操作】

常见事件

实际使用过程中事件名称即action函数的名称,通过jQuery我们可以方便、快速的定义用户触发时间后执行的操作。详细操作通过JS函数定义,将执行函数传给action函数

调用方法    如:$("p").click(function(){ $(this).hide();});

4、特殊效果

利用jQuery还可以进行一些特殊效果的 实现,比如说一些简单动画

隐藏【hide函数】    $("p").hide();  

显示【show函数】    $("p").show();

toggle() 方法来切换 hide() 和 show() 方法。    $("p").toggle();

淡入已隐藏的元素【fadeIn】    $(selector).fadeIn(speed,callback);

淡出可见元素 【fadeOut】   $(selector).fadeOut(speed,callback);

在 fadeIn与 fadeOut方法之间进行切换【fadeToggle】    $(selector).fadeToggle(speed,callback);

{

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

}

渐变为给定的不透明度【fadeTo方法】    $(selector).fadeTo(speed,opacity,callback)

向下滑动元素【slideDown】         $("#panel").slideDown();

向上滑动元素【slideUp】        $("#panel").slideUp();

在 slideDown() 与 slideUp() 方法之间进行切换【slideToggle】     $("#panel").slideToggle();

动画【animate方法】        $(selector).animate({params},speed,callback);

用于在动画或效果完成前对它们进行停止【 stop方法】    $("#panel").stop();

【注】callback定义一个函数,在动画完成后调用

jQuery链,即把动作/方法链接在一起    $("#p1").css("color","red").slideUp(2000).slideDown(2000);

5、jQuery操作HTML元素

text() - 设置或返回所选元素的文本内容,

html() - 设置或返回所选元素的内容(包括 HTML 标记)

val() - 设置或返回表单字段的值

【注】上述3个函数有参数传入即设置元素的值,若无参数传入默认返回元素的值。也可以传入一个回调函数

attr() - 用于设置、获取属性值。传入属性名称,当传入字典【属性名称和值组成的dict】时用于设置属性值

 append() 方法在被选元素的结尾插入内容(仍然该元素的内部)

prepend() 方法在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

remove() - 删除被选元素(及其子元素)    也可接受一个参数,允许您对被删元素进行过滤

empty() - 从被选元素中删除子元素

addClass() - 向被选元素添加一个或多个类  参数是类名

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性,若返回CSS样式传入CSS属性名称,若设置CSS,则传入CSS属性名称和值构成的字典

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)

6、jQuery遍历获取元素

水平遍历

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

向下遍历

children()

find()

向上遍历

parent()

parents()

parentsUntil()

过滤

first() 方法返回被选元素的首个元素。

last() 方法返回被选元素的最后一个元素

eq() 方法返回被选元素中带有指定索引号的元素.

三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素

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

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,390评论 0 44
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,587评论 0 11
  • 环境搭建 进入官方网站获取最新的版本 http://jquery.com/download/ ,这里需要注意 j...
    阿r阿r阅读 799评论 0 7
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 816评论 0 8
  • 我们很容易过于相信自己的头脑,并将头脑的思维等同于自己,但思维与头脑是虚拟的,而身体是现实的。 凌晨3:30收拾完...
    水晶_0c43阅读 59评论 0 1