JQuery 基础
2016-07-22 02:42:16 8 举报AI智能生成
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").on('click', function() {
$("body").addClass("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");
}, function() {
$(this).removeClass("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()进行测试
$(document).ready(function() {
$('#switcher').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
$(document).ready(function() {
$('#switcher').click(function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
});
});
$(document).ready(function() {
$('#switcher-default').addClass('selected');
$('#switcher').click(function(event) {
if ($(event.target).is('button')) {
var bodyClass = event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(event.target).addClass('selected');
}
});
});
查找当前元素还可以用.hasclass(),不过is()比较灵活
移除事件处理程序
.off()方法
$(document).ready(function() {
$('#switcher').click(function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
});
$('#switcher-narrow, #switcher-large').click(function() {
$('#switcher').off('click');
});
});
为事件处理加上命名空间click.collapse
$(document).ready(function() {
$('#switcher').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
$(document).ready(function() {
$('#switcher').on('click.collapse', function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
});
$('#switcher-narrow, #switcher-large').click(function() {
$('#switcher').off('click.collapse');
});
});
重新绑定事件
使用funtion
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
然后用.on()调用函数
$('#switcher').on('click.collapse', toggleSwitcher);
对于只需触发一次的，可以用 .one()
$('#switcher').one('click', toggleSwitcher);
模仿用户操作
.trigger()方法，就可以模拟事件的操作
$('#switcher').trigger('click');
和.on一样可以简写
$('#switcher').click();
响应键盘事件
直接对键盘给出响应事件keyup()和keydown()
对文本输入给出响应事件keypress()
var triggers = {
D: 'default',
N: 'narrow',
L: 'large'
}; $(document).keyup(function(event) {
var key = String.fromCharCode(event.which);
if (key in triggers) {
setBodyClass(triggers[key]);
}
});
练习
双击事件
$("#header h2").dblclick(function(){
$("#chapter-1").toggleClass('hidden');
});
方向键：在文章里面P段落添加class
var index=0;
var indexall=$("#chapter-1>p").length;
$(document).keydown(function(e){
var code=e.which;
switch (code) {
case 38: //上
select_p();
break;
case 40: //下
select_p();
break;
case 37: //左(會導致輸入時無法使用左右移)
select_p();
movePrev();
break;
case 39: //右(會導致輸入時無法使用左右移)
select_p();
moveNext();
break;
default:
return;
}
});
var select_p=function(){
if (index
4样式和动画
.CSS()
在CSS中取值
$(document).ready(function() {
var $speech = $('div.speech');
$('#switcher-large').click(function() {
var num = parseFloat($speech.css('fontSize'));
});
});
parseFloat()函数是一个从左往右查找浮点数，能将12px=12
赋值给CSS
$(document).ready(function() {
var $speech = $('div.speech');
$('#switcher button').click(function() {
var num = parseFloat($speech.css('fontSize'));
if (this.id == 'switcher-large') {
num *= 1.4;
} else if (this.id == 'switcher-small') {
num /= 1.4;
}
$speech.css('fontSize', num + 'px');
});
});
使用if else，下面看看使用switch
$(document).ready(function() {
var $speech = $('div.speech');
var defaultSize = $speech.css('fontSize');
$('#switcher button').click(function() {
var num = parseFloat($speech.css('fontSize'));
switch (this.id) {
case 'switcher-large':
num *= 1.4;
break;
case 'switcher-small':
num /= 1.4;
break;
default:
num = parseFloat(defaultSize);
}
$speech.css('fontSize', num + 'px');
});
});
带厂商前缀的样式属性
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方法
可见参数时长，可以是毫秒也可以是预置的字符
可选的缓动
可选的回调参数
手工创建效果
$firstPara.animate({height: 'toggle'}, 3000);
一次给多个属性添加动画效果
var $speech = $('div.speech');
var defaultSize = $speech.css('fontSize');
$('#switcher button').click(function() {
var num = parseFloat($speech.css('fontSize'));
switch (this.id) {
case 'switcher-large':
num *= 1.4;
break;
case 'switcher-small':
num /= 1.4;
break;
default:
num = parseFloat(defaultSize);
}
$speech.animate({fontSize: num + 'px'}, 'slow');
});
盒子动画效果
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher.animate({
borderWidth: '5px',
left: paraWidth - switcherWidth,
height: '+=20px'
}, 'slow');
});
得出宽度 .outerWidth();
).outerWidth();
0 条评论
下一页
图形选择
思维导图
主题
补充说明
AI生成
提示
关闭后当前内容将不会保存，是否继续？
取消
确定