jQuery学习
概述
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
基础语法
$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
- action对应 jQuery 提供的各种操作函数API
核心语法
-
jQuery([selector,[context]])
接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 -
jQuery(html,[ownerDocument])
根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。 -
jQuery(callback):$(document).ready()的简写。
- $(function(){ // 文档就绪 }); 文档就绪函数 ready
- 为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
- 如果在文档没有完全加载之前就运行函数,操作可能失败
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
- jQuery 对象访问
- each(callback)
- size()
- length
- selector
- context
- get([index])
- index([selector|element])
- 数据缓存
- data([key],[value])
- removeData([name|list])1.7*
jQuery的多种选择器
-
基本选择器:#id; element; .class; *; selector1, selector2....
-
层级选择器:ancestor descendant; parent>child; prev+next; prev~siblings
-
基本筛选器: :first :not(selector) :even :odd :eq(index) :gt(index) :lang1.9+ :last :lt(index) :header :animated :focus :root1.9+ :target1.9+
-
内容选择器: :contains(text) :empty :has(selector) :parent
-
可见性 :hidden :visible
-
属性选择器:[attribute] ;[attribute=value]; [attribute!=value]; [attribute^=value]; [attribute$=value];[attribute*=value]; [attrSel1[attrSelN]
-
子元素选择器 :first-child :first-of-type1.9+ :last-child :last-of-type1.9+ :nth-child :nth-last-child()1.9+ :nth-last-of-type()1.9+ :nth-of-type()1.9+ :only-child :only-of-type1.9+
-
表单 :input :text :password :radio :checkbox :submit :image :reset :button :file
-
表单对象属性 :enabled :disabled :checked :selected
-
混淆选择器 $.escapeSelector(selector)3.0+
//基本选择器
$(
function(){
console.log($('.box')); //选择类
console.log($('#name')); // 选择ID
console.log($('div')); // 选择标签
console.log($('h2, p')); // 选择多个
}()
)
// 层级选择器
$(
function(){
console.log($('.midd .test')); // 层级
console.log($('.midd>p')); // 父子
console.log($('.box+ #name')); // 同级下一个 只能连续
console.log($('.box~.test')); // 兄弟节点
}()
)
// 基本筛选
$(function () {
console.log($('li:first'));
console.log($('input:not(:checked)'));
console.log($('tr:even')); // 选中1,3,5 索引是0,2,4...
console.log($('tr:odd')); // 选中2,4,6...
console.log($('tr:eq(1)'));
}())
// 内容选择器
$(function(){
console.log($('div:contains("John")')); // 包含
console.log($('td:empty'));
}()
)
// 属性选择器
$(
function (){
console.log($('input[name^=app]')); // = != ^= $= *= 包含某个部分
}()
)
// 子元素选择器
$(
function (){
console.log($('ul li:first-child'));
console.log($('h2:nth-of-type(2)')); // 同一级别 同一元素第几个
console.log($('.test:nth-child(6)')) // 找同一级别第几个元素 2n 取倍数
}()
)
// 表单选择器
$(
function(){
console.log($(':input'));
}()
)
// 混淆选择器
$(
function(){
console.log($('.'+$.escapeSelector('.test')));
}()
)
jQuery操作DOM
事件
- 事件处理
- on(eve,[sel],[data],fn)1.7+
- off(eve,[sel],[fn])1.7+
- one(type,[data],fn)
- trigger(type,[data])
- triggerHandler(type, [data])
- 事件切换
- hover([over,]out)
- toggle([spe],[eas],[fn])1
- 事件
- blur([[data],fn])
- change([[data],fn])
- click([[data],fn])
- dblclick([[data],fn])
- error([[data],fn])
- focus([[data],fn])
- focusin([data],fn)
- focusout([data],fn)
- keydown([[data],fn])
- keypress([[data],fn])
- keyup([[data],fn])
- mousedown([[data],fn])
- mouseenter([[data],fn])
- mouseleave([[data],fn])
- mousemove([[data],fn])
- mouseout([[data],fn])
- mouseover([[data],fn])
- mouseup([[data],fn])
- resize([[data],fn])
- scroll([[data],fn])
- select([[data],fn])
- submit([[data],fn])
- unload([[data],fn])
文档处理
- 内部插入
- append(content|fn)
- appendTo(content)
- prepend(content|fn)
- prependTo(content)
- 外部插入
- after(content|fn)
- before(content|fn)
- insertAfter(content)
- insertBefore(content)
- 包裹
- wrap(html|ele|fn)
- unwrap()
- wrapAll(html|ele)
- wrapInner(html|ele|fn)
- 替换
- replaceWith(content|fn)
- replaceAll(selector)
- 删除
- empty()
- remove([expr])
- detach([expr])
- 复制
- clone([Even[,deepEven]])
属性和样式
- 属性
- attr(name|pro|key,val|fn)
- removeAttr(name) prop(n|p|k,v|f)
- removeProp(name)
- CSS 类
- addClass(class|fn)
- removeClass([class|fn])
- toggleClass(class|fn[,sw])
- HTML代码/文本/值
- html([val|fn]) text([val|fn])
- val([val|fn|arr])
- CSS
- css(name|pro|[,val|fn])1.9*
- 位置
- offset([coordinates])
- position()
- scrollTop([val])
- scrollLeft([val])
- 尺寸
- height([val|fn])
- width([val|fn])
- innerHeight()
- innerWidth()
- outerHeight([soptions])
- outerWidth([options])
效果
- 基本
- show([s,[e],[fn]])
- hide([s,[e],[fn]])
- toggle([s],[e],[fn])
- 滑动
- slideDown([s],[e],[fn])
- slideUp([s,[e],[fn]])
- slideToggle([s],[e],[fn])
- 淡入淡出
- fadeIn([s],[e],[fn])
- fadeOut([s],[e],[fn])
- fadeTo([[s],o,[e],[fn]])
- fadeToggle([s,[e],[fn]])
- 自定义
- animate(p,[s],[e],[fn])1.8*
- stop(,[j])1.7*
- delay(d,[q])
- finish([queue])1.9+
筛选函数
- 过滤
- eq(index|-index)
- first() last()
- hasClass(class)
- filter(expr|obj|ele|fn)
- is(expr|obj|ele|fn)
- map(callback)
- has(expr|ele)
- not(expr|ele|fn)
- slice(start,[end])
- 查找
- children([expr])
- closest(e|o|e)1.7*
- find(e|o|e)
- next([expr])
- nextAll([expr])
- nextUntil(e|e)
- offsetParent()
- parent([expr])
- parents([expr])
- parentsUntil(e|e)
- prev([expr])
- prevall([expr])
- prevUntil(e|e)
- siblings([expr])
- 串联
- add(e|e|h|o[,c])1.9*
- andSelf()1.8-
- addBack()1.9+
- contents()
- end()
$(
$('.box').on('click', function(){
$('p').toggleClass('red') // 添加样式
}),
$('.switch').on('click', function(){
$('p').slideToggle(); // 下滑出现
}),
$('#move').on('click', function(){
$('ul li').appendTo('.show') // 添加文本
}),
$('ul li:even').hover(function(){ // 鼠标悬浮效果
$(this).css('background','yellow')
}, function(){
$(this).css('background','')
}),
$('ul li:odd').on('mouseover', function(){
$(this).css('background', 'blue')
console.log($(this).text('modify...'));
}).on('mouseout', function(){
$(this).css('background', '')
}),
$('#modify').on('click', function(){ //修改文本
let text = $(this).val()
$('li').each(function(i){
$(this).text(text+(i+1))
})
}),
$('#username').on('click', function(){
let username = $('input[name="username"]').val()
console.log(username);
$('.username').text(username)
}),
$('input[placeholder]').focus(function(){ // 鼠标聚焦
$(this).removeClass('red-bor')
}).blur(function(){
// $(this).addClass('done')
if($(this).val()==''){
$(this).addClass('red-bor')
}else{
$(this).addClass('done')
}
})
)
具体操作学习于:
http://jquery.cuishifeng.cn/