JQuery 基础

JQuery 基础

1.JQuery入门

JQuery能做什么

取得文档中的元素

修改页面的外观

改变文档的内容

响应用户的交互设计

为页面添加动态效果

无需刷新的AJAX

简化常见的JAVASCRIPT任务

为什么JQuery这么出色

能利用CSS的优势

支持宽展

总是面向集合

特多重的操作基于一行

2.选择元素

理解DOM

JQuery:能够简化在DOM中选择任务

使用$()函数

这个工厂接受CSS选择符作为参数

P{} $('P')

#S $(\"#S\")

.S $(\".S\")

属性选择符

$(‘img[alt]’)

以^表示值在字符串的开始 a[href^=\"mailto:\"]

以$表示值在字符串的结尾 a[href$=\".pdf\"]

*表示要匹配的值可以出现在任何地方 a[href^=\"http\"][href*=\"henry\"]

！表示对值取反

自定义选择符

自定义选择符和CSS中的伪类选择符语法相同：

$(ul li:eq(1))

奇数偶数 :odd :even

tr:nth-child()相对于元素的父元素而非当前选择的所有元素来计算

$('tr:nth-child(odd)').addClass('alt');

基于上下文内容选择元素

td:contains(Henry)：将带有Henry字样的表格选择，注意contains里面的内容区分大小写

基于表单选择符

:input

:button

:enabled

:disabled

:checked

:selected

DOM遍历

.filter()匹配元素

可以接受函数参数

$('a').filter(function() { return this.hostname && this.hostname != location.hostname; }).addClass('external');

.next()

.nextall()

.prev()

.prevall()

.siblings()同DOM层次的所有元素

.parent()和.children（）

连缀：通过一行代码取得多个元素集合并且对元素集合执行多次操作

访问DOM元素

.get()方法

3.事件

$(document).ready(){}可以简写为$(function(){})

利用.on()

$(function() { $(\"#switcher-large\

利用事件处理程序上下文

$(this).addclasss(\"large\");

简写事件：将.on()简化成.chick()

$(\"#switcher-large\").click(function() { $(\"body\").addClass(\"large\"); });

显示隐藏高级特性

.toggleclass() 点击一下隐藏，再点击显示

$(\"#switcher h3\").click(function() { $('#switcher button').toggleClass('hidden'); });

事件传播

.hover()

$(function() { $(\"#switcher h3\").hover(function() { $(this).addClass(\"hover\

事件冒泡副作用

整个区域点击都会隐藏掉，包括点击按钮

$(document).ready(function() { $('#switcher').click(function(event) { $('#switcher button').toggleClass('hidden'); });});

解决办法：为事件对象命名

$(document).ready(function() { $('#switcher').click(function(event) { if (event.target == this) { $('#switcher button').toggleClass('hidden'); } });});

停止事件传播 .stoppropagation()

$(document).ready(function() { $('#switcher').click(function(event) { $('#switcher button').toggleClass('hidden'); });});$(document).ready(function() { $('#switcher-default').addClass('selected'); $('#switcher button').click(function(event) { var bodyClass = this.id.split('-')[1]; $('body').removeClass().addClass(bodyClass); $('#switcher button').removeClass('selected'); $(this).addClass('selected'); event.stopPropagation(); });});

阻止默认事件传播 .preventdefault()

事件委托

采用.is()进行测试

移除事件处理程序

.off()方法

为事件处理加上命名空间click.collapse

重新绑定事件

使用funtion

var toggleSwitcher = function(event) { if (!$(event.target).is('button')) { $('#switcher button').toggleClass('hidden'); } };

然后用.on()调用函数

对于只需触发一次的，可以用 .one()

模仿用户操作

.trigger()方法，就可以模拟事件的操作

$('#switcher').trigger('click');

和.on一样可以简写

$('#switcher').click();

响应键盘事件

直接对键盘给出响应事件keyup()和keydown()

对文本输入给出响应事件keypress()

练习

双击事件

$(\"#header h2\").dblclick(function(){ $(\"#chapter-1\").toggleClass('hidden'); });

方向键：在文章里面P段落添加class

;

4样式和动画

.CSS()

在CSS中取值

$(document).ready(function() { var $speech = $('div.speech'); $('#switcher-large').click(function() { var num = parseFloat($speech.css('fontSize')); });});

parseFloat()函数是一个从左往右查找浮点数，能将12px=12

赋值给CSS

使用if else，下面看看使用switch

带厂商前缀的样式属性

jquery会自动检查所有带前缀的属性

隐藏和显示元素

hide()和show()

$('p').eq(1).hide();

注意：.eq() 和:eq()相似

.fadein()和.fadeout()

$('p').eq(1).fadeIn('slow');渐隐渐现

.slideDown() .slideUp()

滑上滑下

切换可见性

$(document).ready(function() { $('a.more').click(function(event) { event.preventDefault(); $firstPara.slideToggle('slow'); var $link = $(this); if ($link.text() == 'read more') { $link.text('read less'); } else { $link.text('read more'); } });});

.text()可修改字符

.slideToggle()就是切换可见性

event.preventDefault();是停止其它操作

自定义动画

一个包含样式属性和值的对象。.css方法

可见参数时长，可以是毫秒也可以是预置的字符

可选的缓动

可选的回调参数

手工创建效果

一次给多个属性添加动画效果

盒子动画效果

得出宽度 .outerWidth();

).outerWidth();