jQuery

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

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

1)美元符号定义jQuery

2)选择符(selector)“查询”和“查找”HTML元素。

3)jQuery的action()执行对元素的操作

简写:$(function(){

});

jQuery与JavaScript入口函数:

jQuery:

$(document).ready(function({

});

$(function({

});

JS:

window.onload = function() {

}

关于:和【】符号的理解

:可以理解为种类的意思;为jQuery的过滤选择器,类似于css的伪类选择器。分为:(A)基本过滤(p:first),(B)内容过滤(:empty),(C)子元素过滤(:first-child),(D)属性过滤[href]选择器。

【】可以理解为属性的意思

$("#id", ".class") 复合选择器

$(div p span) 层级选择器 //div下的p元素中的span元素

$(div>p) 父子选择器 //div下的所有p元素

$(div+p) 相邻元素选择器 //div后面的p元素(仅一个p)

$(div~p) 兄弟选择器 //div后面的所有p元素(同级别)

$(.p:last) 类选择器 加 过滤选择器 第一个和最后一个(first 或者 last)

$("#mytable td:odd") 层级选择 加 过滤选择器 奇偶(odd 或者 even)

$("div p:eq(2)") 索引选择器 div下的第三个p元素(索引是从0开始)

$("a[href='www.baidu.com']") 属性选择器

$("p:contains(test)") // 内容过滤选择器,包含text内容的p元素

$(":emtyp") //内容过滤选择器,所有空标签(不包含子标签和内容的标签)parent 相反

$(":hidden") //所有隐藏元素 visible

 $("input:enabled") //选取所有启用的表单元素

$(":disabled") //所有不可用的元素

$("input:checked") //获取所有选中的复选框单选按钮等

$("select option:selected") //获取选中的选项元素

常见DOM事件:

鼠标事件:click dblclick mouseenter  mouseleave hover

键盘事件:keypress keydown keyup 

表单事件:submit change focus blur

文档/窗口事件:load resize scroll unload

事件

常見的jQuery事件(感覺跟DOM的差不多意思~)
$(document).ready()

click()

dblclick()

mouseenter()

mouseleave()

mousedown()

mouseup()

hover()

focus()

blur()

keypress,keydown,keyup的区别:

keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外,它返回的是键盘代码);

keypress:在键盘上按下一个按键,并产生一个字符时发生,返回ASCII码。注意:shift、alt、ctrl等键时并不会产生字符,所以监听无效。若一直按着某按键则会不断触发。

keyup:与keydown相对

两种常用用法举例:

案例1:获取按键代码或字符的ASCII码

$(window).keydown( function(event){ 

 // 通过event.which可以拿到按键代码. 如果是keypress事件中,则拿到ASCII码.

} );

案例2:传递数据给事件处理函数

jQueryObject.keydown( [[ data ,] handler ] );

data: 通过event.data传递给事件处理函数的任意数据;

handler: 指定的事件处理函数;

(发现其实隐藏和显示,淡入淡出,滑动的语法都类似~)

jQuery效果——隐藏和显示

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

(两者相互转换的)

jQuery 效果——淡入淡出

淡入:$(selector).fadeIn(speed,callback);

淡出:$(selector).fadeOut(speed,callback);

$(selector).fadeToggle(speed,callback);

jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

$(selector).fadeTo(speed,opacity,callback);

jQuery 效果——滑动

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

jQuery 效果——动画

之后会专门再写一篇文章记录自己对于动画的学习。

$(selector).animate({params},speed,callback);

必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。

也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=;

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle";

默认地,jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

jQuery 停止动画

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

jQuery Callback 方法

有回调函数,警告框会在隐藏效果完成后弹出。

被立即停止的动画不会触发回调,被立即完成的动画会触发回调。有函数就存在回调。

jQuery - 链(Chaining)

链的方法是:(emmm,举个栗子吧,感觉举栗子更好理解~)

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

用点(.)连接在一起就可以啦~

jQuery - 获取内容和属性

获得内容:text()、html()、以及val()

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

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

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

jQuery attr() 方法用于获取属性值。适用于DOM

1.如果有相应的属性,返回指定属性值。

2.如果没有相应的属性,返回值是 undefined。

jQuery prop()适用于HTML自带属性值

1.如果有相应的属性,返回指定属性值。

2.如果没有相应的属性,返回值是空字符串。

jQuery - 设置内容和属性

text()、html()、val()的回調函數

$("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";

$("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; 

  });

jQuery - 添加元素

append() - 在被选元素的结尾插入内容

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

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

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

jQuery - 删除元素

remove() - 删除被选元素(及其子元素)

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

jQuery - 获取并设置 CSS 类

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

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

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

css() - 设置或返回样式属性

jQuery 尺寸


jQuery遍历

祖先级

jQuery parent() 方法 ,返回直接的父元素;

jQuery parents() 方法, 返回所有祖先元素

jQuery parentsUntil() 方法 , 返回介于两个给定元素之间的所有祖先元素。

后代级

jQuery children() 方法 ,返回直接子元素。

jQuery find() 方法 ,返回所有后代元素。

同胞元素

jQuery siblings() 方法 , 返回所有的同胞元素。

jQuery next() 方法, 下一个同胞元素,只选择一个。

jQuery nextAll() 方法 , 返回了被选元素的所有跟随的同胞元素。即后面的所有同胞元素。

jQuery nextUntil() 方法

jQuery prev(), prevAll() & prevUntil() 方法,与之前的区别只是在于方向相反而已。

过滤

最基本的三个方法:first(), last() 和 eq()

jQuery filter() 方法, 允许规定一个标准。符合的返回。

jQuery not()与jQuery filter()相反。


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

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,332评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,167评论 0 1
  • Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img...
    扑克脸_457e阅读 560评论 0 1
  • $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({sr...
    专注寒冰三千岁阅读 504评论 0 4
  • 好久没有写作,今只为完成自己的兴趣。而提笔写作一番。 实在无有灵感,不知道要写啥,也不知道要表达啥。只为自己兴...
    源通思想阅读 123评论 0 0