锋利的jQuery
2016-09-24 16:06:14 0 举报
AI智能生成
锋利的jQuery,是一款强大且灵活的JavaScript库。它简化了HTML文档遍历、事件处理、动画效果和Ajax交互等操作,使开发者能够更高效地编写代码。通过简洁的语法和丰富的插件生态系统,jQuery提供了丰富的功能和高度的可定制性。无论是构建响应式网页还是实现复杂的交互效果,锋利的jQuery都能轻松胜任。它的跨浏览器兼容性和广泛的社区支持使其成为Web开发的首选工具之一。使用锋利的jQuery,开发者能够快速构建出令人惊叹的Web应用,提升用户体验,并展现出卓越的技术实力。
作者其他创作
大纲/内容
jQuery中的事件和动画
加载DOM-ready()
事件绑定-bind()
合成事件(hover()、toggle())
事件冒泡
event.stopPropagation()
event.preventDefault()
return false
事件属性
event.type
event.preventDefault()
event.stopPropagation()
event.target
event.relateTarget
event.pageX和event,pageY
event.which
event.metaKey
移除事件(unbind()、one())
模拟操作
trigger()
triggerHandler()
命名空间
show()和hide()
fadeIn()和fadeOut()
slideUp()和slideDown()
animate()
animate的回调
stop()
is(':animated')
delay()
toggle()、slideToggle()、fadeTo()、fadeToggle()
jQuery与Ajax的应用
$.load(url [,data] [,callback])
$.get(url [,data] [,callback] [,type])
$.post(url [,data] [,callback] [,type])
等同于load带参数
$.getScript(url [,callback])
$.getJSON(url [,callback])、jsonp
$.ajax(options)
url
type
timeout
data
dataType
beforeSend
complete
success
error
global
serialize()、serializeArray()、$.param()
Ajax全局事件
ajaxStart()
ajaxStop()
ajaxComplate()
ajaxError()
ajaxSend()
ajaxSuccess()
不起作用的处理$.ajaxPrefilter(callback)
编写jQuery插件
闭包
;(function($){
/*code*/
})(jQuery);
jQuery.fn.extend()
jQuery.extend()
认识jQuery
解决冲突
在其他库之后引用
Query.noConfilic();
jQuery(function(){
alert(1)
})
在其他库引用之前使用jQuery(function(){
})即可
jQuery对象和DOM对象的转换
$jq[0]和$jq.get(0)
$jq = $(jq)
jQuery选择器
基本选择器(id、class、元素、组合)
层次选择器(‘ ’、‘>’、‘+’、‘~’)
过滤选择器
基本过滤器(:first、:last、
:not、
:even、:old、
:eq()、:gt()、:lt()、
:header、:animated、:focus)
内容过滤器(:contains()、:empty()、:has()、:parent())
可见性过滤选择器(:hidden、:visible)
属性过滤选择器([]、[a=b]、[a!b]、[a^b]、[a$-b]、[a*=b]、[a|=b]、[a~=b]、[a][b])
子元素过滤选择器(:nth-child()、:first-child、:last-child、:only-child)
表单对象过滤选择器(:enabled、:disabled、:checked、:selected)
表单选择器(:input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden)
注意事项:特殊符号\\转义、去掉@、 空格
jQuery中的DOM操作
查找
创建
插入
append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()
删除
remove()
detach())
empty
复制
替换(replaceWith()、replaceAll())
包裹(wrapAll()、wrapInner())
属性(attr()、removeAttr())
样式
获取设置(attr())
追加(addClass())
移除(removeClass())
切换(toggle()、toggleClass())
判断(hasClass())
设置和获取html、文本、值(html()、text()、val())
遍历
children()
next()
prev()
closest()
parent()、parents()、closest()区别
CSS-DOM
css()
height()
定位(offset()、position()、scrollTop()、scrollLeft())
jQuery性能优化和技巧
最新版本
合适选择器
缓存对象 -定义变量
循环时DOM操作
数组方式使用jQuery对象 length
事件代理 event.target
代码转换为jQuery插件
使用join()来拼接字符串
利用HTML5的Data属性
尽量使用原生JavaScript
压缩JavaScript
禁用右键菜单 bind("context"menu,function(e){return false})
新窗口打开页面 target="_blank"
判断浏览器类型 $.browse
输入框文字获取和失去焦点
返回头部滑动动画 offset().top、animate()
获取鼠标的位置 e.pageX 、e.pageY
判断元旭存在 $e.length
任意元素的点击跳转 window.location
根据浏览器大小添加不同样式 $(window).width() $(window).resize()
居中
创建自己的选择器
关闭所有动画效果 jQuery.fx.off = false
检测鼠标的右键和左键
回车提交表单 keyup(e) e.which="13"
设置全局Ajax参数
获取选中的下拉框 option:selected
切换复选框
siblings()选择同辈元素
个性化链接 a[href$=""]
定时操作 delay()
记录事件日志console.log()
支持动态新生元素绑定事件
使用css钩子 $.cssHooks()
$.proxy()
限制Textaree字符个数
document.selection
document.selection.createRange().text
本地存储
解析json数据时报错parseError错误
v1.4后对象键和内容都要""
从元素中除去HTML
扩展String对象方法
0 条评论
下一页